Add trailler button

front/packages/models/src/resources/movie.ts

@@ -39,6 +39,7 @@ export const MovieP = z.preprocess(
 		x.name = x.title;
 		if (x.aliases === null) x.aliases = [];
 		x.airDate = x.startAir;
+		x.trailer = x.images["3"];
 		return x;
 	},
 	ResourceP.merge(ImagesP).extend({

front/packages/models/src/resources/show.ts

@@ -41,6 +41,7 @@ export const ShowP = z.preprocess(
 		// Waiting for the API to be updaded
 		x.name = x.title;
 		if (x.aliases === null) x.aliases = [];
+		x.trailer = x.images["3"];
 		return x;
 	},
 	ResourceP.merge(ImagesP).extend({

front/packages/models/src/traits/images.ts

@@ -53,7 +53,7 @@ export const ImagesP = z.object({
 	 * will be null. If the kyoo's instance is not capable of handling this kind of image for the
 	 * specific resource, this field won't be present.
 	 */
-	trailer: z.string().transform(imageFn).optional().nullable(),
+	trailer: z.string().optional().nullable(),
 });
 
 /**

front/packages/primitives/src/links.tsx

@@ -50,31 +50,35 @@ export const A = ({
 	);
 };
 
-export const PressableFeedback = forwardRef<View, PressableProps>(
+export const PressableFeedback = forwardRef<View, PressableProps>(function _Feedback(
-	function _Feedback({ children, ...props }, ref) {
+	{ children, ...props },
-		const theme = useTheme();
+	ref,
+) {
+	const theme = useTheme();
 
-		return (
+	return (
-			<Pressable
+		<Pressable
-				ref={ref}
+			ref={ref}
-				// TODO: Enable ripple on tv. Waiting for https://github.com/react-native-tvos/react-native-tvos/issues/440
+			// TODO: Enable ripple on tv. Waiting for https://github.com/react-native-tvos/react-native-tvos/issues/440
-				{...(Platform.isTV
+			{...(Platform.isTV
-					? {}
+				? {}
-					: { android_ripple: { foreground: true, color: alpha(theme.contrast, 0.5) as any } })}
+				: { android_ripple: { foreground: true, color: alpha(theme.contrast, 0.5) as any } })}
-				{...props}
+			{...props}
-			>
+		>
-				{children}
+			{children}
-			</Pressable>
+		</Pressable>
-		);
+	);
-	},
+});
-);
 
 export const Link = ({
 	href,
+	target,
 	children,
 	...props
-}: { href: string; } & PressableProps) => {
+}: { href: string; target?: string } & PressableProps) => {
-	const linkProps = useLink({href});
+	const linkProps = useLink({ href });
+	// @ts-ignore Missing hrefAttrs type definition.
+	linkProps.hrefAttrs = { ...linkProps.hrefAttrs, target };
 	return (
 		<PressableFeedback {...linkProps} {...props}>
 			{children}

front/packages/ui/src/details/header.tsx

@@ -66,6 +66,7 @@ const TitleLine = ({
 	date,
 	poster,
 	studio,
+	trailerUrl,
 	...props
 }: {
 	isLoading: boolean;
@@ -74,6 +75,7 @@ const TitleLine = ({
 	date?: string;
 	poster?: string | null;
 	studio?: Studio | null;
+	trailerUrl?: string | null;
 } & Stylable) => {
 	const { css, theme } = useYoshiki();
 	const { t } = useTranslation();
@@ -156,7 +158,6 @@ const TitleLine = ({
 						</Skeleton>
 					)}
 					<View {...css({ flexDirection: "row" })}>
-						{/* @ts-ignore */}
 						<IconFab
 							icon={PlayArrow}
 							as={Link}
@@ -168,11 +169,14 @@ const TitleLine = ({
 							})}
 							{...tooltip(t("show.play"))}
 						/>
-						<IconButton
+						{trailerUrl && <IconButton
 							icon={Theaters}
+							as={Link}
+							href={trailerUrl}
+							target="_blank"
 							color={{ xs: theme.user.contrast, md: theme.colors.white }}
 							{...tooltip(t("show.trailer"))}
-						/>
+						/>}
 					</View>
 				</View>
 			</View>
@@ -330,6 +334,7 @@ export const Header = ({ query, slug }: { query: QueryIdentifier<Show | Movie>;
 							name={data?.name}
 							date={data ? getDisplayDate(data as any) : undefined}
 							poster={data?.poster}
+							trailerUrl={data?.trailer}
 							studio={data?.studio}
 							{...css({
 								marginTop: {

scanner/providers/implementations/themoviedatabase.py

@@ -155,7 +155,7 @@ class TheMovieDatabase(Provider):
 				logos=self.get_image(movie["images"]["logos"]),
 				thumbnails=self.get_image(movie["images"]["backdrops"]),
 				trailers=[
-					f"https://www.youtube.com/watch?v{x['key']}"
+					f"https://www.youtube.com/watch?v={x['key']}"
 					for x in movie["videos"]["results"]
 					if x["type"] == "Trailer" and x["site"] == "YouTube"
 				],
@@ -231,7 +231,7 @@ class TheMovieDatabase(Provider):
 				logos=self.get_image(show["images"]["logos"]),
 				thumbnails=self.get_image(show["images"]["backdrops"]),
 				trailers=[
-					f"https://www.youtube.com/watch?v{x['key']}"
+					f"https://www.youtube.com/watch?v={x['key']}"
 					for x in show["videos"]["results"]
 					if x["type"] == "Trailer" and x["site"] == "YouTube"
 				],