Multiple rooms for live streaming

pinaxcon/streaming/views.py

@@ -41,6 +41,7 @@ def streaming_feeds(request):
 
         for stream in streams:
             stream_details = {
+                "stream_id": stream.id,
                 "room_id": stream.room.id,
                 "room_name": stream.room.name,
                 #"track_name": stream.room.track.name,

pinaxcon/templates/streaming/overview.html

@@ -13,12 +13,12 @@
 <div id="holding-frame">
     <p>There are currently no live streams available. Please check back soon.</p>
 </div>
+<div id="rooms-frame">
+    <h2>Available Rooms</h2>
+    <ul class="nav nav-tabs room-buttons">
+    </ul>
+</div>
 <div id="streaming-frame">
-    <mux-player
-        playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
-        metadata-video-title="Test VOD"
-        metadata-viewer-user-id="user-id-007"
-    ></mux-player>
 </div>
 {% endblock %}
 

static/src/js/streaming.js

@@ -1,6 +1,30 @@
 $(function() {
     const SLOT_REFRESH_INTERVAL_MS = 10 * 60 * 1000;
-    var lastVersion = '';
+    const holdingFrame = $('#holding-frame');
+    const streamingFrame = $('#streaming-frame');
+    const roomsFrame = $('#rooms-frame');
+    let lastVersion = '';
+    let selectedStreamId = '';
+    let streamData = null;
+
+    function change_room(stream, user_details) {
+        selectedStreamId = stream.stream_id;
+
+        streamingFrame.empty();
+
+        let roomInfo = $('<div class="room-info"><h2>Currently Viewing: ' + stream.room_name + '</h2></div>');
+        streamingFrame.append(roomInfo);
+
+        const muxPlayer = document.createElement("mux-player");
+        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.tokens = {
+            playback: stream.video_token,
+            thumbnail: stream.thumbnail_token,
+        };
+        streamingFrame.append(muxPlayer);
+    }
 
     function update_streams(data) {
 
@@ -13,27 +37,73 @@ $(function() {
 
         // If no streams, display holding message.
         if (data.streams.length == 0) {
-            $('#holding-frame').show();
+            holdingFrame.show();
-            $('#streaming-frame').hide();
+            streamingFrame.hide();
+            roomsFrame.hide();
             return;
         }
 
-        let streamingFrame = $('#streaming-frame');
+        holdingFrame.hide();
-        $('#holding-frame').hide();
         streamingFrame.show();
+        roomsFrame.show();
 
-        var stream = data.streams[0];
+        streamData = data;
 
-        const muxPlayer = document.createElement("mux-player");
+        var stream = null;
-        muxPlayer.setAttribute("playback-id", stream.playback_id);
+        if (selectedStreamId) {
-        muxPlayer.setAttribute("metadata-video-title", stream.stream_name);
+            for (var i = 0; i < data.streams.length; ++i) {
-        muxPlayer.setAttribute("metadata-viewer-user-id", data.user.code);
+                var availableStream = data.streams[i];
-        muxPlayer.tokens = {
+                if (availableStream.stream_id === selectedStreamId) {
-            playback: stream.video_token,
+                    stream = availableStream;
-            thumbnail: stream.thumbnail_token,
+                    break;
-        };
+                }
-        streamingFrame.empty();
+            }
-        streamingFrame.append(muxPlayer);
+        }
+
+        if (!stream) {
+            stream = data.streams[0];
+        }
+
+        change_room(stream, data.user);
+        display_rooms(data.streams);
+    }
+
+    function display_rooms(streams) {
+        let rooms = $('.room-buttons');
+        rooms.empty();
+
+        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) {
+                streamButton.addClass('active');
+            }
+            rooms.append(streamButton);
+        }
+
+        $('ul.room-buttons > li > a').on('click', switch_room);
+    }
+
+    function switch_room() {
+        let roomButton = $(this);
+
+        let activeRooms = $('.room-buttons .active');
+        activeRooms = activeRooms.removeClass('active');
+
+        let streamId = roomButton.data('streamId');
+        selectedStreamId = streamId;
+
+        for (var i = 0; i < streamData.streams.length; ++i) {
+            let availableStream = streamData.streams[i];
+            if (availableStream.stream_id === selectedStreamId) {
+                stream = availableStream;
+                break;
+            }
+        }
+
+        if (stream) {
+            change_room(stream, streamData.user);
+        }
     }
 
     function load_streams() {
@@ -47,5 +117,4 @@ $(function() {
 
     load_streams();
     setInterval(load_streams, SLOT_REFRESH_INTERVAL_MS);
-
 });