Initial commit

app/views/broadcasts/_broadcast.html.erb

@@ -0,0 +1,27 @@
+<tr>
+  <td data-behavior="select_broadcast"><%= check_box_tag "broadcast_ids[]", broadcast.id, false %></td>
+  <td>
+    <%= broadcast.name %>
+  </td>
+  <td>
+    <%= broadcast.status.titleize %>
+  </td>
+  <td>
+    <%= time_ago_in_words(broadcast.created_at) %> ago
+  </td>
+  <td class="text-right">
+    <div class="btn-group">
+      <%= button_tag t(".actions.manage"), class: "btn btn-light btn-sm dropdown-toggle border", data: { toggle: "dropdown", boundary: "window" }, aria: { haspopup: true, expanded: false } %>
+      <div class="dropdown-menu dropdown-menu-right">
+        <%= link_to fa_icon("link fw", text: "Copy Stream URL"), ENV['MUX_BROADCAST_SERVER_URL'], class: "dropdown-item", data: { behavior: "clipboard" } %>
+        <%= link_to fa_icon("key fw", text: "Copy Stream Key"), broadcast.stream_key, class: "dropdown-item", data: { behavior: "clipboard" } %>
+        <% if policy(broadcast).show? %>
+          <%= link_to fa_icon("file-video-o fw", text: "View"), [broadcast.project, broadcast], class: "dropdown-item", target: '_blank' %>
+        <% end %>
+        <% if policy(broadcast).destroy? %>
+          <%= link_to fa_icon("trash fw", text: "Delete"), [broadcast.project, broadcast], class: "dropdown-item", method: :delete, data: { confirm: "Are you sure?" } %>
+        <% end %>
+      </div>
+    </div>
+  </td>
+</tr>

app/views/broadcasts/_broadcast_recording_nav.html.erb

@@ -0,0 +1,2 @@
+<%= link_to broadcast_recording.download_file_name, "javascript:void(0);", class: "dropdown-item", data: { behavior: "play_recording", playback_url: broadcast_recording.playback_url } %>
+

app/views/broadcasts/_broadcast_recordings.html.erb

@@ -0,0 +1,13 @@
+<% if recordings.present? %>
+  <p>Click below to download the recordings of the live stream.</p>
+  <ul class="mt-2">
+    <% recordings.each do |recording| %>
+      <li><%= link_to(recording.download_file_name, recording.download_url, target: "_blank") %></li>
+    <% end %>
+  </ul>
+  <div id="recordings_pagination" class="row mt-5 justify-content-center">
+    <%= will_paginate(recordings, params: {controller: "broadcasts", action: "show", project_id: broadcast.project_id, id: broadcast.id, page: params[:page], active_tab: 'recordings'}) %>
+  </div>
+<% else %>
+  <p>Recording of the live stream will appear here.</p>
+<% end %>

app/views/broadcasts/_broadcast_status.html.erb

@@ -0,0 +1,21 @@
+<% if broadcast.streamer_connected? || (broadcast.streamer_recording? && !broadcast.active?) %>
+  <div class="alert alert-info text-center text-md-left">
+    <%= fa_icon "info-circle" %>
+    <strong>Live stream has connected successfully and will be available soon.</strong>
+  </div>
+<% elsif broadcast.streamer_recording? && broadcast.active? %>
+  <div class="alert alert-success text-center text-md-left">
+    <%= fa_icon "success" %>
+    <strong>Live stream has begun, click play to watch it.</strong>
+  </div>
+<% elsif broadcast.streamer_disconnected? %>
+  <div class="alert alert-warning text-center text-md-left">
+    <%= fa_icon "warning" %>
+    <strong>Live stream got disconnected.</strong>
+  </div>
+<% elsif (broadcast.idle? && broadcast.streamer_idle?) || (broadcast.created? && broadcast.streamer_idle?) %>
+  <div class="alert alert-info text-center text-md-left">
+    <%= fa_icon "info-circle" %>
+    <strong>Live stream is waiting to begin.</strong>
+  </div>
+<% end %>

app/views/broadcasts/_file.html.erb

