feat(player): add T query param for starting time

This commit is contained in:
Jip Fr 2023-05-25 22:54:35 +02:00
parent 766dc63bfa
commit a648f45694
2 changed files with 44 additions and 1 deletions

View File

@ -0,0 +1,22 @@
import { useMemo } from "react";
import { useLocation } from "react-router-dom";
export function useQueryParams() {
const loc = useLocation();
const queryParams = useMemo(() => {
// Basic absolutely-not-fool-proof URL query param parser
const obj: Record<string, string | number> = {};
for (const [key, value] of loc.search
.slice(1)
.split("&")
.map((e) => e.split("="))) {
const valueAsNum = Number(value);
obj[key] = Number.isNaN(valueAsNum) ? value : valueAsNum;
}
return obj;
}, [loc]);
return queryParams;
}

View File

@ -1,6 +1,7 @@
import throttle from "lodash.throttle";
import { useEffect, useMemo, useRef } from "react";
import { useQueryParams } from "@/hooks/useQueryParams";
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { useControls } from "@/video/state/logic/controls";
import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
@ -20,6 +21,7 @@ export function ProgressListenerController(props: Props) {
const misc = useMisc(descriptor);
const didInitialize = useRef<true | null>(null);
const lastTime = useRef<number>(props.startAt ?? 0);
const queryParams = useQueryParams();
// time updates (throttled)
const updateTime = useMemo(
@ -56,9 +58,28 @@ export function ProgressListenerController(props: Props) {
useEffect(() => {
if (lastStateProviderId.current === stateProviderId) return;
if (mediaPlaying.isFirstLoading) return;
lastStateProviderId.current = stateProviderId;
if ((queryParams.t ?? null) !== null) {
// Convert `t` param to time. Supports only seconds, but also `3:30` or `1:30:02`
const timeArr = queryParams.t.toString().split(":").map(Number);
const hours = timeArr[timeArr.length - 3] ?? 0;
const minutes = Math.min(timeArr[timeArr.length - 2] ?? 0, 59);
const seconds = Math.min(
timeArr[timeArr.length - 1] ?? 0,
minutes > 0 ? 59 : Infinity
);
console.log(hours, minutes, seconds, 123);
const timeInSeconds = hours * 60 * 60 + minutes * 60 + seconds;
controls.setTime(timeInSeconds);
return;
}
controls.setTime(lastTime.current);
}, [controls, mediaPlaying, stateProviderId]);
}, [controls, mediaPlaying, stateProviderId, queryParams]);
useEffect(() => {
// if it initialized, but media starts loading for the first time again.