fix popout math and fix seeking not seeking

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
Co-authored-by: William Oldham <wegg7250@gmail.com>
This commit is contained in:
Jelle van Snik 2023-02-07 23:20:00 +01:00
parent 403142783c
commit 0105c4f6b2
5 changed files with 29 additions and 18 deletions

View File

@ -9,6 +9,7 @@ interface BackdropActionProps {
onBackdropChange?: (showing: boolean) => void;
}
// TODO tap on mobile should remove backdrop instead of pausing
export function BackdropAction(props: BackdropActionProps) {
const descriptor = useVideoPlayerDescriptor();
const controls = useControls(descriptor);

View File

@ -3,6 +3,7 @@ import {
makePercentageString,
useProgressBar,
} from "@/hooks/useProgressBar";
import { getPlayerState } from "@/video/state/cache";
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { useControls } from "@/video/state/logic/controls";
import { useProgress } from "@/video/state/logic/progress";
@ -34,9 +35,12 @@ export function ProgressAction() {
useEffect(() => {
if (dragging) {
controls.setDraggingTime(videoTime.duration * (dragPercentage / 100));
const state = getPlayerState(descriptor);
controls.setDraggingTime(
state.progress.duration * (dragPercentage / 100)
);
}
}, [videoTime, dragging, dragPercentage, controls]);
}, [descriptor, dragging, dragPercentage, controls]);
let watchProgress = makePercentageString(
makePercentage((videoTime.time / videoTime.duration) * 100)

View File

@ -4,7 +4,7 @@ import { EpisodeSelectionPopout } from "@/video/components/popouts/EpisodeSelect
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { useControls } from "@/video/state/logic/controls";
import { useInterface } from "@/video/state/logic/interface";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import "./Popouts.css";
@ -20,8 +20,9 @@ function ShowPopout(props: { popoutId: string | null }) {
return null;
}
// TODO improve anti offscreen math
// TODO bug: first load ref is null
export function PopoutProviderAction() {
const ref = useRef<HTMLDivElement>(null);
const descriptor = useVideoPlayerDescriptor();
const videoInterface = useInterface(descriptor);
const controls = useControls(descriptor);
@ -32,19 +33,23 @@ export function PopoutProviderAction() {
}, [controls]);
const distanceFromRight = useMemo(() => {
return videoInterface.popoutBounds
? `${Math.max(
if (!videoInterface.popoutBounds) return 30;
const buttonCenter =
videoInterface.popoutBounds.left + videoInterface.popoutBounds.width / 2;
return Math.max(
window.innerWidth -
videoInterface.popoutBounds.right -
videoInterface.popoutBounds.width / 2,
buttonCenter -
(ref.current?.getBoundingClientRect().width ?? 0) / 2,
30
)}px`
: "30px";
);
}, [videoInterface.popoutBounds]);
const distanceFromBottom = useMemo(() => {
return videoInterface.popoutBounds
? `${videoInterface.popoutBounds.height + 30}px`
: "30px";
? videoInterface.popoutBounds.height + 30
: 30;
}, [videoInterface.popoutBounds]);
return (
@ -56,10 +61,11 @@ export function PopoutProviderAction() {
<div className="popout-wrapper pointer-events-auto absolute inset-0">
<div onClick={handleClick} className="absolute inset-0" />
<div
ref={ref}
className="absolute z-10 grid h-[500px] w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200"
style={{
right: distanceFromRight,
bottom: distanceFromBottom,
right: `${distanceFromRight}px`,
bottom: `${distanceFromBottom}px`,
}}
>
<ShowPopout popoutId={videoInterface.popout} />

View File

@ -25,6 +25,7 @@ function initPlayer(): VideoPlayerState {
time: 0,
duration: 0,
buffered: 0,
draggingTime: 0,
},
meta: null,

View File

@ -99,8 +99,7 @@ export function createVideoStateProvider(
},
setSeeking(active) {
state.mediaPlaying.isSeeking = active;
updateInterface(descriptor, state);
// TODO is seeking is bugged when buffering (recursive seeking as well)
updateMediaPlaying(descriptor, state);
// if it was playing when starting to seek, play again
if (!active) {