#497 - Support for movie media added

CHANGELOG.md

@@ -11,6 +11,7 @@
 - [#474](https://github.com/estruyf/vscode-front-matter/issues/474): Allow to define the file prefix on content types
 - [#484](https://github.com/estruyf/vscode-front-matter/issues/484): Support for overriding scripts per environment type
 - [#494](https://github.com/estruyf/vscode-front-matter/issues/494): Support for external image URLs in previews
+- [#497](https://github.com/estruyf/vscode-front-matter/issues/497): Support for movie media previews in the content dashboard
 
 ### ⚡️ Optimizations
 

src/commands/Dashboard.ts

@@ -200,6 +200,7 @@ export class Dashboard {
     const csp = [
       `default-src 'none';`,
       `img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline' https://*`,
+      `media-src ${`vscode-file://vscode-app`} ${webView.cspSource} 'self' 'unsafe-inline' https://*`,
       `script-src ${isProd ? `'nonce-${nonce}'` : `http://${localServerUrl} http://0.0.0.0:${localPort}`} 'unsafe-eval'`,
       `style-src ${webView.cspSource} 'self' 'unsafe-inline'`,
       `font-src ${webView.cspSource}`,

src/dashboardWebView/components/Media/Item.tsx

@@ -321,10 +321,14 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   }, [media, isImageFile, isVideoFile, isAudioFile]);
   
   const renderMedia = useMemo(() => {
-    if (isVideoFile || isAudioFile) {
+    if (isAudioFile) {
       return null;
     }
 
+    if (isVideoFile) {
+      return <video src={media.vsPath} className="mx-auto object-cover" controls muted />;
+    }
+
     if (isImageFile) {
       return <img src={media.vsPath} alt={basename(media.fsPath)} className="mx-auto object-cover" />;
     }