asifagaria/OpenMediaCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lots of improvements:

Browse Source 
hover animation
correct jumpback position after video view
load when scroll - not all at beginning
This commit is contained in:
lukas
2020-05-18 22:55:26 +02:00
parent 90e2f38c04
commit 4ad29fd072
5 changed files with 113 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
js/index.js
View File

@ -1,51 +1,71 @@
$(document).ready(function() {
console.log("finished loading page");
$.post('php/videoload.php','action',function(data){
console.log(data);
for (var i in data) {
if (data[i] != "." && data[i] != "..") {
//loadVideo("videos/prn/"+data[i],"");
loadPreview(data[i]);
console.log(data[i]);
}
var videos;
var loadindex = 0;
var scrollposition = 0;
}
},'json');
//loadVideo("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg');
$(document).ready(function () {
$.post('php/videoload.php', 'action', function (data) {
videos = data;
loadPreviewBlock(12);
}, 'json');
$(".closebutton").click(function() {
$(".videopagewrapper").hide();
$(".previewcontainer").show();
$(".videowrapper").html("");
});
$(".closebutton").click(function () {
$(".videopagewrapper").hide();
$(".previewcontainer").show();
// scroll back to last scroll position
$(window).scrollTop(scrollposition);
$(".videowrapper").html("");
});
});
$(window).scroll(function () {
if ($(window).scrollTop() >= (($(document).height() - $(window).height() - 60))) {
if ($(".videowrapper").html() == "") {
loadPreviewBlock(6);
}
}
});
function loadPreviewBlock(nr) {
for (let i = 0; i < nr; i++) {
if (loadindex + i < videos.length) {
if (videos[loadindex + i] != "." && videos[loadindex + i] != "..") {
loadPreview(videos[loadindex + i]);
} else {
nr++;
}
}
}
loadindex += nr;
}
function loadPreview(src) {
var preview = $("<div class='videopreview'><div class='previewtitle'>"+src+"</div><div class='previewpic'><img style='width:100%;height:100%' src=\"videos/thumbnails/"+src+".jpg\" alt='no thumbnail found'></img></div></div>");
preview.attr('videourl',"videos/prn/"+src);
preview.attr('thumbnailurl',"videos/thumbnails/"+src);
preview.click(function() {
console.log("preview clicked");
loadVideo($(this).attr("videourl"),$(this).attr("thumbnailurl")+".jpg");
});
$(".previewcontainer").append(preview);
var preview = $("<div class='videopreview'><div class='previewtitle'>" + src + "</div><div class='previewpic'><img style='width:100%;height:100%' src=\"videos/thumbnails/" + src + ".jpg\" alt='no thumbnail found'></img></div></div>");
preview.attr('videourl', "videos/prn/" + src);
preview.attr('thumbnailurl', "videos/thumbnails/" + src);
preview.click(function () {
console.log("preview clicked");
scrollposition = $(window).scrollTop();
loadVideo($(this).attr("videourl"), $(this).attr("thumbnailurl") + ".jpg");
});
$(".previewcontainer").append(preview);
}
function loadVideo(src,posterlink) {
$(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
function loadVideo(src, posterlink) {
$(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
const player = new Plyr('#player');
player.source = {
type: 'video',
sources: [
{
src: src,
type: 'video/mp4',
size: 1080,
}
],
poster: posterlink
};
$(".videopagewrapper").show();
$(".previewcontainer").hide();
const player = new Plyr('#player');
player.source = {
type: 'video',
sources: [
{
src: src,
type: 'video/mp4',
size: 1080,
}
],
poster: posterlink
};
$(".videopagewrapper").show();
$(".previewcontainer").hide();
}