diff --git a/src/App.css b/src/App.css index d104cac2..13b9af33 100644 --- a/src/App.css +++ b/src/App.css @@ -85,8 +85,16 @@ to { opacity: 1; transform: translateY(0); } } -.song-cover { - +.information { + -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); + transform-origin: top center; + animation: fadeInAndMoveDown 0.2s ease-out forwards; +} +@keyframes fadeInAndMoveDown { + from { opacity: 0; transform: translateY(-50px); } + to { opacity: 1; transform: translateY(0); } } .AdBlock { @@ -161,6 +169,9 @@ } .current-song-cover { object-fit: scale-down; + position: relative; + height: 80px; + width: 80px; } .player-button { @@ -212,6 +223,7 @@ .title-side-block { font-size: 22px; border-bottom: 2px solid #505050; + align-self: stretch; align-self: flex-start; color: #505050; } \ No newline at end of file diff --git a/src/components/layoutComponents/MenuBlock.tsx b/src/components/layoutComponents/MenuBlock.tsx index a0bc4dbe..4dc75f2e 100644 --- a/src/components/layoutComponents/MenuBlock.tsx +++ b/src/components/layoutComponents/MenuBlock.tsx @@ -3,11 +3,10 @@ import { Tabs } from 'antd'; import React from 'react'; import { PlaylistsBlock } from '../menuComponents/PlaylistsBlock'; import { IAlbum, IGenre, IPlaylist, ISong } from '../../models/IModels'; -import { NewSongsBlock } from '../menuComponents/NewSongsBlock'; +import { SongsBlock } from '../menuComponents/NewSongsBlock'; import { FullPlaylistBlock } from '../menuComponents/FullPlaylistBlock'; import { width } from '@mui/system'; import TabPane from 'antd/es/tabs/TabPane'; -import { ChartSongsBlock } from '../menuComponents/ChartSongsBlock'; interface MenuBlockProps { playlists?: IPlaylist[], @@ -21,7 +20,7 @@ export function MenuBlock({playlists, songs, albums, genres}: MenuBlockProps) { const newSongsTab = { label: 'Новинки', key: 'New', - children: songs? : null + children: songs? : null }; const playlistsTab = { label: 'Плейлисты', @@ -32,15 +31,15 @@ export function MenuBlock({playlists, songs, albums, genres}: MenuBlockProps) { const chartTab = { label: 'Чарт', key: 'Chart', - children: songs? : null + children: songs? : null }; const recTab = { label: 'Рекомендации', key: 'Recomendations', - children: songs? : null + children: songs? : null }; - const tabs = [recTab, newSongsTab, chartTab]; + const tabs = [newSongsTab, recTab, chartTab]; return ( diff --git a/src/components/menuComponents/ChartSongsBlock.tsx b/src/components/menuComponents/ChartSongsBlock.tsx deleted file mode 100644 index a1432154..00000000 --- a/src/components/menuComponents/ChartSongsBlock.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { render } from '@testing-library/react'; -import { ISong } from '../../models/IModels'; -import axios from 'axios'; -import { Table, Button, Empty } from 'antd'; -import { PlayCircleFilled, PlayCircleOutlined } from '@ant-design/icons'; -import { getSongs } from '../../API/api'; -import Title from 'antd/es/typography/Title'; -import { GetColumns } from './Templates/songsTemplate'; -import { GetColumnsWithNumber } from './Templates/numeredSongsTemplate'; -import { usePlayingContext } from '../../contexts/SongContexts/PlayingProvider'; -import { useCurrentSongContext } from '../../contexts/SongContexts/SongContextProvider'; - -// Функция для генерации номеров строк -const generateRowNumbers = (rows: any[]) => - rows.map((_: any, index: number) => ({ ..._, number: index + 1 })); - -export function ChartSongsBlock() { - const [songs, setSongs] = useState([]); - const [numberedSongs, setNumberedSongs] = useState([]); - - const currentSongId = useCurrentSongContext(); - const isPlaying = usePlayingContext(); - - const fetchData = async () => { - const response = await getSongs(); - setSongs(response.data); - setNumberedSongs(generateRowNumbers(response.data)); - }; - - useEffect(() => { - fetchData(); - }, []); - - return ( -
- Чарт} - style={{ width: '100%', backgroundColor: 'transparent', overflowX: 'auto' }} - className="songs-table menu-block" - dataSource={numberedSongs} - columns={GetColumnsWithNumber(numberedSongs)} - showHeader={false} - pagination={false} - rowClassName={(record) => isPlaying ? (record.id === currentSongId.songId ? 'song-table-row-active' : 'song-table-row') : 'song-table-row'} - rowKey={(record) => record.id} - scroll={{ x: true }} - /> - - ); -}; - - diff --git a/src/components/menuComponents/NewSongsBlock.tsx b/src/components/menuComponents/NewSongsBlock.tsx index a4d8a240..f10d48ef 100644 --- a/src/components/menuComponents/NewSongsBlock.tsx +++ b/src/components/menuComponents/NewSongsBlock.tsx @@ -12,7 +12,11 @@ import { useCurrentSongContext } from '../../contexts/SongContexts/SongContextPr import { usePlayingContext } from '../../contexts/SongContexts/PlayingProvider'; import { useSideBlockContext } from '../../contexts/SideBlockContexts/SideBlockProvider'; -export function NewSongsBlock() { +export function SongsBlock({charted = false}: {charted?: boolean}) { + + // Функция для генерации номеров строк + const generateRowNumbers = (rows: any[]) => + rows.map((_: any, index: number) => ({ ..._, number: index + 1 })); const [songs, setSongs] = useState([]); const [bands, setBands] = useState([]); @@ -41,11 +45,16 @@ export function NewSongsBlock() { } spinning={songs.length === 0}>
Горячие новинки} + title={() => + + { charted ? <>Чарт: самые огненные треки</> : <>Горячие новинки </>} + } style={{width: '100%', backgroundColor: 'transparent'}} className="songs-table menu-block" - dataSource={songs.map((s: ISong) => ({...s, play: ''}))} - columns={GetColumns(songs)} + dataSource={ + charted ? generateRowNumbers(songs) : songs + } + columns={GetColumns(songs, charted)} showHeader={false} pagination={false} rowClassName={(record) => isPlaying ? (record.id === currentSongId.songId ? 'song-table-row-active' : 'song-table-row') : 'song-table-row'} @@ -76,3 +85,4 @@ export function NewSongsBlock() { ); }; + diff --git a/src/components/menuComponents/Templates/informationTemplate.tsx b/src/components/menuComponents/Templates/informationTemplate.tsx index e6326f24..655e41ce 100644 --- a/src/components/menuComponents/Templates/informationTemplate.tsx +++ b/src/components/menuComponents/Templates/informationTemplate.tsx @@ -2,14 +2,16 @@ import react from "react"; import { IAlbum, IBand, ISong, IAdvertisement } from "../../../models/IModels"; import { getSong, getAlbum, getBand } from "../../../API/api"; import Text from 'antd/es/typography/Text'; -import { useSideBlockContext } from '../../../contexts/SideBlockContexts/SideBlockProvider'; +import { usePlayingContext } from "../../../contexts/SongContexts/PlayingProvider"; +import { useCurrentSongContext } from "../../../contexts/SongContexts/SongContextProvider"; import { AdCard } from "../../cardComponents/AdCard"; -import { Loading3QuartersOutlined } from "@ant-design/icons"; -import { Spin } from "antd"; - - +import { HeartOutlined, Loading3QuartersOutlined, PauseCircleFilled, PlayCircleFilled, ShareAltOutlined } from "@ant-design/icons"; +import { Spin, Typography } from "antd"; export function InformationTemplate ({obj}: {obj: ISong | IBand | IAlbum | IAdvertisement | undefined}) { + + const { isPlaying, setIsPlaying } = usePlayingContext(); + const { songId, setSongId } = useCurrentSongContext(); function isAd(obj: any): obj is IAdvertisement { return Array.isArray(obj) && obj.every(item => @@ -43,28 +45,98 @@ export function InformationTemplate ({obj}: {obj: ISong | IBand | IAlbum | IAdve 'city' in obj; } - const { contentObject } = useSideBlockContext(); - switch (typeof obj) { case 'object': return ( -
+
{isAd(obj) && Array.isArray(obj) ? obj.map((ad) => ) : null} + {isSong(obj) ? -
- ТРЕК +
+ {obj.song_name} - {obj.song_name} + +
+ {obj.song_name} +
+
+ {obj.band_name} +
+ + {isPlaying ? + {setIsPlaying(!isPlaying); setSongId(obj.id)}}> + + + + : + {setIsPlaying(!isPlaying); setSongId(obj.id)}}> + + } + + + +
: null} - {isBand(obj) ? {obj.name} : null} + {isBand(obj) ? + +
+
+ + {obj.name} + +
+
+ + Информация: + +
+
+ + {obj.city},{obj.country} + +
+
+ + годы: {obj.years} + +
+
+ + жанры: {obj.genres.map((genre: string, index: number) => ( + {genre}{index < obj.genres.length - 1 ? ', ' : ''} + ))} + +
+
+ + Описание: + +
+
+ + {obj.description} + +
+
+ + : null} {isAlbum(obj) ? {obj.name} : null}
@@ -81,4 +153,3 @@ export function InformationTemplate ({obj}: {obj: ISong | IBand | IAlbum | IAdve } } - diff --git a/src/components/menuComponents/Templates/numeredSongsTemplate.tsx b/src/components/menuComponents/Templates/numeredSongsTemplate.tsx deleted file mode 100644 index 28ffd272..00000000 --- a/src/components/menuComponents/Templates/numeredSongsTemplate.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Button } from "antd"; -import { ISong } from "../../../models/IModels"; -import { useState } from "react"; -import { useCurrentSongContext } from "../../../contexts/SongContexts/SongContextProvider"; -import { usePlayingContext } from "../../../contexts/SongContexts/PlayingProvider"; - -const useColumnsWithNumber = (songs: ISong[]) => { - - const {isPlaying, setIsPlaying} = usePlayingContext(); - const { songId, setSongId } = useCurrentSongContext(); - - const handlePlayClick = (songId: string) => { - setIsPlaying(!isPlaying); - setSongId(songId); - }; - - return [ - { - title: '#', - dataIndex: 'number', - key: 'number', - width: 50, - render: (value: any, record: ISong, index: number) => { - return record.number === 1 ? 👑 : - {record.number}; - }, - }, - - { - title: 'Play', - dataIndex: 'play', - key: 'play', - width: 100, - - render: (text: string, song: ISong) => ( - - ), - }, - { - title: '', - dataIndex: 'song_name', - key: 'song_name', - width: 400 - }, - { - title: '', - dataIndex: 'band_name', - key: 'band_name', - width: 400 - }, - { - title: '', - dataIndex: 'album_name', - key: 'album_name', - width: 350 - } - - ] -} - -export function GetColumnsWithNumber(songs: ISong[]) { - return useColumnsWithNumber(songs); -} diff --git a/src/components/menuComponents/Templates/songsTemplate.tsx b/src/components/menuComponents/Templates/songsTemplate.tsx index a85d67a6..5195d25e 100644 --- a/src/components/menuComponents/Templates/songsTemplate.tsx +++ b/src/components/menuComponents/Templates/songsTemplate.tsx @@ -5,7 +5,7 @@ import { height, style } from "@mui/system"; import { useCurrentSongContext } from "../../../contexts/SongContexts/SongContextProvider"; import { usePlayingContext } from "../../../contexts/SongContexts/PlayingProvider"; -const useColumns = (songs: ISong[])=> { +const useColumns = (songs: ISong[], chart: boolean = false) => { const {isPlaying, setIsPlaying} = usePlayingContext(); const { songId, setSongId } = useCurrentSongContext(); @@ -16,7 +16,20 @@ const useColumns = (songs: ISong[])=> { }; - return [ + const columns = [ + ...(chart ? + [ + { + title: '#', + dataIndex: 'number', + key: 'number', + width: 50, + render: (value: any, record: ISong, index: number) => { + return record.number === 1 ? 👑 : + {record.number}; + }, + }, + ]: []), { title: 'Play', dataIndex: 'play', @@ -44,7 +57,7 @@ const useColumns = (songs: ISong[])=> { dataIndex: 'song_name', key: 'song_name', width: 400, - render: (text: string, song: ISong) => {text} + render: (text: string, song: ISong) => (
{text}
) }, { title: '', @@ -60,8 +73,10 @@ const useColumns = (songs: ISong[])=> { } ] + + return columns } -export function GetColumns(songs: ISong[]) { - return useColumns(songs); +export function GetColumns(songs: ISong[], chart: boolean) { + return useColumns(songs, chart); } diff --git a/src/components/songComponents/CurrentTrack.tsx b/src/components/songComponents/CurrentTrack.tsx index 58db8165..bd796f82 100644 --- a/src/components/songComponents/CurrentTrack.tsx +++ b/src/components/songComponents/CurrentTrack.tsx @@ -19,10 +19,7 @@ const Song = styled.div` box-sizing: border-box; background-color: #fff; - @media (max-width: 768px) { - padding: 0 10px; - flex-direction: column; - } + `; type CurrentSongProps = { diff --git a/src/pages/Registerpage.tsx b/src/pages/Registerpage.tsx index 5e3fee46..50d09cbb 100644 --- a/src/pages/Registerpage.tsx +++ b/src/pages/Registerpage.tsx @@ -1,6 +1,7 @@ import { MailOutlined, LockOutlined } from "@ant-design/icons"; import { Form, Input, Button, Checkbox } from "antd"; import { Link } from "react-router-dom"; +// @ts-ignore import ReCAPTCHA from "react-google-recaptcha"; import React, { useState } from "react";