126 lines
3.8 KiB
JavaScript
126 lines
3.8 KiB
JavaScript
let videos;
|
|
let loadindex = 0;
|
|
let loadedvideoid = -1;
|
|
|
|
$(document).ready(function () {
|
|
$.post('php/videoload.php', 'action=getRandomMovies&number=6', function (data) {
|
|
videos = data;
|
|
loadPreviewBlock(6);
|
|
}, 'json');
|
|
|
|
$(".closebutton").click(function () {
|
|
$("#likebtn").off();
|
|
$("#tagbutton").off();
|
|
$(".videopagewrapper").hide();
|
|
$(".previewcontainer").show();
|
|
// scroll back to last scroll position
|
|
$(window).scrollTop(scrollposition);
|
|
$(".videowrapper").html("");
|
|
});
|
|
|
|
$("#shufflebtn").click(function () {
|
|
$(".previewcontainer").html("");
|
|
$.post('php/videoload.php', 'action=getRandomMovies&number=6', function (data) {
|
|
videos = data;
|
|
loadPreviewBlock(6);
|
|
}, 'json');
|
|
});
|
|
});
|
|
|
|
function loadPreviewBlock(nr) {
|
|
for (let i = 0; i < nr; i++) {
|
|
if (loadindex + i < videos.length) {
|
|
loadPreview(videos[loadindex + i]);
|
|
}
|
|
}
|
|
loadindex += nr;
|
|
}
|
|
|
|
function loadPreview(src) {
|
|
$.post('php/videoload.php', 'action=readThumbnail&movieid=' + src.movie_id, function (data) {
|
|
var preview = $(`
|
|
<div class='videopreview'>
|
|
<div class='previewtitle'>${src.movie_name}</div>
|
|
<div class='previewpic'>
|
|
<img style='width:100%;height:100%' src="${data}" alt='no thumbnail found'/>
|
|
</div>
|
|
</div>`);
|
|
preview.attr('movie_id', src.movie_id);
|
|
preview.click(function () {
|
|
console.log("preview clicked");
|
|
scrollposition = $(window).scrollTop();
|
|
loadedvideoid = $(this).attr("movie_id");
|
|
loadVideo(loadedvideoid);
|
|
});
|
|
$(".previewcontainer").append(preview);
|
|
}, 'text');
|
|
}
|
|
|
|
function loadVideo(movieid) {
|
|
$.post('php/videoload.php', 'action=loadVideo&movieid=' + movieid, function (data) {
|
|
$(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
|
|
|
|
const player = new Plyr('#player');
|
|
player.source = {
|
|
type: 'video',
|
|
sources: [
|
|
{
|
|
src: data.movie_url,
|
|
type: 'video/mp4',
|
|
size: 1080,
|
|
}
|
|
],
|
|
poster: data.thumbnail
|
|
};
|
|
|
|
$(".likefield").html("Likes: " + data.likes);
|
|
|
|
$.post('php/videoload.php', 'action=getTags&movieid=' + loadedvideoid, function (data) {
|
|
for (const tag in data.tags) {
|
|
$(".videoleftbanner").append(`<div>${tag}</div>`);
|
|
}
|
|
|
|
console.log(data);
|
|
}, "json");
|
|
|
|
$("#likebtn").click(function () {
|
|
console.log("likebtn clicked");
|
|
$.post('php/videoload.php', 'action=addLike&movieid=' + loadedvideoid, function (data) {
|
|
console.log(data);
|
|
}, "json");
|
|
});
|
|
|
|
$("#tagbutton").click(function () {
|
|
console.log("tagbrn clicked");
|
|
Swal.mixin({
|
|
input: 'text',
|
|
confirmButtonText: 'Next →',
|
|
showCancelButton: true,
|
|
progressSteps: ['1', '2', '3']
|
|
}).queue([
|
|
{
|
|
title: 'Question 1',
|
|
text: 'Chaining swal2 modals is easy'
|
|
},
|
|
'Question 2',
|
|
'Question 3'
|
|
]).then((result) => {
|
|
if (result.value) {
|
|
const answers = JSON.stringify(result.value)
|
|
Swal.fire({
|
|
title: 'All done!',
|
|
html: `
|
|
Your answers:
|
|
<pre><code>${answers}</code></pre>
|
|
`,
|
|
confirmButtonText: 'Lovely!'
|
|
})
|
|
}
|
|
})
|
|
});
|
|
|
|
$(".videopagewrapper").show();
|
|
$(".previewcontainer").hide();
|
|
}, "json");
|
|
}
|