Front: Release Tracklist: Better colors for 'playing' + video icons

README.md

@@ -1,4 +1,4 @@
-# <img alt="Icon" src="./front/public/banner.png" width="150px">
+# <img alt="Icon" src="./front/public/banner1-white.png" width="150px">
 
 Welcome! Meelo is a self-hosted music server and web app. It works similarly to Plex, Jellyfin, Koel and Black Candy, but focuses on flexibility, browsing and listening experiences. Actually, Meelo is designed for music collectors. What does it mean? Scroll down to see our killer features :arrow_heading_down:
 

docker-compose.dev.yml

@@ -134,7 +134,6 @@ services:
     volumes:
       - ${DATA_DIR}:${INTERNAL_DATA_DIR}:ro
       - transcoder_cache:/cache
-    profiles: ['', 'cpu']
     depends_on:
       db:
         condition: service_healthy

docker-compose.prod.yml

@@ -121,7 +121,6 @@ services:
     depends_on:
       db:
         condition: service_healthy
-    profiles: ['', 'cpu']
   mq:
     image: rabbitmq:4.0-alpine
     environment:

docker-compose.yml

@@ -99,7 +99,6 @@ services:
     volumes:
       - ${DATA_DIR}:${INTERNAL_DATA_DIR}:ro
       - transcoder_cache:/cache
-    profiles: ['', 'cpu']
   db:
     image: postgres:alpine3.14
     healthcheck:

front/src/components/authentication/wall.tsx

@@ -76,8 +76,8 @@ const AuthenticationWall = (props: { children: any }) => {
 						}}
 					>
 						<ThemedImage
-							light={"/banner-black.png"}
-							dark={"/banner.png"}
+							light={"/banner1-black.png"}
+							dark={"/banner1-white.png"}
 							alt="title"
 							width={200}
 							height={150}

front/src/components/player/index.tsx

@@ -179,8 +179,8 @@ const Player = () => {
 						hls.current?.media?.duration,
 				);
 				player.current!.ontimeupdate = () => {
-					if (!switchTrackIfCrossfade()) {
-						progress.current = player.current!.currentTime;
+					if (!switchTrackIfCrossfade() && player.current) {
+						progress.current = player.current.currentTime;
 					}
 				};
 				player.current!.onended = () => {
@@ -192,7 +192,7 @@ const Player = () => {
 				};
 				player.current!.onpause = () => {
 					throwawayAudioPlayer.current?.pause();
-					if (player.current!.ended === false) {
+					if (player.current?.ended === false) {
 						setPlaying(false);
 					}
 				};
@@ -375,7 +375,7 @@ const Player = () => {
 						new Notification(currentTrack.track.name, {
 							icon: newIllustrationURL
 								? API.getIllustrationURL(newIllustrationURL)
-								: "/icon.png",
+								: "/icon-white.png",
 							body: currentTrack.artist.name,
 						}),
 					);

front/src/components/release-tracklist.tsx

@@ -78,7 +78,7 @@ const ReleaseTrackList = ({
 	const PlayingIcon = () => (
 		<PlayIcon
 			style={{
-				fill: theme.palette.text.disabled,
+				fill: theme.vars.palette.text.disabled,
 				color: "transparent",
 				marginLeft: -4,
 			}}
@@ -335,7 +335,7 @@ const ReleaseTrackList = ({
 											>
 												<VideoIcon
 													color={
-														theme.palette.text
+														theme.vars.palette.text
 															.disabled
 													}
 												/>

front/src/components/scaffold.tsx

@@ -170,16 +170,17 @@ const Drawer = ({
 								display: "flex",
 								alignItems: "center",
 								padding: 2,
+								height: 100,
 							}}
 						>
 							<Link href="/" style={{ cursor: "pointer" }}>
 								<ThemedImage
-									light={"/banner-black.png"}
-									dark={"/banner.png"}
+									light={"/banner1-black.png"}
+									dark={"/banner1-white.png"}
 									alt="icon"
 									priority
-									width={180}
-									height={75}
+									width={200}
+									height={84}
 								/>
 							</Link>
 						</Box>

front/src/pages/_document.tsx

@@ -59,8 +59,8 @@ export default function MyDocument(
 					name="~/theme-color"
 					content={LightTheme.background?.default}
 				/>
-				<link rel="shortcut icon" href="/favicon.ico" />
-				<link rel="apple-touch-icon" href="/favicon.ico" />
+				<link rel="shortcut icon" href="/favicon-black.ico" />
+				<link rel="apple-touch-icon" href="/favicon-black.ico" />
 			</Head>
 			<body style={{ height: "100lvh" }}>
 				<InitColorSchemeScript defaultMode="system" />