old-holivud2/app/views/broadcasts/show.html.erb

<%= 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>
            <p class="alert alert-info mt-2"><%= fa_icon("warning", text: "You may need to refresh the page to see new files uploaded by other team members") %></p>
            <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>