watch: simple backend for video info

src/app/watch/Watch.tsx

@@ -2,6 +2,7 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "next/navigation";
+import { useMemo } from "react";
 
 import { useClient } from "@/hooks/useClient";
 
@@ -12,13 +13,16 @@ export const Watch: Component = () => {
 
 	const searchParams = useSearchParams();
 
-	const videoId = searchParams.get("v");
+	const videoId = searchParams.get("v") as string;
+
+	const videoIdIsInvalid = useMemo(() => videoId === null, [videoId]);
 
 	const { data, error } = useQuery({
 		queryKey: ["watch", videoId],
 		queryFn: () => {
-			return client.getStream(videoId ?? "");
-		}
+			return client.getStream(videoId);
+		},
+		enabled: !videoIdIsInvalid
 	});
 
 	console.log(data, error);

src/client/adapters/index.ts

@@ -1,7 +1,7 @@
 import { SearchResults } from "@/client/typings/search";
 import { SearchOptions } from "@/client/typings/search/options";
-import { Stream } from "@/client/typings/search/stream";
 import { Suggestions } from "@/client/typings/search/suggestions";
+import { Stream } from "@/client/typings/stream";
 import { Video } from "@/client/typings/video";
 
 export interface ConnectedAdapter {

src/client/adapters/invidious/transformer.ts

@@ -31,9 +31,7 @@ export default class Transformer {
 		return thumbnail?.url ?? null;
 	}
 
-	private static recommendedVideo(
-		data: InvidiousRecommendedVideo
-	): RecommendedVideo {
+	private static recommendedVideo(data: InvidiousRecommendedVideo): VideoItem {
 		const thumbnail = Transformer.findBestThumbnail(data.videoThumbnails);
 
 		if (thumbnail === null)
@@ -42,6 +40,8 @@ export default class Transformer {
 			);
 
 		return {
+			type: "video",
+			uploaded: new Date(),
 			author: { id: data.authorId, name: data.author },
 			duration: data.lengthSeconds * 1000,
 			live: data.liveNow,

src/client/adapters/piped/transformer.ts

@@ -82,7 +82,6 @@ export default class Transformer {
 			uploaded: new Date(data.uploaded),
 			thumbnail: data.thumbnail,
 			title: data.title,
-			description: "",
 			live: false,
 			author: {
 				id: channelId,

src/client/adapters/piped/typings/stream.ts

@@ -73,8 +73,8 @@ export const StreamModel = z.object({
 	uploaderAvatar: z.string().url(),
 	thumbnailUrl: z.string().url(),
 	hls: z.string().url(),
-	dash: z.null(),
-	lbryId: z.null(),
+	dash: z.string().url().nullable(),
+	lbryId: z.string().nullable(),
 	category: z.string(),
 	license: z.string(),
 	visibility: z.string(),

src/client/typings/video.ts

@@ -7,7 +7,7 @@ export interface Video {
 		avatar?: string;
 	};
 	thumbnail: string;
-	description: string;
+	description?: string;
 	/*
 		Duration in milliseconds.
 	*/

src/hooks/useClient.ts

@@ -7,8 +7,8 @@ export const useClient = (): Client => {
 	const [client] = useState(
 		() =>
 			new Client([
-				// { baseUrl: "https://invidious.fdn.fr/", type: ApiType.Invidious }
-				{ baseUrl: "https://pipedapi.kavin.rocks", type: ApiType.Piped }
+				{ baseUrl: "https://invidious.fdn.fr/", type: ApiType.Invidious }
+				// { baseUrl: "https://pipedapi.kavin.rocks", type: ApiType.Piped }
 			])
 	);