Merge pull request #306 from JipFr/dev

Add T query param for time and make scrollbar styles global

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<string, string> = Object.fromEntries(
+      new URLSearchParams(loc.search).entries()
+    );
+
+    return obj;
+  }, [loc]);
+
+  return queryParams;
+}

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;
 }

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<true | null>(null);
   const lastTime = useRef<number>(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.

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: <SettingsPopout />,

src/video/components/popouts/Popouts.css

@@ -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;
-}