From 29ae54fe03498e2712d2ccf1905c0c233aa4416b Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Thu, 24 Apr 2025 06:04:18 +0000
Subject: [PATCH] Split player actions

---
 .../{ExtraActions => Actions}/index.jsx       |  32 +-
 .../src/components/Player/Actions/index.less  |  19 +
 .../src/components/Player/Controls/index.jsx  |  17 +-
 .../components/Player/ToolBarPlayer/index.jsx |   9 +-
 .../Player/ToolBarPlayer/index.less           | 380 ++++++++----------
 5 files changed, 231 insertions(+), 226 deletions(-)
 rename packages/app/src/components/Player/{ExtraActions => Actions}/index.jsx (51%)
 create mode 100644 packages/app/src/components/Player/Actions/index.less

diff --git a/packages/app/src/components/Player/ExtraActions/index.jsx b/packages/app/src/components/Player/Actions/index.jsx
similarity index 51%
rename from packages/app/src/components/Player/ExtraActions/index.jsx
rename to packages/app/src/components/Player/Actions/index.jsx
index b3be128b..9b873395 100755
--- a/packages/app/src/components/Player/ExtraActions/index.jsx
+++ b/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}
 				/>
 			)}
 
diff --git a/packages/app/src/components/Player/Actions/index.less b/packages/app/src/components/Player/Actions/index.less
new file mode 100644
index 00000000..7ef2ef0f
--- /dev/null
+++ b/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;
+}
diff --git a/packages/app/src/components/Player/Controls/index.jsx b/packages/app/src/components/Player/Controls/index.jsx
index 3de4533d..8d520107 100755
--- a/packages/app/src/components/Player/Controls/index.jsx
+++ b/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>
diff --git a/packages/app/src/components/Player/ToolBarPlayer/index.jsx b/packages/app/src/components/Player/ToolBarPlayer/index.jsx
index fac61db7..14f671ac 100755
--- a/packages/app/src/components/Player/ToolBarPlayer/index.jsx
+++ b/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
diff --git a/packages/app/src/components/Player/ToolBarPlayer/index.less b/packages/app/src/components/Player/ToolBarPlayer/index.less
index 18f863a0..ca367a0b 100755
--- a/packages/app/src/components/Player/ToolBarPlayer/index.less
+++ b/packages/app/src/components/Player/ToolBarPlayer/index.less
@@ -7,299 +7,265 @@
 @toolbar_player_top_actions_padding_horizontal: 15px;
 
 .toolbar_player_wrapper {
-    position: relative;
+	position: relative;
 
-    display: flex;
-    flex-direction: column;
+	display: flex;
+	flex-direction: column;
 
-    width: 100%;
+	width: 100%;
 
-    transition: all 150ms ease-in-out;
+	transition: all 150ms ease-in-out;
 
-    &.hover {
-        filter: drop-shadow(@card-drop-shadow);
+	&.hover {
+		filter: drop-shadow(@card-drop-shadow);
 
-        .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);
-        }
-    }
+		.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
+			);
+		}
+	}
 
