From a648f456946b34c5120dc87d6439fa0478a7aa97 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Thu, 25 May 2023 22:54:35 +0200 Subject: [PATCH 1/5] feat(player): add T query param for starting time --- src/hooks/useQueryParams.ts | 22 ++++++++++++++++++ .../ProgressListenerController.tsx | 23 ++++++++++++++++++- 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 src/hooks/useQueryParams.ts diff --git a/src/hooks/useQueryParams.ts b/src/hooks/useQueryParams.ts new file mode 100644 index 00000000..c10289a9 --- /dev/null +++ b/src/hooks/useQueryParams.ts @@ -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 = {}; + 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; +} diff --git a/src/video/components/controllers/ProgressListenerController.tsx b/src/video/components/controllers/ProgressListenerController.tsx index 78e27bc8..e3f7c3ac 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,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. From 5e0e223851fdfae5932026f5d9b1d25c7ac5c9fd Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Thu, 25 May 2023 22:57:00 +0200 Subject: [PATCH 2/5] style: make scrollbar style global --- src/setup/index.css | 16 ++++++++++++++++ .../components/popouts/PopoutProviderAction.tsx | 2 -- src/video/components/popouts/Popouts.css | 15 --------------- 3 files changed, 16 insertions(+), 17 deletions(-) delete mode 100644 src/video/components/popouts/Popouts.css 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/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 From 01b019365d8b9eba1a29c9dfd64707439d8b2acb Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Thu, 25 May 2023 23:01:42 +0200 Subject: [PATCH 3/5] Yeet log --- src/video/components/controllers/ProgressListenerController.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/video/components/controllers/ProgressListenerController.tsx b/src/video/components/controllers/ProgressListenerController.tsx index e3f7c3ac..257b44ac 100644 --- a/src/video/components/controllers/ProgressListenerController.tsx +++ b/src/video/components/controllers/ProgressListenerController.tsx @@ -71,7 +71,7 @@ export function ProgressListenerController(props: Props) { 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); From 525f9d0b74464e8e993571b1fcd4bf6c87a03d33 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Fri, 26 May 2023 00:38:51 +0200 Subject: [PATCH 4/5] chore(player): revert timeArr order for improved readability --- .../controllers/ProgressListenerController.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/video/components/controllers/ProgressListenerController.tsx b/src/video/components/controllers/ProgressListenerController.tsx index 257b44ac..68cf8fc3 100644 --- a/src/video/components/controllers/ProgressListenerController.tsx +++ b/src/video/components/controllers/ProgressListenerController.tsx @@ -62,15 +62,13 @@ export function ProgressListenerController(props: Props) { 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); + // Convert `t` param to time. Supports having only seconds (like `?t=192`), but also `3:30` or `1:30:02` - 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 - ); + 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; From 02135527c1e58dad76c4fcb75f3c50b8fe910a60 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Fri, 26 May 2023 23:04:11 +0200 Subject: [PATCH 5/5] Use URLSearchParams --- src/hooks/useQueryParams.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/hooks/useQueryParams.ts b/src/hooks/useQueryParams.ts index c10289a9..be8c3c86 100644 --- a/src/hooks/useQueryParams.ts +++ b/src/hooks/useQueryParams.ts @@ -6,14 +6,9 @@ export function useQueryParams() { const queryParams = useMemo(() => { // Basic absolutely-not-fool-proof URL query param parser - const obj: Record = {}; - 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; - } + const obj: Record = Object.fromEntries( + new URLSearchParams(loc.search).entries() + ); return obj; }, [loc]);