vlog/app/views/admin/vlogs/index.html.erb

102 lines
2.5 KiB
Plaintext
Raw Normal View History

2015-12-26 14:02:01 +00:00
<% content_for :page_specific_css do %>
<style type="text/css">
.video-thumbnail{
width : 100px;
height: 75px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.video-thumbnail-overlay{
width: 100px;
height: 75px;
background-color:rgba(192,192,192,0.5);
position: absolute;
top : 0;
z-index: 2;
}
.video-thumbnail i{
color: #08c;
font-size: 40px;
left: 25px;
position: absolute;
top: 18px;
z-index: 3;
}
#video-preview-modal{
width: 1045px;
height: 588px;
left : 40%;
}
#video-preview-modal #video-player-for-uploaded{
height: 540px;
border : 0px none;
}
#video-preview-modal #video-youtube-player{
height: 540px;
width: 1045px;
border : 0px none;
}
#video-preview-modal .modal-body{
padding: 0px;
max-height: 570px;
text-align: center;
background-color: #000;
}
</style>
<% end %>
<%= render_filter @filter_fields, "index_table" %>
<span id="index_table">
<%= render 'index'%>
</span>
<div class="modal hide fade" id="video-preview-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="video-label">Title</h3>
</div>
<div class="modal-body">
<iframe src="" id="video-youtube-player" class="hide" allowfullscreen></iframe>
<video id="video-player-for-uploaded" class="hide" src="" controls>
Your browser does not support the <code>video</code> element.
</video>
</div>
</div>
<script type="text/javascript">
(function(){
var videoModal = $("#video-preview-modal"),
videoPlayer = document.getElementById("video-player-for-uploaded"),
youtubePlayer = $("#video-youtube-player"),
videoType = "";
$(".video-thumbnail").on("click",function(){
videoType = $(this).data("video-type");
var url = $(this).data("video-url");
if(videoType == "upload"){
videoPlayer.src = url;
$("#video-player-for-uploaded").removeClass("hide");
}else if(videoType == "youtube"){
youtubePlayer.attr("src", url + "?autoplay=1");
youtubePlayer.removeClass("hide");
}
videoModal.find("#video-label").text($(this).data("video-title"));
videoModal.modal("show");
})
videoModal.on("hidden",function(){
videoPlayer.pause();
$("#video-player-for-uploaded").addClass("hide");
youtubePlayer.addClass("hide");
youtubePlayer.attr("src","");
}).on("shown",function(){
if(videoType == "upload"){
videoPlayer.play();
}
})
})();
</script>