@@ -0,0 +1,12 @@
+<li class="my-2" id="<%= dom_id(file) %>">
+  <% if file.variable? %>
+    <%= link_to image_tag(file.variant(resize_and_pad: [300, 300, background: "#F7F8F9"]), class: "bg-light img-thumbnail img-fluid"), file, target: "_blank" %>
+  <% else %>
+    <div class="border rounded bg-light text-muted d-flex justify-content-center align-items-center fix-h-and-w">
+      <%= link_to file, target: "_blank" do %>
+        <%= fa_icon("file", style: "font-size: 2rem") %>
+        <div class="mt-2"><%= file.filename %></div>
+      <% end %>
+    </div>
+  <% end %>
+</li>

app/views/broadcasts/_file_form.html.erb

@@ -0,0 +1,4 @@
+<%= bootstrap_form_for model, layout: :inline, remote: true do |form| %>
+  <%= form.file_field :files, direct_upload: true, multiple: true, accept: "*", hide_label: true, wrapper_class: "w-65 mr-2" %>
+  <%= form.button fa_icon("upload", text: "Add File"), class: "btn btn-primary", type: :submit, data: { disable_with: fa_icon("spinner", text: "Adding File") } %>
+<% end %>

app/views/broadcasts/_form.html.erb

@@ -0,0 +1,12 @@
+<%= errors_summary_for broadcast %>
+
+<%= bootstrap_form_with model: model, local: true do |form| %>
+  <%= form.text_field :name %>
+
+  <div class="row align-items-center text-center mt-4">
+    <%= link_to t("shared.cancel"), [project, :broadcasts], class: "col-3 text-reset" %>
+    <div class="col-9">
+      <%= form.submit class: class_string("btn btn-block", ["btn-success", "btn-primary"] => broadcast.new_record?), data: { disable_with: t("shared.disable_with") } %>
+    </div>
+  </div>
+<% end %>

app/views/broadcasts/_video.html.erb

@@ -0,0 +1,15 @@
+<% if broadcast.streamer_recording? && broadcast.active? %>
+  <div id="broadcast_video" class="embed-responsive-item"></div>
+<% else %>
+  <div id="broadcast_video" class="embed-responsive-item">
+    <table class="w-100 h-100 bg-secondary">
+      <tbody>
+        <tr>
+          <td class="text-center align-middle text-white">
+            Video player will appear here when the stream becomes available.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+<% end %>

app/views/broadcasts/index.html.erb

@@ -0,0 +1,44 @@
+<%= product_wordmark :direct_me, class: "small mb-3" %>
+
+<div class="row">
+  <div class="col-md-12">
+    <div class="d-md-flex d-sm-flex flex-sm-column flex-md-row flex-md-wrap mb-3" data-project-id="<%= @project.id %>" data-broadcast-ids="[]">
+      <% if policy(Broadcast).new? %>
+        <%= link_to fa_icon("plus", text: t(".actions.new")), [:new, @project, :broadcast], class: "btn btn-primary mb-2" %>
+      <% end %>
+      
+      <%= link_to "Multi-View", "javascript:void(0);", class: "btn btn-light border disabled ml-auto mr-2 mb-2", id: "multi_view_broadcasts" %>
+
+      <%= bootstrap_form_with url: [@project, :broadcasts], method: :get, remote: true, layout: :inline, id: "search" do |form| %>
+        <%= form.search_field :query, hide_label: true, placeholder: t("shared.search"), value: params[:query], prepend: form.button(fa_icon("search"), class: "btn btn-light border mb-2") %>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<div class="border bg-white rounded shadow-sm pb-3 table-responsive">
+  <table class="table table-striped tr-px-4 align-all-middle">
+    <thead class="thead-light">
+      <tr>
+        <th></th>
+        <th><%= t(".table_headers.broadcast_name") %></th>
+        <th><%= t(".table_headers.broadcast_status") %></th>
+        <th><%= t(".table_headers.broadcast_created_at") %></th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody id="broadcasts">
+      <% if @broadcasts.any? %>
+        <%= render @broadcasts %>
+      <% else %>
+        <tr>
+          <td colspan="5" class="py-4 text-center text-muted"><%= t(".empty") %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<div id="broadcasts_pagination" class="mt-3">
+  <%= will_paginate @broadcasts %>
+</div>

