obs.html

<!-- Config Node -->
<script type="text/javascript">
    RED.nodes.registerType("obs-instance", {
        category: "config",
        defaults: {
            name: {value: "OBS Instance", required: false},
            host: {value: "127.0.0.1", required: true},
            port: {value: 4455, required: true, validate: RED.validators.number()}
        },
        credentials: {
            password: {type: "password"}
        },
        label: function() {
            return this.name||`ws://${this.host}:${this.port}`;
        }
    });
</script>

<script type="text/html" data-template-name="obs-instance">
    <div class="form-row">
        <label for="node-config-input-host"><i class="fa fa-globe"></i> Host/IP</label>
        <input type="text" id="node-config-input-host">
    </div>
    <div class="form-row">
        <label for="node-config-input-port"><i class="fa fa-globe"></i> Port</label>
        <input type="text" id="node-config-input-port">
    </div>
    <div class="form-row">
        <label for="node-config-input-password"><i class="fa fa-key"></i> Password</label>
        <input type="password" id="node-config-input-password" placeholder="(optional)">
    </div>
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-config-input-name" placeholder="Name (optional)">
    </div>
</script>

<script type="text/html" data-help-name="obs-instance">
    <h3>Details</h3>
        <p>This node represents a single connection to the obs websocket server.</p>
        <p><code>Host/IP</code> is the ip address or hostname of the device running obs.</p>
        <p><code>Port</code> is the configured websocket port in the obs-websocket settings. Default is 4455.</p>
        <p><code>Password</code> is the configured passwort in the obs-websocket settings.</p>
    <h3>References</h3>
    <ul>
        <li><a href="https://github.com/obsproject/obs-websocket">obs-websocket</a> - GitHub project page</li>
        <li><a href="https://github.com/lebaston100/node-red-contrib-obs-ws">GitHub</a> - the nodes github repository</li>
    </ul>
</script>
<!-- END Config Node -->

<!-- obs connection status -->
<script type="text/javascript">
    RED.nodes.registerType("obs connection status", {
        category: "obs",
        color: "#F3B567",
        defaults: {
            name: {value: ""},
            obsInstance: {type: "obs-instance", required: true}
        },
        inputs: 0,
        outputs: 1,
        icon: "font-awesome/fa-cogs",
        label: function() {
            return this.name||"obs connection status";
        }
    });
</script>

<script type="text/html" data-template-name="obs connection status">
    <div class="form-row">
        <label for="node-input-obsInstance"><i class="fa fa-globe"></i> OBS Instance</label>
        <input type="text" id="node-input-obsInstance">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name (optional)">
    </div>
</script>

<script type="text/html" data-help-name="obs connection status">
    <p>This node shows and outputs the obs connection status.</p>
    <h3>Outputs</h3>
    <ol class="node-ports">
        <dl class="message-properties">
            <dt>payload <span class="property-type">string</span></dt>
            <dd>One of: "ConnectionOpened", "Identified", "AuthenticationFailure", "ConnectionClosed"</dd>
        </dl>
    </ol>
    <h3>References</h3>
    <ul>
        <li><a href="https://github.com/lebaston100/node-red-contrib-obs-ws">GitHub</a> - the nodes github repository</li>
    </ul>
</script>
<!-- END obs connection status -->

