fix(media): fix videos not playing

fixes mimetype
also adds other playable trailers, if they exist

src/components/media/Media.tsx

@@ -14,32 +14,41 @@ type Props = {
 const Media = ({ className, media }: Props) => {
   return (
     <div className={`${className} ${styles.media}`}>
-      {(media.trailer || !!media.videos.total) && (
+      {(media.trailers?.length || !!media.videos.total) && (
         <section className={styles.videos}>
           <h2 className='heading heading__secondary'>Videos</h2>
 
           <div className={styles.videos__container}>
-            {media.trailer && (
+            {media.trailers?.map(trailer => (
-              <div className={styles.trailer}>
+              <div className={styles.trailer} key={trailer.id}>
                 <video
-                  aria-label='trailer video'
+                  aria-label={trailer.caption ?? 'trailer video'}
                   controls
                   playsInline
-                  poster={getProxiedIMDbImgUrl(modifyIMDbImg(media.trailer.thumbnail))}
+                  poster={getProxiedIMDbImgUrl(modifyIMDbImg(trailer.thumbnail))}
                   className={styles.trailer__video}
                   preload='none'
+                  muted
                 >
-                  {media.trailer.urls.map(source => (
+                  {trailer.urls.map(source => (
                     <source
                       key={source.url}
-                      type={source.mimeType ?? undefined}
+                      type='video/mp4'
                       src={getProxiedIMDbImgUrl(source.url)}
+                      media={source.resolution !== 'SD' ? '(min-width: 450px)' : undefined}
                       data-res={source.resolution}
                     />
                   ))}
+
+                  <p>
+                    {trailer.caption}:{' '}
+                    <Link href={getProxiedIMDbImgUrl(trailer.urls[0]?.url)}>
+                      <a className='link'>link</a>
+                    </Link>
+                  </p>
                 </video>
               </div>
-            )}
+            ))}
 
             {!!media.videos.total &&
               media.videos.videos.map(video => (

src/interfaces/misc/rawName.ts

@@ -143,7 +143,7 @@ export default interface Name {
                   value: string;
                   language: string;
                 };
-                mimeType?: string;
+                videoMimeType?: string;
                 url: string;
               }>;
               recommendedTimedTextTrack?: {

src/utils/cleaners/name.ts

@@ -42,18 +42,18 @@ const cleanName = (rawData: RawName) => {
     },
     media: {
       ...(main.primaryVideos.edges.length && {
-        trailer: {
+        trailers: main.primaryVideos.edges.map(trailer => ({
-          id: main.primaryVideos.edges[0].node.id,
+          id: trailer.node.id,
-          isMature: main.primaryVideos.edges[0].node.isMature,
+          isMature: trailer.node.isMature,
-          thumbnail: main.primaryVideos.edges[0].node.thumbnail.url,
+          thumbnail: trailer.node.thumbnail.url,
-          runtime: main.primaryVideos.edges[0].node.runtime.value,
+          runtime: trailer.node.runtime.value,
-          caption: main.primaryVideos.edges[0].node.description?.value ?? null,
+          caption: trailer.node.description?.value ?? null,
-          urls: main.primaryVideos.edges[0].node.playbackURLs.map(url => ({
+          urls: trailer.node.playbackURLs.map(url => ({
-            resolution: url.displayName.value,
+            resolution: url.displayName.value as 'SD' | '480p',
-            mimeType: url.mimeType ?? null,
+            mimeType: url.videoMimeType ?? null,
             url: url.url,
           })),
-        },
+        })),
       }),
       images: {
         total: misc.images.total,

src/utils/cleaners/title.ts

@@ -81,18 +81,18 @@ const cleanTitle = (rawData: RawTitle) => {
     })),
     media: {
       ...(main.primaryVideos.edges.length && {
-        trailer: {
+        trailers: main.primaryVideos.edges.map(trailer => ({
-          id: main.primaryVideos.edges[0].node.id,
+          id: trailer.node.id,
-          isMature: main.primaryVideos.edges[0].node.isMature,
+          isMature: trailer.node.isMature,
-          thumbnail: main.primaryVideos.edges[0].node.thumbnail.url,
+          thumbnail: trailer.node.thumbnail.url,
-          runtime: main.primaryVideos.edges[0].node.runtime.value,
+          runtime: trailer.node.runtime.value,
-          caption: main.primaryVideos.edges[0].node.description?.value ?? null,
+          caption: trailer.node.description?.value ?? null,
-          urls: main.primaryVideos.edges[0].node.playbackURLs.map(url => ({
+          urls: trailer.node.playbackURLs.map(url => ({
-            resolution: url.displayName.value,
+            resolution: url.displayName.value as 'SD' | '480p',
             mimeType: url.videoMimeType ?? null,
             url: url.url,
           })),
-        },
+        })),
       }),
       images: {
         total: misc.titleMainImages.total,