Added shader-toy.recordOfflineQuality setting.

Author: shadielhajj

README.md

@@ -175,7 +175,8 @@ The default is real-time rendering to activate offline rendering set `shader-toy
 
 ### Offline rendering parameters
 
-* `shader-toy.recordOfflineQuality`: Offline recording quality. Applies when format is webm or jpg.
+* `shader-toy.recordOfflineFormat`: Offline recording format. Possible value are `webm`, `gif`, `png` and `jpg`. PNG and JPEG images are individual images packaged in a .tar archive.
+* `shader-toy.recordOfflineQuality`: Offline recording quality. 0 is lowest and 100 highest. Applies when format is `webm` or `jpg`.
 
 ## Requirements
 
@@ -208,6 +209,7 @@ Contributions of any kind are welcome and encouraged.
 * Fixed the `shader-toy.recordTargetFramerate` setting.
 * Moved the Stats widget to the bottom left, so it doesn't overlap with the GUI.
 * Added `shader-toy.recordOffline` to switch between real-time and offline rendering.
+* Added `shader-toy.recordOfflineFormat`. Used in conjunction with `shader-toy.recordOffline`
 * Added `shader-toy.recordOfflineQuality`. Used in conjunction with `shader-toy.recordOffline`
 
 ### 0.11.3

package.json

@@ -154,10 +154,15 @@
                     "default": false,
                     "description": "Enable high-quality offline recording."
                 },
+                "shader-toy.recordOfflineFormat": {
+                    "type": "string",
+                    "default": "webm",
+                    "description": "Offline recording quality. Possible value are webm, gif, png and jpg."
+                },
                 "shader-toy.recordOfflineQuality": {
                     "type": "number",
                     "default": 80,
-                    "description": "Offline recording quality. Applies when format is webm or jpg."
+                    "description": "Offline recording format. 0 is lowest and 100 highest. Applies when format is webm or jpg."
                 },
                 "shader-toy.showPauseButton": {
                     "type": "boolean",

resources/webview_base.html

@@ -503,11 +503,12 @@
 
             let maxDuration = <!-- Record Max Duration -->;
             let targetFrameRate = <!-- Record Target Framerate -->;
+            let format = <!-- Record Offline Format -->;
             let quality = <!-- Record Offline Quality -->;
 
             offlineRecording = true;
             recorder = new CCapture( {
-                format: 'webm',
+                format: format,
                 quality: quality,
                 timeLimit: maxDuration,
                 framerate: targetFrameRate,

src/extensions/user_interface/record_offline_format_extension.ts

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

src/webviewcontentprovider.ts

@@ -73,6 +73,7 @@ import { RecordVideoContainerExtension } from './extensions/user_interface/recor
 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';
+import { RecordOfflineFormatExtension } from './extensions/user_interface/record_offline_format_extension';
 import { RecordOfflineQualityExtension } from './extensions/user_interface/record_offline_quality_extension';
 
 export class WebviewContentProvider {
@@ -422,6 +423,10 @@ export class WebviewContentProvider {
         const recordMaxDurationExtension = new RecordMaxDurationExtension(recordMaxDuration);
         this.webviewAssembler.addReplaceModule(recordMaxDurationExtension, 'let maxDuration = <!-- Record Max Duration -->;', '<!-- Record Max Duration -->');
 
+        const recordOfflineFormat = this.context.getConfig<string>('recordOfflineFormat') || "webm";
+        const recordOfflineFormatExtension = new RecordOfflineFormatExtension(recordOfflineFormat);
+        this.webviewAssembler.addReplaceModule(recordOfflineFormatExtension, 'let format = <!-- Record Offline Format -->;', '<!-- Record Offline Format -->');
+
         const recordOfflineQuality = this.context.getConfig<number>('recordOfflineQuality') || 80;
         const recordOfflineQualityExtension = new RecordOfflineQualityExtension(recordOfflineQuality);
         this.webviewAssembler.addReplaceModule(recordOfflineQualityExtension, 'let quality = <!-- Record Offline Quality -->;', '<!-- Record Offline Quality -->');