<!-- obs event -->
<script type="text/javascript">
    RED.nodes.registerType("obs event", {
        category: "obs",
        color: "#F3B567",
        defaults: {
            name: {value: ""},
            event: {value: "", required: true},
            obsInstance: {type: "obs-instance", required: true}
        },
        inputs: 0,
        outputs: 1,
        icon: "font-awesome/fa-cogs",
        label: function() {
            return this.name||(this.event.split(",").length==1 && this.event)||"obs events";
        },
        oneditprepare: function() {
            $("#node-input-event").typedInput({type:"event", types:[{
                value: "event",
                multiple: true,
                options: websocketEventTypes.map(e => {return {value: e, text: e}})
            }]});

            // Handle docs button click
            $("#node-input-windowBlockedText").hide();
            $("#node-input-event").on("change", function(event, type, value) {
                $("#node-input-obsws-docs").off("click");
                $("#node-input-obsws-docs").on("click", function() {
                    value.split(",").forEach(prop => {
                        let win = window.open(`https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md#${prop.toLowerCase()}`, "_blank");
                        if (!win) $("#node-input-windowBlockedText").show();
                    });
                })
            });
        }
    });

    const websocketEventTypes = [
        "CurrentSceneCollectionChanging","CurrentSceneCollectionChanged","SceneCollectionListChanged",
        "CurrentProfileChanging","CurrentProfileChanged","ProfileListChanged","SourceFilterListReindexed",
        "SourceFilterCreated","SourceFilterRemoved","SourceFilterNameChanged","SourceFilterSettingsChanged",
        "SourceFilterEnableStateChanged","ExitStarted","InputCreated","InputRemoved","InputNameChanged",
        "InputSettingsChanged","InputActiveStateChanged","InputShowStateChanged","InputMuteStateChanged",
        "InputVolumeChanged","InputAudioBalanceChanged","InputAudioSyncOffsetChanged","InputAudioTracksChanged",
        "InputAudioMonitorTypeChanged","InputVolumeMeters","MediaInputPlaybackStarted","MediaInputPlaybackEnded",
        "MediaInputActionTriggered","StreamStateChanged","RecordStateChanged","RecordFileChanged","ReplayBufferStateChanged",
        "VirtualcamStateChanged","ReplayBufferSaved","SceneItemCreated","SceneItemRemoved","SceneItemListReindexed",
        "SceneItemEnableStateChanged","SceneItemLockStateChanged","SceneItemSelected","SceneItemTransformChanged",
        "SceneCreated","SceneRemoved","SceneNameChanged","CurrentProgramSceneChanged","CurrentPreviewSceneChanged",
        "SceneListChanged","CurrentSceneTransitionChanged","CurrentSceneTransitionDurationChanged",
        "SceneTransitionStarted","SceneTransitionEnded","SceneTransitionVideoEnded","StudioModeStateChanged",
        "ScreenshotSaved","VendorEvent","CustomEvent"
    ];
</script>

<script type="text/html" data-template-name="obs event">
    <div class="form-row">
        <label for="node-input-obsInstance"><i class="fa fa-globe"></i> OBS Instance</label>
        <input type="text" id="node-input-obsInstance">
    </div>
    <div class="form-row">
        <label for="node-input-event">Event</label>
        <input type="text" id="node-input-event" style="width: calc(70.5% - 47px);"></select>
        <a id="node-input-obsws-docs" class="red-ui-button" style="margin-left: 10px;" title="Open obs-websocket docs"><i class="fa fa-book"></i></a>
    </div>
    <div class="form-tips" id="node-input-windowBlockedText" style="margin-bottom: 10px">
        <b>Attention:</b> Some documentation pages could not be opened, make sure to allow popups for this page.
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name (optional)">
    </div>
</script>

<script type="text/html" data-help-name="obs event">
    <p>This node outputs event messages based on the configured event type.</p>
    <h3>Outputs</h3>
    <ol class="node-ports">
        <dl class="message-properties">
            <dt>topic <span class="property-type">string</span></dt>
            <dd>The event name</dd>
        </dl>
        <dl class="message-properties">
            <dt>payload <span class="property-type">object</span></dt>
            <dd>The event object as emitted by obs-websocket</dd>
        </dl>
    </ol>
    <h3>References</h3>
    <ul>
        <li><a href="https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md#events">obs-websocket API docs</a> - full description of <code>msg.payload</code></li>
        <li><a href="https://github.com/lebaston100/node-red-contrib-obs-ws">GitHub</a> - the nodes github repository</li>
    </ul>
</script>
<!-- END obs event -->

