Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 05:31:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

hide pause when loading

Browse Source 
Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
This commit is contained in:
mrjvs 2023-11-30 20:05:49 +01:00
parent d7f36265bb
commit b1b604d322
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/player/atoms/Pause.tsx
View File

@ -2,7 +2,7 @@ import { Icons } from "@/components/Icon";
import { VideoPlayerButton } from "@/components/player/internals/Button"; import { VideoPlayerButton } from "@/components/player/internals/Button";
import { usePlayerStore } from "@/stores/player/store"; import { usePlayerStore } from "@/stores/player/store";
export function Pause(props: { iconSizeClass?: string }) { export function Pause(props: { iconSizeClass?: string; className?: string }) {
const display = usePlayerStore((s) => s.display); const display = usePlayerStore((s) => s.display);
const { isPaused } = usePlayerStore((s) => s.mediaPlaying); const { isPaused } = usePlayerStore((s) => s.mediaPlaying);
@ -13,6 +13,7 @@ export function Pause(props: { iconSizeClass?: string }) {
return ( return (
<VideoPlayerButton <VideoPlayerButton
className={props.className}
iconSizeClass={props.iconSizeClass} iconSizeClass={props.iconSizeClass}
onClick={toggle} onClick={toggle}
icon={isPaused ? Icons.PLAY : Icons.PAUSE} icon={isPaused ? Icons.PLAY : Icons.PAUSE}

8
src/pages/parts/player/PlayerPart.tsx
View File

@ -18,6 +18,7 @@ export function PlayerPart(props: PlayerPartProps) {
const { showTargets, showTouchTargets } = useShouldShowControls(); const { showTargets, showTouchTargets } = useShouldShowControls();
const status = usePlayerStore((s) => s.status); const status = usePlayerStore((s) => s.status);
const { isMobile } = useIsMobile(); const { isMobile } = useIsMobile();
const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading);
return ( return (
<Player.Container onLoad={props.onLoad} showingControls={showTargets}> <Player.Container onLoad={props.onLoad} showingControls={showTargets}>
@ -38,10 +39,13 @@ export function PlayerPart(props: PlayerPartProps) {
<Player.CenterMobileControls <Player.CenterMobileControls
className="text-white" className="text-white"
show={showTouchTargets} show={showTouchTargets && status === playerStatus.PLAYING}
> >
<Player.SkipBackward iconSizeClass="text-3xl" /> <Player.SkipBackward iconSizeClass="text-3xl" />
<Player.Pause iconSizeClass="text-5xl" /> <Player.Pause
iconSizeClass="text-5xl"
className={isLoading ? "opacity-0" : "opacity-100"}
/>
<Player.SkipForward iconSizeClass="text-3xl" /> <Player.SkipForward iconSizeClass="text-3xl" />
</Player.CenterMobileControls> </Player.CenterMobileControls>