From bfc40f337351cc2b12e394aa94586f944a4dab90 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Sun, 7 Sep 2025 11:54:19 +0100
Subject: [PATCH 1/2] widgets: video-player: Add reload button to configuration
 dialog

Clicking this button basically disconnects the stream from the widget, wait a second and then reconnects. It works well.
---
 src/components/widgets/VideoPlayer.vue | 103 +++++++++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/src/components/widgets/VideoPlayer.vue b/src/components/widgets/VideoPlayer.vue
index 61bb3dd997..669927be1c 100644
--- a/src/components/widgets/VideoPlayer.vue
+++ b/src/components/widgets/VideoPlayer.vue
@@ -100,6 +100,20 @@
           <v-btn prepend-icon="mdi-file-rotate-left" variant="outlined" @click="rotateVideo(-90)"> Rotate Left</v-btn>
           <v-btn prepend-icon="mdi-file-rotate-right" variant="outlined" @click="rotateVideo(+90)"> Rotate Right</v-btn>
         </div>
+        <div class="flex-wrap justify-center d-flex ga-5 mt-3">
+          <v-btn
+            prepend-icon="mdi-reload"
+            variant="outlined"
+            :disabled="!nameSelectedStream || isReloading || !hasBeenMountedFor5Seconds"
+            @click="reloadVideo"
+          >
+            Reload Stream
+          </v-btn>
+        </div>
+        <div v-if="isReloading" class="reload-progress-config mt-3">
+          <v-progress-linear :model-value="reloadProgress" color="primary" height="6" rounded />
+          <p class="text-center mt-1 text-sm">Reloading... {{ Math.round(reloadProgress) }}%</p>
+        </div>
       </v-card-text>
     </v-card>
   </v-dialog>
@@ -134,6 +148,10 @@ const nameSelectedStream = ref<string | undefined>()
 const videoElement = ref<HTMLVideoElement | undefined>()
 const mediaStream = ref<MediaStream | undefined>()
 const streamConnected = ref(false)
