feat(video): add video source media attribute

Author: igordanchenko

docs/plugins/video.md

@@ -26,13 +26,21 @@ HTML element.
         &#123;<br />
         &nbsp;&nbsp;src: string;<br />
         &nbsp;&nbsp;type: string;<br />
+        &nbsp;&nbsp;media?: string;<br />
         &#125;[]
       </td>
       <td>
         <p>an array of video files</p>
         <ul>
           <li>`src` - video source URL</li>
-          <li>`type` - video source type (e.g., <span class="font-mono">video/mp4</span>)</li>
+          <li>
+            `type` - video source type 
+            (e.g., <span class="font-mono">video/mp4</span>)
+          </li>
+          <li>
+            `media` - media query for the resource's intended media
+            (e.g., <span class="font-mono">(min-width: 800px)</span>)
+          </li>
         </ul>
       </td>
     </tr>

src/plugins/video/VideoSlide.tsx

@@ -133,8 +133,8 @@ export function VideoSlide({ slide, offset }: VideoSlideProps) {
                 publish(ACTIVE_SLIDE_COMPLETE);
               }}
             >
-              {sources.map(({ src, type }) => (
-                <source key={[src, type].join("|")} src={src} type={type} />
+              {sources.map(({ src, type, media }) => (
+                <source key={[src, type, media].filter(Boolean).join("|")} src={src} type={type} media={media} />
               ))}
             </video>
           )}

src/plugins/video/index.ts

@@ -1,4 +1,3 @@
-import { GenericSlide } from "../../index.js";
 import { Video } from "./Video.js";
 
 declare module "../../types.js" {
@@ -44,6 +43,8 @@ declare module "../../types.js" {
       src: string;
       /** video source type (e.g., `video/mp4`) */
       type: string;
+      /** media query for the resource's intended media (e.g., `(min-width: 800px)`) */
+      media?: string;
     }[];
   }