@norskvideo/norsk-studio-built-ins 1.12.0-2025-02-13-2521ce04 → 1.12.0-2025-02-14-b31b432d

package/client/info.js

@@ -642,6 +642,16 @@ function InlineView6({ state, config, raise }) {
       video.remove();
     });
   };
+  const [loadedImage, setLoadedImage] = (0, import_react6.useState)(void 0);
+  (0, import_react6.useEffect)(() => {
+    const container = document.getElementById(`preview-${id}`) ?? void 0;
+    if (!container)
+      return;
+    container.innerHTML = "";
+    if (loadedImage) {
+      container.appendChild(loadedImage);
+    }
+  }, [loadedImage]);
   (0, import_react6.useEffect)(() => {
     if (!url || !showPreview) {
       if (client) {
@@ -650,11 +660,24 @@ function InlineView6({ state, config, raise }) {
       }
       return;
     }
-    const newClient = createClient(url);
-    setClient(newClient);
-    return () => {
-      cleanupClient(newClient);
-    };
+    if (config.previewMode == "image") {
+      const container = document.getElementById(`preview-${id}`) ?? void 0;
+      if (!container)
+        return;
+      const img = document.createElement("img");
+      img.width = 420;
+      img.height = 236;
+      img.onload = () => {
+        setLoadedImage(img);
+      };
+      img.src = url;
+    } else {
+      const newClient = createClient(url);
+      setClient(newClient);
+      return () => {
+        cleanupClient(newClient);
+      };
+    }
   }, [state.url, showPreview]);
   (0, import_react6.useEffect)(() => {
     setShowPreview(config.showPreview ?? true);
@@ -16824,6 +16847,9 @@ function info_default9(R) {
           case "audio-levels":
             state.levels = ev.levels;
             break;
+          case "source-lost":
+            state = {};
+            break;
           default:
             assertUnreachable4(evType);
         }
@@ -16837,9 +16863,20 @@ function info_default9(R) {
         hardware: (0, import_config2.HardwareSelection)()
       },
       form: {
-        bufferDelayMs: { help: "How many milliseconds in the jitter buffer", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 500 } },
-        skipTranscode: { help: "Skip transcoding for WebRTC-ready streams", hint: { type: "boolean", defaultValue: false } },
+        previewMode: {
+          help: "How to display the video",
+          hint: {
+            type: "select",
+            defaultValue: "image",
+            options: [
+              { value: "video_encode", display: "WebRTC (Re-Encode)" },
+              { value: "video_passthrough", display: "WebRTC (Passthrough)" },
+              { value: "images", display: "JPEG Only" }
+            ]
+          }
+        },
         showPreview: { help: "Show video preview", hint: { type: "boolean", defaultValue: true } },
+        bufferDelayMs: { help: "How many milliseconds in the jitter buffer (WebRTC only)", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 500 } },
         notes: {
           help: "Additional notes about this component",
           hint: { type: "text", optional: true }
@@ -17576,7 +17613,10 @@ function createLoganRung(rung) {
 function createRungImpl({ name, threads, bitrate }) {
   const codec = {
     type: "x264",
-    bitrateMode: { value: bitrate, mode: "abr" },
+    bitrateMode: {
+      value: bitrate,
+      mode: "abr"
+    },
     keyFrameIntervalMax: 50,
     keyFrameIntervalMin: 50,
     sceneCut: 0,

package/client/output.preview/styles.css

@@ -1,128 +1,128 @@
 .preview-outer-container {
-    height: 237px;
-    width: 450px;
+  height: 237px;
+  width: 450px;
 }
 
 .preview-video {
-    width: 420px;
+  width: 420px;
 }
 
 .preview-outer-container div {
-    float: left;
+  float: left;
 }
 
 .preview-levels {
-    height: 100%;
-    width: 30px;
-    background-color: #333;
-    border-radius: 2px;
-    display: flex;
-    flex-direction: row;
-    padding: 4px 3px;
-    margin: auto;
-    margin-top: 0px;
+  height: 100%;
+  width: 30px;
+  background-color: #333;
+  border-radius: 2px;
+  display: flex;
+  flex-direction: row;
+  padding: 4px 3px;
+  margin: auto;
+  margin-top: 0px;
 }
 
 /* paint not glowing LEDs */
 .preview-level {
-    position: relative;
-    margin: 0 2px;
-    flex-grow: 1;
-    z-index: 3;
-    background-color: transparent;
-    background-repeat: repeat-y;
-    background-image: linear-gradient(to bottom, #666 3px, transparent 1px);
-    background-size: 100% 4px;
+  position: relative;
+  margin: 0 2px;
+  flex-grow: 1;
+  z-index: 3;
+  background-color: transparent;
+  background-repeat: repeat-y;
+  background-image: linear-gradient(to bottom, #666 3px, transparent 1px);
+  background-size: 100% 4px;
 }
 
 /* paint glowing LEDs */
 .preview-level:before {
-    width: 100%;
-    height: 100%;
-    content: ' ';
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    z-index: 1;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(to top, green 0%, yellow 80%, red 100%);
-    background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  content: ' ';
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(to top, green 0%, yellow 80%, red 100%);
+  background-size: 100% 100%;
 }
 
 .clip-0-preview:before {
-    clip-path: inset(100% 0 0 0);
-    -webkit-clip-path: inset(100% 0 0 0);
+  clip-path: inset(100% 0 0 0);
+  -webkit-clip-path: inset(100% 0 0 0);
 }
 
 .clip-10-preview:before {
-    clip-path: inset(90% 0 0 0);
-    -webkit-clip-path: inset(90% 0 0 0);
+  clip-path: inset(90% 0 0 0);
+  -webkit-clip-path: inset(90% 0 0 0);
 }
 
 .clip-20-preview:before {
-    clip-path: inset(80% 0 0 0);
-    -webkit-clip-path: inset(80% 0 0 0);
+  clip-path: inset(80% 0 0 0);
+  -webkit-clip-path: inset(80% 0 0 0);
 }
 
 .clip-30-preview:before {
-    clip-path: inset(70% 0 0 0);
-    -webkit-clip-path: inset(70% 0 0 0);
+  clip-path: inset(70% 0 0 0);
+  -webkit-clip-path: inset(70% 0 0 0);
 }
 
 
 .clip-40-preview:before {
-    clip-path: inset(60% 0 0 0);
-    -webkit-clip-path: inset(60% 0 0 0);
+  clip-path: inset(60% 0 0 0);
+  -webkit-clip-path: inset(60% 0 0 0);
 }
 
 .clip-50-preview:before {
-    clip-path: inset(50% 0 0 0);
-    -webkit-clip-path: inset(50% 0 0 0);
+  clip-path: inset(50% 0 0 0);
+  -webkit-clip-path: inset(50% 0 0 0);
 }
 
 .clip-60-preview:before {
-    clip-path: inset(40% 0 0 0);
-    -webkit-clip-path: inset(40% 0 0 0);
+  clip-path: inset(40% 0 0 0);
+  -webkit-clip-path: inset(40% 0 0 0);
 }
 
 .clip-70-preview:before {
-    clip-path: inset(30% 0 0 0);
-    -webkit-clip-path: inset(30% 0 0 0);
+  clip-path: inset(30% 0 0 0);
+  -webkit-clip-path: inset(30% 0 0 0);
 }
 
 
 .clip-80-preview:before {
-    clip-path: inset(20% 0 0 0);
-    -webkit-clip-path: inset(20% 0 0 0);
+  clip-path: inset(20% 0 0 0);
+  -webkit-clip-path: inset(20% 0 0 0);
 }
 
 .clip-90-preview:before {
-    clip-path: inset(10% 0 0 0);
-    -webkit-clip-path: inset(10% 0 0 0);
+  clip-path: inset(10% 0 0 0);
+  -webkit-clip-path: inset(10% 0 0 0);
 }
 
 .clip-100-preview:before {
-    clip-path: inset(0% 0 0 0);
-    -webkit-clip-path: inset(0% 0 0 0);
+  clip-path: inset(0% 0 0 0);
+  -webkit-clip-path: inset(0% 0 0 0);
 }
 
 
 
 /* paint gap lines of LEDs */
 .preview-level::after {
-    width: 100%;
-    height: 100%;
-    content: ' ';
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    z-index: 2;
-    margin-top: 3px;
-    background-image: linear-gradient(to bottom, #333 1px
-            /* space between leds*/
-            , transparent 1px);
-    background-repeat: repeat-y;
-    background-size: 100% 4px;
-    /* 4px LED height */
-    background-color: transparent;
-}
+  width: 100%;
+  height: 100%;
+  content: ' ';
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 2;
+  margin-top: 3px;
+  background-image: linear-gradient(to bottom, #333 1px
+      /* space between leds*/
+      , transparent 1px);
+  background-repeat: repeat-y;
+  background-size: 100% 4px;
+  /* 4px LED height */
+  background-color: transparent;
+}

package/client/style.css

@@ -48,41 +48,69 @@
   --tw-drop-shadow:  ;
 }
 
+.\!container {
+  width: 100% !important;
+}
+
 .container {
   width: 100%;
 }
 
 @media (min-width: 300px) {
+  .\!container {
+    max-width: 300px !important;
+  }
+
   .container {
     max-width: 300px;
   }
 }
 
 @media (min-width: 640px) {
+  .\!container {
+    max-width: 640px !important;
+  }
+
   .container {
     max-width: 640px;
   }
 }
 
 @media (min-width: 768px) {
+  .\!container {
+    max-width: 768px !important;
+  }
+
   .container {
     max-width: 768px;
   }
 }
 
 @media (min-width: 1024px) {
+  .\!container {
+    max-width: 1024px !important;
+  }
+
   .container {
     max-width: 1024px;
   }
 }
 
 @media (min-width: 1280px) {
+  .\!container {
+    max-width: 1280px !important;
+  }
+
   .container {
     max-width: 1280px;
   }
 }
 
 @media (min-width: 1536px) {
+  .\!container {
+    max-width: 1536px !important;
+  }
+
   .container {
     max-width: 1536px;
   }

package/lib/output.preview/info.d.ts

@@ -1,5 +1,8 @@
-import type { PreviewOutputEvent, PreviewOutputSettings, PreviewOutputState } from "./runtime";
+import type { PreviewOutputEvent, PreviewOutputSettings } from "./runtime";
 import type Registration from "@norskvideo/norsk-studio/lib/extension/registration";
-export default function (R: Registration): import("@norskvideo/norsk-studio/lib/extension/client-types").NodeInfo<PreviewOutputSettings, PreviewOutputState, object, PreviewOutputEvent>;
+export default function (R: Registration): import("@norskvideo/norsk-studio/lib/extension/client-types").NodeInfo<PreviewOutputSettings, {
+    url?: string;
+    levels?: import("./types").components["schemas"]["audio_level"];
+}, object, PreviewOutputEvent>;
 export declare const hardwareNames: readonly ["quadra", "nvidia"];
 export type HardwareName = typeof hardwareNames[number];

package/lib/output.preview/info.js

@@ -76,6 +76,9 @@ function default_1(R) {
                     case 'audio-levels':
                         state.levels = ev.levels;
                         break;
+                    case 'source-lost':
+                        state = {};
+                        break;
                     default:
                         assertUnreachable(evType);
                 }
@@ -89,9 +92,20 @@ function default_1(R) {
                 hardware: (0, config_1.HardwareSelection)()
             },
             form: {
-                bufferDelayMs: { help: "How many milliseconds in the jitter buffer", hint: { type: 'numeric', validation: JitterBuffer, defaultValue: 500.0 } },
-                skipTranscode: { help: "Skip transcoding for WebRTC-ready streams", hint: { type: 'boolean', defaultValue: false } },
+                previewMode: {
+                    help: "How to display the video",
+                    hint: {
+                        type: 'select',
+                        defaultValue: 'image',
+                        options: [
+                            { value: 'video_encode', display: 'WebRTC (Re-Encode)' },
+                            { value: 'video_passthrough', display: 'WebRTC (Passthrough)' },
+                            { value: 'images', display: 'JPEG Only' }
+                        ]
+                    }
+                },
                 showPreview: { help: "Show video preview", hint: { type: 'boolean', defaultValue: true } },
+                bufferDelayMs: { help: "How many milliseconds in the jitter buffer (WebRTC only)", hint: { type: 'numeric', validation: JitterBuffer, defaultValue: 500.0 } },
                 notes: {
                     help: "Additional notes about this component",
                     hint: { type: 'text', optional: true }

package/lib/output.preview/info.js.map

@@ -1 +1 @@
-{"version":3,"file":"info.js","sourceRoot":"","sources":["../../src/output.preview/info.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"info.js","sourceRoot":"","sources":["../../src/output.preview/info.ts"],"names":[],"mappings":"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"}

package/lib/output.preview/inline-view.js

@@ -26,6 +26,16 @@ function InlineView({ state, config, raise }) {
             video.remove();
         });
     };
+    const [loadedImage, setLoadedImage] = (0, react_1.useState)(undefined);
+    (0, react_1.useEffect)(() => {
+        const container = document.getElementById(`preview-${id}`) ?? undefined;
+        if (!container)
+            return;
+        container.innerHTML = '';
+        if (loadedImage) {
+            container.appendChild(loadedImage);
+        }
+    }, [loadedImage]);
     (0, react_1.useEffect)(() => {
         if (!url || !showPreview) {
             if (client) {
@@ -34,11 +44,25 @@ function InlineView({ state, config, raise }) {
             }
             return;
         }
-        const newClient = createClient(url);
-        setClient(newClient);
-        return () => {
-            cleanupClient(newClient);
-        };
+        if (config.previewMode == "image") {
+            const container = document.getElementById(`preview-${id}`) ?? undefined;
+            if (!container)
+                return;
+            const img = document.createElement('img');
+            img.width = 420;
+            img.height = 236;
+            img.onload = () => {
+                setLoadedImage(img);
+            };
+            img.src = url;
+        }
+        else {
+            const newClient = createClient(url);
+            setClient(newClient);
+            return () => {
+                cleanupClient(newClient);
+            };
+        }
     }, [state.url, showPreview]);
     (0, react_1.useEffect)(() => {
         setShowPreview(config.showPreview ?? true);

package/lib/output.preview/inline-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-view.js","sourceRoot":"","sources":["../../src/output.preview/inline-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"inline-view.js","sourceRoot":"","sources":["../../src/output.preview/inline-view.tsx"],"names":[],"mappings":"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"}

package/lib/output.preview/runtime.d.ts

@@ -1,27 +1,23 @@
-import { AudioMeasureLevelsNode, Norsk, WhepOutputSettings as SdkSettings, SourceMediaNode, WhepOutputNode } from '@norskvideo/norsk-sdk';
-import { OnCreated, RuntimeUpdates, ServerComponentDefinition, StudioNodeSubscriptionSource, StudioRuntime, StudioShared } from '@norskvideo/norsk-studio/lib/extension/runtime-types';
-import { CustomSinkNode, SimpleSinkWrapper, SubscriptionOpts } from '@norskvideo/norsk-studio/lib/extension/base-nodes';
+import { AudioMeasureLevelsNode, ImagePreviewOutputNode, Norsk, ReceiveFromAddressAuto, WhepOutputSettings as SdkSettings, SourceMediaNode, SubscriptionError, WhepOutputNode } from '@norskvideo/norsk-sdk';
+import { InstanceRouteInfo, OnCreated, RuntimeUpdates, ServerComponentDefinition, StudioNodeSubscriptionSource, StudioRuntime, StudioShared } from '@norskvideo/norsk-studio/lib/extension/runtime-types';
+import { CustomSinkNode, SubscriptionOpts } from '@norskvideo/norsk-studio/lib/extension/base-nodes';
 import { HardwareAccelerationType, IceServer } from '@norskvideo/norsk-studio/lib/shared/config';
 import { ContextPromiseControl } from '@norskvideo/norsk-studio/lib/runtime/util';
+import { components } from './types';
+export type PreviewMode = 'video_passthrough' | 'video_encode' | 'image';
 export type PreviewOutputSettings = {
     id: string;
     displayName: string;
     notes?: string;
     bufferDelayMs?: SdkSettings['bufferDelayMs'];
-    skipTranscode?: boolean;
+    previewMode: PreviewMode;
     showPreview?: boolean;
     __global: {
         iceServers: IceServer[];
         hardware?: HardwareAccelerationType;
     };
 };
-export type PreviewOutputState = {
-    url?: string;
-    levels?: {
-        peak: number;
-        rms: number;
-    };
-};
+export type PreviewOutputState = components['schemas']['latest_state'];
 export type PreviewOutputEvent = {
     type: 'url-published';
     url: string;
@@ -31,10 +27,13 @@ export type PreviewOutputEvent = {
         peak: number;
         rms: number;
     };
+} | {
+    type: 'source-lost';
 };
 export type PreviewOutputCommand = object;
-export default class WhepOutputDefinition implements ServerComponentDefinition<PreviewOutputSettings, SimpleSinkWrapper, PreviewOutputState, PreviewOutputCommand, PreviewOutputEvent> {
-    create(norsk: Norsk, cfg: PreviewOutputSettings, cb: OnCreated<SimpleSinkWrapper>, runtime: StudioRuntime<PreviewOutputState, PreviewOutputCommand, PreviewOutputEvent>): Promise<void>;
+export default class WhepOutputDefinition implements ServerComponentDefinition<PreviewOutputSettings, PreviewOutput, PreviewOutputState, PreviewOutputCommand, PreviewOutputEvent> {
+    create(norsk: Norsk, cfg: PreviewOutputSettings, cb: OnCreated<PreviewOutput>, runtime: StudioRuntime<PreviewOutputState, PreviewOutputCommand, PreviewOutputEvent>): Promise<void>;
+    instanceRoutes(): Promise<InstanceRouteInfo<PreviewOutputSettings, PreviewOutput, PreviewOutputState, PreviewOutputCommand, PreviewOutputEvent>[]>;
 }
 export declare class PreviewOutput extends CustomSinkNode {
     initialised: Promise<void>;
@@ -44,10 +43,14 @@ export declare class PreviewOutput extends CustomSinkNode {
     cfg: PreviewOutputSettings;
     encoder?: SourceMediaNode;
     whep?: WhepOutputNode;
+    images?: ImagePreviewOutputNode;
     audioLevels?: AudioMeasureLevelsNode;
     context: ContextPromiseControl;
+    currentSources: StudioNodeSubscriptionSource[];
     constructor(norsk: Norsk, { updates, shared }: StudioRuntime<PreviewOutputState, PreviewOutputCommand, PreviewOutputEvent>, cfg: PreviewOutputSettings);
     initialise(): Promise<void>;
     subscribe(sources: StudioNodeSubscriptionSource[], _opts?: SubscriptionOpts | undefined): void;
+    sourceContextChange(_responseCallback: (error?: SubscriptionError) => void): Promise<boolean>;
     subscribeImpl(sources: StudioNodeSubscriptionSource[]): Promise<void>;
+    setupWhep(subscriptions: ReceiveFromAddressAuto[]): Promise<void>;
 }