<!-- obs request -->
<script type="text/javascript">
    RED.nodes.registerType("obs request", {
        category: "obs",
        color: "#F3B567",
        defaults: {
            name: {value: ""},
            obsInstance: {type: "obs-instance", required: true},
            requests: {value: [{rt: "SetCurrentProgramScene", rtt: "requestName", rd: '{"sceneName":"Scene 1"}', rdt: "json"}]},
            batchExecutionType: {value: "SerialRealtime"},
            haltOnFailure: {value: false},
            // old ones, need to keep backwards compatibility/auto-migration
            reqType: {value:""},
            reqTypeType: {value:""},
            reqData: {value:""},
            reqDataType: {value:""}
        },
        inputs: 1,
        outputs: 2,
        icon: "font-awesome/fa-cogs",
        outputLabels: ["result", "error"],
        label: function() {
            if (this.name) {
                return this.name;
            } else if (this.requests && this.requests.length == 1) {
                return ["str", "requestName"].includes(this.requests[0].rtt) ? this.requests[0].rt : this.requests[0].rtt + "." + String(this.requests[0].rt);
            } else if (this.requests && this.requests.length !== 1) {
                return "batch request";
            } else if (this.reqTypeType && ["str", "requestName"].includes(this.reqTypeType)) {
                return this.reqType;
            }
            return "obs request";
        },
        oneditprepare: function() {
            const obsWsDocsUrl = "https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md";
            let windowBlockedText = $("#node-input-windowBlockedText").hide();
            let batchOptions = $(".batchOptions").hide();
            let noRequestsText = $("#node-input-noRequestsText");

            // custom typedInput type defs
            let noneTypeDef = {
                value: "none",
                label: "None",
                hasValue: false,
                icon: "fa fa-times-circle-o"
            };
            let requestsTypeDef = {
                    value: "requestName",
                    label: "Request",
                    hasValue: false,
                    icon: "fa fa-list",
                    options: websocketAddRequestTypesFlat
            };

            // RequestBatchExecutionType
            $("#node-input-batchExecutionType").typedInput({
                types: [{
                        value: "opt",
                        options: [
                            {value: "SerialRealtime", label: "SerialRealtime"},
                            {value: "SerialFrame", label: "SerialFrame"},
                            {value: "Parallel", label: "Parallel"},
                        ]
                    }
                ]
            });

            // Initialize editableList
            $("#node-input-request-container").editableList({
                sortable: true,
                removable: true,
                addButton: "request",
                height: "auto",
                addItem: function(row, index, data) {
                    // Generate the entire entry row here including dom and events
                    // Show batch options if truthy aka != 0
                    index && batchOptions.show();
                    // Always hide no request setup message since we have at least 1 entry
                    noRequestsText.hide();

                    // Let's create all the display elements we need
                    let lineContainer = document.createDocumentFragment();
                    let subRow1 = $("<div>").appendTo(lineContainer);
                    let subRow2 = $("<div>").css({"margin-top": "8px"}).appendTo(lineContainer);
                    $("<label>").text("Request Type").appendTo(subRow1);
                    $("<label>").text("Request Data").appendTo(subRow2);
                    let rtTypedInput = $("<input>", {type: "text", class: "red-ui-autoComplete", did: "node-input-reqType"}).css({width: "calc(74% - 47px)"})
                        .appendTo(subRow1).typedInput({
                            default: "msg",
                            types: ["str", requestsTypeDef, "msg", "flow", "global"]
                        });
                    let wsDocsButton = $("<a>", {class: "red-ui-button", title: "Open obs-websocket docs"}).css({"margin-left": "10px"})
                        .append("<i class='fa fa-book'></i>").appendTo(subRow1);

                    let rdTypedInput = $("<input>", {type: "text", class: "red-ui-autoComplete", did: "node-input-reqData"}).css({width: "73%"})
                        .appendTo(subRow2).typedInput({types: [noneTypeDef, "msg", "flow", "global", "jsonata", "json"]});
                    let invalidRt = $("<div>", {class: "form-tips"}).css({"margin": "4px"})
                        .append("<b>Warning:</b> The current Request Type is unknown and will probably not work if you try.")
                        .insertAfter(subRow1);

                    // Insert line container into the editableList row we were provided
                    row.append(lineContainer);

                    rtTypedInput.on("change", function(event, type, value) {
                        // Handle AutoComplete
                        if (type == "str") {
                            rtTypedInput.next(".red-ui-typedInput-container").find(".red-ui-typedInput-input").autoComplete({
                                search: function(val) {
                                    let matches = [];
                                    websocketAddRequestTypesFlat.forEach((v, i) => {
                                        v.toLowerCase().includes(val.toLowerCase()) && matches.push({value: v, label: v, i: i});
                                    });
                                    return matches;
                                }
                            })
                        }

                        // Handle display of requestData TypedInput
                        if (!(["str", "requestName"].includes(type) && value in websocketAllRequestTypes && !websocketAllRequestTypes[value])) {
                            subRow2.show();
                        } else {
                            rdTypedInput.typedInput("type", "none");
                            subRow2.hide();
                        }

                        // Handle docs button click
                        wsDocsButton.off("click").on("click", function() {
                            let win = window.open(`${obsWsDocsUrl}#${["str", "requestName"].includes(type) &&
                                websocketAddRequestTypesFlat.includes(value) ? value.toLowerCase() : "requests"}`, "_blank");
                            win ? windowBlockedText.hide() : windowBlockedText.show();
                        });

                        // Handle invalid requestType message
                        invalidRt.hide();
                        if (type == "str" && !websocketAddRequestTypesFlat.includes(value)) invalidRt.show();

                        // Auto correct *.* values for requestType
                        fixUserError(rtTypedInput, type, value);
                    });

                    // Auto correct *.* values for requestData
                    rdTypedInput.on("change", function(event, type, value) {
                        fixUserError(rdTypedInput, type, value);
                    });

                    // Set fields to the values provided in the data object
                    rtTypedInput.typedInput("type", data.rtt);
                    rtTypedInput.typedInput("value", data.rt);
                    rdTypedInput.typedInput("type", data.rdt);
                    rdTypedInput.typedInput("value", data.rd);
                },
                removeItem: function(data) {
                    // Hide batch options if only 1 entry
                    $("#node-input-request-container").editableList("length") <= 1 && batchOptions.hide();
                    $("#node-input-request-container").editableList("length") == 0 && noRequestsText.show();
                }
            });

            // Migrate old config values to new format if they exist
            if (this.reqDataType && this.reqTypeType && this.requests === undefined) {
                this.requests = [{
                    rt: this.reqType,
                    rtt: this.reqTypeType,
                    rd: this.reqData,
                    rdt: this.reqDataType
                }];
                this.reqType = this.reqTypeType = this.reqData = this.reqDataType = null;
            }

            // Click action from the help text
            $("#node-input-configureFromHelp").click(function(event) {
                event.preventDefault();
                $("#node-input-request-container").editableList("addItem", {rt: "topic",
                    rtt: "msg", rd: 'payload', rdt: "msg"});
            })
            this.requests.length && noRequestsText.hide();

            // Add all requests to editableList
            this.requests.forEach(r => $("#node-input-request-container").editableList("addItem", r));
        },
        oneditsave: function() {
            // get data from inputs and update requests array
            let itemsDom = $("#node-input-request-container").editableList("items");
            let config = this;
            this.requests = []
            itemsDom.each(function(index) {
                let domLine = $(this);
                config.requests.push({
                    rt: domLine.find("[did='node-input-reqType']").typedInput("value"),
                    rtt: domLine.find("[did='node-input-reqType']").typedInput("type"),
                    rd: domLine.find("[did='node-input-reqData']").typedInput("value"),
                    rdt: domLine.find("[did='node-input-reqData']").typedInput("type")
                });
            });
        }
    });

    const websocketAllRequestTypes = {
        "GetPersistentData":true,"SetPersistentData":true,"GetSceneCollectionList":false,"SetCurrentSceneCollection":true,
        "CreateSceneCollection":true,"GetProfileList":false,"SetCurrentProfile":true,"CreateProfile":true,
        "RemoveProfile":true,"GetProfileParameter":true,"SetProfileParameter":true,"GetVideoSettings":false,
        "SetVideoSettings":true,"GetStreamServiceSettings":false,"SetStreamServiceSettings":true,
        "GetRecordDirectory":false,"SetRecordDirectory":true,"GetSourceFilterKindList":false,"GetSourceFilterList":true,
        "GetSourceFilterDefaultSettings":true,"CreateSourceFilter":true,"RemoveSourceFilter":true,
        "SetSourceFilterName":true,"GetSourceFilter":true,"SetSourceFilterIndex":true,"SetSourceFilterSettings":true,
        "SetSourceFilterEnabled":true,"GetVersion":false,"GetStats":false,"BroadcastCustomEvent":true,
        "CallVendorRequest":true,"GetHotkeyList":false,"TriggerHotkeyByName":true,"TriggerHotkeyByKeySequence":true,
        "Sleep":true,"GetInputList":true,"GetInputKindList":true,"GetSpecialInputs":false,"CreateInput":true,
        "RemoveInput":true,"SetInputName":true,"GetInputDefaultSettings":true,"GetInputSettings":true,
        "SetInputSettings":true,"GetInputMute":true,"SetInputMute":true,"ToggleInputMute":true,
        "GetInputVolume":true,"SetInputVolume":true,"GetInputAudioBalance":true,"SetInputAudioBalance":true,
        "GetInputAudioSyncOffset":true,"SetInputAudioSyncOffset":true,"GetInputAudioMonitorType":true,
        "SetInputAudioMonitorType":true,"GetInputAudioTracks":true,"SetInputAudioTracks":true,
        "GetInputPropertiesListPropertyItems":true,"PressInputPropertiesButton":true,"GetMediaInputStatus":true,
        "SetMediaInputCursor":true,"OffsetMediaInputCursor":true,"TriggerMediaInputAction":true,
        "GetVirtualCamStatus":false,"ToggleVirtualCam":false,"StartVirtualCam":false,"StopVirtualCam":false,
        "GetReplayBufferStatus":false,"ToggleReplayBuffer":false,"StartReplayBuffer":false,"StopReplayBuffer":false,
        "SaveReplayBuffer":false,"GetLastReplayBufferReplay":false,"GetOutputList":false,"GetOutputStatus":true,
        "ToggleOutput":true,"StartOutput":true,"StopOutput":true,"GetOutputSettings":true,"SetOutputSettings":true,
        "GetRecordStatus":false,"ToggleRecord":false,"StartRecord":false,"StopRecord":false,"ToggleRecordPause":false,
        "PauseRecord":false,"ResumeRecord":false,"SplitRecordFile":false,"CreateRecordChapter":true,
        "GetSceneItemList":true,"GetGroupSceneItemList":true,"GetSceneItemId":true,"GetSceneItemSource":true,
        "CreateSceneItem":true,"RemoveSceneItem":true,"DuplicateSceneItem":true,"GetSceneItemTransform":true,
        "SetSceneItemTransform":true,"GetSceneItemEnabled":true,"SetSceneItemEnabled":true,"GetSceneItemLocked":true,
        "SetSceneItemLocked":true,"GetSceneItemIndex":true,"SetSceneItemIndex":true,"GetSceneItemBlendMode":true,
        "SetSceneItemBlendMode":true,"GetSceneList":false,"GetGroupList":false,"GetCurrentProgramScene":false,
        "SetCurrentProgramScene":true,"GetCurrentPreviewScene":false,"SetCurrentPreviewScene":true,
        "CreateScene":true,"RemoveScene":true,"SetSceneName":true,"GetSceneSceneTransitionOverride":true,
        "SetSceneSceneTransitionOverride":true,"GetSourceActive":true,"GetSourceScreenshot":true,
        "SaveSourceScreenshot":true,"GetStreamStatus":false,"ToggleStream":false,"StartStream":false,
        "StopStream":false,"SendStreamCaption":true,"GetTransitionKindList":false,"GetSceneTransitionList":false,
        "GetCurrentSceneTransition":false,"SetCurrentSceneTransition":true,"SetCurrentSceneTransitionDuration":true,
        "SetCurrentSceneTransitionSettings":true,"GetCurrentSceneTransitionCursor":false,"TriggerStudioModeTransition":false,
        "SetTBarPosition":true,"GetStudioModeEnabled":false,"SetStudioModeEnabled":true,"OpenInputPropertiesDialog":true,
        "OpenInputFiltersDialog":true,"OpenInputInteractDialog":true,"GetMonitorList":false,"OpenVideoMixProjector":true,
        "OpenSourceProjector":true
    };

    const websocketAddRequestTypesFlat = Object.keys(websocketAllRequestTypes);

    // Find and correct user adding the msg./flow./global. into the data field
    const propRe = /(?<=^(msg|flow|global)\.).*/;
    function fixUserError(elem, type, value) {
        if (["msg", "flow", "global"].includes(type) && propRe.exec(value)) elem.typedInput("value", propRe.exec(value)[0]);
    }
