<MaterialPopupButton label="settings.output_screen" value={outputLabel} name={outputLabel} icon={currentOutput?.boundsLocked ? "locked" : "screen"} popupId="choose_screen" /> <MaterialToggleSwitch label="settings.always_on_top" checked={currentOutput?.alwaysOnTop !== false} defaultValue={true} on:change={(e) => updateOutput("alwaysOnTop", e.detail)} /> {/if} {#if currentOutput?.blackmagic} <Title label="Blackmagic Design" icon="blackmagic" /> <MaterialDropdown label="settings.device" value={currentOutput?.blackmagicData?.deviceId || ""} options={(() => { const usedIds = getUsedBlackmagicDeviceIds(currentOutput?.id) return blackmagicDevices.map((device) => ({ label: usedIds.includes(String(device.id || "")) ? `${device.name} (in use)` : device.name, value: device.id ? String(device.id) : "", disabled: usedIds.includes(String(device.id)) })) })()} on:change={(e) => updateBlackmagicData(e.detail, "deviceId")} /> {#if currentOutput?.blackmagicData?.deviceId} <InputRow> <MaterialDropdown label="settings.display_mode" value={currentOutput.blackmagicData?.displayMode} options={currentOutput.blackmagicData?.displayModes?.map((mode) => ({ label: mode.name, value: mode.name })) || []} on:change={(e) => updateBlackmagicData(e.detail, "displayMode")} /> <MaterialDropdown label="settings.pixel_format" value={currentOutput.blackmagicData?.pixelFormat} options={currentOutput.blackmagicData?.pixelFormats?.map((format) => ({ label: format.name, value: format.name })) || []} on:change={(e) => updateBlackmagicData(e.detail, "pixelFormat")} /> </InputRow> {#if currentOutput.blackmagicData?.pixelFormat?.includes("YUV")} <MaterialToggleSwitch label="SDR" title="SDR Encoding (Rec. 709)" checked={currentOutput.blackmagicData?.sdr !== false} defaultValue={true} on:change={(e) => updateBlackmagicData(e.detail, "sdr")} /> {/if} {#if isAlphaSupported()} <MaterialToggleSwitch label="settings.alpha_key" checked={currentOutput.blackmagicData?.alphaKey} on:change={(e) => updateBlackmagicData(e.detail, "alphaKey")} /> {/if} {/if} {/if} {#if currentOutput?.ndi} <Title label="NDI®" icon="ndi" /> <InputRow> {#if currentOutput.invisible && !currentOutput.blackmagic} <MaterialPopupButton label="edit.size" value={outputLabel} name={outputLabel} icon="resize" popupId="change_output_values" /> {/if} <MaterialDropdown label="settings.frame_rate" value={currentOutput.ndiData?.framerate || "30"} defaultValue="30" options={framerates} on:change={(e) => updateNdiData(e.detail, "framerate")} /> </InputRow> <InputRow> <MaterialTextInput label="inputs.name" value={currentOutput.ndiData?.name || `FreeShow NDI${currentOutput.name ? ` - ${currentOutput.name}` : ""}`} defaultValue={`FreeShow NDI${currentOutput.name ? ` - ${currentOutput.name}` : ""}`} on:change={(e) => updateNdiData(e.detail, "name")} /> <MaterialTextInput label="inputs.group" title="settings.comma_seperated" value={currentOutput.ndiData?.groups || ""} defaultValue="" placeholder="public" on:change={(e) => updateNdiData(e.detail, "groups")} /> </InputRow>  <MaterialToggleSwitch label="settings.transparent" checked={currentOutput.transparent} defaultValue={true} on:change={(e) => updateOutput("transparent", e.detail)} />   {/if} {#if currentOutput?.webrtc} <Title label="WebRTC" icon="broadcast" /> {#if currentOutput.invisible && !currentOutput.blackmagic} <MaterialPopupButton label="edit.size" value={outputLabel} name={outputLabel} icon="resize" popupId="change_output_values" /> {/if} <InputRow> <MaterialDropdown label="settings.frame_rate" value={currentOutput.webrtcData?.fps?.toString() || "30"} defaultValue="30" options={framerates} on:change={(e) => updateWebrtcData(e.detail, "fps")} /> <MaterialTextInput label="Bitrate (kbps)" value={currentOutput.webrtcData?.bitrate?.toString() || "2500"} defaultValue="2500" placeholder="2500" on:change={(e) => updateWebrtcData(e.detail, "bitrate")} /> </InputRow> <MaterialTextInput label="WHIP Endpoint URL" value={currentOutput.webrtcData?.url || ""} placeholder="e.g. https://live.restream.io/whip/live/YOUR_KEY" on:change={(e) => updateWebrtcData(e.detail, "url")} pasteBtn /> <MaterialTextInput label="Bearer Token (Optional)" value={currentOutput.webrtcData?.token || ""} placeholder="Authorization token" on:change={(e) => updateWebrtcData(e.detail, "token")} pasteBtn />  {#if currentOutput?.enabled && currentOutput?.webrtcData?.url} <div style="padding-bottom: 10px;"> <MaterialButton variant="outlined" icon={currentOutput.webrtcData?.streaming ? "stop" : "record"} style="width: 100%; justify-content: center; {currentOutput.webrtcData?.streaming ? 'background: #b60707 !important;' : ''}" on:click={() => (currentOutput?.webrtcData?.streaming ? stopStreaming(currentOutput.id, true) : startStreaming(currentOutput?.id))} white> {translateText(currentOutput.webrtcData?.streaming ? "output.stop_streaming" : "output.start_streaming")} </MaterialButton> </div> {/if} {/if} {#if currentOutput?.rtmp} <Title label="RTMP" icon="broadcast" /> {#if currentOutput.invisible && !currentOutput.blackmagic} <MaterialPopupButton label="edit.size" value={outputLabel} name={outputLabel} icon="resize" popupId="change_output_values" /> {/if} <InputRow> <MaterialDropdown label="settings.frame_rate" value={currentOutput.rtmpData?.fps?.toString() || "30"} defaultValue="30" options={framerates} on:change={(e) => updateRtmpData(e.detail, "fps")} /> <MaterialTextInput label="Bitrate (kbps)" value={currentOutput.rtmpData?.bitrate?.toString() || "4000"} defaultValue="4000" placeholder="4000" on:change={(e) => updateRtmpData(e.detail, "bitrate")} /> </InputRow> <MaterialTextInput label="Stream URL" value={currentOutput.rtmpData?.url || ""} placeholder="e.g. rtmp://a.rtmp.youtube.com/live2" on:change={(e) => updateRtmpData(e.detail, "url")} pasteBtn /> <MaterialTextInput label="Stream key" value={currentOutput.rtmpData?.key || ""} type="password" on:change={(e) => updateRtmpData(e.detail, "key")} pasteBtn /> {#if currentOutput?.enabled && currentOutput?.rtmpData?.url && currentOutput?.rtmpData?.key} <div style="padding-bottom: 10px;"> <MaterialButton variant="outlined" icon={currentOutput.rtmpData?.streaming ? "stop" : "record"} style="width: 100%; justify-content: center; {currentOutput.rtmpData?.streaming ? 'background: #b60707 !important;' : ''}" on:click={() => (currentOutput?.rtmpData?.streaming ? stopRtmpStreaming(currentOutput.id, true) : startRtmpStreaming(currentOutput?.id))} white> {translateText(currentOutput.rtmpData?.streaming ? "output.stop_streaming" : "output.start_streaming")} </MaterialButton> </div> {/if} {/if}

{#if outputsList.filter((a) => !a.stageOutput).length > 1 || !currentOutput?.enabled || currentOutput?.stageOutput} {@const isStreaming = currentOutput?.webrtcData?.streaming || currentOutput?.rtmpData?.streaming} _toggleOutput(e.detail)} /> {/if} {#if stageId} updateOutput("stageOutput", e.detail)} /> {#if $stageShows[stageId]} {/if} {:else} updateOutput("style", e.detail)} allowEmpty /> {#if $styles[styleId]} {/if} {/if} {#if !currentOutput?.invisible} <MaterialPopupButton label="settings.output_screen" value={outputLabel} name={outputLabel} icon={currentOutput?.boundsLocked ? "locked" : "screen"} popupId="choose_screen" /> <MaterialToggleSwitch label="settings.always_on_top" checked={currentOutput?.alwaysOnTop !== false} defaultValue={true} on:change={(e) => updateOutput("alwaysOnTop", e.detail)} /> {/if} {#if currentOutput?.blackmagic} <Title label="Blackmagic Design" icon="blackmagic" /> <MaterialDropdown label="settings.device" value={currentOutput?.blackmagicData?.deviceId || ""} options={(() => { const usedIds = getUsedBlackmagicDeviceIds(currentOutput?.id) return blackmagicDevices.map((device) => ({ label: usedIds.includes(String(device.id || "")) ? `${device.name} (in use)` : device.name, value: device.id ? String(device.id) : "", disabled: usedIds.includes(String(device.id)) })) })()} on:change={(e) => updateBlackmagicData(e.detail, "deviceId")} /> {#if currentOutput?.blackmagicData?.deviceId} <InputRow> <MaterialDropdown label="settings.display_mode" value={currentOutput.blackmagicData?.displayMode} options={currentOutput.blackmagicData?.displayModes?.map((mode) => ({ label: mode.name, value: mode.name })) || []} on:change={(e) => updateBlackmagicData(e.detail, "displayMode")} /> <MaterialDropdown label="settings.pixel_format" value={currentOutput.blackmagicData?.pixelFormat} options={currentOutput.blackmagicData?.pixelFormats?.map((format) => ({ label: format.name, value: format.name })) || []} on:change={(e) => updateBlackmagicData(e.detail, "pixelFormat")} /> </InputRow> {#if currentOutput.blackmagicData?.pixelFormat?.includes("YUV")} <MaterialToggleSwitch label="SDR" title="SDR Encoding (Rec. 709)" checked={currentOutput.blackmagicData?.sdr !== false} defaultValue={true} on:change={(e) => updateBlackmagicData(e.detail, "sdr")} /> {/if} {#if isAlphaSupported()} <MaterialToggleSwitch label="settings.alpha_key" checked={currentOutput.blackmagicData?.alphaKey} on:change={(e) => updateBlackmagicData(e.detail, "alphaKey")} /> {/if} {/if} {/if} {#if currentOutput?.ndi} <Title label="NDI®" icon="ndi" /> <InputRow> {#if currentOutput.invisible && !currentOutput.blackmagic} <MaterialPopupButton label="edit.size" value={outputLabel} name={outputLabel} icon="resize" popupId="change_output_values" /> {/if} <MaterialDropdown label="settings.frame_rate" value={currentOutput.ndiData?.framerate || "30"} defaultValue="30" options={framerates} on:change={(e) => updateNdiData(e.detail, "framerate")} /> </InputRow> <InputRow> <MaterialTextInput label="inputs.name" value={currentOutput.ndiData?.name || `FreeShow NDI${currentOutput.name ? ` - ${currentOutput.name}` : ""}`} defaultValue={`FreeShow NDI${currentOutput.name ? ` - ${currentOutput.name}` : ""}`} on:change={(e) => updateNdiData(e.detail, "name")} /> <MaterialTextInput label="inputs.group" title="settings.comma_seperated" value={currentOutput.ndiData?.groups || ""} defaultValue="" placeholder="public" on:change={(e) => updateNdiData(e.detail, "groups")} /> </InputRow>  <MaterialToggleSwitch label="settings.transparent" checked={currentOutput.transparent} defaultValue={true} on:change={(e) => updateOutput("transparent", e.detail)} />   {/if} {#if currentOutput?.webrtc} <Title label="WebRTC" icon="broadcast" /> {#if currentOutput.invisible && !currentOutput.blackmagic} <MaterialPopupButton label="edit.size" value={outputLabel} name={outputLabel} icon="resize" popupId="change_output_values" /> {/if} <InputRow> <MaterialDropdown label="settings.frame_rate" value={currentOutput.webrtcData?.fps?.toString() || "30"} defaultValue="30" options={framerates} on:change={(e) => updateWebrtcData(e.detail, "fps")} /> <MaterialTextInput label="Bitrate (kbps)" value={currentOutput.webrtcData?.bitrate?.toString() || "2500"} defaultValue="2500" placeholder="2500" on:change={(e) => updateWebrtcData(e.detail, "bitrate")} /> </InputRow> <MaterialTextInput label="WHIP Endpoint URL" value={currentOutput.webrtcData?.url || ""} placeholder="e.g. https://live.restream.io/whip/live/YOUR_KEY" on:change={(e) => updateWebrtcData(e.detail, "url")} pasteBtn /> <MaterialTextInput label="Bearer Token (Optional)" value={currentOutput.webrtcData?.token || ""} placeholder="Authorization token" on:change={(e) => updateWebrtcData(e.detail, "token")} pasteBtn />  {#if currentOutput?.enabled && currentOutput?.webrtcData?.url} <div style="padding-bottom: 10px;"> <MaterialButton variant="outlined" icon={currentOutput.webrtcData?.streaming ? "stop" : "record"} style="width: 100%; justify-content: center; {currentOutput.webrtcData?.streaming ? 'background: #b60707 !important;' : ''}" on:click={() => (currentOutput?.webrtcData?.streaming ? stopStreaming(currentOutput.id, true) : startStreaming(currentOutput?.id))} white> {translateText(currentOutput.webrtcData?.streaming ? "output.stop_streaming" : "output.start_streaming")} </MaterialButton> </div> {/if} {/if} {#if currentOutput?.rtmp} <Title label="RTMP" icon="broadcast" /> {#if currentOutput.invisible && !currentOutput.blackmagic} <MaterialPopupButton label="edit.size" value={outputLabel} name={outputLabel} icon="resize" popupId="change_output_values" /> {/if} <InputRow> <MaterialDropdown label="settings.frame_rate" value={currentOutput.rtmpData?.fps?.toString() || "30"} defaultValue="30" options={framerates} on:change={(e) => updateRtmpData(e.detail, "fps")} /> <MaterialTextInput label="Bitrate (kbps)" value={currentOutput.rtmpData?.bitrate?.toString() || "4000"} defaultValue="4000" placeholder="4000" on:change={(e) => updateRtmpData(e.detail, "bitrate")} /> </InputRow> <MaterialTextInput label="Stream URL" value={currentOutput.rtmpData?.url || ""} placeholder="e.g. rtmp://a.rtmp.youtube.com/live2" on:change={(e) => updateRtmpData(e.detail, "url")} pasteBtn /> <MaterialTextInput label="Stream key" value={currentOutput.rtmpData?.key || ""} type="password" on:change={(e) => updateRtmpData(e.detail, "key")} pasteBtn /> {#if currentOutput?.enabled && currentOutput?.rtmpData?.url && currentOutput?.rtmpData?.key} <div style="padding-bottom: 10px;"> <MaterialButton variant="outlined" icon={currentOutput.rtmpData?.streaming ? "stop" : "record"} style="width: 100%; justify-content: center; {currentOutput.rtmpData?.streaming ? 'background: #b60707 !important;' : ''}" on:click={() => (currentOutput?.rtmpData?.streaming ? stopRtmpStreaming(currentOutput.id, true) : startRtmpStreaming(currentOutput?.id))} white> {translateText(currentOutput.rtmpData?.streaming ? "output.stop_streaming" : "output.start_streaming")} </MaterialButton> </div> {/if} {/if}