Seek time on messsage click

HolodexNet · Nov 5, 2023 · b0dc198 · b0dc198
1 parent 735db28
commit b0dc198
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -32,7 +32,11 @@ import { ErrorBoundary } from "react-error-boundary";
 import { Loading } from "../common/Loading";
 import ReactPlayer from "react-player";
 import { MiniPlayer } from "../player/MiniPlayer";
-import { currentVideoAtom, miniPlayerAtom } from "@/store/player";
+import {
+  currentVideoAtom,
+  miniPlayerAtom,
+  playerRefAtom,
+} from "@/store/player";
 
 export const VideoPortalContext = createContext<HtmlPortalNode>(
   createHtmlPortalNode(),
@@ -94,6 +98,7 @@ export function Frame() {
 }
 
 const VideoPortalContainer = React.memo(() => {
+  const setPlayerRef = useSetAtom(playerRefAtom);
   const portalNode = useContext(VideoPortalContext);
   const currentVideo = useAtomValue(currentVideoAtom);
 
@@ -104,6 +109,7 @@ const VideoPortalContainer = React.memo(() => {
   return (
     <InPortal node={portalNode}>
       <ReactPlayer
+        ref={setPlayerRef}
         // pass `key` to prevent flicker issue https://github.com/CookPete/react-player/issues/413#issuecomment-395404630
         key={currentVideo?.url}
         style={{

diff --git a/packages/react/src/components/tldex/TLChat.tsx b/packages/react/src/components/tldex/TLChat.tsx
@@ -4,6 +4,7 @@ import { cn, getChannelPhoto } from "@/lib/utils";
 import { Badge } from "@/shadcn/ui/badge";
 import { Button } from "@/shadcn/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
+import { playerRefAtom } from "@/store/player";
 import { tldexBlockedAtom, tldexStateAtom } from "@/store/tldex";
 import { useAtom, useAtomValue } from "jotai";
 import { DetailedHTMLProps, HTMLAttributes, forwardRef } from "react";
@@ -56,13 +57,17 @@ function TLChatMessage({
   is_moderator,
   channel_id,
 }: ParsedMessage) {
+  const playerRef = useAtomValue(playerRefAtom);
   const [blocked, setBlocked] = useAtom(tldexBlockedAtom);
   const isBlocked = blocked.includes(name);
 
   return (
-    <div className="flex flex-col p-1 px-2 hover:bg-base-4">
+    <div
+      className="flex flex-col p-1 px-2 hover:cursor-pointer hover:bg-base-4"
+      onClick={() => playerRef?.seekTo(video_offset, "seconds")}
+    >
       <Popover>
-        <PopoverTrigger>
+        <PopoverTrigger onClick={(e) => e.stopPropagation()}>
           <div
             className={cn("group flex items-center gap-2 text-base-11", {
               "text-primary": is_owner,

diff --git a/packages/react/src/store/player.ts b/packages/react/src/store/player.ts
@@ -1,10 +1,13 @@
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import ReactPlayer from "react-player";
 
 interface CurrentVideo extends Partial<VideoRef> {
   url?: string;
 }
 
+export const playerRefAtom = atom<ReactPlayer | null>(null);
+
 export const currentVideoAtom = atomWithStorage<CurrentVideo | null>(
   "currentvideo",
   null,