Upstream sync

app/assets/javascripts/channels/broadcasts.coffee.erb

@@ -24,7 +24,7 @@ $(document).on "turbolinks:load", ->
       stream_selected = $("#broadcast_video").data('videoType') == 'stream';
       if data.streamer_status == 'recording' && data.status == 'active' && stream_selected
         $("#broadcast_video").html data.video_content
-        $("#live_take").html data.live_take_content
+        $("#recording_status").html data.recording_status_content
 
         new (Clappr.Player)(
           <%= "baseUrl: 'http://cdn.clappr.io/latest'," if Rails.env.test? %>
@@ -37,7 +37,7 @@ $(document).on "turbolinks:load", ->
           hlsMinimumDvrSize: 1)
       if data.streamer_status == "idle" && data.status == "idle"
         $("#broadcast_video").html data.video_content
-        $("#live_take").html data.live_take_content
+        $("#recording_status").html data.recording_status_content
 
     showBroadcastRecordings: (data) ->
       $(".flash-message").html data.flash_content

app/assets/javascripts/stream_player.js.erb

@@ -1,4 +1,7 @@
 $(document).on("click", "[data-behavior=play_recording]", function() {
+    clearPlayingHighlight();
+    $(this).parent().parent().addClass('playing-highlight');
+
     $("#broadcast_video").data('videoType', 'recording');
 
     var playback_url = $(this).attr("data-playback-url")
@@ -14,4 +17,11 @@ $(document).on("click", "[data-behavior=play_recording]", function() {
     });
 });
 
-$(document).on("click", "[data-behavior=play_stream]", function() { $("#broadcast_video").data('videoType', 'stream'); });
+$(document).on("click", "[data-behavior=play_stream]", function() {
+//    clearPlayingHighlight();
+    $("#broadcast_video").data('videoType', 'stream');
+});
+
+function clearPlayingHighlight() {
+    $(".playing-highlight").removeClass("playing-highlight");
+}

app/assets/stylesheets/application.scss

@@ -467,4 +467,31 @@ trix-toolbar {
   .trix-button--icon-underline::before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E");
   }
-}
+}
+
+// Play button SVG
+.play-btn {
+  width: 60%;
+  height: auto;
+}
+
+.play-btn-svg{
+  transition: 0.3s;
+  stroke:#fedfc2;
+  opacity: 0;
+}
+
+.play-btn:hover .play-btn-svg {
+  fill-opacity: 0;
+  opacity: 1;
+}
+
+// Play button in video thumbnail preview
+.play-thumbnail { position: relative; }
+.play-thumbnail img { display: block; }
+.play-thumbnail .play-btn { position: absolute; bottom:5px; left:10px; }
+
+// Active recording highlight
+.playing-highlight {
+  background-color: scale-color($primary, $lightness: 80%);
+}