</script>

<script type="text/html" data-template-name="obs request">
    <div class="form-row">
        <label for="node-input-obsInstance"><i class="fa fa-globe"></i> OBS Instance</label>
        <input type="text" id="node-input-obsInstance">
    </div>
    <div class="form-tips" id="node-input-windowBlockedText" style="margin-bottom: 10px">
        <b>Warning:</b> The documentation page could not be opened, make sure to allow popups for this page.
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name (optional)">
    </div>

    <div class="form-row batchOptions">
        <label for="node-input-batchExecutionType"><i class="fa fa-cog"></i> Batch Execution Type</label>
        <input type="text" id="node-input-batchExecutionType" style="width:calc(74% - 47px)">
        <a href="https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md#requestbatchexecutiontype"
            target="_blank" class="red-ui-button" style="margin-left: 10px;" title="Open obs-websocket docs"><i class="fa fa-book"></i></a>
    </div>
    <div class="form-row batchOptions">
        <label for="node-input-haltOnFailure"><i class="fa fa-exclamation-triangle"></i> Halt on Failure</label>
        <input type="checkbox" id="node-input-haltOnFailure" style="width: auto;">
    </div>

    <div class="form-row" style="margin-bottom:0;">
        <label><i class="fa fa-list"></i> Request(s)</label>
    </div>
    <div class="form-row">
        <ol id="node-input-request-container"></ol>
    </div>

    <div class="form-tips" id="node-input-noRequestsText">
        <b>Attention:</b> No requests have been configured so you can send a batch request by sending an array of requests in msg.payload.<br>
        If you want to send a single request configure the node like <a id="node-input-configureFromHelp" href>this</a>.
    </div>
