Были исправлены некоторые моменты по требованиям

data.json

@@ -8,7 +8,7 @@
             "albumid": "1",
             "album_name": "Album 1",
             "source": "source_path",
-            "cover": "https://avatars.mds.yandex.net/i?id=087e8221b09742174499db8cfef06843_l-9065839-images-thumbs&n=13",
+            "cover": "https://cdn1.ozone.ru/s3/multimedia-t/6893834213.jpg",
             "playlists": [
                 "1",
                 "2"
@@ -24,7 +24,7 @@
             "albumid": "1",
             "album_name": "Album 1",
             "source": "source_path",
-            "cover": "https://avatars.mds.yandex.net/i?id=087e8221b09742174499db8cfef06843_l-9065839-images-thumbs&n=13",
+            "cover": "https://cdn1.ozone.ru/s3/multimedia-t/6893834213.jpg",
             "playlists": [
                 "2"
             ],
@@ -311,7 +311,7 @@
             "albumid": "1",
             "album_name": "Album 1",
             "source": "source_path",
-            "cover": "https://avatars.mds.yandex.net/i?id=087e8221b09742174499db8cfef06843_l-9065839-images-thumbs&n=13",
+            "cover": "https://cdn1.ozone.ru/s3/multimedia-t/6893834213.jpg",
             "playlists": [
                 "2"
             ],
@@ -326,7 +326,7 @@
             "albumid": "1",
             "album_name": "Album 1",
             "source": "source_path",
-            "cover": "https://avatars.mds.yandex.net/i?id=087e8221b09742174499db8cfef06843_l-9065839-images-thumbs&n=13",
+            "cover": "https://cdn1.ozone.ru/s3/multimedia-t/6893834213.jpg",
             "playlists": [
                 "2"
             ],

global.env

@@ -0,0 +1 @@
+LOCALHOST = "http://localhost:3000"

src/API/api.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { IGenre, IPlaylist, ISong } from "../models/IModels";
+import { IAdvertisement, IGenre, IPlaylist, ISong } from "../models/IModels";
 
 export function getPlaylistsByGenre(genre: string, playlists: IPlaylist[]) {
     return playlists.filter((playlist: IPlaylist) => playlist.genres.includes(genre));
@@ -8,7 +8,7 @@ export function getPlaylistsByGenre(genre: string, playlists: IPlaylist[]) {
 
 export async function getPlaylists() {
     
-    return await axios.get<IPlaylist[]>('http://localhost:3000/playlists');
+    return await axios.get<IPlaylist[]>('playlists');
 
 }
 
@@ -34,4 +34,10 @@ export async function getGenres() {
     
     return await axios.get<IGenre[]>('http://localhost:3000/genres');
 
+}
+
+export async function getAds() {
+    
+    return await axios.get<IAdvertisement[]>('http://localhost:3000/ads');
+
 }

src/App.css

@@ -22,6 +22,7 @@
 .body {
   height: 100%;
   margin: 0;
+  font-family: 'Roboto';
 }
 
 .App-logo {
@@ -73,20 +74,80 @@
   align-items: center;
   position: fixed;
   bottom: 0;
+  -webkit-box-shadow: 0px -26px 19px 0px rgba(34, 60, 80, 0.2);
+  -moz-box-shadow: 0px -26px 19px 0px rgba(34, 60, 80, 0.2);
+  box-shadow: 0px -26px 19px 0px rgba(34, 60, 80, 0.2);
 
 }
 
 .song-cover {
-
-  object-fit: scale-down;
-  height: 100%;
-  width: 5%;
-}
-
-.song-block {
   
 }
 
 .AdBlock {
 
+}
+
+.song-table-row {
+  border: #61dafb !important;
+  border-style: solid !important;
+  border-width: 1px !important;
+  border-radius: 5px !important;
+}
+
+.song-table-row:hover {
+  border: #61dafb !important;
+  border-style: solid !important;
+  border-width: 1px !important;
+  border-radius: 5px !important;
+}
+
+
+.ant-table-cell {
+  padding: 8px !important;
+}
+
+.ant-table-cell:nth-child(1) {
+  padding: 2px !important;
+}
+
+.play-song-button {
+  object-fit: scale-down;
+  position: relative;
+}
+
+.play-song-button:after {
+  content: attr(data-content);
+  font-size: 40px;
+  text-align: center;
+  display: block;
+  color: #fff;
+  position: absolute;
+  width: 100%; height:100%;
+  top:0; left:0;
+  background:rgba(0,0,0,0.6);
+  opacity: 0;
+  transition: all 0.25s;
+  -webkit-transition: all 1s;
+}
+
+.play-song-button:hover:after {
+  opacity: 1;
+}
+
+.current-song-cover {
+  object-fit: scale-down;
+}
+
+.player-button {
+  color: grey;
+  font-size: 30px !important;
+  padding-right: 5px;
+}
+
+.current-track-button {
+  color: grey;
+  font-size: 24px !important;
+  padding-left: 10px;
+  padding-right: 10px;
 }

src/App.tsx

@@ -2,18 +2,18 @@ import React, { useEffect } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import { Button } from 'antd';
-import {Track} from './components/Track';
-import {Header} from './components/Header';
-import {Playlist} from './components/Playlist';
-import {Footer} from './components/Footer';
-import {CurrentTrack} from './components/CurrentTrack';
-import {SongsBlock} from './components/SongsBlock';
+import {Track} from './components/songComponents/Track';
+import {Header} from './components/mainComponents/Header';
+import {Playlist} from './components/cardComponents//Playlist';
+import {Footer} from './components/mainComponents/Footer';
+import {CurrentTrack} from './components/songComponents/CurrentTrack';
+import {SongsBlock} from './components/menuComponents/SongsBlock';
 import { ISong, IAlbum, IGenre, IBand, IPlaylist, IAdvertisement } from './models/IModels';
 import axios from 'axios';
-import { PlaylistsBlock } from './components/PlaylistsBlock';
-import { MenuBlock } from './components/MenuBlock';
-import { getGenres, getPlaylists, getSongs } from './scripts/scripts';
-import { AdBlock } from './components/AdBlock';
+import { PlaylistsBlock } from './components/menuComponents/PlaylistsBlock';
+import { MenuBlock } from './components/mainComponents/MenuBlock';
+import { getAds, getGenres, getPlaylists, getSongs } from './API/api';
+import { AdBlock } from './components/mainComponents/AdBlock';
 
 
 function App() {
@@ -30,12 +30,14 @@ function App() {
     const responseGenres = getGenres();
     // const responseBands = await axios.get<IBand[]>('http://localhost:3000/bands');
     const responsePlaylists = getPlaylists();
+    const responseAds = getAds();
 
     setSongs((await responseSongs).data);
     // setAlbums(responseAlbums.data);
     setGenres((await responseGenres).data);
     // setBands(responseBands.data);
     setPlaylist((await responsePlaylists).data);
+    setAds((await responseAds).data);
   }
 
   useEffect(
@@ -54,7 +56,7 @@ function App() {
         <Header />
         <div id='main-content'>
           <MenuBlock playlists={playlists} songs={songs} albums={albums} genres={genres}/>
-          <AdBlock />
+          <AdBlock ads={ads} />
           <CurrentTrack /> 
         </div>
         
@@ -65,4 +67,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/components/AdBlock.tsx

@@ -1,7 +0,0 @@
-export function AdBlock() {
-    return (
-        <div className="AdBlock border-solid border-2 border-slate-100" style={{height: 'auto', minHeight: '100%', width: '30%'}}>
-            <p>Реклама</p>
-        </div>
-    );
-}

src/components/AdCard.tsx

@@ -1,7 +0,0 @@
-export function AdCard() {
-    return (
-        <div className="container mx-auto bg-slate-300" style={{height: 300, width: '75%'}}>
-            <p>Chart</p>
-        </div>
-    );
-}

src/components/CurrentTrack.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Button, Col, Grid, Row, Table } from 'antd';
-import { PlayCircleOutlined } from '@ant-design/icons';
-import { ISong, SongProps } from '../models/IModels';
-import styled from 'styled-components'
-
-const Song = styled.div`
-  align-items: center;
-  position: fixed;
-  bottom: 0;
-  width: 75%;`
-
-export function CurrentTrack() {
-
-  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 (
-    <Song >
-      <div className='current-track'>
-        <Row className='w-full h-full rounded bg-slate-200 bg-opacity-80' style={{}}>
-          <Col>
-            {/* <img src={song.cover} alt={song.cover} className='song-cover' /> */}
-            
-          </Col>
-          <Col>
-            {song.song_name}
-          </Col>
-        </Row>
-
-      </div>
-      
-    </Song>
-  );
-}
-
-

src/components/cardComponents/AdCard.tsx

@@ -0,0 +1,10 @@
+import { IAdvertisement } from "../models/IModels";
+
+export function AdCard({ad}: {ad: IAdvertisement}) {
+    return (
+        <div className="container mx-auto" style={{}}>
+            <img src={ad.photo} alt={ad.name} className="h-full w-auto rounded m-auto">
+            </img>
+        </div>
+    );
+}

src/components/mainComponents/AdBlock.tsx

@@ -0,0 +1,11 @@
+import { IAdvertisement } from "../../models/IModels";
+import { AdCard } from "../cardComponents/AdCard";
+
+export function AdBlock({ads}: {ads: any[]}) {
+    return (
+        <div className="AdBlock border-solid border-2 border-slate-100" style={{height: 'auto', minHeight: '100%', width: '30%'}}>
+            <p>Реклама</p>
+            {ads.map(ad => <AdCard key={ad.id} ad={ad} />)}
+        </div>
+    );
+}

src/components/mainComponents/Header.tsx

@@ -5,7 +5,7 @@ import { UserOutlined } from '@ant-design/icons';
 export function Header() {
   return (
     <div className="flex items-center justify-between p-4 border-b bg-red-800 border-solid border-2 border-slate-100" >
-      <h1 className="text-3xl font-bold">DEVIL music</h1>
+      <h1 className="text-3xl font-bold">😈 DEVIL music</h1>
       <Button href="/login" style={{ width: 30, height: 30 }}>
         <UserOutlined />
       </Button>

src/components/menuComponents/FullPlaylistBlock.tsx

@@ -1,5 +1,5 @@
 import { IGenre, IPlaylist } from "../models/IModels";
-import { getPlaylistsByGenre } from "../scripts/scripts";
+import { getPlaylistsByGenre } from "../API/api";
 import { PlaylistsBlock } from "./PlaylistsBlock";
 
 export function FullPlaylistBlock({playlists}: {playlists: IPlaylist[]}, {genres}: {genres: IGenre[]}) {

src/components/menuComponents/SongsBlock.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { render } from '@testing-library/react';
-import {ISong} from '../models/IModels';
-import { Track } from './Track';
+import {ISong} from '../../models/IModels';
+import { Track } from '../songComponents/Track';
 import axios from 'axios';
 import { Table, Button, Empty } from 'antd';
-import { PlayCircleOutlined } from '@ant-design/icons';
+import { PlayCircleFilled, PlayCircleOutlined } from '@ant-design/icons';
 
 
 export function SongsBlock({songs}: {songs: ISong[]}) {
@@ -14,14 +14,20 @@ export function SongsBlock({songs}: {songs: ISong[]}) {
       title: '',
       dataIndex: 'play',
       key: 'play',
-      width: 50,
+      width: 100,
 
       render: (text: string, song: ISong) => (
-        <img 
-            className="w-full h-auto rounded" 
+        <Button data-content={
+          <PlayCircleFilled />
+        } className='play-song-button rounded' style={{background: 'transparent', display: 'contents'}}>
+          <img 
+            className="rounded" 
             src={song.cover} 
             alt={song.song_name} 
           />
+        </Button>
+        
+        
       ),
     },
     {
@@ -50,11 +56,12 @@ export function SongsBlock({songs}: {songs: ISong[]}) {
       
       <Table
         style={{width: '100%' }}
-        className=""
+        className="songs-table"
         dataSource={songs.map((s: ISong) => ({...s, play: ''}))}
         columns={columns}
         showHeader={false}
         pagination={false}
+        rowClassName={() => 'song-table-row'}
       />
     </div>
   );    

src/components/songComponents/CurrentTrack.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Button, Col, Grid, Row, Table } from 'antd';
+import { BackwardFilled, FastForwardFilled, FastBackwardFilled, PlayCircleFilled, PlayCircleOutlined, StepBackwardFilled, StepForwardFilled, HeartOutlined, ShareAltOutlined } from '@ant-design/icons';
+import { ISong, SongProps } from '../models/IModels';
+import styled from 'styled-components'
+
+const Song = styled.div`
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  width: 75%;`
+
+export function CurrentTrack() {
+
+  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 (
+    <Song >
+      <div className='current-track'>
+        <Row className='w-full h-full bg-white opacity-80 rounded' style={{display: 'flex', alignItems: 'center'}}>
+          <Col span={4} className='flex flex-direction-row justify-center'>
+            <Button type='link' icon={<FastBackwardFilled className='player-button' />}></Button>
+            <Button type="link" icon={<PlayCircleOutlined className='player-button' />}></Button>
+            <Button type="link" icon={<FastForwardFilled className='player-button' style={{fontSize: 30}} />}></Button>
+          </Col>
+          <Col style={{width: 80}}>
+            <img src={song.cover} alt={song.cover} className='current-song-cover' />
+            
+          </Col>
+          <Col span={16}>
+            <Row className='' style={{paddingLeft: 10}}>
+              {song.song_name}
+            </Row>
+            <Row className='' style={{paddingLeft: 10}}>
+              {song.band_name}
+            </Row>
+          </Col>
+          <Col>
+            <Button type='link' icon={<HeartOutlined  className='current-track-button'  />}></Button>
+            <Button type='link' icon={<ShareAltOutlined  className='current-track-button'  />}></Button>
+          </Col>
+        </Row>
+
+      </div>
+      
+    </Song>
+  );
+}
+
+