Replace episodes in history instead of pushing them

front/packages/primitives/src/links.tsx

@@ -26,14 +26,24 @@ import { alpha } from "./themes";
 
 export const A = ({
 	href,
+	replace,
 	children,
 	...props
-}: TextProps & { href: string; children: ReactNode }) => {
+}: TextProps & { href: string; replace?: boolean; children: ReactNode }) => {
 	const { css, theme } = useYoshiki();
 
 	return (
 		<TextLink
 			href={href}
+			replace={replace as any}
+			experimental={
+				replace
+					? {
+						nativeBehavior: "stack-replace",
+						isNestedNavigator: false,
+					}
+					: undefined
+			}
 			textProps={css(
 				{
 					fontFamily: theme.font.normal,
@@ -72,11 +82,16 @@ export const PressableFeedback = forwardRef<View, PressableProps>(function _Feed
 
 export const Link = ({
 	href,
+	replace,
 	target,
 	children,
 	...props
-}: { href: string; target?: string } & PressableProps) => {
-	const linkProps = useLink({ href });
+}: { href: string; target?: string; replace?: boolean } & PressableProps) => {
+	const linkProps = useLink({
+		href,
+		replace,
+		experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
+	});
 	// @ts-ignore Missing hrefAttrs type definition.
 	linkProps.hrefAttrs = { ...linkProps.hrefAttrs, target };
 	return (

front/packages/primitives/src/skeleton.web.tsx

@@ -19,7 +19,6 @@
  */
 
 import { LinearGradient } from "expo-linear-gradient";
-import { useState } from "react";
 import { View, ViewProps } from "react-native";
 import { px, rem, useYoshiki, percent, em } from "yoshiki/native";
 import { hiddenIfNoJs } from "./utils/nojs";
@@ -53,8 +52,6 @@ export const Skeleton = ({
 	variant?: "text" | "header" | "round" | "custom" | "fill" | "filltext";
 }) => {
 	const { css, theme } = useYoshiki();
-	const [width, setWidth] = useState<number | undefined>(undefined);
-	const perc = (v: number) => (v / 100) * width!;
 
 	if (forcedShow === undefined && children && children !== true) return <>{children}</>;
 
@@ -101,7 +98,6 @@ export const Skeleton = ({
 				[...Array(lines)].map((_, i) => (
 					<View
 						key={`skeleton_${i}`}
-						onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
 						{...css(
 							[
 								{

front/packages/ui/src/player/components/left-buttons.tsx

@@ -53,6 +53,7 @@ export const LeftButtons = ({
 					icon={SkipPrevious}
 					as={Link}
 					href={previousSlug}
+					replace
 					{...tooltip(t("player.previous"), true)}
 					{...spacing}
 				/>
@@ -68,6 +69,7 @@ export const LeftButtons = ({
 					icon={SkipNext}
 					as={Link}
 					href={nextSlug}
+					replace
 					{...tooltip(t("player.next"), true)}
 					{...spacing}
 				/>

front/packages/ui/src/player/index.tsx

@@ -195,14 +195,20 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 			>
 				<Video
 					links={data?.link}
+					subtitles={data?.subtitles}
 					setError={setPlaybackError}
 					fonts={data?.fonts}
 					onEnd={() => {
 						if (!data) return;
-						if (data.isMovie) router.push(`/movie/${data.slug}`);
+						if (data.isMovie)
+							router.replace(`/movie/${data.slug}`, undefined, {
+								experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
+							});
 						else
-							router.push(
+							router.replace(
 								data.nextEpisode ? `/watch/${data.nextEpisode.slug}` : `/show/${data.showSlug}`,
+								undefined,
+								{ experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false } },
 							);
 					}}
 					{...css(StyleSheet.absoluteFillObject)}

front/packages/ui/src/player/state.tsx

@@ -76,11 +76,13 @@ export const subtitleAtom = atom<Track | null>(null);
 
 export const Video = memo(function _Video({
 	links,
+	subtitles,
 	setError,
 	fonts,
 	...props
 }: {
 	links?: WatchItem["link"];
+	subtitles?: WatchItem["subtitles"];
 	setError: (error: string | undefined) => void;
 	fonts?: Font[];
 } & Partial<VideoProps>) {
@@ -149,6 +151,12 @@ export const Video = memo(function _Video({
 				setDuration(info.duration);
 			}}
 			onPlayPause={setPlay}
+			textTracks={subtitles?.map(x => ({
+				type: "text/x-ssa" as any, //MimeTypes[x.codec],
+				uri: x.link!,
+				title: x.title!,
+				language: x.language!,
+			}))}
 			selectedTextTrack={
 				subtitle
 					? {

front/packages/ui/src/player/video.tsx

@@ -55,6 +55,9 @@ const Video = forwardRef<NativeVideo, VideoProps>(function _NativeVideo(
 	const video = useAtomValue(videoAtom);
 	const audio = useAtomValue(audioAtom);
 
+	const info = useAtomValue(infoAtom);
+	console.log(info);
+
 	useEffect(() => {
 		async function run() {
 			token.current = await getToken();
@@ -120,11 +123,8 @@ export const QualitiesMenu = (props: CustomMenu) => {
 				onSelect={() => setPlayMode(PlayMode.Direct)}
 			/>
 			<Menu.Item
-				label={
-					mode === PlayMode.Hls && video !== -1
-						? `${t("player.auto")} (${video}p)`
-						: t("player.auto")
-				}
+				// TODO: Display the currently selected quality (impossible with rn-video right now)
+				label={t("player.auto")}
 				selected={video === -1}
 				onSelect={() => {
 					setPlayMode(PlayMode.Hls);

transcoder/src/state.rs

@@ -87,6 +87,23 @@ impl Transcoder {
 			master.push_str(format!("URI=\"./audio/{}/index.m3u8\"\n", audio.index).as_str());
 		}
 
+		for subtitle in info.subtitles {
+			master.push_str("#EXT-X-MEDIA:TYPE=SUBTITLES,");
+			master.push_str("GROUP-ID=\"subtitles\",");
+			if let Some(language) = subtitle.language.clone() {
+				master.push_str(format!("LANGUAGE=\"{}\",", language).as_str());
+			}
+			if let Some(title) = subtitle.title {
+				master.push_str(format!("NAME=\"{}\",", title).as_str());
+			} else if let Some(language) = subtitle.language {
+				master.push_str(format!("NAME=\"{}\",", language).as_str());
+			} else {
+				master.push_str(format!("NAME=\"Subtitle {}\",", subtitle.index).as_str());
+			}
+			master.push_str("URI=\"https://kyoo.sdg.moe/api/subtitle/akudama-drive-s1e1.eng.subtitle\"\n");
+			// master.push_str(format!("URI=\"./subtitles/{}/index.m3u8\"\n", subtitle.index).as_str());
+		}
+
 		Some(master)
 	}