Added the shader-toy.recordMaxDuration setting.

Author: shadielhajj

README.md

@@ -161,6 +161,7 @@ The following settings allow to configure recording quality
 * `shader-toy.recordVideoCodec`: Set video codec. `vp8`, `vp9`, `h264` and `avc1` are all supported. Default it `vp8`.
 * `shader-toy.recordVideoBitRate`: Set recording bit rate in bits/second. Default is 2500000.
 * `shader-toy.recordTargetFramerate`: Set recording target frame-rate. Default is 30fps.
+* `shader-toy.recordMaxDuration`: Maximum recording duration in seconds. 0 (the default) will keep recording until the record button is pressed again.
 
 ## Requirements
 
@@ -189,6 +190,7 @@ Contributions of any kind are welcome and encouraged.
 * Added `shader-toy.recordVideoContainer` (set video file container),
 * Added `shader-toy.recordVideoCodec` (set video codec),
 * Added `shader-toy.recordVideoBitRate` (set recording bit rate),
+* Added `shader-toy.recordMaxDuration` (set maximum recording duration),
 * Fixed the `shader-toy.recordTargetFramerate` setting,
 * Moved the Stats widget to the bottom left, so it doesn't overlap with the GUI.
 

package.json

@@ -144,6 +144,11 @@
                     "default": 2500000,
                     "description": "Video encoding bit rate in bits/seconds."
                 },
+                "shader-toy.recordMaxDuration": {
+                    "type": "number",
+                    "default": 0,
+                    "description": "Maximum recording duration in seconds. 0 (the default) will keep recording until the record button is pressed again."
+                },
                 "shader-toy.showPauseButton": {
                     "type": "boolean",
                     "default": true,

resources/webview_base.html

@@ -235,6 +235,7 @@
     let normalizedMouse = new THREE.Vector2(<!-- Start Normalized Mouse -->);
     let frameCounter = 0;
     let recorder = null;
+    let recordingTimeout = null;
 
     // Audio Init
     // Audio Resume
@@ -484,11 +485,16 @@
     }
     function recordAction() {
         let recordButton = document.getElementById("record");
+        if (recordingTimeout != null) {
+            clearTimeout(recordingTimeout);
+            recordingTimeout = null;
+        }
         if (recorder == null) {
             recordButton.classList.add('recording');
 
             let videoContainer = <!-- Record Video Container -->;
             let videoCodec = <!-- Record Video Codec -->;
+            let maxDuration = <!-- Record Max Duration -->;
 
             let stream = canvas.captureStream(<!-- Record Target Framerate -->);
             let recorderOptions = {
@@ -504,6 +510,15 @@
                 a.download = `shadertoy.${videoContainer}`;
                 a.click();
             };
+
+            if (maxDuration > 0) {
+                recordingTimeout = setTimeout(() => {
+                    recordButton.classList.remove('recording');
+                    recorder.stop();
+                    recorder = null;
+                    recordingTimeout = null;
+                }, maxDuration*1000);
+            }
         }
         else {
             recordButton.classList.remove('recording');

src/extensions/user_interface/record_max_duration_extension.ts

@@ -0,0 +1,15 @@
+'use strict';
+
+import { WebviewExtension } from '../webview_extension';
+
+export class RecordMaxDurationExtension implements WebviewExtension {
+    private recordMaxDuration: number;
+
+    public constructor(recordMaxDuration: number) {
+        this.recordMaxDuration = recordMaxDuration;
+    }
+
+    public generateContent(): string {
+        return `${this.recordMaxDuration}`;
+    }
+}

src/webviewcontentprovider.ts

@@ -71,6 +71,7 @@ import { RecordTargetFramerateExtension } from './extensions/user_interface/reco
 import { RecordVideoContainerExtension } from './extensions/user_interface/record_video_container_extension';
 import { RecordVideoCodecExtension } from './extensions/user_interface/record_video_codec_extension';
 import { RecordVideoBitRateExtension } from './extensions/user_interface/record_video_bit_rate_extension';
+import { RecordMaxDurationExtension } from './extensions/user_interface/record_max_duration_extension';
 
 export class WebviewContentProvider {
     private context: Context;
@@ -411,6 +412,10 @@ export class WebviewContentProvider {
         const recordVideoBitRateExtension = new RecordVideoBitRateExtension(recordVideoBitRate);
         this.webviewAssembler.addReplaceModule(recordVideoBitRateExtension, 'videoBitsPerSecond: <!-- Record Video Bit Rate -->,', '<!-- Record Video Bit Rate -->');
 
+        const recordMaxDuration = this.context.getConfig<number>('recordMaxDuration') || 0;
+        const recordMaxDurationExtension = new RecordMaxDurationExtension(recordMaxDuration);
+        this.webviewAssembler.addReplaceModule(recordMaxDurationExtension, 'let maxDuration = <!-- Record Max Duration -->;', '<!-- Record Max Duration -->');
+
         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
         // Reload Logic
         if (!generateStandalone) {