[enhancement]: Make related tab on full screen player useful

Resolves #50. Adds a new set of components for fetching similar songs
from the current playing song. For Jellyfin, use the `/items/{itemId}/similar`
endpoint (may not work well for small libraries), and for Navidrome/Subsonic
use `getSimilarSongs`. _In theory_, this component can be used to get similar
songs anywhere.
This commit is contained in:
Kendall Garner 2024-02-19 08:53:50 -08:00
parent 74075fc374
commit 025124c379
No known key found for this signature in database
GPG key ID: 18D2767419676C87
14 changed files with 247 additions and 16 deletions

View file

@ -1,16 +1,17 @@
import { Group, Center } from '@mantine/core';
import { Group } from '@mantine/core';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { HiOutlineQueueList } from 'react-icons/hi2';
import { RiFileMusicLine, RiFileTextLine, RiInformationFill } from 'react-icons/ri';
import { RiFileMusicLine, RiFileTextLine } from 'react-icons/ri';
import styled from 'styled-components';
import { Button, TextTitle } from '/@/renderer/components';
import { Button } from '/@/renderer/components';
import { PlayQueue } from '/@/renderer/features/now-playing';
import {
useFullScreenPlayerStore,
useFullScreenPlayerStoreActions,
} from '/@/renderer/store/full-screen-player.store';
import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
import { FullScreenSimilarSongs } from '/@/renderer/features/player/components/full-screen-similar-songs';
const QueueContainer = styled.div`
position: relative;
@ -82,8 +83,6 @@ export const FullScreenPlayerQueue = () => {
},
];
console.log('opacity', opacity);
return (
<GridContainer
className="full-screen-player-queue-container"
@ -123,17 +122,9 @@ export const FullScreenPlayerQueue = () => {
<PlayQueue type="fullScreen" />
</QueueContainer>
) : activeTab === 'related' ? (
<Center>
<Group>
<RiInformationFill size="2rem" />
<TextTitle
order={3}
weight={700}
>
{t('common.comingSoon', { postProcess: 'upperCase' })}
</TextTitle>
</Group>
</Center>
<QueueContainer>
<FullScreenSimilarSongs />
</QueueContainer>
) : activeTab === 'lyrics' ? (
<Lyrics />
) : null}