mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
Refactor mobile player to use new player core
This commit is contained in:
parent
74021f38b6
commit
6e80fc67fa
@ -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"
|
||||
@ -12,102 +12,96 @@ import RGBStringToValues from "@utils/rgbToValues"
|
||||
import "./index.less"
|
||||
|
||||
const ServiceIndicator = (props) => {
|
||||
if (!props.service) {
|
||||
return null
|
||||
}
|
||||
if (!props.service) {
|
||||
return null
|
||||
}
|
||||
|
||||
switch (props.service) {
|
||||
case "tidal": {
|
||||
return <div className="service_indicator">
|
||||
<Icons.SiTidal /> Playing from Tidal
|
||||
</div>
|
||||
}
|
||||
default: {
|
||||
return null
|
||||
}
|
||||
}
|
||||
switch (props.service) {
|
||||
case "tidal": {
|
||||
return (
|
||||
<div className="service_indicator">
|
||||
<Icons.SiTidal /> Playing from Tidal
|
||||
</div>
|
||||
)
|
||||
}
|
||||
default: {
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const AudioPlayer = (props) => {
|
||||
const [playerState] = usePlayerStateContext()
|
||||
const [playerState] = usePlayerStateContext()
|
||||
|
||||
React.useEffect(() => {
|
||||
if (app.currentDragger) {
|
||||
app.currentDragger.setBackgroundColorValues(RGBStringToValues(playerState.track_manifest?.cover_analysis?.rgb))
|
||||
}
|
||||
React.useEffect(() => {
|
||||
if (app.currentDragger) {
|
||||
app.currentDragger.setBackgroundColorValues(
|
||||
RGBStringToValues(
|
||||
playerState.track_manifest?.cover_analysis?.rgb,
|
||||
),
|
||||
)
|
||||
}
|
||||
}, [playerState.track_manifest?.cover_analysis])
|
||||
|
||||
}, [playerState.track_manifest?.cover_analysis])
|
||||
const {
|
||||
title,
|
||||
album,
|
||||
artist,
|
||||
service,
|
||||
lyricsEnabled,
|
||||
cover_analysis,
|
||||
cover,
|
||||
} = playerState.track_manifest ?? {}
|
||||
|
||||
const {
|
||||
title,
|
||||
album,
|
||||
artist,
|
||||
service,
|
||||
lyricsEnabled,
|
||||
cover_analysis,
|
||||
cover,
|
||||
} = playerState.track_manifest ?? {}
|
||||
const playing = playerState.playback_status === "playing"
|
||||
const stopped = playerState.playback_status === "stopped"
|
||||
|
||||
const playing = playerState.playback_status === "playing"
|
||||
const stopped = playerState.playback_status === "stopped"
|
||||
const titleText = !playing && stopped ? "Stopped" : (title ?? "Untitled")
|
||||
const subtitleText = `${artist} | ${album?.title ?? album}`
|
||||
|
||||
const titleText = (!playing && stopped) ? "Stopped" : (title ?? "Untitled")
|
||||
const subtitleText = `${artist} | ${album?.title ?? album}`
|
||||
return (
|
||||
<div
|
||||
className={classnames("mobile-player_wrapper", {
|
||||
cover_light: cover_analysis?.isLight,
|
||||
})}
|
||||
style={{
|
||||
"--cover_isLight": cover_analysis?.isLight,
|
||||
}}
|
||||
>
|
||||
<div className="mobile-player">
|
||||
<ServiceIndicator service={service} />
|
||||
|
||||
return <div
|
||||
className={classnames(
|
||||
"mobile_media_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-cover"
|
||||
style={{
|
||||
backgroundImage: `url(${cover ?? "/assets/no_song.png"})`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="cover"
|
||||
style={{
|
||||
backgroundImage: `url(${cover ?? "/assets/no_song.png"})`,
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
|
||||
<div className="header">
|
||||
<div className="info">
|
||||
<div className="title">
|
||||
<h2>
|
||||
{
|
||||
titleText
|
||||
}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="subTitle">
|
||||
<div className="artist">
|
||||
<h3>
|
||||
{subtitleText}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Controls />
|
||||
|
||||
<Controls />
|
||||
<SeekBar
|
||||
stopped={playerState.playback_status === "stopped"}
|
||||
playing={playerState.playback_status === "playing"}
|
||||
streamMode={playerState.livestream_mode}
|
||||
disabled={playerState.control_locked}
|
||||
/>
|
||||
|
||||
<SeekBar
|
||||
stopped={playerState.playback_status === "stopped"}
|
||||
playing={playerState.playback_status === "playing"}
|
||||
streamMode={playerState.livestream_mode}
|
||||
disabled={playerState.control_locked}
|
||||
/>
|
||||
|
||||
<ExtraActions />
|
||||
</div>
|
||||
</div>
|
||||
<Actions />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AudioPlayer
|
||||
@ -1,199 +1,184 @@
|
||||
@top_controls_height: 55px;
|
||||
|
||||
.mobile_media_player_wrapper {
|
||||
position: relative;
|
||||
.mobile-player_wrapper {
|
||||
position: relative;
|
||||
|
||||
z-index: 320;
|
||||
z-index: 320;
|
||||
|
||||
display: flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.mobile_media_player_background {
|
||||
position: absolute;
|
||||
margin-bottom: 30px;
|
||||
|
||||
z-index: 320;
|
||||
.mobile-player_background {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 320;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: rgba(var(--cover_averageValues), 0.4);
|
||||
}
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: rgba(var(--cover_averageValues), 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile_media_player {
|
||||
position: relative;
|
||||
.mobile-player {
|
||||
position: relative;
|
||||
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
gap: 10px;
|
||||
gap: 10px;
|
||||
|
||||
transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
|
||||
z-index: 330;
|
||||
z-index: 330;
|
||||
|
||||
.service_indicator {
|
||||
color: var(--text-color);
|
||||
.service_indicator {
|
||||
color: var(--text-color);
|
||||
|
||||
background-color: var(--background-color-accent);
|
||||
padding: 7px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--background-color-accent);
|
||||
padding: 7px;
|
||||
border-radius: 8px;
|
||||
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: relative;
|
||||
.mobile-player-cover {
|
||||
position: relative;
|
||||
|
||||
z-index: 320;
|
||||
z-index: 320;
|
||||
|
||||
margin: auto;
|
||||
margin: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
min-height: 40vh;
|
||||
min-width: 100%;
|
||||
min-height: 40vh;
|
||||
min-width: 100%;
|
||||
|
||||
border-radius: 24px;
|
||||
border-radius: 24px;
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
.mobile-player-header {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.mobile-player-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
span {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
span {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
.mobile-player-info-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
word-break: break-all;
|
||||
align-items: center;
|
||||
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
}
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
.subTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
word-break: break-all;
|
||||
|
||||
width: 100%;
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
}
|
||||
|
||||
justify-content: space-between;
|
||||
.mobile-player-info-subTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.likeButton {
|
||||
margin-right: 20px;
|
||||
}
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.artist {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.player-controls {
|
||||
.ant-btn {
|
||||
min-width: 40px !important;
|
||||
min-height: 40px !important;
|
||||
}
|
||||
.player-controls {
|
||||
.ant-btn {
|
||||
min-width: 40px !important;
|
||||
min-height: 40px !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
svg {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.playButton {
|
||||
min-width: 50px !important;
|
||||
min-height: 50px !important;
|
||||
.playButton {
|
||||
min-width: 50px !important;
|
||||
min-height: 50px !important;
|
||||
|
||||
svg {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
svg {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.player-seek_bar {
|
||||
.progress {
|
||||
.MuiSlider-root {
|
||||
.MuiSlider-rail {
|
||||
height: 7px;
|
||||
}
|
||||
.player-seek_bar {
|
||||
.progress {
|
||||
.MuiSlider-root {
|
||||
.MuiSlider-rail {
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.MuiSlider-track {
|
||||
height: 7px;
|
||||
}
|
||||
.MuiSlider-track {
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.MuiSlider-thumb {
|
||||
width: 5px;
|
||||
height: 13px;
|
||||
border-radius: 2px;
|
||||
.MuiSlider-thumb {
|
||||
width: 5px;
|
||||
height: 13px;
|
||||
border-radius: 2px;
|
||||
|
||||
background-color: var(--background-color-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extra_actions {
|
||||
padding: 0 30px;
|
||||
|
||||
.ant-btn {
|
||||
padding: 5px;
|
||||
|
||||
svg {
|
||||
height: 23px;
|
||||
min-width: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
background-color: var(--background-color-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user