</script>

<script type="text/html" data-help-name="obs request">
    <p>This node runs a obs-websocket request and returns it's result(which can be nothing!) or error.</p>
    <p>If more then one OR no request is defined, a batch request will be performed. Batch requests sends multiple requests at once instead of sending them one after the other.</p>
    <p>If running a batch request, the result output will only output a message if at least one of the requests was successful</p>
    <p>To manually generate and send a batch request, remove all requests from the requests list and send a properly formated batch request array in msg.payload.</p>
    <p>The error output will only output obs-websocket errors. If only a single request is defined, msg.payload will be a string with the obs-websocket error.
        If muliple requests are defined or a manual batch request is sent, the output will be an array of
        <a href="https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md#requestresponse-opcode-7" target="_blank">obs-websocket errors</a>.
    </p>
    <p>Sending a request while the websocket connection is not at least "Identified" will result in an error.</p>
    <p>Errors that happen while parsing your configured request(s) (before sending to obs-websocket) will be printed to the debug console and can be caught with a catch node. 
        The message will have a msg.error object with a string of the error message in msg.error.message (single requests) or a stringified array of error messages (batch requests).
    </p>
    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt class="optional">topic (optional/configurable) <span class="property-type">string</span></dt>
        <dd>The request name.</dd>
    </dl>
    <dl class="message-properties">
        <dt class="optional">payload (optional/configurable) <span class="property-type">any type | array</span></dt>
        <dd>Additional request data OR a batch request array.</dd>
    </dl>
    <h3>Outputs</h3>
    <ol class="node-ports">
        <li>result output
            <dl class="message-properties">
                <dt>payload <span class="property-type">object | array | undefined</span></dt>
                <dd>The result of the request. Object or undefined if it's a single request, array of results for batch requests.</dd>
            </dl>
            <dl class="message-properties">
                <dt>topic <span class="property-type">string</span></dt>
                <dd>The request name.</dd>
            </dl>
        </li>
        <li>error output
            <dl class="message-properties">
                <dt>payload <span class="property-type">string | array</span></dt>
                <dd>The obs-websocket error. This port will only output obs-websocket errors. Errors that happen when parsing your configured requests will not be output here.
                    Use a catch node to catch those errors.</dd>
            </dl>
        </li>
    </ol>
    <h3>References</h3>
    <ul>
        <li><a href="https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md#requests">obs-websocket API docs</a> for the requests and data fields</li>
        <li><a href="https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md#requestbatch-opcode-8">obs-websocket API docs</a> for batch requests and responses</li>
        <li><a href="https://github.com/lebaston100/node-red-contrib-obs-ws">GitHub</a> - the nodes github repository</li>
    </ul>
