пофиксил курренттрек

2024-08-27 00:15:27 +04:00 · 2024-08-27 00:15:27 +04:00 · c1380ac3ab
commit c1380ac3ab
parent 4e45b88620
7 changed files with 96 additions and 76 deletions
--- 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"
-
        }
    ]
 }
--- 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;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -41,6 +41,8 @@ function App() {
    []
  )
  
+  const song = songs[1];
+
  return (
  
    <div className="App scrollbar scrollTop ">     
@ -48,8 +50,9 @@ function App() {
      
      <PlaylistsBlock playlists={playlists} />
      <SongsBlock songs={songs}/>
+      <CurrentTrack />

-      <Footer />
+      {/* <Footer /> */}

      
    </div>
--- 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 (
    <Table
      columns={columns}
--- a/src/components/PlaylistsBlock.tsx
+++ b/src/components/PlaylistsBlock.tsx
@ -22,12 +22,15 @@ export function PlaylistsBlock({playlists}: {playlists: IPlaylist[]}) {
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
-                onSlideChange={() => console.log('slide change')}>
+                onSlideChange={() => console.log('slide change')}
+                loop>
                {playlists.map((p: IPlaylist) => (
                    <SwiperSlide key={p.id}>
-                        <div className="flex overflow-x-scroll rounded bg-slate-300 self-center" style={{scrollSnapType: 'x mandatory', width: '75%', minHeight: 300}}>
-                            <img src={p.cover} alt={p.name} style={{minWidth: 200, height: 'auto', minHeight: 200}} className="rounded" />
-                            <p className="text-lg">{p.name}</p>
+                        <div id="playlists" className="flex overflow-x-scroll rounded bg-slate-300 self-center" style={{scrollSnapType: 'x mandatory', width: '75%', minHeight: 300}}>
+                            <button>
+                                <img src={p.cover} alt={p.name} style={{minWidth: 100, height: 'auto', width: 'auto', minHeight: 100}} className="rounded" />
+                                <p className="text-lg">{p.name}</p>
+                            </button>        
                        </div>
                    </SwiperSlide>
                ))}
--- a/src/components/SongsBlock.tsx
+++ b/src/components/SongsBlock.tsx
@ -43,6 +43,7 @@ export function SongsBlock({songs}: {songs: ISong[]}) {

  return (
    <div className="flex justify-center items-center bg-slate-300">
+      
      <Table
        className="w-1/2"
        dataSource={songs.map((s: ISong) => ({...s, play: ''}))}
--- 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;