diff --git a/data.json b/data.json index b34755d9..e1c883d0 100644 --- a/data.json +++ b/data.json @@ -10,9 +10,11 @@ "source": "source_path", "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", "playlists": [ - {"id": "1", "name": "Playlist 1"}, - {"id": "2", "name": "Playlist 2"} - ] + "1", + "2" + ], + "genreid": "1", + "genre_name": "Rock" }, { "id": "2", @@ -24,8 +26,10 @@ "source": "source_path", "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", "playlists": [ - {"id": "2", "name": "Playlist 2"} - ] + "2" + ], + "genreid": "1", + "genre_name": "Rock" }, { "id": "3", @@ -38,9 +42,10 @@ "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh" , "playlists": [ - {"id": "1", "name": "Playlist 1"}, - {"id": "3", "name": "Playlist 3"} - ] + "1", "3" + ], + "genreid": "1", + "genre_name": "Rock" }, { "id": "4", @@ -52,9 +57,10 @@ "source": "source_path", "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", "playlists": [ - {"id": "2", "name": "Playlist 2"}, - {"id": "3", "name": "Playlist 3"} - ] + "2", "3" + ], + "genreid": "1", + "genre_name": "Rock" }, { "id": "5", @@ -66,8 +72,10 @@ "source": "source_path", "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", "playlists": [ - {"id": "3", "name": "Playlist 3"} - ] + "3" + ], + "genreid": "1", + "genre_name": "Rock" }, { "id": "1", @@ -79,9 +87,10 @@ "source": "source_path", "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", "playlists": [ - {"id": "1", "name": "Playlist 1"}, - {"id": "2", "name": "Playlist 2"} - ] + "1", "2" + ], + "genreid": "1", + "genre_name": "Rock" }, { "id": "2", @@ -93,8 +102,10 @@ "source": "source_path", "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", "playlists": [ - {"id": "2", "name": "Playlist 2"} - ] + "2" + ], + "genreid": "1", + "genre_name": "Rock" }, { "id": "3", @@ -107,9 +118,10 @@ "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh" , "playlists": [ - {"id": "1", "name": "Playlist 1"}, - {"id": "3", "name": "Playlist 3"} - ] + "1", "3" + ], + "genreid": "1", + "genre_name": "Rock" }, { "id": "4", @@ -121,9 +133,10 @@ "source": "source_path", "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", "playlists": [ - {"id": "2", "name": "Playlist 2"}, - {"id": "3", "name": "Playlist 3"} - ] + "2", "3" + ], + "genreid": "1", + "genre_name": "Rock" }, { "id": "5", @@ -135,8 +148,10 @@ "source": "source_path", "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", "playlists": [ - {"id": "3", "name": "Playlist 3"} - ] + "3" + ], + "genreid": "1", + "genre_name": "Rock" } ], "albums": [ @@ -153,7 +168,7 @@ { "id": "2", "name": "Album 2", - "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=false", + "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false", "year": 2020, "genres": [ "Post-Punk", @@ -164,7 +179,7 @@ "id": "3", "name": "Album 3", "year": 2021, - "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", + "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false", "genres": [ "Post-Punk", "Punk" @@ -232,7 +247,7 @@ "id": "2", "name": "Playlist 2", "songs": [], - "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", + "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false", "description": "Плейлист прикольный 2" }, @@ -256,7 +271,7 @@ "id": "2", "name": "Playlist 2", "songs": [], - "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", + "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false", "description": "Плейлист прикольный 2" }, @@ -267,38 +282,6 @@ "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", "description": "Плейлист прикольный 3" - }, - { - "id": "1", - "name": "Playlist 1", - "songs": [], - "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", - "description": "Плейлист прикольный" - - }, - { - "id": "2", - "name": "Playlist 2", - "songs": [], - "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", - "description": "Плейлист прикольный 2" - - }, - { - "id": "3", - "name": "Playlist 3", - "songs": [], - "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", - "description": "Плейлист прикольный 3" - - }, - { - "id": "4", - "name": "Playlist 4", - "songs": [], - "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh", - "description": "Плейлист прикольный 4" - } ] } \ No newline at end of file diff --git a/src/App.css b/src/App.css index d10c0b97..bab3ae3f 100644 --- a/src/App.css +++ b/src/App.css @@ -15,16 +15,14 @@ #Footer { background-color: #282c34; - min-height: 10vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; - bottom: 0; width: 100%; - position: absolute; + position: relative; } /* Добавление градиента к блоку прокрутки */ @@ -32,3 +30,18 @@ background-image: linear-gradient(to right, #f0f4f8, #e6e9f0); } +.CurrentTrack { + position: fixed; + bottom: 0; + +} + +.playlists { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: white; + width: 100%; + position: relative; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index db65c228..c3eee6bf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -41,6 +41,8 @@ function App() { [] ) + const song = songs[1]; + return (
@@ -48,8 +50,9 @@ function App() { + -
diff --git a/src/components/CurrentTrack.tsx b/src/components/CurrentTrack.tsx index 917b508c..4a3cb1ad 100644 --- a/src/components/CurrentTrack.tsx +++ b/src/components/CurrentTrack.tsx @@ -3,11 +3,11 @@ import { Button, Table } from 'antd'; import { PlayCircleOutlined } from '@ant-design/icons'; import { ISong, SongProps } from '../models/IModels'; -export function CurrentTrack({song}: {song: ISong}) { +export function CurrentTrack() { const columns = [ { - title: 'Play', + title: '', dataIndex: 'play', key: 'play', width: 50, @@ -31,6 +31,23 @@ export function CurrentTrack({song}: {song: ISong}) { } ]; + const song = { + "id": "5", + "song_name": "Кем я стал", + "band_id": "3", + "band_name": "DSPD", + "albumid": "3", + "album_name": "Album 3", + "source": "source_path", + "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false", + "playlists": [ + "3", + ], + genreid: "1", + genre_name: "Rock", + + }; + return ( console.log('slide change')}> + onSlideChange={() => console.log('slide change')} + loop> {playlists.map((p: IPlaylist) => ( -
- {p.name} -

{p.name}

+
+
))} diff --git a/src/components/SongsBlock.tsx b/src/components/SongsBlock.tsx index ec3e8786..7b291f77 100644 --- a/src/components/SongsBlock.tsx +++ b/src/components/SongsBlock.tsx @@ -43,6 +43,7 @@ export function SongsBlock({songs}: {songs: ISong[]}) { return (
+
({...s, play: ''}))} diff --git a/src/models/IModels.ts b/src/models/IModels.ts index 593f252e..307e240d 100644 --- a/src/models/IModels.ts +++ b/src/models/IModels.ts @@ -3,7 +3,7 @@ export interface IAlbum { name: string; cover: string; year: string; - genres: IGenre[]; + genres: string[]; } export interface IBand { @@ -12,7 +12,7 @@ export interface IBand { city: string; country: string; years: string; - genres: IGenre[]; + genres: string[]; description: string; } @@ -32,7 +32,7 @@ export interface ISong { band_id: string; album_name: string; genre_name: string; - playlists: IPlaylist[]; + playlists: string[]; } export interface IPlaylist { @@ -40,7 +40,7 @@ export interface IPlaylist { name: string; cover: string; description: string; - tracks: ISong[]; + tracks: string[]; } export interface SongProps { song: ISong;