Add liks in the API for videos, fonts and subtitle

front/src/models/resources/watch-item.ts

@@ -20,7 +20,7 @@
 
 import { z } from "zod";
 import { zdate } from "~/utils/zod";
-import { ResourceP, ImagesP } from "../traits";
+import { ResourceP, ImagesP, imageFn } from "../traits";
 import { EpisodeP } from "./episode";
 
 /**
@@ -59,6 +59,10 @@ export const TrackP = ResourceP.extend({
 	 * A user-friendly name for this track. It does not include the track type.
 	 */
 	displayName: z.string(),
+	/*
+	 * The url of this track (only if this is a subtitle)..
+	 */
+	link: z.string().transform(imageFn).nullable(),
 });
 export type Track = z.infer<typeof TrackP>;
 
@@ -78,7 +82,7 @@ export const FontP = z.object({
 	/*
 	 * The url of the font.
 	 */
-	link: z.string(),
+	link: z.string().transform(imageFn),
 });
 export type Font = z.infer<typeof FontP>;
 
@@ -105,13 +109,6 @@ const WatchMovieP = z.preprocess(
 		if (!x) return x;
 
 		x.name = x.title;
-		x.link = {
-			direct: `/api/video/${x.slug}`,
-		};
-		x.fonts = x.fonts?.map((y: Font) => {
-			y.link = `/api/watch/${x.slug}/font/${y.slug}.${y.format}`;
-			return y;
-		})
 		return x;
 	},
 	ImagesP.extend({
@@ -155,7 +152,8 @@ const WatchMovieP = z.preprocess(
 		 * The links to the videos of this watch item.
 		 */
 		link: z.object({
-			direct: z.string(),
+			direct: z.string().transform(imageFn),
+			transmux: z.string().transform(imageFn),
 		}),
 	}),
 );

front/src/models/traits/images.ts

@@ -20,7 +20,7 @@
 
 import { z } from "zod";
 
-const imageFn = (url: string) => (url.startsWith("/api") ? url : `/api${url}`);
+export const imageFn = (url: string) => (url.startsWith("/api") ? url : `/api${url}`);
 
 export const ImagesP = z.object({
 	/**

front/src/player/state.tsx

@@ -21,7 +21,7 @@
 import { BoxProps } from "@mui/material";
 import { atom, useSetAtom } from "jotai";
 import { useRouter } from "next/router";
-import { RefObject, useCallback, useEffect, useRef, useState } from "react";
+import { RefObject, useEffect, useRef } from "react";
 import { Font, Track } from "~/models/resources/watch-item";
 import { bakedAtom } from "~/utils/jotai-utils";
 // @ts-ignore
@@ -169,7 +169,7 @@ export const [_subtitleAtom, subtitleAtom] = bakedAtom<Track | null, { track: Tr
 			track.kind = "subtitles";
 			track.label = value.track.displayName;
 			if (value.track.language) track.srclang = value.track.language;
-			track.src = `subtitle/${value.track.slug}.vtt`;
+			track.src = value.track.link!;
 			track.className = "subtitle_container";
 			track.default = true;
 			track.onload = () => {
@@ -184,7 +184,7 @@ export const [_subtitleAtom, subtitleAtom] = bakedAtom<Track | null, { track: Tr
 				suboctoAtom,
 				new SubtitleOctopus({
 					video: player.current,
-					subUrl: `/api/subtitle/${value.track.slug}`,
+					subUrl: value.track.link!,
 					workerUrl: "/_next/static/chunks/subtitles-octopus-worker.js",
 					legacyWorkerUrl: "/_next/static/chunks/subtitles-octopus-worker-legacy.js",
 					fonts: value.fonts?.map((x) => x.link),