Add built-in video preview (microsoft#159623)

Fixes microsoft#159106

Also hooks up our service worker to support seeking in local video resources. This requires handling range requests properly

Author: mjbvz

extensions/image-preview/media/audioPreview.js

@@ -30,30 +30,38 @@
 	container.className = 'audio-container';
 	document.body.appendChild(container);
 
-	const audio = new Audio(settings.src);
+	const audio = new Audio(settings.src === null ? undefined : settings.src);
 	audio.controls = true;
 
-	audio.addEventListener('error', e => {
+	function onLoaded() {
 		if (hasLoadedMedia) {
 			return;
 		}
-
 		hasLoadedMedia = true;
-		document.body.classList.add('error');
+
 		document.body.classList.remove('loading');
-	});
+		document.body.classList.add('ready');
+		container.append(audio);
+	}
 
-	audio.addEventListener('canplaythrough', () => {
+	audio.addEventListener('error', e => {
 		if (hasLoadedMedia) {
 			return;
 		}
-		hasLoadedMedia = true;
 
+		hasLoadedMedia = true;
+		document.body.classList.add('error');
 		document.body.classList.remove('loading');
-		document.body.classList.add('ready');
-		container.append(audio);
 	});
 
+	if (settings.src === null) {
+		onLoaded();
+	} else {
+		audio.addEventListener('canplaythrough', () => {
+			onLoaded();
+		});
+	}
+
 	document.querySelector('.open-file-link').addEventListener('click', () => {
 		vscode.postMessage({
 			type: 'reopen-as-text',

extensions/image-preview/media/videoPreview.css

@@ -0,0 +1,60 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+html, body {
+	width: 100%;
+	height: 100%;
+	text-align: center;
+}
+
+body {
+	padding: 5px 10px;
+	box-sizing: border-box;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.video-container {
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.container.loading,
+.container.error {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.loading-indicator {
+	width: 30px;
+	height: 30px;
+	background-image: url('./loading.svg');
+	background-size: cover;
+}
+
+.loading-indicator,
+.loading-error {
+	display: none;
+}
+
+.loading .loading-indicator,
+.error .loading-error {
+	display: block;
+}
+
+.loading-error {
+	margin: 1em;
+}
+
+.vscode-dark .loading-indicator {
+	background-image: url('./loading-dark.svg');
+}
+
+.vscode-high-contrast .loading-indicator {
+	background-image: url('./loading-hc.svg');
+}

extensions/image-preview/media/videoPreview.js

@@ -0,0 +1,73 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+// @ts-check
+"use strict";
+
+(function () {
+	const vscode = acquireVsCodeApi();
+
+	function getSettings() {
+		const element = document.getElementById('settings');
+		if (element) {
+			const data = element.getAttribute('data-settings');
+			if (data) {
+				return JSON.parse(data);
+			}
+		}
+
+		throw new Error(`Could not load settings`);
+	}
+
+	const settings = getSettings();
+
+	// State
+	let hasLoadedMedia = false;
+
+	// Elements
+	const container = document.createElement('div');
+	container.className = 'video-container';
+	document.body.appendChild(container);
+
+	const video = document.createElement('video');
+	if (settings.src !== null) {
+		video.src = settings.src;
+	}
+	video.controls = true;
+
+	function onLoaded() {
+		if (hasLoadedMedia) {
+			return;
+		}
+		hasLoadedMedia = true;
+
+		document.body.classList.remove('loading');
+		document.body.classList.add('ready');
+		container.append(video);
+	}
+
+	video.addEventListener('error', e => {
+		if (hasLoadedMedia) {
+			return;
+		}
+
+		hasLoadedMedia = true;
+		document.body.classList.add('error');
+		document.body.classList.remove('loading');
+	});
+
+	if (settings.src === null) {
+		onLoaded();
+	} else {
+		video.addEventListener('canplaythrough', () => {
+			onLoaded();
+		});
+	}
+
+	document.querySelector('.open-file-link').addEventListener('click', () => {
+		vscode.postMessage({
+			type: 'reopen-as-text',
+		});
+	});
+}());

extensions/image-preview/package.json

@@ -23,7 +23,8 @@
     "onCustomEditor:imagePreview.previewEditor",
     "onCommand:imagePreview.zoomIn",
     "onCommand:imagePreview.zoomOut",
-    "onCustomEditor:vscode.mediaPreview.audioView"
+    "onCustomEditor:vscode.audioPreview",
+    "onCustomEditor:vscode.videoPreview"
   ],
   "capabilities": {
     "virtualWorkspaces": true,
@@ -35,7 +36,7 @@
     "customEditors": [
       {
         "viewType": "imagePreview.previewEditor",
-        "displayName": "%customEditors.displayName%",
+        "displayName": "%customEditor.imagePreview.displayName%",
         "priority": "builtin",
         "selector": [
           {
@@ -44,14 +45,24 @@
         ]
       },
       {
-        "viewType": "vscode.mediaPreview.audioView",
-        "displayName": "%customEditors.displayName%",
+        "viewType": "vscode.audioPreview",
+        "displayName": "%customEditor.audioPreview.displayName%",
         "priority": "builtin",
         "selector": [
           {
             "filenamePattern": "*.{mp3,wav,opus,aac}"
           }
         ]
+      },
+      {
+        "viewType": "vscode.videoPreview",
+        "displayName": "%customEditor.videoPreview.displayName%",
+        "priority": "builtin",
+        "selector": [
+          {
+            "filenamePattern": "*.{mp4}"
+          }
+        ]
       }
     ],
     "commands": [

extensions/image-preview/package.nls.json

@@ -1,7 +1,9 @@
 {
 	"displayName": "Image Preview",
 	"description": "Provides VS Code's built-in image preview",
-	"customEditors.displayName": "Image Preview",
+	"customEditor.audioPreview.displayName": "Audio Preview",
+	"customEditor.imagePreview.displayName": "Image Preview",
+	"customEditor.videoPreview.displayName": "Video Preview",
 	"command.zoomIn": "Zoom in",
 	"command.zoomOut": "Zoom out"
 }

extensions/image-preview/src/audioPreview.ts

@@ -13,7 +13,7 @@ const localize = nls.loadMessageBundle();
 
 class AudioPreviewProvider implements vscode.CustomReadonlyEditorProvider {
 
-	public static readonly viewType = 'vscode.mediaPreview.audioView';
+	public static readonly viewType = 'vscode.audioPreview';
 
 	constructor(
 		private readonly extensionRoot: vscode.Uri,
@@ -32,8 +32,6 @@ class AudioPreviewProvider implements vscode.CustomReadonlyEditorProvider {
 
 class AudioPreview extends MediaPreview {
 
-	private readonly emptyAudioDataUri = 'data:audio/wav;base64,';
-
 	constructor(
 		private readonly extensionRoot: vscode.Uri,
 		resource: vscode.Uri,
@@ -92,11 +90,12 @@ class AudioPreview extends MediaPreview {
 </html>`;
 	}
 
-	private async getResourcePath(webviewEditor: vscode.WebviewPanel, resource: vscode.Uri, version: string): Promise<string> {
+	private async getResourcePath(webviewEditor: vscode.WebviewPanel, resource: vscode.Uri, version: string): Promise<string | null> {
 		if (resource.scheme === 'git') {
 			const stat = await vscode.workspace.fs.stat(resource);
 			if (stat.size === 0) {
-				return this.emptyAudioDataUri;
+				// The file is stored on git lfs
+				return null;
 			}
 		}
 

extensions/image-preview/src/extension.ts

@@ -4,14 +4,16 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as vscode from 'vscode';
+import { registerAudioPreviewSupport } from './audioPreview';
 import { BinarySizeStatusBarEntry } from './binarySizeStatusBarEntry';
 import { registerImagePreviewSupport } from './imagePreview';
-import { registerAudioPreviewSupport } from './audioPreview';
+import { registerVideoPreviewSupport } from './videoPreview';
 
 export function activate(context: vscode.ExtensionContext) {
 	const binarySizeStatusBarEntry = new BinarySizeStatusBarEntry();
 	context.subscriptions.push(binarySizeStatusBarEntry);
 
 	context.subscriptions.push(registerImagePreviewSupport(context, binarySizeStatusBarEntry));
 	context.subscriptions.push(registerAudioPreviewSupport(context, binarySizeStatusBarEntry));
+	context.subscriptions.push(registerVideoPreviewSupport(context, binarySizeStatusBarEntry));
 }