Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 19x 19x 19x | import { ReactElement } from "react";
import { CardTrack, ContentContainer, Heading } from "components";
import { CardType } from "components/CardTrack";
import { useSpotify, useTranslations } from "hooks";
export default function FullScreenQueue(): ReactElement {
const { previousTracks, currentlyPlaying, nextTracks, playlistPlayingId } =
useSpotify();
const playlistUri = playlistPlayingId
? `spotify:playlist:${playlistPlayingId}`
: "";
const { translations } = useTranslations();
return (
<ContentContainer hasPageHeader>
<div className="queue">
<div className="queue__tracks">
{previousTracks.length > 0 && (
<Heading number={3}>{translations.queue.previousTracks}</Heading>
)}
{previousTracks.map((track) => (
<CardTrack
key={track.id}
track={track}
playlistUri={playlistUri}
isTrackInLibrary={false}
type={CardType.Presentation}
isSingleTrack
uri={track.uri}
/>
))}
{currentlyPlaying && (
<Heading number={3}>{translations.queue.currentlyPlaying}</Heading>
)}
{currentlyPlaying && (
<CardTrack
key={currentlyPlaying.id}
track={currentlyPlaying}
playlistUri={playlistUri}
isTrackInLibrary={false}
type={CardType.Presentation}
isSingleTrack
uri={currentlyPlaying.uri}
/>
)}
{nextTracks.length > 0 && (
<Heading number={3}>{translations.queue.nextUp}</Heading>
)}
{nextTracks.map((track) => (
<CardTrack
key={track.id}
track={track}
playlistUri={playlistUri}
isTrackInLibrary={false}
type={CardType.Presentation}
isSingleTrack
uri={track.uri}
/>
))}
</div>
<style jsx>{`
:global(body .app:fullscreen main) {
height: calc(100vh);
}
.queue {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
padding: 40px 40px 0 40px;
}
.queue__tracks {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 0;
width: 100%;
}
`}</style>
</div>
</ContentContainer>
);
}
|