</script>
<!-- END obs request -->

<!-- SetCurrentProgramScene -->
<script type="text/javascript">
    RED.nodes.registerType("SetCurrentProgramScene", {
        category: "obs",
        color: "#F3B567",
        defaults: {
            name: {value: ""},
            scene: {value: "Scene 1", required: true},
            sceneType: {value: "", required: true},
            obsInstance: {type: "obs-instance", required: true}
        },
        inputs: 1,
        outputs: 1,
        icon: "font-awesome/fa-cogs",
        label: function() {
            return this.name||"SetCurrentProgramScene";
        },
        oneditprepare: function() {
            let node = this;
            let scenesTypeDef = {
                    value: "sceneName",
                    label: "Scene",
                    hasValue: false,
                    icon: "fa fa-list",
                    options: null
            };
            let sceneTypedInputObj = {
                default: "str",
                typeField: $("#node-input-sceneType"),
                types: ["str", "jsonata", "msg", "flow", "global"]
            }
            let sceneTypedInput = $("#node-input-scene");

            // On obs configuration node change
            $("#node-input-obsInstance").change(function(event) {
                // Hide/show warning messages as needed
                $("#node-input-scs-offlinemessage").hide();
                $("#node-input-scs-invalidObsInstanceMessage").hide();

                let instance = $(this).val()
                if (instance == "_ADD_") {
                    $("#node-input-scs-invalidObsInstanceMessage").show();
                    return;
                }
                // http request to backend for obs scene list
                $.getJSON(`nr-contrib-obs-ws/${instance}/list/scenes`, data => {
                    scenesTypeDef.options = data.scenes.reverse().map(s => s.sceneName); // Works because object reference is kept when putting inside sceneTypedInputObj

                    // Handle AutoComplete
                }).fail(() => { // 503 = obs not connected
                    if (node.sceneType == "sceneName" && node.scene !== "") scenesTypeDef.options = [node.scene];
                    $("#node-input-scs-offlinemessage").show();
                }).always(() => {
                    if (scenesTypeDef.options) {
                        sceneTypedInputObj.types.splice(0, 0, scenesTypeDef)
                        sceneTypedInputObj.default = "sceneName";
                    }
                    sceneTypedInput.typedInput(sceneTypedInputObj);
                });
            });

            sceneTypedInput.on("change", function(event, type, value) {
                if (type == "str") {
                    sceneTypedInput.next(".red-ui-typedInput-container").find(".red-ui-typedInput-input").autoComplete({
                        search: function(val) {
                            let matches = [];
                            scenesTypeDef.options && scenesTypeDef.options.forEach((v, i) => {
                                v.toLowerCase().includes(val.toLowerCase()) && matches.push({value: v, label: v, i: i});
                            });
                            return matches;
                        }
                    })
                }
            });
        }
    });
