From 0a87ae1832f900bf9d8729b0c0e8e7d90bdb20d9 Mon Sep 17 00:00:00 2001 From: devil_1nc Date: Mon, 16 Sep 2024 11:45:41 +0400 Subject: [PATCH] =?UTF-8?q?=D0=91=D1=8B=D0=BB=D0=B8=20=D0=B8=D1=81=D0=BF?= =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B5=D0=BA?= =?UTF-8?q?=D0=BE=D1=82=D0=BE=D1=80=D1=8B=D0=B5=20=D0=BC=D0=BE=D0=BC=D0=B5?= =?UTF-8?q?=D0=BD=D1=82=D1=8B=20=D0=BF=D0=BE=20=D1=82=D1=80=D0=B5=D0=B1?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data.json | 8 +- global.env | 1 + src/{scripts/scripts.ts => API/api.ts} | 10 ++- src/App.css | 75 +++++++++++++++++-- src/App.tsx | 26 ++++--- src/components/AdBlock.tsx | 7 -- src/components/AdCard.tsx | 7 -- src/components/CurrentTrack.tsx | 51 ------------- src/components/cardComponents/AdCard.tsx | 10 +++ .../{ => cardComponents}/Playlist.tsx | 0 src/components/mainComponents/AdBlock.tsx | 11 +++ .../{ => mainComponents}/Footer.tsx | 0 .../{ => mainComponents}/Header.tsx | 2 +- .../{ => mainComponents}/MenuBlock.tsx | 0 .../{ => menuComponents}/ChartBlock.tsx | 0 .../FullPlaylistBlock.tsx | 2 +- .../{ => menuComponents}/PlaylistsBlock.tsx | 0 .../{ => menuComponents}/SongsBlock.tsx | 21 ++++-- .../songComponents/CurrentTrack.tsx | 65 ++++++++++++++++ src/components/{ => songComponents}/Track.tsx | 0 20 files changed, 197 insertions(+), 99 deletions(-) create mode 100644 global.env rename src/{scripts/scripts.ts => API/api.ts} (74%) delete mode 100644 src/components/AdBlock.tsx delete mode 100644 src/components/AdCard.tsx delete mode 100644 src/components/CurrentTrack.tsx create mode 100644 src/components/cardComponents/AdCard.tsx rename src/components/{ => cardComponents}/Playlist.tsx (100%) create mode 100644 src/components/mainComponents/AdBlock.tsx rename src/components/{ => mainComponents}/Footer.tsx (100%) rename src/components/{ => mainComponents}/Header.tsx (85%) rename src/components/{ => mainComponents}/MenuBlock.tsx (100%) rename src/components/{ => menuComponents}/ChartBlock.tsx (100%) rename src/components/{ => menuComponents}/FullPlaylistBlock.tsx (92%) rename src/components/{ => menuComponents}/PlaylistsBlock.tsx (100%) rename src/components/{ => menuComponents}/SongsBlock.tsx (68%) create mode 100644 src/components/songComponents/CurrentTrack.tsx rename src/components/{ => songComponents}/Track.tsx (100%) diff --git a/data.json b/data.json index a4342ceb..620487d4 100644 --- a/data.json +++ b/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" ], diff --git a/global.env b/global.env new file mode 100644 index 00000000..f9c8da48 --- /dev/null +++ b/global.env @@ -0,0 +1 @@ +LOCALHOST = "http://localhost:3000" \ No newline at end of file diff --git a/src/scripts/scripts.ts b/src/API/api.ts similarity index 74% rename from src/scripts/scripts.ts rename to src/API/api.ts index 7bb60844..1571af4b 100644 --- a/src/scripts/scripts.ts +++ b/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('http://localhost:3000/playlists'); + return await axios.get('playlists'); } @@ -34,4 +34,10 @@ export async function getGenres() { return await axios.get('http://localhost:3000/genres'); +} + +export async function getAds() { + + return await axios.get('http://localhost:3000/ads'); + } \ No newline at end of file diff --git a/src/App.css b/src/App.css index a5feb553..5f4956b3 100644 --- a/src/App.css +++ b/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; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 5fc69093..04a24f2c 100644 --- a/src/App.tsx +++ b/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('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() {
- +
@@ -65,4 +67,4 @@ function App() { ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/components/AdBlock.tsx b/src/components/AdBlock.tsx deleted file mode 100644 index f38c6b29..00000000 --- a/src/components/AdBlock.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export function AdBlock() { - return ( -
-

Реклама

-
- ); -} diff --git a/src/components/AdCard.tsx b/src/components/AdCard.tsx deleted file mode 100644 index 75a6285d..00000000 --- a/src/components/AdCard.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export function AdCard() { - return ( -
-

Chart

-
- ); -} \ No newline at end of file diff --git a/src/components/CurrentTrack.tsx b/src/components/CurrentTrack.tsx deleted file mode 100644 index 8b5eae99..00000000 --- a/src/components/CurrentTrack.tsx +++ /dev/null @@ -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.cover} */} - - - - {song.song_name} - - - -
- - - ); -} - - diff --git a/src/components/cardComponents/AdCard.tsx b/src/components/cardComponents/AdCard.tsx new file mode 100644 index 00000000..f929b88c --- /dev/null +++ b/src/components/cardComponents/AdCard.tsx @@ -0,0 +1,10 @@ +import { IAdvertisement } from "../models/IModels"; + +export function AdCard({ad}: {ad: IAdvertisement}) { + return ( +
+ {ad.name} + +
+ ); +} \ No newline at end of file diff --git a/src/components/Playlist.tsx b/src/components/cardComponents/Playlist.tsx similarity index 100% rename from src/components/Playlist.tsx rename to src/components/cardComponents/Playlist.tsx diff --git a/src/components/mainComponents/AdBlock.tsx b/src/components/mainComponents/AdBlock.tsx new file mode 100644 index 00000000..c7bb3a2b --- /dev/null +++ b/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 ( +
+

Реклама

+ {ads.map(ad => )} +
+ ); +} diff --git a/src/components/Footer.tsx b/src/components/mainComponents/Footer.tsx similarity index 100% rename from src/components/Footer.tsx rename to src/components/mainComponents/Footer.tsx diff --git a/src/components/Header.tsx b/src/components/mainComponents/Header.tsx similarity index 85% rename from src/components/Header.tsx rename to src/components/mainComponents/Header.tsx index 9254e2e5..4b71b822 100644 --- a/src/components/Header.tsx +++ b/src/components/mainComponents/Header.tsx @@ -5,7 +5,7 @@ import { UserOutlined } from '@ant-design/icons'; export function Header() { return (
-

DEVIL music

+

😈 DEVIL music

diff --git a/src/components/MenuBlock.tsx b/src/components/mainComponents/MenuBlock.tsx similarity index 100% rename from src/components/MenuBlock.tsx rename to src/components/mainComponents/MenuBlock.tsx diff --git a/src/components/ChartBlock.tsx b/src/components/menuComponents/ChartBlock.tsx similarity index 100% rename from src/components/ChartBlock.tsx rename to src/components/menuComponents/ChartBlock.tsx diff --git a/src/components/FullPlaylistBlock.tsx b/src/components/menuComponents/FullPlaylistBlock.tsx similarity index 92% rename from src/components/FullPlaylistBlock.tsx rename to src/components/menuComponents/FullPlaylistBlock.tsx index 705677f1..9fc294fa 100644 --- a/src/components/FullPlaylistBlock.tsx +++ b/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[]}) { diff --git a/src/components/PlaylistsBlock.tsx b/src/components/menuComponents/PlaylistsBlock.tsx similarity index 100% rename from src/components/PlaylistsBlock.tsx rename to src/components/menuComponents/PlaylistsBlock.tsx diff --git a/src/components/SongsBlock.tsx b/src/components/menuComponents/SongsBlock.tsx similarity index 68% rename from src/components/SongsBlock.tsx rename to src/components/menuComponents/SongsBlock.tsx index 709ba9cb..fd972c06 100644 --- a/src/components/SongsBlock.tsx +++ b/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) => ( - + } className='play-song-button rounded' style={{background: 'transparent', display: 'contents'}}> + {song.song_name} + + + ), }, { @@ -50,11 +56,12 @@ export function SongsBlock({songs}: {songs: ISong[]}) { ({...s, play: ''}))} columns={columns} showHeader={false} pagination={false} + rowClassName={() => 'song-table-row'} /> ); diff --git a/src/components/songComponents/CurrentTrack.tsx b/src/components/songComponents/CurrentTrack.tsx new file mode 100644 index 00000000..61ba61a9 --- /dev/null +++ b/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.cover} + + + + + {song.song_name} + + + {song.band_name} + + + + + + + + + + + + ); +} + + diff --git a/src/components/Track.tsx b/src/components/songComponents/Track.tsx similarity index 100% rename from src/components/Track.tsx rename to src/components/songComponents/Track.tsx