mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-29 15:16:05 +00: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 { 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 { isPaused } = usePlayerStore((s) => s.mediaPlaying);
@ -13,6 +13,7 @@ export function Pause(props: { iconSizeClass?: string }) {
return (
<VideoPlayerButton
className={props.className}
iconSizeClass={props.iconSizeClass}
onClick={toggle}
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 status = usePlayerStore((s) => s.status);
const { isMobile } = useIsMobile();
const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading);
return (
<Player.Container onLoad={props.onLoad} showingControls={showTargets}>
@ -38,10 +39,13 @@ export function PlayerPart(props: PlayerPartProps) {
<Player.CenterMobileControls
className="text-white"
show={showTouchTargets}
show={showTouchTargets && status === playerStatus.PLAYING}
>
<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.CenterMobileControls>