</script>

<script type="text/html" data-template-name="SetCurrentProgramScene">
    <div class="form-tips" id="node-input-scs-offlinemessage" style="color:red;display:none;margin-bottom: 10px">
        Not connected to obs! Unable to fetch scenes. If you just created this obs-instance, you have to deploy at least once.
    </div>
    <div class="form-tips" id="node-input-scs-invalidObsInstanceMessage" style="color:red;display:none;margin-bottom: 10px">
        To access available obs scenes, please select a valid OBS Instance.
    </div>
    <div class="form-row">
        <label for="node-input-obsInstance"><i class="fa fa-globe"></i> OBS Instance</label>
        <input type="text" id="node-input-obsInstance">
    </div>
    <div class="form-row">
        <label for="node-input-scene">Scene Name</label>
        <input type="text" id="node-input-scene" style="width:70%" class="red-ui-autoComplete">
        <input type="hidden" id="node-input-sceneType">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name (optional)">
    </div>
</script>

<script type="text/html" data-help-name="SetCurrentProgramScene">
    <p>This node switches the scene in obs.</p>
    <p>Use a catch node to catch request errors. (optional)</p>
    <p>To automatically fetch available scenes from obs, make sure your obs is running and you deployed the node at least once after adding it.</p>
    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt class="optional">payload (configurable) <span class="property-type">string</span></dt>
        <dd>The scene name.</dd>
    </dl>
    <h3>Outputs</h3>
    <ol class="node-ports">
        <dl class="message-properties">
            <dt>payload <span class="property-type">string</span></dt>
            <dd>The selected scene name if successful.</dd>
        </dl>
    </ol>
    <h3>References</h3>
    <ul>
        <li><a href="https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md#setcurrentprogramscene">obs-websocket API docs</a> for this request</li>
        <li><a href="https://github.com/lebaston100/node-red-contrib-obs-ws">GitHub</a> - the nodes github repository</li>
    </ul>
</script>
<!-- END SetCurrentProgramScene -->

