From ab0b6f2c7d15ed01c312fc179ed0d4e4e189a1f0 Mon Sep 17 00:00:00 2001 From: Bilal Date: Wed, 9 Sep 2020 18:40:38 +0300 Subject: [PATCH 1/3] update broadcast layout --- app/assets/javascripts/stream_player.js.erb | 15 ++++++- app/assets/stylesheets/application.scss | 27 +++++++++++++ .../broadcasts/_broadcast_recordings.html.erb | 40 ++++++++++--------- app/views/broadcasts/_live_take.html.erb | 14 +++---- app/views/broadcasts/_play_button.html.erb | 5 +++ 5 files changed, 74 insertions(+), 27 deletions(-) create mode 100644 app/views/broadcasts/_play_button.html.erb diff --git a/app/assets/javascripts/stream_player.js.erb b/app/assets/javascripts/stream_player.js.erb index af1aee9..4bb0c04 100644 --- a/app/assets/javascripts/stream_player.js.erb +++ b/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'); }); \ No newline at end of file +$(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"); +} \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 23289e9..60979ca 100644 --- a/app/assets/stylesheets/application.scss +++ b/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); } \ No newline at end of file diff --git a/app/views/broadcasts/_broadcast_recordings.html.erb b/app/views/broadcasts/_broadcast_recordings.html.erb index e764e6e..e9a8ab6 100644 --- a/app/views/broadcasts/_broadcast_recordings.html.erb +++ b/app/views/broadcasts/_broadcast_recordings.html.erb @@ -1,26 +1,30 @@ <% if recordings.present? %> -
+ +
<%= will_paginate(recordings, params: {controller: "broadcasts", action: "show", project_id: broadcast.project_id, id: broadcast.id, page: params[:page], active_tab: 'recordings'}) %>
diff --git a/app/views/broadcasts/_live_take.html.erb b/app/views/broadcasts/_live_take.html.erb index cb09912..722995f 100644 --- a/app/views/broadcasts/_live_take.html.erb +++ b/app/views/broadcasts/_live_take.html.erb @@ -1,12 +1,10 @@ -
-
-
-
<%= broadcast.name %>
- Created - <%= time_ago_in_words(broadcast.created_at) + " ago" %> -
+
+ Live stream thumbnail +
+
<%= broadcast.name %>
+ Created - <%= time_ago_in_words(broadcast.created_at) + " ago" %>
<%= render partial: 'broadcasts/broadcast_status', locals: { broadcast: broadcast } %>
-
- +
\ No newline at end of file diff --git a/app/views/broadcasts/_play_button.html.erb b/app/views/broadcasts/_play_button.html.erb new file mode 100644 index 0000000..c0a68bc --- /dev/null +++ b/app/views/broadcasts/_play_button.html.erb @@ -0,0 +1,5 @@ +
+ + + +
\ No newline at end of file -- 2.47.3 From aa6c8518077bacc09986560124596bdf233f56ab Mon Sep 17 00:00:00 2001 From: Bilal Date: Wed, 9 Sep 2020 19:27:12 +0300 Subject: [PATCH 2/3] add specs --- .../features/user_managing_broadcasts_spec.rb | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/spec/features/user_managing_broadcasts_spec.rb b/spec/features/user_managing_broadcasts_spec.rb index 30fd848..7123fb3 100644 --- a/spec/features/user_managing_broadcasts_spec.rb +++ b/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) } -- 2.47.3 From 79174d8f3b4f23cb6101b0934365a42adccb43a5 Mon Sep 17 00:00:00 2001 From: Bilal Date: Wed, 9 Sep 2020 19:38:09 +0300 Subject: [PATCH 3/3] remove comment --- app/assets/javascripts/stream_player.js.erb | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/assets/javascripts/stream_player.js.erb b/app/assets/javascripts/stream_player.js.erb index 4bb0c04..b525d33 100644 --- a/app/assets/javascripts/stream_player.js.erb +++ b/app/assets/javascripts/stream_player.js.erb @@ -23,8 +23,5 @@ $(document).on("click", "[data-behavior=play_stream]", function() { }); function clearPlayingHighlight() { -// $(".playing-highlight").each(e => { -// $(e).removeClass('playing-highlight'); -// }); $(".playing-highlight").removeClass("playing-highlight"); } \ No newline at end of file -- 2.47.3