From bf4b66564cfd8e5194be5274b767eec0b521bc98 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 30 Jan 2023 10:19:05 +0100
Subject: [PATCH] #497 - Support for movie media added

---
 CHANGELOG.md                                   | 1 +
 src/commands/Dashboard.ts                      | 1 +
 src/dashboardWebView/components/Media/Item.tsx | 6 +++++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8859ffaf..4aa454c4 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts
index e130d6e8..9894c9cd 100644
--- a/src/commands/Dashboard.ts
+++ b/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}`,
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index 6435b82b..3ade9e88 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/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" />;
     }