remove comment

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: rgba(182, 203, 205, 1);
 }

app/views/accounts/_form.html.erb

@@ -6,7 +6,7 @@
   <%= form.email_field :email, class: "form-group" %>
   <%= form.password_field :password %>
   <%= form.text_field :account_name, label: 'Account Name' %>
-  <%= form.select :interested_product_name, options_for_select(["I'm interested in all products", "ME Suite PRO", "DirectME", "ReleaseME", "CastME", "EditME", "DeliverME", "ExpenseME"]), { label: "What product are you most interested in?" }, { class: "form-control custom-select" } %>
+  <%= form.select :interested_product_name, options_for_select(["I'm interested in all products", "DirectME", "ReleaseME", "CastME", "EditME", "DeliverME", "ExpenseME"]), { label: "What product are you most interested in?" }, { class: "form-control custom-select" } %>
   <div class="pt-3">
     <%= form.submit "Start Free Trial", class: "btn btn-block btn-danger font-weight-bold" %>
   </div>

app/views/accounts/new.html.erb

@@ -4,9 +4,6 @@
       <h3>Welcome To <%= suite_wordmark("d-inline-block") %></h3>
       <div class="mt-4">
         <p>Sign up for a <strong>14 Day Free Trial</strong> which includes full access to the following products. No credit card required!</p>
-        <div class="d-flex justify-content-between pb-2">
-          <div><%= image_tag "ME_PRO_black.png", width: "96.66%" %></div>
-        </div>
         <div class="d-flex justify-content-between pb-2">
           <div><%= image_tag "logo_directme.png", width: "90%" %></div>
           <div><%= image_tag "logo_releaseme.png", width: "90%" %></div>

app/views/broadcasts/_broadcast_recordings.html.erb

@@ -1,26 +1,30 @@
 <% if recordings.present? %>
-  <div class="list-group">
+  <ul class="list-unstyled">
     <% recordings.each do |recording| %>
-      <div class="list-group-item list-group-item-action">
-        <div class="d-flex align-items-start">
-          <% if policy(BroadcastRecording).update? %>
-            <%= link_to fa_icon("#{recording.starred ? 'star' : 'star-o'} fw"), [broadcast.project, broadcast, recording, :broadcast_recording_starrings], method: :post, class: "text-warning mr-3", remote: true %>
-          <% end %>
-          <%= image_tag(recording.thumbnail_url, class: 'img-thumbnail img-fluid max-w-75', data: { behavior: "play_recording", playback_url: recording.playback_url, id: dom_id(recording) }) %>
-          <div class="ml-auto">
-            <% if policy(BroadcastRecording).edit? %>
-              <%= link_to fa_icon('edit'), [:edit, broadcast.project, broadcast, recording], remote: true %>
-            <% end %>
-            <%= link_to(fa_icon('download'), recording.download_url, target: "_blank") %>
-          </div>
+      <li class="media pb-1 pt-1 pr-1">
+        <% if policy(BroadcastRecording).update? %>
+          <%= link_to fa_icon("#{recording.starred ? 'star' : 'star-o'} fw"), [broadcast.project, broadcast, recording, :broadcast_recording_starrings], method: :post, class: "text-warning mr-3", remote: true %>
+        <% end %>
+
+        <div class="play-thumbnail">
+          <%= image_tag(recording.thumbnail_url, class: 'mr-3', size: "75x64") %>
+          <%= render "broadcasts/play_button", playback_url: recording.playback_url, data_id: dom_id(recording) %>
         </div>
-        <div class="d-flex flex-column align-items-start justify-content-start p-4">
-          <h5><%= recording.name %></h5>
-          <p><%= recording.description %></p>
+
+        <div class="media-body">
+          <h5 class="mt-0 mb-1"><%= recording.name %></h5>
+          <%= recording.description %>
         </div>
-      </div>
+
+        <% if policy(BroadcastRecording).edit? %>
+          <%= link_to fa_icon('edit'), [:edit, broadcast.project, broadcast, recording], class: "mr-3", remote: true %>
+        <% end %>
+
+        <%= link_to(fa_icon('download'), recording.download_url, target: "_blank") %>
+      </li>
     <% end %>
