watch: added support for timestamp parameter

src/app/(youtube)/watch/Description.tsx

@@ -30,11 +30,12 @@ export const Description: Component<{ data: string }> = ({ data }) => {
 		[data]
 	);
 
-	const descriptionAlreadyShort = sanitizedDescription.length <= 200;
+	const descriptionAlreadyShort =
+		sanitizedDescription.length <= shortenedDescriptionLength;
 
 	const descriptionCut = useMemo(() => {
-		if (descriptionAlreadyShort) return sanitizedDescription;
-		else if (expandedDescription) return sanitizedDescription;
+		if (descriptionAlreadyShort || expandedDescription)
+			return sanitizedDescription;
 		else
 			return (
 				sanitizedDescription.substring(0, shortenedDescriptionLength) + "..."

src/app/(youtube)/watch/Player/index.tsx

@@ -30,7 +30,11 @@ import formatDuration from "@/utils/formatDuration";
 
 import { Component } from "@/typings/component";
 
-export const Player: Component<{ streams: Stream[] }> = ({ streams }) => {
+export const Player: Component<{
+	streams: Stream[];
+	initialDuration: number;
+	initialTimestamp?: number;
+}> = ({ streams, initialTimestamp, initialDuration }) => {
 	const stream = streams.find((stream) => stream.type === StreamType.Hls);
 
 	const playerRef = useRef<ReactPlayer>(null);
@@ -61,9 +65,9 @@ export const Player: Component<{ streams: Stream[] }> = ({ streams }) => {
 		];
 	}, []);
 
+	const [duration, setDuration] = useState(initialDuration);
 	const [progress, setProgress] = useState(0);
 	const [loaded, setLoaded] = useState(0);
-	const [duration, setDuration] = useState(0);
 	const [maximized, setMaximized] = useState(false);
 	const [volume, setVolume] = useState(40);
 	const [muted, setMuted] = useState(false);
@@ -154,6 +158,11 @@ export const Player: Component<{ streams: Stream[] }> = ({ streams }) => {
 		playerRef.current?.seekTo(userSetProgress);
 	}, [userSetProgress]);
 
+	useEffect(() => {
+		if (initialTimestamp && initialTimestamp <= duration)
+			setUserSetProgress(initialTimestamp / duration);
+	}, [initialTimestamp, duration]);
+
 	const updateMaximized = useCallback(() => {
 		setMaximized(screenfull.isFullscreen);
 	}, [setMaximized]);

src/app/(youtube)/watch/Watch.tsx

@@ -34,16 +34,33 @@ export const Watch: Component = () => {
 
 	const searchParams = useSearchParams();
 
-	const videoId = searchParams.get("v") as string;
+	const videoId = useMemo(() => {
+		const param = searchParams.get("v");
 
-	const videoIdIsInvalid = useMemo(() => videoId === null, [videoId]);
+		if (param === null) return;
+
+		return param;
+	}, [searchParams]);
+
+	const timestamp = useMemo(() => {
+		const param = searchParams.get("t");
+
+		if (param === null) return;
+
+		const time = parseInt(param);
+
+		if (isNaN(time)) return;
+
+		return time;
+	}, [searchParams]);
 
 	const { data, isLoading, error } = useQuery({
 		queryKey: ["watch", videoId],
 		queryFn: () => {
+			if (!videoId) return;
 			return client.getWatchable(videoId);
 		},
-		enabled: !videoIdIsInvalid
+		enabled: !!videoId
 	});
 
 	const {
@@ -54,9 +71,10 @@ export const Watch: Component = () => {
 	} = useQuery({
 		queryKey: ["comments", videoId],
 		queryFn: () => {
+			if (!videoId) return;
 			return client.getComments(videoId);
 		},
-		enabled: !videoIdIsInvalid
+		enabled: !!videoId
 	});
 
 	if (error) console.log(error);
@@ -66,7 +84,11 @@ export const Watch: Component = () => {
 			{isLoading && <LoadingPage />}
 			{data && !isLoading && (
 				<div className="flex flex-col gap-4">
-					<Player streams={data.streams} />
+					<Player
+						initialTimestamp={timestamp}
+						initialDuration={data.video.duration / 1000}
+						streams={data.streams}
+					/>
 					<div className="flex flex-col xl:flex-row gap-4">
 						<div className="flex flex-1 flex-col gap-4">
 							<div className="flex flex-col">