<!-- TriggerStudioModeTransition -->
<script type="text/javascript">
    RED.nodes.registerType("TriggerStudioModeTransition", {
        category: "obs",
        color: "#F3B567",
        defaults: {
            name: {value: ""},
            transition: {value: ""},
            transitionType: {value: ""},
            transitionTime: {value: ""},
            transitionTimeType: {value: ""},
            obsInstance: {type: "obs-instance", required: true}
        },
        inputs: 1,
        outputs: 1,
        icon: "font-awesome/fa-cogs",
        label: function() {
            return this.name||"TriggerStudioModeTransition";
        },
        oneditprepare: function() {
            let node = this;
            let noneTypeDef = {
                value: "none",
                label: "None",
                hasValue: false,
                icon: "fa fa-times-circle-o"
            };
            var transitionTypeDef = {
                    value: "transition",
                    label: "Transition",
                    hasValue: false,
                    icon: "/red/images/typedInput/bool.svg",
                    options: null
            };
            let transitionTypedInputObj = {
                default: "none",
                typeField: "#node-input-transitionType",
                types: [noneTypeDef, "str", "msg", "flow", "global"]
            };
            let transitionTypedInput = $("#node-input-transition");

            // On obs configuration node change
            $("#node-input-obsInstance").change(function(event) {
                // Hide/show warning messages as needed
                $("#node-input-tsmt-offlinemessage").hide();
                $("#node-input-tsmt-invalidObsInstanceMessage").hide();

                let instance = $(this).val()
                if (instance == "_ADD_") {
                    $("#node-input-tsmt-invalidObsInstanceMessage").show();
                    return;
                }

                // http request to backend for obs transition list
                $.getJSON(`nr-contrib-obs-ws/${instance}/list/transitions`, (data) => {
                    transitionTypeDef.options = data.transitions.map(s => s.transitionName);
                }).fail(() => { //503 = obs not connected
                    if (node.transitionType == "transition" && node.transition !== "") transitionTypeDef.options = [node.transition];
                    $("#node-input-tsmt-offlinemessage").show();
                }).always(() => {
                    if (transitionTypeDef.options) transitionTypedInputObj.types.splice(1, 0, transitionTypeDef);
                    transitionTypedInput.typedInput(transitionTypedInputObj);
                });
            });

            transitionTypedInput.on("change", function(event, type, value) {
                if (type == "str") {
                    transitionTypedInput.next(".red-ui-typedInput-container").find(".red-ui-typedInput-input").autoComplete({
                        search: function(val) {
                            let matches = [];
                            transitionTypeDef.options && transitionTypeDef.options.forEach((v, i) => {
                                v.toLowerCase().includes(val.toLowerCase()) && matches.push({value: v, label: v, i: i});
                            });
                            return matches;
                        }
                    })
                }
            });

            $("#node-input-transitionTime").typedInput({
                default: "none",
                typeField: "#node-input-transitionTimeType",
                types: [noneTypeDef, "num", "jsonata", "msg", "flow", "global"]
            });

            // Hide and show transition time setting on transition settings change
            $("#node-input-transition").on('change', (type, value) => {
                value == "none" ? $("#ttp-transistionTime").hide() : $("#ttp-transistionTime").show();
            });
        }
    });
</script>

<script type="text/html" data-template-name="TriggerStudioModeTransition">
    <div class="form-tips" id="node-input-tsmt-offlinemessage" style="color:red;display:none;margin-bottom: 10px">
        Not connected to obs! Unable to fetch scenes. If you just created this obs-instance, you have to deploy at least once.
    </div>
    <div class="form-tips" id="node-input-tsmt-invalidObsInstanceMessage" style="color:red;display:none;margin-bottom: 10px">
        To access available obs scenes, please select a valid OBS Instance.
    </div>
    <div class="form-row">
        <label for="node-input-obsInstance"><i class="fa fa-globe"></i> OBS Instance</label>
        <input type="text" id="node-input-obsInstance">
    </div>
    <div class="form-row">
        <label for="node-input-transition">Transition</label>
        <input type="text" id="node-input-transition" style="width:70%" class="red-ui-autoComplete">
        <input type="hidden" id="node-input-transitionType">
    </div>
    <div class="form-row" id="ttp-transistionTime">
        <label for="node-input-transition">Transition Time</label>
        <input type="text" id="node-input-transitionTime" style="width:70%" class="red-ui-autoComplete">
        <input type="hidden" id="node-input-transitionTimeType">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name (optional)">
    </div>
</script>

<script type="text/html" data-help-name="TriggerStudioModeTransition">
    <p>This node triggers the transition to program action which will take the current preview scene to program.</p>
    <p>By automatically sending 2 different requests before that it can optionally change the transition and set it's duration.</p>
    <p>It's the same action that happens in obs when pressing the "Transition" button in studio mode.</p>
    <p>To automatically fetch available transitions from obs make sure your obs is running and you deployed the node at least once after adding it.</p>
    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt class="optional">transition (configurable) <span class="property-type">string</span></dt>
        <dd>The optional transition name to use.</dd>
        <dt class="optional">transitionTime (configurable) <span class="property-type">string</span></dt>
        <dd>The optional transition time to use for the specified transition.</dd>
    </dl>
    <h3>Outputs</h3>
    <ol class="node-ports">
        <p>The incoming msg.</p>
    </ol>
    <h3>References</h3>
    <ul>
        <li><a href="https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md#triggerstudiomodetransition">obs-websocket API docs</a> for this request</li>
        <li><a href="https://github.com/lebaston100/node-red-contrib-obs-ws">GitHub</a> - the nodes github repository</li>
    </ul>
</script>
<!-- END TriggerStudioModeTransition -->