-  </div>
+  </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>

app/views/broadcasts/_live_take.html.erb

@@ -1,12 +1,10 @@
-<div class="list-group">
-  <div class="list-group-item list-group-item-action flex-column align-items-start">
-    <div class="d-flex w-100 justify-content-between mb-1">
-      <h5 class="mb-1"><%= broadcast.name %></h5>
-      <small>Created - <%= time_ago_in_words(broadcast.created_at) + " ago" %></small>
-    </div>
+<div id="live-take" class="media p-1 playing-highlight">
+  <img class="mr-5 ml-1 mt-1" src="https://via.placeholder.com/64" alt="Live stream thumbnail">
+  <div class="media-body">
+    <h5 class="mt-0"><%= broadcast.name %></h5>
+    <small>Created - <%= time_ago_in_words(broadcast.created_at) + " ago" %></small>
     <div id="broadcast_updates">
       <%= render partial: 'broadcasts/broadcast_status', locals: { broadcast: broadcast } %>
     </div>
   </div>
-</div>
-
+</div>

app/views/broadcasts/_play_button.html.erb

@@ -0,0 +1,5 @@
+<div class="play-btn" data-behavior="play_recording" data-playback-url="<%= playback_url %>" data-id="<%= data_id %>">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
+    <polygon class="play-btn-svg" points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69"/>
+  </svg>
+</div>

spec/features/guest_account_signup_spec.rb

@@ -1,13 +1,6 @@
 require "rails_helper"
 
 feature "Guest account sign up" do
-  scenario "guest can select ME Suite PRO in 'interested in' dropdown" do
-    visit new_account_path
-
-    expect(page).to have_selector("img[src*='ME_PRO_black']")
-    select "ME Suite PRO", from: interested_in_product_dropdown
-  end
-
   scenario "creates a new account and signs in successfully" do
     visit new_account_path
 
@@ -45,10 +38,4 @@ feature "Guest account sign up" do
 
     expect(page).to have_content "Sign Up"
   end
-
-  private
-
-  def interested_in_product_dropdown
-    "user[interested_product_name]"
-  end
 end

spec/features/user_managing_broadcasts_spec.rb

@@ -151,6 +151,41 @@ feature 'User managing broadcasts' do
       end
     end
 
+    scenario 'broadcast recordings are shown in correct layout', js: true do
+      broadcast = create(:broadcast, :with_stream, :with_files, project: project)
+      create(:broadcast_recording, broadcast: broadcast, asset_uid: "asset_uid_1")
+      
+      visit project_broadcast_path(project, broadcast)
+
+      expect(page).to have_selector("li.media")
+      expect(page).to have_selector("div.play-thumbnail")
+      expect(page).to have_selector("div.media-body")
+      expect(page).to have_selector("div.play-btn")
+    end
+
+    scenario 'active playing media has highlighted background (live take or recording)', js: true do
+      broadcast = create(:broadcast, :with_stream, :with_files, project: project)
+      create(:broadcast_recording, broadcast: broadcast, asset_uid: "asset_uid_1")
+      create(:broadcast_recording, broadcast: broadcast, asset_uid: "asset_uid_2")
+
+      visit project_broadcast_path(project, broadcast)
+
+      expect(page).to have_selector("#live-take.playing-highlight")
+      expect(page).to have_selector(".play-btn-svg", count: 2, visible: false)
+
+      first("[data-behavior='play_recording']").click
+
+      expect(page).not_to have_selector("#live-take.playing-highlight")
+      expect(page).to have_selector("li.media.playing-highlight", count: 1)
+      expect(page).to have_selector("li.media", count: 2)
+
+      first("[data-behavior='play_stream']").click
+
+      expect(page).to have_selector("#live-take.playing-highlight")
+      expect(page).to have_selector("li.media", count: 2)
+      expect(page).not_to have_selector("li.media.playing-highlight")
+    end
+
     context 'When the user is associate' do
       let(:current_user) { create(:user, :associate) }