Front: do not unmount video player on tab change

front/src/components/infinite/infinite-resource-view/infinite-song-view.tsx

@@ -162,7 +162,11 @@ const InfiniteSongView = <
 					(key) => key !== "userPlayCount",
 				)}
 				defaultSortingOrder={props.initialSortingOrder}
-				defaultSortingKey={props.initialSortingField}
+				defaultSortingKey={
+					props.initialSortingField == "userPlayCount"
+						? "totalPlayCount"
+						: props.initialSortingField
+				}
 				router={props.light == true ? undefined : router}
 				disableLayoutToggle
 				defaultLayout={"list"}

front/src/components/player/controls.tsx

@@ -44,7 +44,7 @@ import {
 	useTheme,
 } from "@mui/material";
 import Illustration from "../illustration";
-import { LegacyRef, useState } from "react";
+import { LegacyRef, useCallback, useState } from "react";
 import PlayerSlider from "./controls/slider";
 import API from "../../api/api";
 import { useQuery } from "../../api/use-query";
@@ -241,7 +241,7 @@ const ExpandedPlayerControls = (
 	const [selectedTab, selectTab] = useState<"player" | "lyrics" | "playlist">(
 		"player",
 	);
-	const requestFullscreen = () => {
+	const requestFullscreen = useCallback(() => {
 		const el: any = document.getElementById("videoPlayer");
 
 		if (el.requestFullscreen) {
@@ -257,7 +257,7 @@ const ExpandedPlayerControls = (
 		} else if (el.enterFullscreen) {
 			el.enterFullscreen();
 		}
-	};
+	}, []);
 
 	return (
 		<Stack
@@ -323,163 +323,98 @@ const ExpandedPlayerControls = (
 				<Divider sx={{ margin: 1 }} variant="middle" />
 			)}
 
-			{selectedTab === "player" && (
+			<Grid
+				container
+				sx={
+					selectedTab !== "player"
+						? { width: 0, height: 0, overflow: "hidden" }
+						: {
+								height: "100%",
+								minHeight: "500px",
+								flexWrap: "nowrap",
+								justifyContent: "center",
+								alignSelf: "center",
+								maxWidth: theme.breakpoints.values.md,
+							}
+				}
+				direction="column"
+			>
 				<Grid
-					container
+					item
+					xs={7}
 					sx={{
-						height: "100%",
-						minHeight: "500px",
-						flexWrap: "nowrap",
+						padding: 3,
+						overflow: "hidden",
+						display: "flex",
 						justifyContent: "center",
-						alignSelf: "center",
-						maxWidth: theme.breakpoints.values.md,
 					}}
-					direction="column"
 				>
-					<Grid
-						item
-						xs={7}
-						sx={{
-							padding: 3,
-							overflow: "hidden",
-							display: "flex",
-							justifyContent: "center",
-						}}
-					>
-						{props.track?.type == "Video" ? (
-							<video
-								playsInline
-								id="videoPlayer"
-								ref={props.videoRef}
-								disablePictureInPicture={false}
-								style={{
-									borderRadius: theme.shape.borderRadius,
-								}}
-								onClick={requestFullscreen}
+					{props.track?.type == "Video" ? (
+						<video
+							playsInline
+							id="videoPlayer"
+							ref={props.videoRef}
+							disablePictureInPicture={false}
+							style={{
+								borderRadius: theme.shape.borderRadius,
+							}}
+							onClick={requestFullscreen}
+						/>
+					) : (
+						<Box
+							sx={{
+								height: "100%",
+								aspectRatio: "1",
+								objectFit: "contain",
+								overflow: "hidden",
+							}}
+						>
+							<Illustration
+								quality="original"
+								illustration={props.track?.illustration ?? null}
+								fallback={<TrackIcon />}
 							/>
-						) : (
-							<Box
+						</Box>
+					)}
+				</Grid>
+				<Grid item sx={{ width: "100%" }}>
+					<Stack spacing={3}>
+						<Grid
+							container
+							sx={{
+								...playerTextStyle,
+								width: "100%",
+								flexGrow: 1,
+								display: "flex",
+								justifyContent: "center",
+							}}
+						>
+							<Grid
+								item
+								xs={1}
 								sx={{
-									height: "100%",
-									aspectRatio: "1",
-									objectFit: "contain",
-									overflow: "hidden",
+									display: "flex",
+									justifyContent: "end",
 								}}
 							>
-								<Illustration
-									quality="original"
-									illustration={
-										props.track?.illustration ?? null
-									}
-									fallback={<TrackIcon />}
-								/>
-							</Box>
-						)}
-					</Grid>
-					<Grid item sx={{ width: "100%" }}>
-						<Stack spacing={3}>
+								{props.track?.type == "Video" && (
+									<IconButton onClick={requestFullscreen}>
+										<FullscreenIcon size={18} />
+									</IconButton>
+								)}
+							</Grid>
 							<Grid
-								container
+								item
+								xs={10}
 								sx={{
 									...playerTextStyle,
-									width: "100%",
-									flexGrow: 1,
 									display: "flex",
 									justifyContent: "center",
 								}}
 							>
-								<Grid
-									item
-									xs={1}
-									sx={{
-										display: "flex",
-										justifyContent: "end",
-									}}
-								>
-									{props.track?.type == "Video" && (
-										<IconButton onClick={requestFullscreen}>
-											<FullscreenIcon size={18} />
-										</IconButton>
-									)}
-								</Grid>
-								<Grid
-									item
-									xs={10}
-									sx={{
-										...playerTextStyle,
-										display: "flex",
-										justifyContent: "center",
-									}}
-								>
-									{props.artist && props.track ? (
-										<Link
-											href={`/releases/${props.track.releaseId}`}
-											style={{
-												overflow: "hidden",
-												textOverflow: "ellipsis",
-											}}
-										>
-											<Button
-												onClick={() =>
-													props.onExpand(false)
-												}
-												sx={{
-													textTransform: "none",
-													color: "inherit",
-													width: "100%",
-												}}
-											>
-												<Typography
-													sx={{
-														fontWeight: "bold",
-														...playerTextStyle,
-													}}
-												>
-													{props.track?.name}
-												</Typography>
-											</Button>
-										</Link>
-									) : (
-										<Skeleton
-											animation={false}
-											width={"70%"}
-										/>
-									)}
-								</Grid>
-								<Grid item xs={1}>
-									{
-										props.track &&
-										parentSong.data &&
-										props.artist ? (
-											<ReleaseTrackContextualMenu
-												artist={props.artist}
-												track={{
-													...props.track,
-													song: parentSong.data,
-												}}
-												onSelect={() =>
-													props.onExpand(false)
-												}
-											/>
-										) : (
-											<IconButton>
-												<ContextualMenuIcon />
-											</IconButton>
-										)
-
-										// To avoid slight shift on loaded
-									}
-								</Grid>
-							</Grid>
-							<Box
-								sx={{
-									display: "flex",
-									justifyContent: "center",
-								}}
-							>
-								{props.track && props.artist ? (
+								{props.artist && props.track ? (
 									<Link
-										href={`/artists/${props.artist.slug}`}
+										href={`/releases/${props.track.releaseId}`}
 										style={{
 											overflow: "hidden",
 											textOverflow: "ellipsis",
@@ -496,57 +431,116 @@ const ExpandedPlayerControls = (
 											}}
 										>
 											<Typography
-												sx={{ ...playerTextStyle }}
+												sx={{
+													fontWeight: "bold",
+													...playerTextStyle,
+												}}
 											>
-												{formatArtists(
-													props.artist,
-													parentSong.data?.featuring,
-												)}
+												{props.track?.name}
 											</Typography>
 										</Button>
 									</Link>
 								) : (
-									<Skeleton
-										animation={false}
-										sx={{ margin: 1 }}
-										width={"50%"}
-									/>
+									<Skeleton animation={false} width={"70%"} />
 								)}
-							</Box>
-							<Stack
-								spacing={2}
-								sx={{
-									justifyContent: "center",
-									display: "flex",
-								}}
-								direction="row"
-							>
-								<PreviousButton onClick={props.onRewind} />
-								<PlayButton
-									onPause={props.onPause}
-									onPlay={props.onPlay}
-									isPlaying={props.playing}
+							</Grid>
+							<Grid item xs={1}>
+								{
+									props.track &&
+									parentSong.data &&
+									props.artist ? (
+										<ReleaseTrackContextualMenu
+											artist={props.artist}
+											track={{
+												...props.track,
+												song: parentSong.data,
+											}}
+											onSelect={() =>
+												props.onExpand(false)
+											}
+										/>
+									) : (
+										<IconButton>
+											<ContextualMenuIcon />
+										</IconButton>
+									)
+
+									// To avoid slight shift on loaded
+								}
+							</Grid>
+						</Grid>
+						<Box
+							sx={{
+								display: "flex",
+								justifyContent: "center",
+							}}
+						>
+							{props.track && props.artist ? (
+								<Link
+									href={`/artists/${props.artist.slug}`}
+									style={{
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+									}}
+								>
+									<Button
+										onClick={() => props.onExpand(false)}
+										sx={{
+											textTransform: "none",
+											color: "inherit",
+											width: "100%",
+										}}
+									>
+										<Typography sx={{ ...playerTextStyle }}>
+											{formatArtists(
+												props.artist,
+												parentSong.data?.featuring,
+											)}
+										</Typography>
+									</Button>
+								</Link>
+							) : (
+								<Skeleton
+									animation={false}
+									sx={{ margin: 1 }}
+									width={"50%"}
 								/>
-								<SkipButton onClick={props.onSkipTrack} />
-							</Stack>
-							<Container maxWidth={false}>
-								<PlayerSlider
-									onSlide={props.onSlide}
-									duration={props.duration}
-									progress={props.progress}
-								/>
-							</Container>
+							)}
+						</Box>
+						<Stack
+							spacing={2}
+							sx={{
+								justifyContent: "center",
+								display: "flex",
+							}}
+							direction="row"
+						>
+							<PreviousButton onClick={props.onRewind} />
+							<PlayButton
+								onPause={props.onPause}
+								onPlay={props.onPlay}
+								isPlaying={props.playing}
+							/>
+							<SkipButton onClick={props.onSkipTrack} />
 						</Stack>
-					</Grid>
+						<Container maxWidth={false}>
+							<PlayerSlider
+								onSlide={props.onSlide}
+								duration={props.duration}
+								progress={props.progress}
+							/>
+						</Container>
+					</Stack>
 				</Grid>
-			)}
+			</Grid>
 			{selectedTab == "lyrics" && (
 				<Box
 					sx={{
 						height: "100%",
 						width: "100%",
 						overflowY: "scroll",
-						margin: 1,
+						marginLeft: 2,
+						paddingRight: 3,
 						alignSelf: "center",
 						maxWidth: theme.breakpoints.values.md,
 					}}

front/src/components/scaffold/scaffold.tsx

@@ -339,7 +339,7 @@ const Scaffold = (props: { children: any }) => {
 	}, [props.children]);
 
 	return (
-		<Box sx={{ display: "flex", width: "100%", height: "100vh" }}>
+		<Box sx={{ display: "flex", width: "100%", height: "100svh" }}>
 			<RootGradientBackground />
 			<Drawer
 				openBottomDrawer={tempDrawerIsOpen}

front/src/pages/releases/[slugOrId].tsx

@@ -545,7 +545,6 @@ const ReleasePage: Page<GetPropsTypesFrom<typeof prepareSSR>> = ({ props }) => {
 								<Box>
 									<Grid
 										container
-										rowSpacing={1.5}
 										spacing={1}
 										sx={{ alignItems: "center" }}
 									>
@@ -563,27 +562,34 @@ const ReleasePage: Page<GetPropsTypesFrom<typeof prepareSSR>> = ({ props }) => {
 										{(
 											albumGenres.data?.pages.at(0)
 												?.items ?? generateArray(3)
-										).map((genre, index) => (
-											<Grid
-												item
-												key={index}
-												sx={{ display: "flex" }}
-											>
-												<GenreButton
-													genre={genre}
-													sx={{
-														borderColor:
-															accentColor?.light,
-														[theme.getColorSchemeSelector(
-															"dark",
-														)]: {
+										)
+											.sort(
+												(a, b) =>
+													a.slug.length -
+													b.slug.length,
+											)
+											.slice(0, 10)
+											.map((genre, index) => (
+												<Grid
+													item
+													key={index}
+													sx={{ display: "flex" }}
+												>
+													<GenreButton
+														genre={genre}
+														sx={{
 															borderColor:
-																accentColor?.dark,
-														},
-													}}
-												/>
-											</Grid>
-										)) ?? []}
+																accentColor?.light,
+															[theme.getColorSchemeSelector(
+																"dark",
+															)]: {
+																borderColor:
+																	accentColor?.dark,
+															},
+														}}
+													/>
+												</Grid>
+											)) ?? []}
 									</Grid>
 									<Divider
 										sx={{

server/src/stream/stream.service.ts

@@ -77,7 +77,7 @@ export class StreamService {
 		const proxy = createProxyMiddleware({
 			router: () =>
 				`${this.transcoderUrl}/${Buffer.from(fullFilePath).toString(
-					"base64",
+					"base64url",
 				)}/${route}`,
 			ignorePath: true,
 		});