app/views/broadcasts/index.js.erb

@@ -0,0 +1,3 @@
+$("#broadcasts").html("<%= j render(@broadcasts) %>");
+$("form input[type='search']").val("<%= params[:query] %>");
+$("#broadcasts_pagination").html("<%= j will_paginate(@broadcasts) %>");

app/views/broadcasts/new.html.erb

@@ -0,0 +1,6 @@
+<div class="card shadow-sm">
+  <%= card_header text: t(".heading"), close_action_path: [@project, :broadcasts] %>
+  <div class="card-body">
+    <%= render "form", model: [@project, @broadcast], broadcast: @broadcast, project: @project %>
+  </div>
+</div>

app/views/broadcasts/show.html.erb

@@ -0,0 +1,153 @@
+<%= content_for :meta do %>
+  <% if @project %>
+    <meta name="project-id" content="<%= @project.id %>">
+  <% end %>
+  <% if @broadcast %>
+    <meta name="broadcast-token" content="<%= @broadcast.token %>">
+  <% end %>
+<% end %>
+
+<% content_for :header do %>
+  <header class="container-fluid py-3 border-bottom sticky-top bg-light">
+    <div class="row align-items-center justify-content-center">
+      <div class="col-4 text-center">
+        <%= product_wordmark(:direct_me, class: 'navbar-brand') %>
+      </div>
+    </div>
+  </header>
+<% end %>
+
+<div class="row">
+  <div class="col-lg-8 col-md-12 mb-3">
+    <div class="card shadow-sm">
+      <div class="card-header">
+        <div class="d-flex justify-content-between align-items-center">
+          <h1 class="h3 m-0"><%= @broadcast.name %></h1>
+          <div class="dropdown">
+            <a class="btn btn-light border dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Switch View
+            </a>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+              <h5 class="dropdown-header">Live Streams</h5>
+              <span class="dropdown-item active"><%= fa_icon("check", text: @broadcast.name.titleize) %></span>
+              <% @multi_view_broadcasts.each do |broadcast| %>
+                <% if broadcast.id != @broadcast.id %>
+                  <%= link_to broadcast.name.titleize, broadcast.url, class: class_string("dropdown-item", "active" => @broadcast.id == broadcast.id) %>
+                <% end %>
+              <% end %>
+              <h5 class="dropdown-header">Previous Sessions</h5>
+              <div id="broadcast_recordings_nav">
+                <% if @recordings.any? %>
+                  <%= render partial: "broadcasts/broadcast_recording_nav", collection: @recordings, as: :broadcast_recording %>
+                <% else %>
+                  <p class="dropdown-item text-muted">Recordings will appear here</p>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card-body p-0">
+        <div class="embed-responsive embed-responsive-16by9">
+          <%= render partial: 'broadcasts/video', locals: { broadcast: @broadcast } %>
+          <% if @broadcast.streamer_recording? && @broadcast.active? %>
+            <%= javascript_tag nonce: true do %>
+              new Clappr.Player({
+              parentId: '#broadcast_video',
+              source: "<%= @broadcast.stream_playback_url %>",
+              width: '100%',
+              height: '100%',
+              mute: true,
+              autoPlay: true,
+              hlsMinimumDvrSize: 1
+              });
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-4 col-md-12 mb-3">
+    <div class="card shadow-sm mb-3">
+      <div class="card-header">
+        <ul class="nav nav-tabs card-header-tabs">
+          <li class="nav-item">
+            <a class="<%= class_string("nav-link", "active" => !params[:active_tab].present?) %>" href="#home" data-toggle="tab">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="<%= class_string("nav-link", "active" => params[:active_tab] == "files") %>" href="#files" data-toggle="tab">Files</a>
+          </li>
+          <li class="nav-item">
+            <a class="<%= class_string("nav-link", "active" => params[:active_tab] == "recordings") %>" href="#recordings" data-toggle="tab">Previous Sessions</a>
+          </li>
+        </ul>
+      </div>
+      <div class="card-body p-3">
+        <div class="tab-content">
+          <div class="<%= class_string("tab-pane fade show", "active" => !params[:active_tab].present?) %>" id="home">
+            <div id="broadcast_updates">
+              <%= render partial: 'broadcasts/broadcast_status', locals: { broadcast: @broadcast } %>
+            </div>
+            <% unless controller.class.module_parent.to_s == "Public" %>
+              <hr>
+              <div class="form-group">
+                <label for="broadcast_share_url">To share the stream, copy the URL below. Anyone with the link can view the stream.</label>
+                <div class="input-group">
+                  <% if @multi_view_broadcasts.present? %>
+                    <% tokens = @multi_view_broadcasts.map(&:token) %>
+                    <input type="text" class="form-control" value="<%= broadcast_url(@broadcast.token, multi_view_tokens: tokens) %>" readonly>
+                    <div class="input-group-append">
+                      <button type="button" id="broadcast_share_url" class="btn btn-success" data-behavior="clipboard" href="<%= broadcast_url(@broadcast.token, multi_view_tokens: tokens) %>">
+                        <i class="fa fa-clipboard"></i>
+                        Copy URL
+                      </button>
+                    </div>
+                  <% else %>
+                    <input type="text" class="form-control" value="<%= broadcast_url(@broadcast.token) %>" readonly>
+                    <div class="input-group-append">
+                      <button type="button" id="broadcast_share_url" class="btn btn-success" data-behavior="clipboard" href="<%= broadcast_url(@broadcast.token) %>">
+                        <i class="fa fa-clipboard"></i>
+                        Copy URL
+                      </button>
+                    </div>
+                  <% end %>
+                </div>
+              </div>
+              <hr>
+            <% end %>
+            <p class="card-text">If you want to join the ZOOM meeting dedicated to this broadcast, follow the link below.</p>
+            <%= link_to 'Video Conference', @conference_url, class: 'btn btn-primary btn-block', target: '_blank' %>
+          </div>
+          <div class="<%= class_string("tab-pane fade show", "active" => params[:active_tab] == 'files') %>" id="files">
+            <div class="text-center pb-2" id="broadcast_file_form">
+              <% if controller.class.module_parent.to_s == "Public" %>
+                <%= render partial: "public/broadcasts/file_form", locals: { model: [@broadcast], token: @broadcast.token } %>
+              <% else %>
+                <%= render partial: "broadcasts/file_form", locals: { model: [@project, @broadcast] } %>
+              <% end %>
+            </div>
+            <div class="overflow-auto mh-30">
+              <ul class="list-unstyled d-flex flex-column align-items-center text-center" id="broadcast_file_list">
+                <% if @files.present? %>
+                  <%= render partial: "broadcasts/file", collection: @files %>
+                <% else %>
+                  <li class="my-3">
+                    Files will appear here.
+                  </li>
+                <% end %>
+              </ul>
+              <div class="d-flex mt-2 justify-content-center" id="broadcast_files_pagination">
+                <%= will_paginate(@files, params: { active_tab: 'files' }) if @files.present? %>
+              </div>
+            </div>
+          </div>
+          <div class="<%= class_string("tab-pane fade show", "active" => params[:active_tab] == 'recordings') %>" id="recordings">
+            <div id="broadcast_recordings">
+              <%= render partial: 'broadcasts/broadcast_recordings', locals: { recordings: @recordings, broadcast: @broadcast } %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<div>

app/views/broadcasts/update.js.erb

@@ -0,0 +1,9 @@
+$("#broadcast_file_form").html("<%= j render(partial: "broadcasts/file_form", locals: { model: [@project, @broadcast] }) %>");
+
+var file_id = "#<%= dom_id(@files.first) %>"
+if ($("#broadcast_file_list").has(file_id).length == 0) {
+  $("#broadcast_file_list").html("<%= j render(partial: "broadcasts/file", collection: @files) %>");
+  $("#broadcast_files_pagination").html("<%= j will_paginate(@files) %>");
+}
+
+bsCustomFileInput.init();