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.

+
+

Available Rooms

+ +
-
{% 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); - });