diff --git a/pinaxcon/streaming/views.py b/pinaxcon/streaming/views.py
index 43fd3b8f..36de2c32 100644
--- a/pinaxcon/streaming/views.py
+++ b/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,
diff --git a/pinaxcon/templates/streaming/overview.html b/pinaxcon/templates/streaming/overview.html
index 74f6c99d..b9219f43 100644
--- a/pinaxcon/templates/streaming/overview.html
+++ b/pinaxcon/templates/streaming/overview.html
@@ -13,12 +13,12 @@
There are currently no live streams available. Please check back soon.
+
-
{% endblock %}
diff --git a/static/src/js/streaming.js b/static/src/js/streaming.js
index 416869db..38ae1be7 100644
--- a/static/src/js/streaming.js
+++ b/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 = $('Currently Viewing: ' + stream.room_name + '
');
+ 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();
- $('#streaming-frame').hide();
+ holdingFrame.show();
+ streamingFrame.hide();
+ roomsFrame.hide();
return;
}
- let streamingFrame = $('#streaming-frame');
- $('#holding-frame').hide();
+ holdingFrame.hide();
streamingFrame.show();
+ roomsFrame.show();
- var stream = data.streams[0];
+ streamData = data;
- 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", data.user.code);
- muxPlayer.tokens = {
- playback: stream.video_token,
- thumbnail: stream.thumbnail_token,
- };
- streamingFrame.empty();
- streamingFrame.append(muxPlayer);
+ var stream = null;
+ if (selectedStreamId) {
+ for (var i = 0; i < data.streams.length; ++i) {
+ var availableStream = data.streams[i];
+ if (availableStream.stream_id === selectedStreamId) {
+ stream = availableStream;
+ break;
+ }
+ }
+ }
+
+ 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 = $('' + availableStream.room_name + '')
+ 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);
-
});