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,8 +50,10 @@ export const A = ({
 	);
 };
 
-export const PressableFeedback = forwardRef<View, PressableProps>(
-	function _Feedback({ children, ...props }, ref) {
+export const PressableFeedback = forwardRef<View, PressableProps>(function _Feedback(
+	{ children, ...props },
+	ref,
+) {
 	const theme = useTheme();
 
 	return (
@@ -66,15 +68,17 @@ export const PressableFeedback = forwardRef<View, PressableProps>(
 			{children}
 		</Pressable>
 	);
-	},
-);
+});
 
 export const Link = ({
 	href,
+	target,
 	children,
 	...props
-}: { href: string; } & PressableProps) => {
-	const linkProps = useLink({href});
+}: { href: string; target?: string } & PressableProps) => {
+	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"
 				],