From 5c8f05da69df16da6aba6546d9b9c207642a819c Mon Sep 17 00:00:00 2001
From: Joel Addison <joel@addison.net.au>
Date: Tue, 16 Apr 2024 15:31:13 +1000
Subject: [PATCH] Improve refresh of streams

---
 static/src/js/streaming.js | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/static/src/js/streaming.js b/static/src/js/streaming.js
index 38ae1be7..d1582f0e 100644
--- a/static/src/js/streaming.js
+++ b/static/src/js/streaming.js
@@ -1,14 +1,22 @@
 $(function() {
-    const SLOT_REFRESH_INTERVAL_MS = 10 * 60 * 1000;
+    const ROOM_REFRESH_INTERVAL_MS = 10 * 60 * 1000;
     const holdingFrame = $('#holding-frame');
     const streamingFrame = $('#streaming-frame');
     const roomsFrame = $('#rooms-frame');
     let lastVersion = '';
-    let selectedStreamId = '';
+    let selectedStream = null;
     let streamData = null;
 
     function change_room(stream, user_details) {
-        selectedStreamId = stream.stream_id;
+        if (selectedStream && selectedStream.id === stream.stream_id && selectedStream.playbackId === stream.playback_id) {
+            // No change, leave as is.
+            return;
+        }
+
+        selectedStream = {
+            id: stream.stream_id,
+            playbackId: stream.playback_id,
+        };
 
         streamingFrame.empty();
 
@@ -19,6 +27,7 @@ $(function() {
         muxPlayer.setAttribute("playback-id", stream.playback_id);
         muxPlayer.setAttribute("metadata-video-title", stream.stream_name);
         muxPlayer.setAttribute("metadata-viewer-user-id", user_details.code);
+        muxPlayer.setAttribute("autoplay", true);
         muxPlayer.tokens = {
             playback: stream.video_token,
             thumbnail: stream.thumbnail_token,
@@ -50,10 +59,10 @@ $(function() {
         streamData = data;
 
         var stream = null;
-        if (selectedStreamId) {
+        if (selectedStream && selectedStream.id) {
             for (var i = 0; i < data.streams.length; ++i) {
                 var availableStream = data.streams[i];
-                if (availableStream.stream_id === selectedStreamId) {
+                if (availableStream.stream_id === selectedStream.id) {
                     stream = availableStream;
                     break;
                 }
@@ -75,7 +84,7 @@ $(function() {
         for (var i = 0; i < streams.length; ++i) {
             var availableStream = streams[i];
             let streamButton = $('<li role="presentation"><a href="#" data-stream-id="' + availableStream.stream_id + '">' + availableStream.room_name + '</a></li>')
-            if (availableStream.stream_id === selectedStreamId) {
+            if (availableStream.stream_id === selectedStream.id) {
                 streamButton.addClass('active');
             }
             rooms.append(streamButton);
@@ -91,11 +100,11 @@ $(function() {
         activeRooms = activeRooms.removeClass('active');
 
         let streamId = roomButton.data('streamId');
-        selectedStreamId = streamId;
+        let stream = null;
 
         for (var i = 0; i < streamData.streams.length; ++i) {
             let availableStream = streamData.streams[i];
-            if (availableStream.stream_id === selectedStreamId) {
+            if (availableStream.stream_id === streamId) {
                 stream = availableStream;
                 break;
             }
@@ -116,5 +125,5 @@ $(function() {
     }
 
     load_streams();
-    setInterval(load_streams, SLOT_REFRESH_INTERVAL_MS);
+    setInterval(load_streams, ROOM_REFRESH_INTERVAL_MS);
 });