diff --git a/src/hooks/useQueryParams.ts b/src/hooks/useQueryParams.ts new file mode 100644 index 00000000..be8c3c86 --- /dev/null +++ b/src/hooks/useQueryParams.ts @@ -0,0 +1,17 @@ +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 = Object.fromEntries( + new URLSearchParams(loc.search).entries() + ); + + return obj; + }, [loc]); + + return queryParams; +} diff --git a/src/setup/index.css b/src/setup/index.css index af81851d..c17b8258 100644 --- a/src/setup/index.css +++ b/src/setup/index.css @@ -178,4 +178,20 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower { background: var(--slider-progress-background); border: none; border-right-width: 0; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: theme("colors.denim-500"); + border: 5px solid transparent; + border-left: 0; + background-clip: content-box; +} + +::-webkit-scrollbar { + /* For some reason the styles don't get applied without the width */ + width: 13px; } \ No newline at end of file diff --git a/src/video/components/controllers/ProgressListenerController.tsx b/src/video/components/controllers/ProgressListenerController.tsx index 78e27bc8..68cf8fc3 100644 --- a/src/video/components/controllers/ProgressListenerController.tsx +++ b/src/video/components/controllers/ProgressListenerController.tsx @@ -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(null); const lastTime = useRef(props.startAt ?? 0); + const queryParams = useQueryParams(); // time updates (throttled) const updateTime = useMemo( @@ -56,9 +58,26 @@ 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 having only seconds (like `?t=192`), but also `3:30` or `1:30:02` + + const timeArr = queryParams.t.toString().split(":").map(Number).reverse(); // This is an array of [seconds, ?minutes, ?hours] as ints. + + const hours = timeArr[2] ?? 0; + const minutes = Math.min(timeArr[1] ?? 0, 59); + const seconds = Math.min(timeArr[0] ?? 0, minutes > 0 ? 59 : Infinity); + + 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. diff --git a/src/video/components/popouts/PopoutProviderAction.tsx b/src/video/components/popouts/PopoutProviderAction.tsx index 5882dc7f..a29a4e09 100644 --- a/src/video/components/popouts/PopoutProviderAction.tsx +++ b/src/video/components/popouts/PopoutProviderAction.tsx @@ -9,8 +9,6 @@ import { useVideoPlayerDescriptor } from "@/video/state/hooks"; import { useControls } from "@/video/state/logic/controls"; import { useInterface } from "@/video/state/logic/interface"; -import "./Popouts.css"; - function ShowPopout(props: { popoutId: string | null; onClose: () => void }) { const popoutMap = { settings: , diff --git a/src/video/components/popouts/Popouts.css b/src/video/components/popouts/Popouts.css deleted file mode 100644 index 5f8cfd89..00000000 --- a/src/video/components/popouts/Popouts.css +++ /dev/null @@ -1,15 +0,0 @@ -.popout-wrapper ::-webkit-scrollbar-track { - background-color: transparent; -} - -.popout-wrapper ::-webkit-scrollbar-thumb { - background-color: theme("colors.denim-500"); - border: 5px solid transparent; - border-left: 0; - background-clip: content-box; -} - -.popout-wrapper ::-webkit-scrollbar { - /* For some reason the styles don't get applied without the width */ - width: 13px; -} \ No newline at end of file