@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Menubar.Render.js

@@ -0,0 +1,858 @@
+import * as THREE from 'three';
+
+import { UIPanel, UIRow, UIButton, UIInteger, UISelect, UIText } from './libs/ui.js';
+
+import { ViewportPathtracer } from './Viewport.Pathtracer.js';
+import { APP } from './libs/app.js';
+
+function MenubarRender( editor ) {
+
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setClass( 'menu' );
+
+	const title = new UIPanel();
+	title.setClass( 'title' );
+	title.setTextContent( strings.getKey( 'menubar/render' ) );
+	container.add( title );
+
+	const options = new UIPanel();
+	options.setClass( 'options' );
+	container.add( options );
+
+	// Image
+
+	let option = new UIRow();
+	option.setClass( 'option' );
+	option.setTextContent( strings.getKey( 'menubar/render/image' ) );
+	option.onClick( function () {
+
+		showImageDialog();
+
+	} );
+	options.add( option );
+
+	// Video
+
+	if ( 'VideoEncoder' in window ) {
+
+		option = new UIRow();
+		option.setClass( 'option' );
+		option.setTextContent( strings.getKey( 'menubar/render/video' ) );
+		option.onClick( function () {
+
+			showVideoDialog();
+
+		} );
+		options.add( option );
+
+	}
+
+	// Image Dialog
+
+	function showImageDialog() {
+
+		const dialog = new RenderImageDialog( editor, strings );
+		document.body.appendChild( dialog.dom );
+
+	}
+
+	// Video Dialog
+
+	function showVideoDialog() {
+
+		const dialog = new RenderVideoDialog( editor, strings );
+		document.body.appendChild( dialog.dom );
+
+	}
+
+	return container;
+
+}
+
+class RenderImageDialog {
+
+	constructor( editor, strings ) {
+
+		const dom = document.createElement( 'div' );
+		dom.className = 'Dialog';
+		this.dom = dom;
+
+		const background = document.createElement( 'div' );
+		background.className = 'Dialog-background';
+		background.addEventListener( 'click', () => this.close() );
+		dom.appendChild( background );
+
+		const content = document.createElement( 'div' );
+		content.className = 'Dialog-content';
+		dom.appendChild( content );
+
+		// Title
+
+		const titleBar = document.createElement( 'div' );
+		titleBar.className = 'Dialog-title';
+		titleBar.textContent = strings.getKey( 'menubar/render' ) + ' ' + strings.getKey( 'menubar/render/image' );
+		content.appendChild( titleBar );
+
+		// Body
+
+		const body = document.createElement( 'div' );
+		body.className = 'Dialog-body';
+		content.appendChild( body );
+
+		// Shading
+
+		const shadingRow = new UIRow();
+		body.appendChild( shadingRow.dom );
+
+		shadingRow.add( new UIText( strings.getKey( 'sidebar/project/shading' ) ).setClass( 'Label' ) );
+
+		const shadingTypeSelect = new UISelect().setOptions( {
+			'solid': 'SOLID',
+			'realistic': 'REALISTIC'
+		} ).setWidth( '170px' ).onChange( refreshShadingRow ).setValue( 'solid' );
+		shadingRow.add( shadingTypeSelect );
+
+		const pathTracerMinSamples = 3;
+		const pathTracerMaxSamples = 65536;
+		const samplesNumber = new UIInteger( 16 ).setRange( pathTracerMinSamples, pathTracerMaxSamples );
+
+		const samplesRow = new UIRow();
+		samplesRow.add( new UIText( strings.getKey( 'sidebar/project/image/samples' ) ).setClass( 'Label' ) );
+		samplesRow.add( samplesNumber );
+		body.appendChild( samplesRow.dom );
+
+		function refreshShadingRow() {
+
+			samplesRow.setHidden( shadingTypeSelect.getValue() !== 'realistic' );
+
+		}
+
+		refreshShadingRow();
+
+		// Resolution
+
+		const resolutionRow = new UIRow();
+		body.appendChild( resolutionRow.dom );
+
+		resolutionRow.add( new UIText( strings.getKey( 'sidebar/project/resolution' ) ).setClass( 'Label' ) );
+
+		const imageWidth = new UIInteger( 1024 ).setTextAlign( 'center' ).setWidth( '28px' );
+		resolutionRow.add( imageWidth );
+
+		resolutionRow.add( new UIText( '\u00D7' ).setTextAlign( 'center' ).setFontSize( '12px' ).setWidth( '12px' ) );
+
+		const imageHeight = new UIInteger( 1024 ).setTextAlign( 'center' ).setWidth( '28px' );
+		resolutionRow.add( imageHeight );
+
+		// Buttons
+
+		const buttonsRow = document.createElement( 'div' );
+		buttonsRow.className = 'Dialog-buttons';
+		body.appendChild( buttonsRow );
+
+		const renderButton = new UIButton( strings.getKey( 'sidebar/project/render' ) );
+		renderButton.setWidth( '80px' );
+		renderButton.onClick( async () => {
+
+			if ( shadingTypeSelect.getValue() === 'realistic' ) {
+
+				let isMaterialsValid = true;
+
+				editor.scene.traverseVisible( ( object ) => {
+
+					if ( object.isMesh ) {
+
+						const materials = Array.isArray( object.material ) ? object.material : [ object.material ];
+
+						for ( let i = 0; i < materials.length; i ++ ) {
+
+							const material = materials[ i ];
+
+							if ( ! material.isMeshStandardMaterial ) {
+
+								isMaterialsValid = false;
+								return;
+
+							}
+
+						}
+
+					}
+
+				} );
+
+				if ( isMaterialsValid === false ) {
+
+					alert( strings.getKey( 'prompt/rendering/realistic/unsupportedMaterial' ) );
+					return;
+
+				}
+
+			}
+
+			//
+
+			const json = editor.toJSON();
+			const project = json.project;
+
+			//
+
+			const loader = new THREE.ObjectLoader();
+
+			const camera = await loader.parseAsync( json.camera );
+
+			const aspect = imageWidth.getValue() / imageHeight.getValue();
+
+			if ( camera.isPerspectiveCamera ) {
+
+				camera.aspect = aspect;
+
+			} else {
+
+				const frustumHeight = camera.top - camera.bottom;
+
+				camera.left = - frustumHeight * aspect / 2;
+				camera.right = frustumHeight * aspect / 2;
+
+			}
+
+			camera.updateProjectionMatrix();
+			camera.updateMatrixWorld();
+
+			const scene = await loader.parseAsync( json.scene );
+
+			const renderer = new THREE.WebGLRenderer( { antialias: true, reversedDepthBuffer: true } );
+			renderer.setSize( imageWidth.getValue(), imageHeight.getValue() );
+			renderer.setClearColor( editor.viewportColor );
+
+			if ( project.shadows !== undefined ) renderer.shadowMap.enabled = project.shadows;
+			if ( project.shadowType !== undefined ) renderer.shadowMap.type = project.shadowType;
+			if ( project.toneMapping !== undefined ) renderer.toneMapping = project.toneMapping;
+			if ( project.toneMappingExposure !== undefined ) renderer.toneMappingExposure = project.toneMappingExposure;
+
+			// popup
+
+			const width = imageWidth.getValue() / window.devicePixelRatio;
+			const height = imageHeight.getValue() / window.devicePixelRatio;
+
+			const left = ( screen.width - width ) / 2;
+			const top = ( screen.height - height ) / 2;
+
+			const output = window.open( '', '_blank', `location=no,left=${left},top=${top},width=${width},height=${height}` );
+
+			const meta = document.createElement( 'meta' );
+			meta.name = 'viewport';
+			meta.content = 'width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0';
+			output.document.head.appendChild( meta );
+
+			output.document.body.style.background = '#000';
+			output.document.body.style.margin = '0px';
+			output.document.body.style.overflow = 'hidden';
+
+			const canvas = renderer.domElement;
+			canvas.style.width = width + 'px';
+			canvas.style.height = height + 'px';
+			output.document.body.appendChild( canvas );
+
+			//
+
+			switch ( shadingTypeSelect.getValue() ) {
+
+				case 'solid':
+
+					renderer.render( scene, camera );
+					renderer.dispose();
+
+					break;
+
+				case 'realistic':
+
+					const status = document.createElement( 'div' );
+					status.style.position = 'absolute';
+					status.style.top = '10px';
+					status.style.left = '10px';
+					status.style.color = 'white';
+					status.style.fontFamily = 'system-ui';
+					status.style.fontSize = '12px';
+					output.document.body.appendChild( status );
+
+					const pathTracer = new ViewportPathtracer( renderer );
+					pathTracer.init( scene, camera );
+					pathTracer.setSize( imageWidth.getValue(), imageHeight.getValue() );
+
+					const maxSamples = Math.max( pathTracerMinSamples, Math.min( pathTracerMaxSamples, samplesNumber.getValue() ) );
+
+					function animate() {
+
+						if ( output.closed === true ) return;
+
+						const samples = Math.floor( pathTracer.getSamples() ) + 1;
+
+						if ( samples < maxSamples ) {
+
+							requestAnimationFrame( animate );
+
+						}
+
+						pathTracer.update();
+
+						const progress = Math.floor( samples / maxSamples * 100 );
+
+						status.textContent = `${ samples } / ${ maxSamples } ( ${ progress }% )`;
+
+						if ( progress === 100 ) {
+
+							status.textContent += ' \u2713';
+
+						}
+
+					}
+
+					animate();
+
+					break;
+
+			}
+
+			this.close();
+
+		} );
+		buttonsRow.appendChild( renderButton.dom );
+
+		const cancelButton = new UIButton( strings.getKey( 'menubar/render/cancel' ) );
+		cancelButton.setWidth( '80px' );
+		cancelButton.setMarginLeft( '8px' );
+		cancelButton.onClick( () => this.close() );
+		buttonsRow.appendChild( cancelButton.dom );
+
+	}
+
+	close() {
+
+		this.dom.remove();
+
+	}
+
+}
+
+class RenderVideoDialog {
+
+	constructor( editor, strings ) {
+
+		const dom = document.createElement( 'div' );
+		dom.className = 'Dialog';
+		this.dom = dom;
+
+		const background = document.createElement( 'div' );
+		background.className = 'Dialog-background';
+		background.addEventListener( 'click', () => this.close() );
+		dom.appendChild( background );
+
+		const content = document.createElement( 'div' );
+		content.className = 'Dialog-content';
+		dom.appendChild( content );
+
+		// Title
+
+		const titleBar = document.createElement( 'div' );
+		titleBar.className = 'Dialog-title';
+		titleBar.textContent = strings.getKey( 'menubar/render' ) + ' ' + strings.getKey( 'menubar/render/video' );
+		content.appendChild( titleBar );
+
+		// Body
+
+		const body = document.createElement( 'div' );
+		body.className = 'Dialog-body';
+		content.appendChild( body );
+
+		// Resolution
+
+		function toDiv2() {
+
+			this.setValue( 2 * Math.floor( this.getValue() / 2 ) );
+
+		}
+
+		const resolutionRow = new UIRow();
+		body.appendChild( resolutionRow.dom );
+
+		resolutionRow.add( new UIText( strings.getKey( 'sidebar/project/resolution' ) ).setClass( 'Label' ) );
+
+		const videoWidth = new UIInteger( 1024 ).setTextAlign( 'center' ).setWidth( '28px' ).setStep( 2 ).onChange( toDiv2 );
+		resolutionRow.add( videoWidth );
+
+		resolutionRow.add( new UIText( '\u00D7' ).setTextAlign( 'center' ).setFontSize( '12px' ).setWidth( '12px' ) );
+
+		const videoHeight = new UIInteger( 1024 ).setTextAlign( 'center' ).setWidth( '28px' ).setStep( 2 ).onChange( toDiv2 );
+		resolutionRow.add( videoHeight );
+
+		const videoFPS = new UIInteger( 30 ).setTextAlign( 'center' ).setWidth( '20px' );
+		resolutionRow.add( videoFPS );
+
+		resolutionRow.add( new UIText( 'fps' ).setFontSize( '12px' ) );
+
+		// Duration
+
+		const videoDurationRow = new UIRow();
+		videoDurationRow.add( new UIText( strings.getKey( 'sidebar/project/duration' ) ).setClass( 'Label' ) );
+		body.appendChild( videoDurationRow.dom );
+
+		const videoDuration = new UIInteger( 10 );
+		videoDurationRow.add( videoDuration );
+
+		// Quality
+
+		const qualityRow = new UIRow();
+		qualityRow.add( new UIText( strings.getKey( 'menubar/render/quality' ) ).setClass( 'Label' ) );
+		body.appendChild( qualityRow.dom );
+
+		const videoQuality = new UISelect().setOptions( {
+			'low': 'Low',
+			'medium': 'Medium',
+			'high': 'High',
+			'ultra': 'Ultra'
+		} ).setWidth( '170px' ).setValue( 'high' );
+		qualityRow.add( videoQuality );
+
+		// Buttons
+
+		const buttonsRow = document.createElement( 'div' );
+		buttonsRow.className = 'Dialog-buttons';
+		body.appendChild( buttonsRow );
+
+		const renderButton = new UIButton( strings.getKey( 'sidebar/project/render' ) );
+		renderButton.setWidth( '80px' );
+		renderButton.onClick( async () => {
+
+			const player = new APP.Player();
+			await player.load( editor.toJSON() );
+			player.setPixelRatio( 1 );
+			player.setSize( videoWidth.getValue(), videoHeight.getValue() );
+			player.setClearColor( editor.viewportColor );
+
+			//
+
+			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 - width ) / 2;
+			const top = ( screen.height - height ) / 2;
+
+			const output = window.open( '', '_blank', `location=no,left=${left},top=${top},width=${width},height=${height}` );
+
+			const meta = document.createElement( 'meta' );
+			meta.name = 'viewport';
+			meta.content = 'width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0';
+			output.document.head.appendChild( meta );
+
+			output.document.body.style.background = '#000';
+			output.document.body.style.margin = '0px';
+			output.document.body.style.overflow = 'hidden';
+			output.document.body.appendChild( canvas );
+
+			const status = document.createElement( 'div' );
+			status.style.position = 'absolute';
+			status.style.top = '10px';
+			status.style.left = '10px';
+			status.style.color = 'white';
+			status.style.fontFamily = 'system-ui';
+			status.style.fontSize = '12px';
+			status.style.textShadow = '0 0 2px black';
+			output.document.body.appendChild( status );
+
+			const video = document.createElement( 'video' );
+			video.width = width;
+			video.height = height;
+			video.controls = true;
+			video.loop = true;
+			video.hidden = true;
+			output.document.body.appendChild( video );
+
+			output.addEventListener( 'unload', function () {
+
+				if ( video.src.startsWith( 'blob:' ) ) {
+
+					URL.revokeObjectURL( video.src );
+
+				}
+
+			} );
+
+			//
+
+			const fps = videoFPS.getValue();
+			const duration = videoDuration.getValue();
+			const frames = duration * fps;
+
+			const encodedChunks = [];
+			let codecConfig = null;
+
+			const videoEncoder = new VideoEncoder( {
+
+				output: ( chunk, metadata ) => {
+
+					if ( metadata?.decoderConfig?.description ) {
+
+						codecConfig = new Uint8Array( metadata.decoderConfig.description );
+
+					}
+
+					const chunkData = new Uint8Array( chunk.byteLength );
+					chunk.copyTo( chunkData );
+					encodedChunks.push( { data: chunkData, timestamp: chunk.timestamp, type: chunk.type } );
+
+				},
+				error: ( e ) => console.error( 'VideoEncoder error:', e )
+
+			} );
+
+			const qualityToBitrate = {
+				'low': 2e6,
+				'medium': 5e6,
+				'high': 10e6,
+				'ultra': 20e6
+			};
+
+			videoEncoder.configure( {
+				codec: 'avc1.640028',
+				width: videoWidth.getValue(),
+				height: videoHeight.getValue(),
+				bitrate: qualityToBitrate[ videoQuality.getValue() ],
+				framerate: fps,
+				avc: { format: 'avc' }
+			} );
+
+			let currentTime = 0;
+			let aborted = false;
+
+			for ( let i = 0; i < frames; i ++ ) {
+
+				if ( output.closed ) {
+
+					aborted = true;
+					break;
+
+				}
+
+				player.render( currentTime );
+
+				const bitmap = await createImageBitmap( canvas );
+				const frame = new VideoFrame( bitmap, { timestamp: i * ( 1e6 / fps ) } );
+
+				videoEncoder.encode( frame, { keyFrame: i % fps === 0 } );
+				frame.close();
+				bitmap.close();
+
+				currentTime += 1 / fps;
+
+				const progress = Math.floor( ( i + 1 ) / frames * 100 );
+				status.textContent = `${ i + 1 } / ${ frames } ( ${ progress }% )`;
+
+			}
+
+			if ( ! aborted ) {
+
+				await videoEncoder.flush();
+				videoEncoder.close();
+
+				output.document.body.removeChild( canvas );
+
+				const mp4Data = createMP4( encodedChunks, codecConfig, videoWidth.getValue(), videoHeight.getValue(), fps );
+
+				status.textContent = `${ frames } / ${ frames } ( 100% ) ${ formatFileSize( mp4Data.byteLength ) } \u2713`;
+
+				video.src = URL.createObjectURL( new Blob( [ mp4Data ], { type: 'video/mp4' } ) );
+				video.hidden = false;
+
+			}
+
+			player.dispose();
+
+			this.close();
+
+		} );
+		buttonsRow.appendChild( renderButton.dom );
+
+		const cancelButton = new UIButton( strings.getKey( 'menubar/render/cancel' ) );
+		cancelButton.setWidth( '80px' );
+		cancelButton.setMarginLeft( '8px' );
+		cancelButton.onClick( () => this.close() );
+		buttonsRow.appendChild( cancelButton.dom );
+
+	}
+
+	close() {
+
+		this.dom.remove();
+
+	}
+
+}
+
+// Simple MP4 muxer for H.264 encoded chunks
+
+function createMP4( chunks, avcC, width, height, fps ) {
+
+	const timescale = 90000;
+	const frameDuration = timescale / fps;
+
+	function u32( value ) {
+
+		return new Uint8Array( [ ( value >> 24 ) & 0xFF, ( value >> 16 ) & 0xFF, ( value >> 8 ) & 0xFF, value & 0xFF ] );
+
+	}
+
+	function u16( value ) {
+
+		return new Uint8Array( [ ( value >> 8 ) & 0xFF, value & 0xFF ] );
+
+	}
+
+	function str( s ) {
+
+		return new TextEncoder().encode( s );
+
+	}
+
+	function concat( ...arrays ) {
+
+		const totalLength = arrays.reduce( ( sum, arr ) => sum + arr.length, 0 );
+		const result = new Uint8Array( totalLength );
+		let offset = 0;
+		for ( const arr of arrays ) {
+
+			result.set( arr, offset );
+			offset += arr.length;
+
+		}
+
+		return result;
+
+	}
+
+	function box( type, ...contents ) {
+
+		const data = concat( ...contents );
+		const size = data.length + 8;
+		return concat( u32( size ), str( type ), data );
+
+	}
+
+	function fullBox( type, version, flags, ...contents ) {
+
+		return box( type, new Uint8Array( [ version, ( flags >> 16 ) & 0xFF, ( flags >> 8 ) & 0xFF, flags & 0xFF ] ), ...contents );
+
+	}
+
+	// ftyp
+	const ftyp = box( 'ftyp',
+		str( 'isom' ),
+		u32( 512 ),
+		str( 'isom' ), str( 'iso2' ), str( 'avc1' ), str( 'mp41' )
+	);
+
+	// Collect sample info
+	const sampleSizes = [];
+	const syncSamples = [];
+
+	for ( let i = 0; i < chunks.length; i ++ ) {
+
+		sampleSizes.push( chunks[ i ].data.length );
+		if ( chunks[ i ].type === 'key' ) syncSamples.push( i + 1 );
+
+	}
+
+	// mdat
+	let mdatSize = 8;
+	for ( const chunk of chunks ) mdatSize += chunk.data.length;
+
+	// stsd - Sample Description
+	const avc1 = box( 'avc1',
+		new Uint8Array( 6 ), // reserved
+		u16( 1 ), // data reference index
+		new Uint8Array( 16 ), // pre-defined + reserved
+		u16( width ),
+		u16( height ),
+		u32( 0x00480000 ), // horizontal resolution 72 dpi
+		u32( 0x00480000 ), // vertical resolution 72 dpi
+		u32( 0 ), // reserved
+		u16( 1 ), // frame count
+		new Uint8Array( 32 ), // compressor name
+		u16( 0x0018 ), // depth
+		new Uint8Array( [ 0xFF, 0xFF ] ), // pre-defined
+		box( 'avcC', avcC )
+	);
+
+	const stsd = fullBox( 'stsd', 0, 0, u32( 1 ), avc1 );
+
+	// stts - Time-to-Sample
+	const stts = fullBox( 'stts', 0, 0,
+		u32( 1 ),
+		u32( chunks.length ),
+		u32( frameDuration )
+	);
+
+	// stsc - Sample-to-Chunk
+	const stsc = fullBox( 'stsc', 0, 0,
+		u32( 1 ),
+		u32( 1 ), u32( chunks.length ), u32( 1 )
+	);
+
+	// stsz - Sample Sizes
+	const stszData = [ u32( 0 ), u32( chunks.length ) ];
+	for ( const size of sampleSizes ) stszData.push( u32( size ) );
+	const stsz = fullBox( 'stsz', 0, 0, ...stszData );
+
+	// stco - Chunk Offsets (placeholder, will be updated)
+	const stco = fullBox( 'stco', 0, 0, u32( 1 ), u32( 0 ) );
+
+	// stss - Sync Samples
+	const stssData = [ u32( syncSamples.length ) ];
+	for ( const sync of syncSamples ) stssData.push( u32( sync ) );
+	const stss = fullBox( 'stss', 0, 0, ...stssData );
+
+	// stbl
+	const stbl = box( 'stbl', stsd, stts, stsc, stsz, stco, stss );
+
+	// dinf
+	const dref = fullBox( 'dref', 0, 0,
+		u32( 1 ),
+		fullBox( 'url ', 0, 1 )
+	);
+	const dinf = box( 'dinf', dref );
+
+	// vmhd
+	const vmhd = fullBox( 'vmhd', 0, 1, new Uint8Array( 8 ) );
+
+	// minf
+	const minf = box( 'minf', vmhd, dinf, stbl );
+
+	// hdlr
+	const hdlr = fullBox( 'hdlr', 0, 0,
+		u32( 0 ), // pre-defined
+		str( 'vide' ),
+		new Uint8Array( 12 ), // reserved
+		str( 'VideoHandler' ), new Uint8Array( 1 )
+	);
+
+	// mdhd
+	const durationInTimescale = chunks.length * frameDuration;
+	const mdhd = fullBox( 'mdhd', 0, 0,
+		u32( 0 ), // creation time
+		u32( 0 ), // modification time
+		u32( timescale ),
+		u32( durationInTimescale ),
+		u16( 0x55C4 ), // language (und)
+		u16( 0 ) // quality
+	);
+
+	// mdia
+	const mdia = box( 'mdia', mdhd, hdlr, minf );
+
+	// tkhd
+	const tkhd = fullBox( 'tkhd', 0, 3,
+		u32( 0 ), // creation time
+		u32( 0 ), // modification time
+		u32( 1 ), // track id
+		u32( 0 ), // reserved
+		u32( durationInTimescale ),
+		new Uint8Array( 8 ), // reserved
+		u16( 0 ), // layer
+		u16( 0 ), // alternate group
+		u16( 0 ), // volume
+		u16( 0 ), // reserved
+		// matrix
+		u32( 0x00010000 ), u32( 0 ), u32( 0 ),
+		u32( 0 ), u32( 0x00010000 ), u32( 0 ),
+		u32( 0 ), u32( 0 ), u32( 0x40000000 ),
+		u32( width << 16 ), // width (16.16 fixed point)
+		u32( height << 16 ) // height (16.16 fixed point)
+	);
+
+	// trak
+	const trak = box( 'trak', tkhd, mdia );
+
+	// mvhd
+	const mvhd = fullBox( 'mvhd', 0, 0,
+		u32( 0 ), // creation time
+		u32( 0 ), // modification time
+		u32( timescale ),
+		u32( durationInTimescale ),
+		u32( 0x00010000 ), // rate (1.0)
+		u16( 0x0100 ), // volume (1.0)
+		new Uint8Array( 10 ), // reserved
+		// matrix
+		u32( 0x00010000 ), u32( 0 ), u32( 0 ),
+		u32( 0 ), u32( 0x00010000 ), u32( 0 ),
+		u32( 0 ), u32( 0 ), u32( 0x40000000 ),
+		new Uint8Array( 24 ), // pre-defined
+		u32( 2 ) // next track id
+	);
+
+	// moov
+	const moov = box( 'moov', mvhd, trak );
+
+	// Calculate actual mdat offset and update stco
+	const mdatOffset = ftyp.length + moov.length;
+	const moovArray = new Uint8Array( moov );
+	// Find and update stco offset (search for 'stco' in moov)
+	for ( let i = 0; i < moovArray.length - 16; i ++ ) {
+
+		if ( moovArray[ i ] === 0x73 && moovArray[ i + 1 ] === 0x74 &&
+			 moovArray[ i + 2 ] === 0x63 && moovArray[ i + 3 ] === 0x6F ) {
+
+			// Found 'stco', offset value is at i + 12
+			const offset = mdatOffset + 8;
+			moovArray[ i + 12 ] = ( offset >> 24 ) & 0xFF;
+			moovArray[ i + 13 ] = ( offset >> 16 ) & 0xFF;
+			moovArray[ i + 14 ] = ( offset >> 8 ) & 0xFF;
+			moovArray[ i + 15 ] = offset & 0xFF;
+			break;
+
+		}
+
+	}
+
+	// Update mdat size
+	const mdatSizeBytes = u32( mdatSize );
+
+	// Combine all parts
+	const result = new Uint8Array( ftyp.length + moovArray.length + mdatSize );
+	let offset = 0;
+	result.set( ftyp, offset ); offset += ftyp.length;
+	result.set( moovArray, offset ); offset += moovArray.length;
+	result.set( mdatSizeBytes, offset );
+	result.set( str( 'mdat' ), offset + 4 );
+	offset += 8;
+
+	for ( const chunk of chunks ) {
+
+		result.set( chunk.data, offset );
+		offset += chunk.data.length;
+
+	}
+
+	return result;
+
+}
+
+function formatFileSize( sizeB, K = 1024 ) {
+
+	if ( sizeB === 0 ) return '0B';
+
+	const sizes = [ sizeB, sizeB / K, sizeB / K / K ].reverse();
+	const units = [ 'B', 'KB', 'MB' ].reverse();
+	const index = sizes.findIndex( size => size >= 1 );
+
+	return new Intl.NumberFormat( 'en-us', { useGrouping: true, maximumFractionDigits: 1 } )
+		.format( sizes[ index ] ) + units[ index ];
+
+}
+
+export { MenubarRender };