{t("streamCrafter")}

{statusText}

{#if !crafterState.mediaStream}

{t("addSourcePrompt")}

{/if} {#if crafterState.state === "connecting" || crafterState.state === "reconnecting"}

{statusText}

{/if} {#if crafterState.isStreaming}

{t("live")}

{/if} {#if enableCompositor && compositorStore && compositorState.isEnabled && compositorState.isInitialized} {@const activeScene = compositorState.scenes.find((s) => s.id === compositorState.activeSceneId) || null} compositorStore?.applyLayout(layout)} onCycleSourceOrder={(direction) => compositorStore?.cycleSourceOrder(direction)} /> {/if}

{#if crafterState.sources.length > 0}

(showSources = !showSources)} role="button" tabindex="0" onkeydown={(e) => e.key === "Enter" && (showSources = !showSources)} title={showSources ? t("collapseMixer") : t("expandMixer")} > {t("mixer")} ({crafterState.sources.length}) {#if showSources} {:else} {/if}

{#if showSources}

{#each crafterState.sources as source (source.id)} {@const isVisible = getSourceLayerVisibility(source.id)}

{#if enableCompositor} {/if}

{#if source.type === "camera"} {:else if source.type === "screen"} {/if}

{source.label} {#if source.primaryVideo && !enableCompositor} {t("primary")} {/if}

{source.type}

{#if sourceHasVideo(source) && !enableCompositor} {/if} {Math.round(source.volume * 100)}% crafter.setSourceVolume(source.id, volume)} compact={true} />

{/each}

{/if}

{#if crafterState.isCapturing}

{/if} {#if crafterState.error || ingestEndpointsState.error}

{t("error")}

{crafterState.error || ingestEndpointsState.error}

{/if} {#if !resolvedWhipUrl && !crafterState.error && !ingestEndpointsState.error && !isResolvingEndpoint}

{t("warning")}

{t("configureWhipEndpoint")}

{/if} {#if isResolvingEndpoint}

{t("connecting")}

{t("resolvingEndpoint")}

{/if}

{#if showSettings}

{t("quality")}

{#each QUALITY_PROFILES as profile} {/each}

{#if devMode}

{t("debug")}

                      {t("state")}
                      {crafterState.state}
                    
                      {t("audio")}
                      
                        {audioLevels.isMonitoring ? t("active") : t("inactive")}
                      
                      {t("whip")}
                      
                        {resolvedWhipUrl ? t("ok") : t("notSet")}

{/if}

{#if !crafterState.isStreaming} {:else} {/if}

{#if contextMenu}

{#if resolvedWhipUrl} {/if} {#if devMode}

{/if}

{#if devMode} {@const activeScene = compositorState.scenes.find( (s) => s.id === compositorState.activeSceneId )} (isAdvancedPanelOpen = false)} ingestState={crafterState.state} qualityProfile={crafterState.qualityProfile} whipUrl={resolvedWhipUrl} sources={crafterState.sources} stats={crafterState.stats} mediaStream={crafterState.mediaStream} {masterVolume} onMasterVolumeChange={handleMasterVolumeChange} audioLevel={audioLevels.level} audioMixingEnabled={true} error={crafterState.error} {audioProcessing} onAudioProcessingChange={handleAudioProcessingChange} compositorEnabled={compositorState.isEnabled} compositorRendererType={compositorState.rendererType} compositorStats={compositorState.stats} sceneCount={compositorState.scenes.length} layerCount={activeScene?.layers.length ?? 0} useWebCodecs={crafterState.useWebCodecs} isWebCodecsActive={crafterState.isWebCodecsActive} encoderStats={crafterState.encoderStats} onUseWebCodecsChange={(enabled) => crafter.setUseWebCodecs(enabled)} {isWebCodecsAvailable} {encoderOverrides} onEncoderOverridesChange={handleEncoderOverridesChange} /> {/if}