senaduka/old-holivud2
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

update broadcast layout

Browse Source
This commit is contained in:
Bilal
2020-09-09 18:40:38 +03:00
parent 3db230de9b
commit ab0b6f2c7d
5 changed files with 74 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/stream_player.js.erb
View File

@@ -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'); });
$(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");
}

27
app/assets/stylesheets/application.scss
View File

@@ -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);
}

40
app/views/broadcasts/_broadcast_recordings.html.erb
View File

@@ -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>

14
app/views/broadcasts/_live_take.html.erb
View File

@@ -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>

5
app/views/broadcasts/_play_button.html.erb Normal file
View File

@@ -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>