RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

support for live mode

Browse Source
This commit is contained in:
SrGooglo 2025-02-20 02:42:03 +00:00
parent 05428959ff
commit 37b920b5ab
1 changed files with 176 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
packages/app/src/pages/lyrics/components/controller/index.jsx
View File

@ -7,6 +7,7 @@ import useHideOnMouseStop from "@hooks/useHideOnMouseStop"
import { Icons } from "@components/Icons" import { Icons } from "@components/Icons"
import Controls from "@components/Player/Controls" import Controls from "@components/Player/Controls"
import LiveInfo from "@components/Player/LiveInfo"
import { usePlayerStateContext } from "@contexts/WithPlayerContext" import { usePlayerStateContext } from "@contexts/WithPlayerContext"
@ -15,7 +16,10 @@ function isOverflown(element) {
return false return false
} }
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; return (
element.scrollHeight > element.clientHeight ||
element.scrollWidth > element.clientWidth
)
} }
const PlayerController = React.forwardRef((props, ref) => { const PlayerController = React.forwardRef((props, ref) => {
@ -23,7 +27,10 @@ const PlayerController = React.forwardRef((props, ref) => {
const titleRef = React.useRef() const titleRef = React.useRef()
const [hide, onMouseEnter, onMouseLeave] = useHideOnMouseStop({ delay: 3000, hideCursor: true }) const [hide, onMouseEnter, onMouseLeave] = useHideOnMouseStop({
delay: 3000,
hideCursor: true,
})
const [titleIsOverflown, setTitleIsOverflown] = React.useState(false) const [titleIsOverflown, setTitleIsOverflown] = React.useState(false)
const [currentTime, setCurrentTime] = React.useState(0) const [currentTime, setCurrentTime] = React.useState(0)
@ -72,13 +79,11 @@ const PlayerController = React.forwardRef((props, ref) => {
const isStopped = playerState.playback_status === "stopped" const isStopped = playerState.playback_status === "stopped"
return <div return (
className={classnames( <div
"lyrics-player-controller-wrapper", className={classnames("lyrics-player-controller-wrapper", {
{
["hidden"]: props.lyrics?.video_source && hide, ["hidden"]: props.lyrics?.video_source && hide,
} })}
)}
onMouseEnter={onMouseEnter} onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave} onMouseLeave={onMouseLeave}
> >
@ -92,44 +97,51 @@ const PlayerController = React.forwardRef((props, ref) => {
"lyrics-player-controller-info-title-text", "lyrics-player-controller-info-title-text",
{ {
["overflown"]: titleIsOverflown, ["overflown"]: titleIsOverflown,
} },
)} )}
> >
{ {playerState.playback_status === "stopped" ||
playerState.playback_status === "stopped" ? "Nothing is playing" : <> (!playerState.track_manifest?.title &&
{playerState.track_manifest?.title ?? "Nothing is playing"} "Nothing is playing")}
</>
} {playerState.playback_status !== "stopped" &&
playerState.track_manifest?.title}
</h4> </h4>
} }
{ {titleIsOverflown && (
titleIsOverflown && <Marquee <Marquee
//gradient //gradient
//gradientColor={bgColor} //gradientColor={bgColor}
//gradientWidth={20} //gradientWidth={20}
play={!isStopped} play={!isStopped}
> >
<h4> <h4>
{ {isStopped ? (
isStopped ? "Nothing is playing"
"Nothing is playing" : ) : (
<> <>
{playerState.track_manifest?.title ?? "Untitled"} {playerState.track_manifest
?.title ?? "Untitled"}
</> </>
} )}
</h4> </h4>
</Marquee> </Marquee>
} )}
</div> </div>
<div className="lyrics-player-controller-info-details"> <div className="lyrics-player-controller-info-details">
<span>{playerState.track_manifest?.artistStr}</span> <span>{playerState.track_manifest?.artistStr}</span>
</div> </div>
{playerState.live && (
<LiveInfo radioId={playerState.radioId} />
)}
</div> </div>
<Controls /> <Controls streamMode={playerState.live} />
{!playerState.live && (
<div className="lyrics-player-controller-progress-wrapper"> <div className="lyrics-player-controller-progress-wrapper">
<div <div
className="lyrics-player-controller-progress" className="lyrics-player-controller-progress"
@ -137,63 +149,68 @@ const PlayerController = React.forwardRef((props, ref) => {
setDraggingTime(true) setDraggingTime(true)
}} }}
onMouseUp={(e) => { onMouseUp={(e) => {
const rect = e.currentTarget.getBoundingClientRect() const rect =
const seekTime = trackDuration * (e.clientX - rect.left) / rect.width e.currentTarget.getBoundingClientRect()
const seekTime =
(trackDuration * (e.clientX - rect.left)) /
rect.width
onDragEnd(seekTime) onDragEnd(seekTime)
}} }}
onMouseMove={(e) => { onMouseMove={(e) => {
const rect = e.currentTarget.getBoundingClientRect() const rect =
const atWidth = (e.clientX - rect.left) / rect.width * 100 e.currentTarget.getBoundingClientRect()
const atWidth =
((e.clientX - rect.left) / rect.width) * 100
setCurrentDragWidth(atWidth) setCurrentDragWidth(atWidth)
}} }}
> >
<div className="lyrics-player-controller-progress-bar" <div
className="lyrics-player-controller-progress-bar"
style={{ style={{
width: `${draggingTime ? currentDragWidth : ((currentTime / trackDuration) * 100)}%` width: `${draggingTime ? currentDragWidth : (currentTime / trackDuration) * 100}%`,
}} }}
/> />
</div> </div>
</div> </div>
)}
<div className="lyrics-player-controller-tags"> <div className="lyrics-player-controller-tags">
{ {playerState.track_manifest?.metadata.lossless && (
playerState.track_manifest?.metadata.lossless && <Tag <Tag
icon={<Icons.Lossless icon={
<Icons.Lossless
style={{ style={{
margin: 0, margin: 0,
}} }}
/>}
bordered={false}
/> />
} }
{
playerState.track_manifest?.explicit && <Tag
bordered={false} bordered={false}
> />
Explicit )}
</Tag> {playerState.track_manifest?.explicit && (
} <Tag bordered={false}>Explicit</Tag>
{ )}
props.lyrics?.sync_audio_at && <Tag {props.lyrics?.sync_audio_at && (
bordered={false} <Tag bordered={false} icon={<Icons.TbMovie />}>
icon={<Icons.TbMovie />}
>
Video Video
</Tag> </Tag>
} )}
{ {props.lyrics?.available_langs?.length > 1 && (
props.lyrics?.available_langs?.length > 1 && <Button <Button
icon={<Icons.MdTranslate />} icon={<Icons.MdTranslate />}
type={props.translationEnabled ? "primary" : "default"} type={
props.translationEnabled ? "primary" : "default"
}
onClick={() => props.toggleTranslationEnabled()} onClick={() => props.toggleTranslationEnabled()}
size="small" size="small"
/> />
} )}
</div> </div>
</div> </div>
</div> </div>
)
}) })
export default PlayerController export default PlayerController