feat: adding optional support for auto playing and looping videos (#1…

…84758) * feat: adding options to support videos looping and auto playing Signed-off-by: Fawzi Abdulfattah <[email protected]> * chore: adding on mute to the videos auto play setting's description Signed-off-by: Fawzi Abdulfattah <[email protected]> --------- Signed-off-by: Fawzi Abdulfattah <[email protected]>
microsoft · Jun 21, 2023 · 46e83a2 · 46e83a2
1 parent 7c2d459
commit 46e83a2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 0 deletions.
diff --git a/extensions/media-preview/media/videoPreview.js b/extensions/media-preview/media/videoPreview.js
@@ -33,6 +33,9 @@
 	}
 	video.playsInline = true;
 	video.controls = true;
+	video.autoplay = settings.autoplay;
+	video.muted = settings.autoplay;
+	video.loop = settings.loop;
 
 	function onLoaded() {
 		if (hasLoadedMedia) {

diff --git a/extensions/media-preview/package.json b/extensions/media-preview/package.json
@@ -27,6 +27,22 @@
     }
   },
   "contributes": {
+    "configuration": {
+      "type": "object",
+      "title": "Media Previewer",
+      "properties": {
+        "previewer.videos.autoPlay": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "%videoPreviewerAutoPlay%"
+        },
+        "previewer.videos.loop": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "%videoPreviewerLoop%"
+        }
+      }
+    },
     "customEditors": [
       {
         "viewType": "imagePreview.previewEditor",

diff --git a/extensions/media-preview/package.nls.json b/extensions/media-preview/package.nls.json
@@ -4,6 +4,8 @@
 	"customEditor.audioPreview.displayName": "Audio Preview",
 	"customEditor.imagePreview.displayName": "Image Preview",
 	"customEditor.videoPreview.displayName": "Video Preview",
+	"videoPreviewerAutoPlay": "Start playing videos on mute automatically.",
+	"videoPreviewerLoop": "Loop videos over again automatically.",
 	"command.zoomIn": "Zoom in",
 	"command.zoomOut": "Zoom out",
 	"command.copyImage": "Copy"

diff --git a/extensions/media-preview/src/videoPreview.ts b/extensions/media-preview/src/videoPreview.ts
@@ -54,8 +54,11 @@ class VideoPreview extends MediaPreview {
 
 	protected async getWebviewContents(): Promise<string> {
 		const version = Date.now().toString();
+		const configurations = vscode.workspace.getConfiguration('previewer.videos');
 		const settings = {
 			src: await this.getResourcePath(this.webviewEditor, this.resource, version),
+			autoplay: configurations.get('autoPlay'),
+			loop: configurations.get('loop'),
 		};
 
 		const nonce = getNonce();