Split player actions

packages/app/src/components/Player/Actions/index.jsx

@@ -6,41 +6,51 @@ import LikeButton from "@components/LikeButton"
 
 import { usePlayerStateContext } from "@contexts/WithPlayerContext"
 
+import "./index.less"
+
 const ExtraActions = (props) => {
-	const [playerState] = usePlayerStateContext()
+	const [trackInstance, setTrackInstance] = React.useState({})
+
+	const onPlayerStateChange = React.useCallback((state) => {
+		const instance = app.cores.player.track()
+
+		if (instance) {
+			setTrackInstance(instance)
+		}
+	}, [])
+
+	const [playerState] = usePlayerStateContext(onPlayerStateChange)
 
 	const handleClickLike = async () => {
-		if (!playerState.track_manifest) {
+		if (!trackInstance) {
 			console.error("Cannot like a track if nothing is playing")
 			return false
 		}
 
-		const track = app.cores.player.track()
-
-		await track.manifest.serviceOperations.toggleItemFavourite(
+		await trackInstance.manifest.serviceOperations.toggleItemFavourite(
 			"track",
-			playerState.track_manifest._id,
+			trackInstance.manifest._id,
 		)
 	}
 
 	return (
-		<div className="extra_actions">
+		<div className="player-actions">
 			{app.isMobile && (
 				<Button
 					type="ghost"
 					icon={<Icons.MdAbc />}
-					disabled={!playerState.track_manifest?.lyrics_enabled}
+					disabled={!trackInstance?.manifest?.lyrics_enabled}
 				/>
 			)}
 
 			{!app.isMobile && (
 				<LikeButton
 					liked={
-						playerState.track_manifest?.serviceOperations
-							.fetchLikeStatus
+						trackInstance?.manifest?.serviceOperations
+							?.fetchLikeStatus
 					}
 					onClick={handleClickLike}
-					disabled={!playerState.track_manifest?._id}
+					disabled={!trackInstance?.manifest?._id}
 				/>
 			)}
 

packages/app/src/components/Player/Actions/index.less

@@ -0,0 +1,19 @@
+.player-actions {
+	display: flex;
+	flex-direction: row;
+
+	align-items: center;
+	justify-content: space-between;
+
+	width: 70%;
+	margin: auto;
+
+	padding: 2px 25px;
+
+	background-color: rgba(var(--layoutBackgroundColor), 0.7);
+
+	-webkit-backdrop-filter: blur(5px);
+	backdrop-filter: blur(5px);
+
+	border-radius: 12px;
+}

packages/app/src/components/Player/Controls/index.jsx

@@ -47,7 +47,17 @@ const EventsHandlers = {
 }
 
 const Controls = (props) => {
-	const [playerState] = usePlayerStateContext()
+	const [trackInstance, setTrackInstance] = React.useState({})
+
+	const onPlayerStateChange = React.useCallback((state) => {
+		const instance = app.cores.player.track()
+
+		if (instance) {
+			setTrackInstance(instance)
+		}
+	}, [])
+
+	const [playerState] = usePlayerStateContext(onPlayerStateChange)
 
 	const handleAction = (event, ...args) => {
 		if (typeof EventsHandlers[event] !== "function") {
@@ -122,10 +132,11 @@ const Controls = (props) => {
 			{app.isMobile && (
 				<LikeButton
 					liked={
-						playerState.track_manifest?.serviceOperations
-							.fetchLikeStatus
+						trackInstance?.manifest?.serviceOperations
+							?.fetchLikeStatus
 					}
 					onClick={() => handleAction("like")}
+					disabled={!trackInstance?.manifest?._id}
 				/>
 			)}
 		</div>

packages/app/src/components/Player/ToolBarPlayer/index.jsx

@@ -8,11 +8,10 @@ import { usePlayerStateContext } from "@contexts/WithPlayerContext"
 import LiveInfo from "@components/Player/LiveInfo"
 import SeekBar from "@components/Player/SeekBar"
 import Controls from "@components/Player/Controls"
+import Actions from "@components/Player/Actions"
 
 import RGBStringToValues from "@utils/rgbToValues"
 
-import ExtraActions from "../ExtraActions"
-
 import "./index.less"
 
 function isOverflown(parent, element) {
@@ -93,7 +92,7 @@ const Player = (props) => {
 		}
 	}
 
-	const { title, artistStr, service, cover_analysis, cover } =
+	const { title, artist, service, cover_analysis, cover } =
 		playerState.track_manifest ?? {}
 
 	const playing = playerState.playback_status === "playing"
@@ -201,7 +200,7 @@ const Player = (props) => {
 						)}
 
 						<p className="toolbar_player_info_subtitle">
-							{artistStr ?? ""}
+							{artist ?? ""}
 						</p>
 					</div>
 
@@ -218,7 +217,7 @@ const Player = (props) => {
 							streamMode={playerState.live}
 						/>
 
-						<ExtraActions streamMode={playerState.live} />
+						<Actions streamMode={playerState.live} />
 					</div>
 
 					<Indicators

packages/app/src/components/Player/ToolBarPlayer/index.less

@@ -21,8 +21,12 @@
 
 		.toolbar_player_top_actions {
 			height: @toolbar_player_top_actions_height;
-            padding: @toolbar_player_top_actions_padding_vertical @toolbar_player_top_actions_padding_horizontal;
-            padding-bottom: calc(calc(@toolbar_player_borderRadius / 2) + @toolbar_player_top_actions_padding_vertical);
+			padding: @toolbar_player_top_actions_padding_vertical
+				@toolbar_player_top_actions_padding_horizontal;
+			padding-bottom: calc(
+				calc(@toolbar_player_borderRadius / 2) +
+					@toolbar_player_top_actions_padding_vertical
+			);
 		}
 	}
 
@@ -231,43 +235,6 @@
 	}
 }
 
-.extra_actions {
-    display: flex;
-    flex-direction: row;
-
-    width: 70%;
-
-    margin: auto;
-
-    padding: 7px 25px;
-
-    justify-content: space-between;
-
-    background-color: rgba(var(--layoutBackgroundColor), 0.7);
-
-    -webkit-backdrop-filter: blur(5px);
-    backdrop-filter: blur(5px);
-
-    border-radius: 12px;
-
-    button,
-    .likeButton {
-        width: 32px;
-        height: 16px;
-
-        .ant-btn-icon {
-            svg {
-                width: 16px;
-                height: 16px;
-            }
-        }
-    }
-
-    .ant-btn {
-        padding: 0;
-    }
-}
-
 .toolbar_player_indicators_wrapper {
 	position: absolute;
 
@@ -276,7 +243,6 @@
 
 	padding: 10px;
 
-
 	.toolbar_player_indicators {
 		display: flex;
 		flex-direction: row;
@@ -299,7 +265,7 @@
 		svg {
 			margin: 0 !important;
 
-            color: white
+			color: white;
 		}
 	}
 }