Editor: Render video in a popup. (#27776)

editor/js/Sidebar.Project.Video.js

@@ -1,4 +1,4 @@
-import { UIBreak, UIButton, UIInteger, UIPanel, UIProgress, UIRow, UIText } from './libs/ui.js';
+import { UIBreak, UIButton, UIInteger, UIPanel, UIRow, UIText } from './libs/ui.js';
 
 import { APP } from './libs/app.js';
 
@@ -6,8 +6,6 @@ function SidebarProjectVideo( editor ) {
 
 	const strings = editor.strings;
 
-	const save = editor.utils.save;
-
 	const container = new UIPanel();
 	container.setId( 'render' );
 
@@ -48,27 +46,41 @@ function SidebarProjectVideo( editor ) {
 
 	// Render
 
-	const progress = new UIProgress( 0 );
-	progress.setDisplay( 'none' );
-	progress.setWidth( '170px' );
-	progress.setMarginLeft( '90px' );
-	container.add( progress );
-
 	const renderButton = new UIButton( strings.getKey( 'sidebar/project/render' ) );
 	renderButton.setWidth( '170px' );
 	renderButton.setMarginLeft( '90px' );
 	renderButton.onClick( async () => {
 
-		renderButton.setDisplay( 'none' );
-		progress.setDisplay( '' );
-		progress.setValue( 0 );
-
 		const player = new APP.Player();
 		player.load( editor.toJSON() );
 		player.setPixelRatio( 1 );
 		player.setSize( videoWidth.getValue(), videoHeight.getValue() );
 
-		const canvas = player.dom.firstElementChild;
+		//
+
+		const width = videoWidth.getValue() / window.devicePixelRatio;
+		const height = videoHeight.getValue() / window.devicePixelRatio;
+
+		const canvas = player.canvas;
+		canvas.style.width = width + 'px';
+		canvas.style.height = height + 'px';
+
+		const left = ( screen.width / 2 ) - ( width / 2 );
+		const top = ( screen.height / 2 ) - ( height / 2 );
+
+		const output = window.open( '', '_blank', `location=no,left=${left},top=${top},width=${width},height=${height}` );
+		output.document.body.style.background = '#000';
+		output.document.body.style.margin = '0px';
+		output.document.body.style.overflow = 'hidden';
+		output.document.body.appendChild( canvas );
+
+		const progress = document.createElement( 'progress' );
+		progress.style.position = 'absolute';
+		progress.style.top = '10px';
+		progress.style.left = ( ( width - 170 ) / 2 ) + 'px';
+		progress.style.width = '170px';
+		progress.value = 0;
+		output.document.body.appendChild( progress );
 
 		//
 
@@ -79,7 +91,7 @@ function SidebarProjectVideo( editor ) {
 
 		ffmpeg.setProgress( ( { ratio } ) => {
 
-			progress.setValue( ( ratio * 0.5 ) + 0.5 );
+			progress.value = ( ratio * 0.5 ) + 0.5;
 
 		} );
 
@@ -97,7 +109,7 @@ function SidebarProjectVideo( editor ) {
 			ffmpeg.FS( 'writeFile', `tmp.${num}.png`, await fetchFile( canvas.toDataURL() ) );
 			currentTime += 1 / fps;
 
-			progress.setValue( ( i / frames ) * 0.5 );
+			progress.value = ( i / frames ) * 0.5;
 
 		}
 
@@ -112,12 +124,18 @@ function SidebarProjectVideo( editor ) {
 
 		}
 
-		save( new Blob( [ data.buffer ], { type: 'video/mp4' } ), 'out.mp4' );
+		output.document.body.removeChild( canvas );
+		output.document.body.removeChild( progress );
 
-		player.dispose();
+		const video = document.createElement( 'video' );
+		video.width = width;
+		video.height = height;
+		video.controls = true;
+		video.loop = true;
+		video.src = URL.createObjectURL( new Blob( [ data.buffer ], { type: 'video/mp4' } ) );
+		output.document.body.appendChild( video );
 
-		renderButton.setDisplay( '' );
-		progress.setDisplay( 'none' );
+		player.dispose();
 
 	} );
 	container.add( renderButton );

editor/js/libs/app.js

@@ -14,6 +14,7 @@ var APP = {
 		dom.appendChild( renderer.domElement );
 
 		this.dom = dom;
+		this.canvas = renderer.domElement;
 
 		this.width = 500;
 		this.height = 500;