-    &.cover_light {
-        .toolbar_player_content {
-            color: var(--text-color-black);
-        }
+	&.cover_light {
+		.toolbar_player_content {
+			color: var(--text-color-black);
+		}
 
-        .MuiSlider-root {
-            color: var(--text-color-black);
+		.MuiSlider-root {
+			color: var(--text-color-black);
 
-            .MuiSlider-rail {
-                color: var(--text-color-black);
-            }
-        }
+			.MuiSlider-rail {
+				color: var(--text-color-black);
+			}
+		}
 
-        .loadCircle {
-            svg {
-                path {
-                    stroke: var(--text-color-black);
-                }
-            }
-        }
-    }
+		.loadCircle {
+			svg {
+				path {
+					stroke: var(--text-color-black);
+				}
+			}
+		}
+	}
 }
 
 .toolbar_player_top_actions {
-    position: relative;
+	position: relative;
 
-    z-index: 60;
+	z-index: 60;
 
-    display: inline-flex;
-    flex-direction: row;
+	display: inline-flex;
+	flex-direction: row;
 
-    width: 100%;
-    height: 0px;
+	width: 100%;
+	height: 0px;
 
-    gap: 20px;
+	gap: 20px;
 
-    transition: all 150ms ease-in-out;
-    transform: translateY(calc(@toolbar_player_borderRadius / 2));
-    overflow: hidden;
+	transition: all 150ms ease-in-out;
+	transform: translateY(calc(@toolbar_player_borderRadius / 2));
+	overflow: hidden;
 
-    background-color: var(--background-color-primary);
-    border-radius: 12px 12px 0 0;
+	background-color: var(--background-color-primary);
+	border-radius: 12px 12px 0 0;
 
-    justify-content: space-between;
-    align-items: center;
+	justify-content: space-between;
+	align-items: center;
 }
 
 .toolbar_player {
-    position: relative;
+	position: relative;
 
-    display: flex;
+	display: flex;
 
-    width: 100%;
-    height: 200px;
+	width: 100%;
+	height: 200px;
 
-    overflow: hidden;
+	overflow: hidden;
 
-    z-index: 70;
+	z-index: 70;
 
-    border-radius: @toolbar_player_borderRadius;
+	border-radius: @toolbar_player_borderRadius;
 
-    .toolbar_cover_background {
-        position: absolute;
+	.toolbar_cover_background {
+		position: absolute;
 
-        top: 0;
-        left: 0;
+		top: 0;
+		left: 0;
 
-        width: 100%;
-        height: 100%;
+		width: 100%;
+		height: 100%;
 
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: cover;
 
-        transition: all 0.3s ease-in-out;
+		transition: all 0.3s ease-in-out;
 
-        opacity: 0.6;
+		opacity: 0.6;
 
-        z-index: 65;
+		z-index: 65;
 
-        // create a mask to the bottom
-        //-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
-    }
+		// create a mask to the bottom
+		//-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+	}
 
-    .toolbar_player_content {
-        position: relative;
+	.toolbar_player_content {
+		position: relative;
 
-        display: flex;
-        flex-direction: column;
+		display: flex;
+		flex-direction: column;
 
-        width: 100%;
-        height: 100%;
+		width: 100%;
+		height: 100%;
 
-        padding: 10px;
+		padding: 10px;
 
-        z-index: 80;
+		z-index: 80;
 
-        justify-content: space-between;
+		justify-content: space-between;
 
-        background-color: rgba(var(--cover_averageValues), 0.7);
+		background-color: rgba(var(--cover_averageValues), 0.7);
 
-        color: var(--text-color-white);
+		color: var(--text-color-white);
 
-        .toolbar_player_info {
-            display: flex;
-            flex-direction: column;
+		.toolbar_player_info {
+			display: flex;
+			flex-direction: column;
 
-            color: currentColor;
+			color: currentColor;
 
-            .toolbar_player_info_title {
-                display: flex;
-                flex-direction: row;
+			.toolbar_player_info_title {
+				display: flex;
+				flex-direction: row;
 
-                margin: 0;
-                margin-right: 30px;
+				margin: 0;
+				margin-right: 30px;
 
-                width: fit-content;
+				width: fit-content;
 
-                overflow: hidden;
+				overflow: hidden;
 
-                font-size: 1.5rem;
-                font-weight: 600;
+				font-size: 1.5rem;
+				font-weight: 600;
 
-                font-family: "Space Grotesk", sans-serif;
+				font-family: "Space Grotesk", sans-serif;
 
-                transition: all 150ms ease-in-out;
+				transition: all 150ms ease-in-out;
 
-                color: currentColor;
+				color: currentColor;
 
-                word-break: break-all;
-                white-space: nowrap;
+				word-break: break-all;
+				white-space: nowrap;
 
-                &.overflown {
-                    opacity: 0;
-                    height: 0;
-                }
-            }
+				&.overflown {
+					opacity: 0;
+					height: 0;
+				}
+			}
 
-            .toolbar_player_info_subtitle {
-                font-size: 0.8rem;
-                font-weight: 400;
+			.toolbar_player_info_subtitle {
+				font-size: 0.8rem;
+				font-weight: 400;
 
-                color: currentColor;
-            }
-        }
+				color: currentColor;
+			}
+		}
 
-        .toolbar_player_actions {
-            position: absolute;
+		.toolbar_player_actions {
+			position: absolute;
 
-            color: currentColor;
+			color: currentColor;
 
-            bottom: 0;
-            left: 0;
+			bottom: 0;
+			left: 0;
 
-            height: fit-content;
-            width: 100%;
+			height: fit-content;
+			width: 100%;
 
-            padding: 10px;
-            gap: 5px;
+			padding: 10px;
+			gap: 5px;
 
-            display: flex;
-            flex-direction: column;
+			display: flex;
+			flex-direction: column;
 
-            .player-controls {
-                color: currentColor;
+			.player-controls {
+				color: currentColor;
 
-                transition: all 150ms ease-in-out;
+				transition: all 150ms ease-in-out;
 
-                // padding: 3px 0;
+				// padding: 3px 0;
 
-                // background-color: rgba(var(--layoutBackgroundColor), 0.7);
+				// background-color: rgba(var(--layoutBackgroundColor), 0.7);
 
-                // -webkit-backdrop-filter: blur(5px);
-                // backdrop-filter: blur(5px);
+				// -webkit-backdrop-filter: blur(5px);
+				// backdrop-filter: blur(5px);
 
-                // border-radius: 12px;
+				// border-radius: 12px;
 
-                .ant-btn-icon,
-                button {
-                    color: currentColor;
+				.ant-btn-icon,
+				button {
+					color: currentColor;
 
-                    svg {
-                        color: currentColor;
-                    }
-                }
-            }
+					svg {
+						color: currentColor;
+					}
+				}
+			}
 
-            .player-seek_bar {
-                height: fit-content;
-                margin: 0;
+			.player-seek_bar {
+				height: fit-content;
+				margin: 0;
 
-                color: currentColor;
+				color: currentColor;
 
-                .timers {
-                    color: currentColor;
+				.timers {
+					color: currentColor;
 
-                    span {
-                        color: currentColor;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.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;
-    }
+					span {
+						color: currentColor;
+					}
+				}
+			}
+		}
+	}
 }
 
 .toolbar_player_indicators_wrapper {
-    position: absolute;
+	position: absolute;
 
-    bottom: 0;
-    left: 0;
+	bottom: 0;
+	left: 0;
 
-    padding: 10px;
+	padding: 10px;
 
+	.toolbar_player_indicators {
+		display: flex;
+		flex-direction: row;
 
-    .toolbar_player_indicators {
-        display: flex;
-        flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
 
-        justify-content: space-between;
-        align-items: center;
+		width: fit-content;
 
-        width: fit-content;
+		padding: 7px 10px;
 
-        padding: 7px 10px;
+		border-radius: 12px;
 
-        border-radius: 12px;
+		background-color: rgba(var(--layoutBackgroundColor), 0.7);
+		-webkit-backdrop-filter: blur(5px);
+		backdrop-filter: blur(5px);
 
-        background-color: rgba(var(--layoutBackgroundColor), 0.7);
-        -webkit-backdrop-filter: blur(5px);
-        backdrop-filter: blur(5px);
+		font-size: 1rem;
 
-        font-size: 1rem;
+		svg {
+			margin: 0 !important;
 
-        svg {
-            margin: 0 !important;
-
-            color: white
-        }
-    }
-}
\ No newline at end of file
+			color: white;
+		}
+	}
+}