add support for time seeks

src/app/interface/comment-card/index.tsx

@@ -3,6 +3,7 @@ import { CommentInfo } from "@/types"
 import { useEffect, useState } from "react"
 import { DefaultAvatar } from "../default-avatar"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import { CommentWithTimeSeeks } from "./time-seeker"
 
 export function CommentCard({
   comment,
@@ -34,7 +35,6 @@ export function CommentCard({
     }
   }
 
-
   return (
     <div className={cn(
       `flex flex-col w-full`,
@@ -77,14 +77,26 @@ export function CommentCard({
             <div className="text-xs font-medium text-zinc-100">@{comment?.userInfo?.userName}</div>
             <div className="text-xs font-medium text-neutral-400">{formatTimeAgo(comment.updatedAt)}</div>
           </div>
-          <p className={cn(
-            `text-sm font-normal`,
-            `shrink`,
-            `overflow-hidden break-words`,
-            isExpanded ? `` : `line-clamp-4`
-          )}>{
-           comment.message
-          }</p>
+          <CommentWithTimeSeeks
+            className={cn(
+              `text-sm font-normal`,
+              `shrink`,
+              `overflow-hidden break-words`,
+              isExpanded ? `` : `line-clamp-4`
+            )}
+            linkClassName="font-medium text-neutral-400 cursor-pointer hover:underline"
+            onSeek={(timeInSec) => {
+              try {
+                const videoElement: HTMLVideoElement | undefined = (document.getElementsByClassName("tuby-container")?.[0]?.children?.[0] as any)
+                if (videoElement) {
+                  videoElement.currentTime = timeInSec
+                }
+              } catch (err) {
+                // 
+              }
+            }}>{
+            comment.message
+          }</CommentWithTimeSeeks>
           {isLongContent && 
             <div className={cn(
             `flex`,

src/app/interface/comment-card/time-seeker.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+
+interface CommentWithTimeSeeksProps {
+  onSeek: (timeInSec: number) => void;
+  children: string;
+  className?: string;
+  linkClassName?: string;
+}
+
+export const CommentWithTimeSeeks: React.FC<CommentWithTimeSeeksProps> = ({ onSeek, children, className, linkClassName }) => {
+  // This function converts a time string like "HH:MM:SS", "MM:SS" or "SS" to seconds.
+  const convertTimeToSeconds = (timeString: string): number => {
+    const units = timeString.split(":").map(unit => parseInt(unit, 10));
+    const seconds = units.reverse().reduce((acc, unit, index) => acc + unit * Math.pow(60, index), 0);
+    return seconds;
+  };
+
+  // This function parses the text and replaces time seeks with clickable spans.
+  const renderWithTimeSeek = (text: string) => {
+    const timeSeekPattern = /\b(\d{1,2}:)?\d{1,2}:\d{2}\b/g;
+    const nodes = [];
+    let lastIndex = 0;
+
+    text.replace(timeSeekPattern, (match, ...args) => {
+      const index = args[args.length - 2]; // The second to last argument is the index of the match
+      nodes.push(
+        <React.Fragment key={lastIndex}>
+          {text.slice(lastIndex, index)}{/* Text before the match */}
+          <span
+            className={linkClassName}
+            onClick={() => onSeek(convertTimeToSeconds(match))}
+          >
+            {match}
+          </span>
+        </React.Fragment>
+      );
+      lastIndex = index + match.length; // Update lastIndex to end of the current match
+      return match; // return value is unused but needed for `replace` to work
+    });
+
+    // Append the remaining text after the last match (if any)
+    if (lastIndex < text.length) {
+      nodes.push(<React.Fragment key={lastIndex}>{text.slice(lastIndex)}</React.Fragment>);
+    }
+
+    return nodes;
+  };
+
+  return <p className={className}>{renderWithTimeSeek(children)}</p>;
+};

src/app/interface/video-player/index.tsx

@@ -5,17 +5,33 @@ import "react-tuby/css/main.css"
 
 import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
+import { MutableRefObject, useEffect, useRef } from "react"
+import { isValidNumber } from "@/app/server/actions/utils/isValidNumber"
 
 export function VideoPlayer({
   video,
   enableShortcuts = true,
-  className = ""
+  className = "",
+  // currentTime,
  }: {
   video?: VideoInfo
   enableShortcuts?: boolean
   className?: string
+  // currentTime?: number
 }) {
 
+  /*
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (!ref.current) { return }
+    if (!isValidNumber(currentTime)) { return }
+    
+    (ref.current as any).currentTime = currentTime 
+    // $(".tuby-container video").currentTime = 2
+  }, [currentTime])
+  */
+
   // TODO: keep the same form factor?
   if (!video) { return null }
 
@@ -33,6 +49,8 @@ export function VideoPlayer({
         )}>
         <Player
         
+          // playerRef={ref}
+
           src={[
             {
               quality: "Full HD",

src/app/views/public-video-view/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState, useTransition } from "react"
+import { useEffect, useRef, useState, useTransition } from "react"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 import { PiShareFatLight } from "react-icons/pi"
 import CopyToClipboard from "react-copy-to-clipboard"
@@ -37,9 +37,14 @@ export function PublicVideoView() {
   const [isCommenting, setCommenting] = useState(false)
   const [isFocusedOnInput, setFocusedOnInput] = useState(false)
 
+  // current time in the video
+  // note: this is used to *set* the current time, not to read it
+  // EDIT: you know what, let's do this the dirty way for now
+  // const [desiredCurrentTime, setDesiredCurrentTime] = useState()
+
   const currentUser = useCurrentUser()
 
- const [userThumbnail, setUserThumbnail] = useState("")
+  const [userThumbnail, setUserThumbnail] = useState("")
   
   useEffect(() => {
     setUserThumbnail(currentUser?.thumbnail || "")
@@ -52,6 +57,7 @@ export function PublicVideoView() {
     }
   }
 
+
   const video = useStore(s => s.publicVideo)
 
   const videoId = `${video?.id || ""}`
@@ -166,6 +172,10 @@ export function PublicVideoView() {
         <VideoPlayer
           video={video}
           enableShortcuts={!isFocusedOnInput}
+
+          // that could be, but let's do it the dirty way for now
+          // currentTime={desiredCurrentTime}
+
           className="mb-4"
         />