fix: Remove video play event telemetry and update video element attributes for autoplay and layout handling (microsoft#239266)

bhavyaus · web-flow · commit bc75335dd88c · 2025-01-30T23:49:52.000+01:00
diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts
@@ -736,17 +736,6 @@ export class GettingStartedPage extends EditorPane {
 					this.webview.setHtml(body);
 				}
 			}));
-
-			this.stepDisposables.add(this.webview.onMessage(async e => {
-				const message: string = e.message as string;
-				if (message === 'playVideo') {
-					this.telemetryService.publicLog2<GettingStartedActionEvent, GettingStartedActionClassification>('gettingStarted.ActionExecuted', {
-						command: 'playVideo',
-						walkthroughId: this.currentWalkthrough?.id,
-						argument: stepId,
-					});
-				}
-			}));
 		}
 	}
 
diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedDetailsRenderer.ts b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedDetailsRenderer.ts
@@ -225,19 +225,13 @@ export class GettingStartedDetailsRenderer {
 			</head>
 			<body>
 				<vertically-centered>
-					<video controls ${poster ? `poster="${poster?.toString(true)}"` : ''} muted>
+					<video controls autoplay loop ${poster ? `poster="${poster?.toString(true)}"` : ''} muted>
 						<source src="${path.toString(true)}" type="video/mp4">
 					</video>
 				</vertically-centered>
 			</body>
 
 			<script nonce="${nonce}">
-				const vscode = acquireVsCodeApi();
-
-				document.querySelector('video').addEventListener('play', () => {
-					vscode.postMessage('playVideo' );
-				});
-
 				let ongoingLayout = undefined;
 				const doLayout = () => {
 					document.querySelectorAll('vertically-centered').forEach(element => {
@@ -256,8 +250,8 @@ export class GettingStartedDetailsRenderer {
 				layout();
 
 				document.querySelectorAll('video').forEach(element => {
-					element.onload = layout;
-				})
+					element.addEventListener('loadeddata', layout);
+				});
 		</script>
 		</html>`;
 	}

Original file line number	Diff line number	Diff line change
`@@ -736,17 +736,6 @@ export class GettingStartedPage extends EditorPane {`
`736`	`736`	`this.webview.setHtml(body);`
`737`	`737`	`}`
`738`	`738`	`}));`
`739`		`-`
`740`		`- this.stepDisposables.add(this.webview.onMessage(async e => {`
`741`		`- const message: string = e.message as string;`
`742`		`- if (message === 'playVideo') {`
`743`		`- this.telemetryService.publicLog2<GettingStartedActionEvent, GettingStartedActionClassification>('gettingStarted.ActionExecuted', {`
`744`		`- command: 'playVideo',`
`745`		`- walkthroughId: this.currentWalkthrough?.id,`
`746`		`- argument: stepId,`
`747`		`- });`
`748`		`- }`
`749`		`- }));`
`750`	`739`	`}`
`751`	`740`	`}`
`752`	`741`