cleanup

Author: ameer2468

apps/web/app/s/[videoId]/Share.tsx

@@ -307,7 +307,6 @@ export const Share = ({
 						<Toolbar
 							onOptimisticComment={handleOptimisticComment}
 							onCommentSuccess={handleCommentSuccess}
-							playerRef={playerRef}
 							data={data}
 							user={user}
 						/>
@@ -345,7 +344,6 @@ export const Share = ({
 						onCommentSuccess={handleCommentSuccess}
 						data={data}
 						user={user}
-						playerRef={playerRef}
 					/>
 				</div>
 			</div>

apps/web/app/s/[videoId]/_components/Sidebar.tsx

@@ -3,7 +3,7 @@ import type { comments as commentsSchema, videos } from "@cap/database/schema";
 import { classNames } from "@cap/utils";
 import type { Video } from "@cap/web-domain";
 import { AnimatePresence, motion } from "framer-motion";
-import { forwardRef, type RefObject, Suspense, useState } from "react";
+import { forwardRef, Suspense, useState } from "react";
 import { Activity } from "./tabs/Activity";
 import { Settings } from "./tabs/Settings";
 import { Summary } from "./tabs/Summary";
@@ -31,7 +31,6 @@ interface SidebarProps {
 	views: MaybePromise<number>;
 	onSeek?: (time: number) => void;
 	videoId: Video.VideoId;
-	playerRef: RefObject<HTMLVideoElement | null>;
 	aiData?: {
 		title?: string | null;
 		summary?: string | null;
@@ -76,7 +75,6 @@ export const Sidebar = forwardRef<{ scrollToBottom: () => void }, SidebarProps>(
 			handleCommentSuccess,
 			setOptimisticComments,
 			views,
-			playerRef,
 			onSeek,
 			videoId,
 			aiData,
@@ -135,7 +133,6 @@ export const Sidebar = forwardRef<{ scrollToBottom: () => void }, SidebarProps>(
 								isOwnerOrMember={isOwnerOrMember}
 								onSeek={onSeek}
 								videoId={videoId}
-								playerRef={playerRef}
 							/>
 						</Suspense>
 					);

apps/web/app/s/[videoId]/_components/Toolbar.tsx

@@ -2,13 +2,7 @@ import type { userSelectProps } from "@cap/database/auth/session";
 import type { videos } from "@cap/database/schema";
 import { Button } from "@cap/ui";
 import { AnimatePresence, motion } from "motion/react";
-import {
-	type RefObject,
-	startTransition,
-	useCallback,
-	useEffect,
-	useState,
-} from "react";
+import { startTransition, useCallback, useEffect, useState } from "react";
 import { newComment } from "@/actions/videos/new-comment";
 import type { CommentType } from "../Share";
 import { AuthOverlay } from "./AuthOverlay";
@@ -21,22 +15,20 @@ interface ToolbarProps {
 	user: typeof userSelectProps | null;
 	onOptimisticComment?: (comment: CommentType) => void;
 	onCommentSuccess?: (comment: CommentType) => void;
-	playerRef: RefObject<HTMLVideoElement | null>;
 }
 
 export const Toolbar = ({
 	data,
 	user,
 	onOptimisticComment,
 	onCommentSuccess,
-	playerRef,
 }: ToolbarProps) => {
 	const [commentBoxOpen, setCommentBoxOpen] = useState(false);
 	const [comment, setComment] = useState("");
 	const [showAuthOverlay, setShowAuthOverlay] = useState(false);
-	const videoElement = playerRef.current;
 
 	const handleEmojiClick = async (emoji: string) => {
+		const videoElement = document.querySelector("video") as HTMLVideoElement;
 		const currentTime = videoElement?.currentTime || 0;
 		const optimisticComment: CommentType = {
 			id: `temp-${Date.now()}`,
@@ -77,6 +69,7 @@ export const Toolbar = ({
 		if (comment.length === 0) {
 			return;
 		}
+		const videoElement = document.querySelector("video") as HTMLVideoElement;
 		const currentTime = videoElement?.currentTime || 0;
 		const optimisticComment: CommentType = {
 			id: `temp-${Date.now()}`,
@@ -147,6 +140,9 @@ export const Toolbar = ({
 					setShowAuthOverlay(true);
 					return;
 				}
+				const videoElement = document.querySelector(
+					"video",
+				) as HTMLVideoElement;
 				if (videoElement) {
 					videoElement.pause();
 				}
@@ -158,13 +154,14 @@ export const Toolbar = ({
 		return () => {
 			window.removeEventListener("keydown", handleKeyPress);
 		};
-	}, [commentBoxOpen, user, videoElement]);
+	}, [commentBoxOpen, user]);
 
 	const handleCommentClick = () => {
 		if (!user) {
 			setShowAuthOverlay(true);
 			return;
 		}
+		const videoElement = document.querySelector("video") as HTMLVideoElement;
 		if (videoElement) {
 			videoElement.pause();
 		}
@@ -219,9 +216,14 @@ export const Toolbar = ({
 										handleCommentSubmit();
 									}}
 								>
-									{videoElement && videoElement.currentTime > 0
-										? `Comment at ${videoElement.currentTime.toFixed(2)}`
-										: "Comment"}
+									{(() => {
+										const videoElement = document.querySelector(
+											"video",
+										) as HTMLVideoElement;
+										return videoElement && videoElement.currentTime > 0
+											? `Comment at ${videoElement.currentTime.toFixed(2)}`
+											: "Comment";
+									})()}
 								</MotionButton>
 								<MotionButton
 									variant="gray"

apps/web/app/s/[videoId]/_components/tabs/Activity/Comments.tsx

@@ -7,7 +7,6 @@ import {
 	type ComponentProps,
 	forwardRef,
 	type PropsWithChildren,
-	type RefObject,
 	startTransition,
 	useCallback,
 	useEffect,
@@ -34,15 +33,13 @@ export const Comments = Object.assign(
 			handleCommentSuccess: (comment: CommentType) => void;
 			onSeek?: (time: number) => void;
 			setShowAuthOverlay: (v: boolean) => void;
-			playerRef: RefObject<HTMLVideoElement | null>;
 		}
 	>((props, ref) => {
 		const {
 			optimisticComments,
 			setOptimisticComments,
 			setComments,
 			handleCommentSuccess,
-			playerRef,
 			onSeek,
 		} = props;
 		const commentParams = useSearchParams().get("comment");
@@ -78,7 +75,8 @@ export const Comments = Object.assign(
 
 		const handleNewComment = async (content: string) => {
 			// Get current video time from the video element
-			const currentTime = playerRef?.current?.currentTime || 0;
+			const videoElement = document.querySelector("video") as HTMLVideoElement;
+			const currentTime = videoElement?.currentTime || 0;
 
 			const optimisticComment: CommentType = {
 				id: `temp-${Date.now()}`,
@@ -114,7 +112,8 @@ export const Comments = Object.assign(
 
 		const handleReply = async (content: string) => {
 			if (!replyingTo) return;
-			const currentTime = playerRef?.current?.currentTime || 0;
+			const videoElement = document.querySelector("video") as HTMLVideoElement;
+			const currentTime = videoElement?.currentTime || 0;
 
 			const parentComment = optimisticComments.find((c) => c.id === replyingTo);
 			const actualParentId = parentComment?.parentCommentId

apps/web/app/s/[videoId]/_components/tabs/Activity/index.tsx

@@ -27,7 +27,6 @@ interface ActivityProps {
 	optimisticComments: CommentType[];
 	setOptimisticComments: (newComment: CommentType) => void;
 	isOwnerOrMember: boolean;
-	playerRef: RefObject<HTMLVideoElement | null>;
 }
 
 export const Activity = Object.assign(
@@ -37,7 +36,6 @@ export const Activity = Object.assign(
 				user,
 				videoId,
 				isOwnerOrMember,
-				playerRef,
 				comments,
 				handleCommentSuccess,
 				optimisticComments,
@@ -73,7 +71,6 @@ export const Activity = Object.assign(
 							videoId={videoId}
 							setShowAuthOverlay={setShowAuthOverlay}
 							onSeek={props.onSeek}
-							playerRef={playerRef}
 						/>
 					)}
 				</Activity.Shell>