update broadcast layout

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,14 @@ $(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").each(e => {
+//        $(e).removeClass('playing-highlight');
+//    });
+    $(".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: rgba(182, 203, 205, 1);
 }