Refactor mobile player to use new player core

packages/app/src/pages/@mobile-views/player/index.jsx

@@ -4,7 +4,7 @@ import classnames from "classnames"
 import { Icons } from "@components/Icons"
 import SeekBar from "@components/Player/SeekBar"
 import Controls from "@components/Player/Controls"
-import ExtraActions from "@components/Player/ExtraActions"
+import Actions from "@components/Player/Actions"
 
 import { usePlayerStateContext } from "@contexts/WithPlayerContext"
 import RGBStringToValues from "@utils/rgbToValues"
@@ -18,9 +18,11 @@ const ServiceIndicator = (props) => {
 
 	switch (props.service) {
 		case "tidal": {
-            return <div className="service_indicator">
+			return (
+				<div className="service_indicator">
 					<Icons.SiTidal /> Playing from Tidal
 				</div>
+			)
 		}
 		default: {
 			return null
@@ -33,9 +35,12 @@ const AudioPlayer = (props) => {
 
 	React.useEffect(() => {
 		if (app.currentDragger) {
-            app.currentDragger.setBackgroundColorValues(RGBStringToValues(playerState.track_manifest?.cover_analysis?.rgb))
+			app.currentDragger.setBackgroundColorValues(
+				RGBStringToValues(
+					playerState.track_manifest?.cover_analysis?.rgb,
+				),
+			)
 		}
-
 	}, [playerState.track_manifest?.cover_analysis])
 
 	const {
@@ -51,47 +56,35 @@ const AudioPlayer = (props) => {
 	const playing = playerState.playback_status === "playing"
 	const stopped = playerState.playback_status === "stopped"
 
-    const titleText = (!playing && stopped) ? "Stopped" : (title ?? "Untitled")
+	const titleText = !playing && stopped ? "Stopped" : (title ?? "Untitled")
 	const subtitleText = `${artist} | ${album?.title ?? album}`
 
-    return <div
-        className={classnames(
-            "mobile_media_player_wrapper",
-            {
-                "cover_light": cover_analysis?.isLight,
-            }
-        )}
+	return (
+		<div
+			className={classnames("mobile-player_wrapper", {
+				cover_light: cover_analysis?.isLight,
+			})}
 			style={{
 				"--cover_isLight": cover_analysis?.isLight,
 			}}
 		>
-        <div className="mobile_media_player">
-            <ServiceIndicator
-                service={service}
-            />
+			<div className="mobile-player">
+				<ServiceIndicator service={service} />
 
 				<div
-                className="cover"
+					className="mobile-player-cover"
 					style={{
 						backgroundImage: `url(${cover ?? "/assets/no_song.png"})`,
 					}}
 				/>
 
-            <div className="header">
-                <div className="info">
-                    <div className="title">
-                        <h2>
-                            {
-                                titleText
-                            }
-                        </h2>
-                    </div>
-                    <div className="subTitle">
-                        <div className="artist">
-                            <h3>
-                                {subtitleText}
-                            </h3>
+				<div className="mobile-player-header">
+					<div className="mobile-player-info">
+						<div className="mobile-player-info-title">
+							<h1>{titleText}</h1>
 						</div>
+						<div className="mobile-player-info-subTitle">
+							<span>{subtitleText}</span>
 						</div>
 					</div>
 				</div>
@@ -105,9 +98,10 @@ const AudioPlayer = (props) => {
 					disabled={playerState.control_locked}
 				/>
 
-            <ExtraActions />
+				<Actions />
 			</div>
 		</div>
+	)
 }
 
 export default AudioPlayer

packages/app/src/pages/@mobile-views/player/index.less

@@ -1,6 +1,6 @@
 @top_controls_height: 55px;
 
-.mobile_media_player_wrapper {
+.mobile-player_wrapper {
 	position: relative;
 
 	z-index: 320;
@@ -12,7 +12,9 @@
 	height: 100%;
 	width: 100%;
 
-    .mobile_media_player_background {
+	margin-bottom: 30px;
+
+	.mobile-player_background {
 		position: absolute;
 
 		z-index: 320;
@@ -27,7 +29,7 @@
 	}
 }
 
-.mobile_media_player {
+.mobile-player {
 	position: relative;
 
 	display: inline-flex;
@@ -55,7 +57,7 @@
 		font-size: 0.9rem;
 	}
 
-    .cover {
+	.mobile-player-cover {
 		position: relative;
 
 		z-index: 320;
@@ -85,7 +87,7 @@
 		}
 	}
 
-    .header {
+	.mobile-player-header {
 		position: relative;
 
 		display: flex;
@@ -93,7 +95,7 @@
 
 		width: 100%;
 
-        .info {
+		.mobile-player-info {
 			display: flex;
 			flex-direction: column;
 
@@ -111,33 +113,29 @@
 
 			width: 100%;
 
-            .title {
+			.mobile-player-info-title {
+				display: flex;
+				flex-direction: row;
+
+				align-items: center;
+
 				font-size: 1rem;
 				font-weight: 600;
-                color: var(--text-color);
 
 				word-break: break-all;
 
 				font-family: "Space Grotesk", sans-serif;
 			}
 
-            .subTitle {
+			.mobile-player-info-subTitle {
 				display: flex;
 				flex-direction: row;
 
-                width: 100%;
-
+				align-items: center;
 				justify-content: space-between;
 
-                .likeButton {
-                    margin-right: 20px;
-                }
-
-                .artist {
-                    font-size: 0.6rem;
+				font-size: 0.7rem;
 				font-weight: 400;
-                    color: var(--text-color);
-                }
 			}
 		}
 	}
@@ -183,17 +181,4 @@
 			}
 		}
 	}
-
-    .extra_actions {
-        padding: 0 30px;
-
-        .ant-btn {
-            padding: 5px;
-
-            svg {
-                height: 23px;
-                min-width: 23px;
-            }
-        }
-    }
 }