Upstream sync

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

@@ -24,6 +24,8 @@ $(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
+
         new (Clappr.Player)(
           <%= "baseUrl: 'http://cdn.clappr.io/latest'," if Rails.env.test? %>
           parentId: '#broadcast_video'
@@ -35,6 +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
 
     showBroadcastRecordings: (data) ->
       $(".flash-message").html data.flash_content

app/assets/javascripts/switch_director_mode.js

@@ -0,0 +1,4 @@
+$(document).on("click", "#director_mode_switch", function() {
+  // JQuery click event trigger was not working.
+  document.getElementById("director_mode_link").click();
+});

app/assets/stylesheets/application.scss

@@ -412,6 +412,16 @@ a[data-behavior=seekable-timecode] {
   background-color: rgba($black, 0.05);
 }
 
+// Black background
+.bg-black {
+  background-color: $black;
+}
+
+// White background
+.bg-white {
+  background-color: $white;
+}
+
 // Custom width
 .w-65 {
   width: 65% !important;
@@ -422,8 +432,32 @@ a[data-behavior=seekable-timecode] {
   max-height: 30rem;
 }
 
+// Max-width 75%
+.max-w-75 {
+  max-width: 75%;
+}
+
 // Fix height and width
 .fix-h-and-w {
   width: 308px;
   height:308px;
 }
+
+// Dropdown shown state overrride
+.override-dropdown-show-state {
+  color: $white !important;
+  background-color: $black !important;
+  border-color: transparent !important;
+}
+
+// Override custom switch color
+.override-custom-control-label::before {
+  background-color: #000000;
+}
+
+// Override nav tab design
+.override-nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+  background: transparent;
+  border-color: transparent;
+  border-bottom: 3px solid #ff0000;
+}