mp4 encoder fixes

src/examples/alpha-orbitals/index.ts

@@ -103,7 +103,8 @@ export class AlphaOrbitalsExample {
             directVolume: this.state.value.gpuSurface,
             kind,
             relativeIsovalue: this.state.value.isoValue,
-            pickable: false
+            pickable: false,
+            xrayShaded: false
         };
     }
 

src/extensions/mp4-export/encoder.ts

@@ -52,13 +52,17 @@ export async function encodeMp4Animation<A extends PluginStateAnimation>(plugin:
     encoder.initialize();
 
     const loop = plugin.animationLoop;
-    const originalBackground = params.customBackground !== void 0 ? plugin.canvas3d?.props.renderer.backgroundColor : void 0;
+    const canvasProps = plugin.canvas3d?.props;
+    const wasAnimating = loop.isAnimating;
     let stoppedAnimation = true, finalized = false;
 
     try {
         loop.stop();
         loop.resetTime(0);
-        plugin.canvas3d?.setProps({ renderer: { backgroundColor: params.customBackground } }, true);
+
+        if (params.customBackground !== void 0) {
+            plugin.canvas3d?.setProps({ renderer: { backgroundColor: params.customBackground }, transparentBackground: false }, true);
+        }
 
         const fps = encoder.frameRate;
         const N = Math.ceil(durationMs / 1000 * fps);
@@ -86,11 +90,11 @@ export async function encodeMp4Animation<A extends PluginStateAnimation>(plugin:
         return encoder.FS.readFile(encoder.outputFilename);
     } finally {
         if (finalized) encoder.delete();
-        if (originalBackground !== void 0) {
-            plugin.canvas3d?.setProps({ renderer: { backgroundColor: originalBackground } });
+        if (params.customBackground !== void 0) {
+            plugin.canvas3d?.setProps({ renderer: { backgroundColor: canvasProps?.renderer!.backgroundColor }, transparentBackground: canvasProps?.transparentBackground });
         }
         if (!stoppedAnimation) await plugin.managers.animation.stop();
-        loop.start();
+        if (wasAnimating) loop.start();
     }
 }
 

src/extensions/mp4-export/ui.tsx

@@ -115,7 +115,6 @@ export class Mp4EncoderUI extends CollapsableControls<{}, State> {
         try {
             this.setState({ busy: true });
             const data = await this.controls.render();
-            console.log(data);
             this.setState({ busy: false, data });
         } catch {
             this.setState({ busy: false });

src/mol-plugin/animation-loop.ts

@@ -11,6 +11,10 @@ export class PluginAnimationLoop {
     private currentFrame: any = void 0;
     private _isAnimating = false;
 
+    get isAnimating() {
+        return this._isAnimating;
+    }
+
     async tick(t: number, options?: { isSynchronous?: boolean, manualDraw?: boolean }) {
         await this.plugin.managers.animation.tick(t, options?.isSynchronous);
         this.plugin.canvas3d?.tick(t as now.Timestamp, options);