+const isReloading = ref(false)
+const reloadProgress = ref(0)
+const previousStream = ref<string | undefined>()
+const hasBeenMountedFor5Seconds = ref(false)
 
 onBeforeMount(() => {
   // Set the default initial values that are not present in the widget options
@@ -147,6 +165,11 @@ onBeforeMount(() => {
   }
   widget.value.options = Object.assign({}, defaultOptions, widget.value.options)
   nameSelectedStream.value = widget.value.options.internalStreamName
+
+  // Set the 5-second delay before showing reload buttons
+  setTimeout(() => {
+    hasBeenMountedFor5Seconds.value = true
+  }, 5000)
 })
 
 const externalStreamId = computed(() => {
@@ -229,6 +252,34 @@ const rotateVideo = (angle: number): void => {
   widget.value.options.rotationAngle += angle
 }
 
+const reloadVideo = (): void => {
+  if (isReloading.value || !nameSelectedStream.value) return
+
+  // Store the current stream to re-select later
+  previousStream.value = nameSelectedStream.value
+  isReloading.value = true
+  reloadProgress.value = 0
+
+  // Clear the current stream
+  nameSelectedStream.value = undefined
+
+  // Progress bar animation
+  const progressInterval = setInterval(() => {
+    reloadProgress.value += 100 / 30 // Update 30 times over 3 seconds
+    if (reloadProgress.value >= 100) {
+      clearInterval(progressInterval)
+    }
+  }, 100)
+
+  // Re-select the stream after 3 seconds
+  setTimeout(() => {
+    nameSelectedStream.value = previousStream.value
+    isReloading.value = false
+    reloadProgress.value = 0
+    clearInterval(progressInterval)
+  }, 3000)
+}
+
 const flipStyle = computed(() => {
   return `scale(${widget.value.options.flipHorizontally ? -1 : 1}, ${widget.value.options.flipVertically ? -1 : 1})`
 })
@@ -289,4 +340,56 @@ video {
   color: white;
   border: 2px solid rgb(0, 20, 80);
 }
+
+.reload-section {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.reload-button {
+  border-color: rgba(255, 255, 255, 0.6) !important;
+  color: white !important;
+  transition: all 0.3s ease;
+}
+
+.reload-button:hover {
+  border-color: white !important;
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  transform: rotate(90deg);
+}
+
+.reload-progress-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.reload-icon {
+  animation: spin 2s linear infinite;
+}
+
+.reload-progress-bar {
+  width: 200px;
+  max-width: 80%;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.reload-progress-config {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 </style>

From 1e788b783cf1ec7c813ba3e866f309ef537f85b7 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 9 Dec 2025 16:03:26 -0300
Subject: [PATCH 2/2] video: Add debug console to the video player widget

---
 src/components/WebRTCDebugConsole.vue  | 212 +++++++++++++++++++++++++
 src/components/widgets/VideoPlayer.vue | 150 ++++++++++-------
 src/composables/webRTC.ts              |  20 +++
 src/composables/webRTCDebugConsole.ts  |  78 +++++++++
 4 files changed, 401 insertions(+), 59 deletions(-)
 create mode 100644 src/components/WebRTCDebugConsole.vue
 create mode 100644 src/composables/webRTCDebugConsole.ts

diff --git a/src/components/WebRTCDebugConsole.vue b/src/components/WebRTCDebugConsole.vue
new file mode 100644
index 0000000000..a0a5f1523a
--- /dev/null
+++ b/src/components/WebRTCDebugConsole.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="webrtc-debug-console">
+    <div class="console-header">
+      <div class="console-controls">
+        <v-btn
+          size="x-small"
+          variant="text"
+          color="white"
+          :disabled="isAtBottom"
+          icon="mdi-arrow-down"
+          @click="scrollToBottom"
+        />
+        <v-btn size="x-small" variant="text" color="white" icon="mdi-delete" @click="clearConsole" />
+      </div>
+    </div>
+
+    <div ref="consoleContainer" class="console-content" @scroll="onScroll">
+      <div v-if="messages.length === 0" class="no-messages">No debug messages yet...</div>
+      <div
+        v-for="(message, index) in messages"
+        :key="index"
+        class="console-message"
+        :class="[`message-${message.type}`]"
+      >
+        <span class="message-timestamp">{{ formatTimestamp(message.timestamp) }}</span>
+        <span class="message-type">[{{ message.type.toUpperCase() }}]</span>
+        <span class="message-content">{{ message.message }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { useWebRTCDebugConsole } from '@/composables/webRTCDebugConsole'
+
+const props = defineProps<{
+  /**
+   * Stream ID to display debug messages for
+   */
+  streamId: string
+}>()
+
+const debugConsole = useWebRTCDebugConsole()
+const consoleContainer = ref<HTMLElement>()
+const isAtBottom = ref(true)
+const autoScroll = ref(true)
+
+const messages = computed(() => {
+  return debugConsole.getMessagesForStream(props.streamId)
+})
+
+const formatTimestamp = (timestamp: Date): string => {
+  return timestamp.toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+const scrollToBottom = (): void => {
+  if (consoleContainer.value) {
+    consoleContainer.value.scrollTop = consoleContainer.value.scrollHeight
+    autoScroll.value = true
+  }
+}
+
+const clearConsole = (): void => {
+  debugConsole.clearMessagesForStream(props.streamId)
+}
+
+const onScroll = (): void => {
+  if (!consoleContainer.value) return
+
+  const { scrollTop, scrollHeight, clientHeight } = consoleContainer.value
+  const threshold = 50 // pixels from bottom to consider "at bottom"
+
+  isAtBottom.value = scrollTop + clientHeight >= scrollHeight - threshold
+
+  // Disable auto-scroll if user manually scrolls up
+  if (!isAtBottom.value) {
+    autoScroll.value = false
+  } else {
+    autoScroll.value = true
+  }
+}
+
+// Auto-scroll to bottom when new messages arrive (if auto-scroll is enabled)
+watch(
+  messages,
+  async () => {
+    if (autoScroll.value) {
+      await nextTick()
+      scrollToBottom()
+    }
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  // Initial scroll to bottom
+  nextTick(() => {
+    scrollToBottom()
+  })
+})
+
+onUnmounted(() => {
+  // Clean up if needed
+})
+</script>
+
+<style scoped>
+.webrtc-debug-console {
+  display: flex;
+  flex-direction: column;
+  height: 250px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  overflow: hidden;
+}
+
+.console-header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 4px 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.console-controls {
+  display: flex;
+  gap: 4px;
+}
+
+.console-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 8px;
+  color: white;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.console-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.console-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.console-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.console-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.no-messages {
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  padding: 24px;
+  font-style: italic;
+  font-size: 12px;
+}
+
+.console-message {
+  display: flex;
+  padding: 2px 4px;
+  border-radius: 2px;
+  margin-bottom: 1px;
+}
+
+.message-timestamp {
+  color: rgba(255, 255, 255, 0.6);
+  margin-right: 8px;
+  flex-shrink: 0;
+  font-size: 10px;
+}
+
+.message-type {
+  margin-right: 8px;
+  flex-shrink: 0;
+  font-weight: 600;
+  font-size: 10px;
+}
+
+.message-signaller .message-type {
+  color: #81c784;
+}
+
+.message-stream .message-type {
+  color: #64b5f6;
+}
+
+.message-content {
+  flex: 1;
+  word-break: break-word;
+}
+
+.message-signaller {
+  background-color: rgba(129, 199, 132, 0.08);
+}
+
+.message-stream {
+  background-color: rgba(100, 181, 246, 0.08);
+}
+</style>
diff --git a/src/components/widgets/VideoPlayer.vue b/src/components/widgets/VideoPlayer.vue
index 669927be1c..0b8c1bfcde 100644
--- a/src/components/widgets/VideoPlayer.vue
+++ b/src/components/widgets/VideoPlayer.vue
@@ -46,74 +46,98 @@
       Your browser does not support the video tag.
     </video>
   </div>
-  <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" width="auto">
-    <v-card class="pa-4 text-white" style="border-radius: 15px" :style="interfaceStore.globalGlassMenuStyles">
+  <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" :width="debugPanelExpanded ? 800 : 500">
+    <v-card class="pa-4" :style="interfaceStore.globalGlassMenuStyles" style="border-radius: 15px">
       <v-card-title class="text-center">Video widget config</v-card-title>
-      <v-card-text class="flex flex-col gap-y-4">
-        <v-select
-          v-model="nameSelectedStream"
-          label="Stream name"
-          class="my-3"
-          :items="namesAvailableStreams"
-          item-title="name"
-          density="compact"
-          variant="outlined"
-          no-data-text="No streams available."
-          hide-details
-          return-object
-        />
-        <v-select
-          v-model="widget.options.videoFitStyle"
-          label="Fit style"
-          class="my-3"
-          :items="['cover', 'fill', 'contain']"
-          item-title="style"
-          density="compact"
-          variant="outlined"
-          no-data-text="No streams available."
-          hide-details
-          return-object
-        />
-        <v-banner-text>Saved stream name: "{{ widget.options.internalStreamName }}"</v-banner-text>
-        <v-switch
-          v-model="widget.options.flipHorizontally"
-          class="my-1"
-          label="Flip horizontally"
-          :color="widget.options.flipHorizontally ? 'white' : undefined"
-          hide-details
-        />
-        <v-switch
-          v-model="widget.options.flipVertically"
-          class="my-1"
-          label="Flip vertically"
-          :color="widget.options.flipVertically ? 'white' : undefined"
-          hide-details
-        />
-        <v-switch
-          v-model="widget.options.statsForNerds"
-          class="my-1"
-          label="Stats for nerds"
-          :color="widget.options.statsForNerds ? 'white' : undefined"
-          hide-details
-        />
-        <div class="flex-wrap justify-center d-flex ga-5">
-          <v-btn prepend-icon="mdi-file-rotate-left" variant="outlined" @click="rotateVideo(-90)"> Rotate Left</v-btn>
-          <v-btn prepend-icon="mdi-file-rotate-right" variant="outlined" @click="rotateVideo(+90)"> Rotate Right</v-btn>
+      <v-card-text>
+        <!-- Stream Selection (centered, alone) -->
+        <div class="d-flex justify-center mb-4">
+          <v-select
+            v-model="nameSelectedStream"
+            label="Stream name"
+            :items="namesAvailableStreams"
+            item-title="name"
+            density="compact"
+            variant="outlined"
+            no-data-text="No streams available."
+            hide-details
+            return-object
+            style="max-width: 300px"
+          />
+        </div>
+
+        <!-- Display Options: Switches (left) + Fit Style (right) -->
+        <div class="d-flex justify-center gap-12 my-6">
+          <!-- Switches column -->
+          <div class="d-flex flex-column">
+            <v-switch
+              v-model="widget.options.flipHorizontally"
+              label="Flip horizontally"
+              :color="widget.options.flipHorizontally ? 'white' : undefined"
+              density="compact"
+              hide-details
+            />
+            <v-switch
+              v-model="widget.options.flipVertically"
+              label="Flip vertically"
+              :color="widget.options.flipVertically ? 'white' : undefined"
+              density="compact"
+              hide-details
+            />
+            <v-switch
+              v-model="widget.options.statsForNerds"
+              label="Stats for nerds"
+              :color="widget.options.statsForNerds ? 'white' : undefined"
+              density="compact"
+              hide-details
+            />
+          </div>
+
+          <!-- Fit style radio group column -->
+          <div class="d-flex flex-column">
+            <span class="text-caption opacity-70 mb-1">Fit style</span>
+            <v-radio-group v-model="widget.options.videoFitStyle" density="compact" hide-details>
+              <v-radio label="Cover" value="cover" />
+              <v-radio label="Fill" value="fill" />
+              <v-radio label="Contain" value="contain" />
+            </v-radio-group>
+          </div>
         </div>
-        <div class="flex-wrap justify-center d-flex ga-5 mt-3">
+
+        <!-- Actions -->
+        <div class="d-flex justify-center align-center gap-2 mb-2">
+          <v-btn icon="mdi-rotate-left" variant="text" @click="rotateVideo(-90)" />
+          <v-btn icon="mdi-rotate-right" variant="text" @click="rotateVideo(+90)" />
           <v-btn
             prepend-icon="mdi-reload"
-            variant="outlined"
+            variant="text"
             :disabled="!nameSelectedStream || isReloading || !hasBeenMountedFor5Seconds"
+            :loading="isReloading"
             @click="reloadVideo"
           >
-            Reload Stream
+            Reload stream
           </v-btn>
         </div>
-        <div v-if="isReloading" class="reload-progress-config mt-3">
-          <v-progress-linear :model-value="reloadProgress" color="primary" height="6" rounded />
-          <p class="text-center mt-1 text-sm">Reloading... {{ Math.round(reloadProgress) }}%</p>
-        </div>
+
+        <v-progress-linear
+          v-if="isReloading"
+          :model-value="reloadProgress"
+          color="white"
+          height="4"
+          rounded
+          class="mb-4"
+        />
+
+        <!-- Debug Console (Collapsible) -->
+        <v-expansion-panels v-model="debugPanelExpanded" variant="accordion" class="mt-6">
+          <v-expansion-panel value="debug" class="bg-[#FFFFFF11]">
+            <v-expansion-panel-title class="text-white">Debug console</v-expansion-panel-title>
+            <v-expansion-panel-text class="pa-0">
+              <WebRTCDebugConsole v-if="debugStreamId" :stream-id="debugStreamId" />
+              <div v-else class="text-center opacity-60 py-4">Select a stream to view debug logs.</div>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
       </v-card-text>
     </v-card>
   </v-dialog>
@@ -124,6 +148,7 @@ import { storeToRefs } from 'pinia'
 import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 
 import StatsForNerds from '@/components/VideoPlayerStatsForNerds.vue'
+import WebRTCDebugConsole from '@/components/WebRTCDebugConsole.vue'
 import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useVideoStore } from '@/stores/video'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
@@ -152,6 +177,7 @@ const isReloading = ref(false)
 const reloadProgress = ref(0)
 const previousStream = ref<string | undefined>()
 const hasBeenMountedFor5Seconds = ref(false)
+const debugPanelExpanded = ref<string | undefined>()
 
 onBeforeMount(() => {
   // Set the default initial values that are not present in the widget options
@@ -307,6 +333,12 @@ const streamStatus = computed(() => {
   }
   return videoStore.getStreamData(externalStreamId.value)?.webRtcManager.streamStatus ?? 'Unknown.'
 })
+
+const debugStreamId = computed(() => {
+  if (!externalStreamId.value) return undefined
+  const streamData = videoStore.getStreamData(externalStreamId.value)
+  return streamData?.webRtcManager.getDebugStreamId()
+})
 </script>
 
 <style scoped>
diff --git a/src/composables/webRTC.ts b/src/composables/webRTC.ts
index d91d956dd8..1cc62f16ab 100644
--- a/src/composables/webRTC.ts
+++ b/src/composables/webRTC.ts
@@ -2,6 +2,7 @@
 
 import { type Ref, ref, watch } from 'vue'
 
+import { useWebRTCDebugConsole } from '@/composables/webRTCDebugConsole'
 import * as Connection from '@/libs/connection/connection'
 import { Session } from '@/libs/webrtc/session'
 import { Signaller } from '@/libs/webrtc/signaller'
@@ -46,6 +47,8 @@ export class WebRTCManager {
   private selectedICEIPs: string[] = []
   private selectedICEProtocols: string[] = []
   private JitterBufferTarget = 0
+  private debugConsole = useWebRTCDebugConsole()
+  private instanceId: string
 
   private hasEnded = false
   private signaller: Signaller
@@ -60,6 +63,7 @@ export class WebRTCManager {
   constructor(webRTCSignallingURI: Connection.URI, rtcConfiguration: RTCConfiguration) {
     console.debug('[WebRTC] Trying to connect to signalling server.')
     this.rtcConfiguration = rtcConfiguration
+    this.instanceId = `webrtc-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
     this.signaller = new Signaller(
       webRTCSignallingURI,
       true,
@@ -167,6 +171,10 @@ export class WebRTCManager {
   private updateStreamStatus(newStatus: string): void {
     const time = new Date().toTimeString().split(' ').first()
     this.streamStatus.value = `${newStatus} (${time})`
+
+    // Add to debug console
+    const streamId = this.streamName || this.instanceId
+    this.debugConsole.addMessage(streamId, 'stream', newStatus)
   }
 
   /**
@@ -176,6 +184,10 @@ export class WebRTCManager {
   private updateSignallerStatus(newStatus: string): void {
     const time = new Date().toTimeString().split(' ').first()
     this.signallerStatus.value = `${newStatus} (${time})`
+
+    // Add to debug console
+    const streamId = this.streamName || this.instanceId
+    this.debugConsole.addMessage(streamId, 'signaller', newStatus)
   }
 
   /**
@@ -269,6 +281,14 @@ export class WebRTCManager {
     }
   }
 
+  /**
+   * Get the debug stream ID for this manager instance
+   * @returns {string} The debug stream ID
+   */
+  public getDebugStreamId(): string {
+    return this.streamName || this.instanceId
+  }
+
   /**
    *
    * @param {Stream} stream
diff --git a/src/composables/webRTCDebugConsole.ts b/src/composables/webRTCDebugConsole.ts
new file mode 100644
index 0000000000..27f40e82c4
--- /dev/null
+++ b/src/composables/webRTCDebugConsole.ts
@@ -0,0 +1,78 @@
+import { ref } from 'vue'
+
+/**
+ * WebRTC debug message interface
+ */
+export interface WebRTCDebugMessage {
+  /**
+   * Timestamp of the message
+   */
+  timestamp: Date
+  /**
+   * Stream ID of the message
+   */
+  streamId: string
+  /**
+   * Type of the message
+   */
+  type: 'signaller' | 'stream'
+  /**
+   * Message content
+   */
+  message: string
+}
+
+// Module-level state - shared across all consumers
+const messages = ref<{ [streamId: string]: WebRTCDebugMessage[] }>({})
+
+// Maximum number of messages to keep per stream (to prevent memory issues)
+const maxMessagesPerStream = 1000
+
+const addMessage = (streamId: string, type: 'signaller' | 'stream', message: string): void => {
+  if (!messages.value[streamId]) {
+    messages.value[streamId] = []
+  }
+
+  const debugMessage: WebRTCDebugMessage = {
+    timestamp: new Date(),
+    streamId,
+    type,
+    message,
+  }
+
+  messages.value[streamId].push(debugMessage)
+
+  // Keep only the most recent messages
+  if (messages.value[streamId].length > maxMessagesPerStream) {
+    messages.value[streamId] = messages.value[streamId].slice(-maxMessagesPerStream)
+  }
+}
+
+const getMessagesForStream = (streamId: string): WebRTCDebugMessage[] => {
+  return messages.value[streamId] || []
+}
+
+const clearMessagesForStream = (streamId: string): void => {
+  if (messages.value[streamId]) {
+    messages.value[streamId] = []
+  }
+}
+
+const clearAllMessages = (): void => {
+  messages.value = {}
+}
+
+/**
+ * Composable for WebRTC debug console functionality
+ * @returns {object} The WebRTC debug console functionality
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const useWebRTCDebugConsole = () => {
+  return {
+    messages,
+    addMessage,
+    getMessagesForStream,
+    clearMessagesForStream,
+    clearAllMessages,
+  }
+}