feat: adding optional support for auto playing and looping videos (microsoft#184758)

* 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]>

Author: iifawzi

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) {

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",

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"

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();