You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
373 lines
14 KiB
373 lines
14 KiB
/* The following lines are from the vimeo api
|
|
See the link for complete reference
|
|
https://github.com/vimeo/player.js/
|
|
*/
|
|
|
|
$(function() {
|
|
|
|
var playList = []; // Variable to store all the state of the user played video
|
|
|
|
// Check if the user already started to watch video and save state on browser close
|
|
if(localStorage.getItem("playList") !== null) {
|
|
playList = JSON.parse(localStorage.getItem("playList"));
|
|
//console.log(playList);
|
|
}
|
|
|
|
function playNextVideo(id) {
|
|
|
|
const list = $('#episode-lists')[0].children
|
|
if(list.length > 1) {
|
|
for(let i = 0; i<list.length; i++) {
|
|
if($($(list[i].children[2]).find('button')[0]).val() == id) {
|
|
if(i < list.length-1) {
|
|
$($(list[i+1].children[2]).find('button')[0]).click()
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Set the progress bar of the videos already watch on load
|
|
setProgressBarOnLoad();
|
|
|
|
function setProgressBarOnLoad () {
|
|
if(playList.length !== 0) {
|
|
var vids = JSON.parse(localStorage.getItem("playList"));
|
|
vids.forEach(function(vid, index) {
|
|
if(vid.status === 0) {
|
|
$(`#control${vid.id}`).html('<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 17 13" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9372 0L16.4004 1.47977L6.20039 12.75L0.000391006 6.47977L1.46359 5L6.20039 9.81553L14.9372 0Z" fill="#ffffff"/></svg> Vue')
|
|
$(`#${vid.id}`).attr("max",vid.duration);
|
|
$(`#${vid.id}`).attr("value",vid.duration);
|
|
} else if(vid.status === 1) {
|
|
$(`#control${vid.id}`).text('Reprendre')
|
|
$(`#${vid.id}`).attr("max",vid.duration);
|
|
$(`#${vid.id}`).attr("value",vid.playingCurrentTime);
|
|
}
|
|
// if(Math.round(vid.playingCurrentTime) < Math.round(vid.duration)) {
|
|
|
|
// } else if(Math.round(vid.playingCurrentTime) >= Math.round(vid.duration) ){
|
|
|
|
// }
|
|
else {
|
|
$(`#control${vid.id}`).text('Lire la vidéo')
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
$('#video-player').css("border", "gray solid 1px")
|
|
$('#video-player').css("background", "black")
|
|
|
|
var playingStatus = 0
|
|
var playingCurrentTime = 0
|
|
var playingDuration = 0
|
|
var buttonStatus = ''
|
|
var currPlayed = '';
|
|
|
|
const iframe = document.querySelector('iframe');
|
|
const player = new Vimeo.Player(iframe);
|
|
|
|
function checkScreenOnPlay () {
|
|
if ($(window).width() < 768) {
|
|
$('#overlay-content-btn').css('display', 'none');
|
|
} else {
|
|
$('#overlay-content-btn').css('display', 'none');
|
|
}
|
|
}
|
|
|
|
function checkScreenOnPause () {
|
|
if ($(window).width() < 768) {
|
|
$('#overlay-content-btn').css('display', 'block');
|
|
} else {
|
|
$('#overlay-content-btn').css('display', 'none');
|
|
}
|
|
}
|
|
|
|
player.on('play', function() {
|
|
// checkScreenOnPlay();
|
|
$('.mobile-overlay-video').addClass('d-none');
|
|
});
|
|
player.on('pause', function() {
|
|
$('.mobile-overlay-video').removeClass('d-none');
|
|
});
|
|
|
|
// Main vimeo function on controls
|
|
function synchronize(id, previousTime, duration) {
|
|
|
|
const iframe = document.querySelector('iframe');
|
|
const player = new Vimeo.Player(iframe);
|
|
player.setLoop(false)
|
|
player.on('play', function(data) {
|
|
// checkScreenOnPlay();
|
|
$('.mobile-overlay-video').addClass('d-none');
|
|
// $(`#control${id}`).text('Reprendre')
|
|
});
|
|
|
|
buttonStatus = 1 // already played
|
|
|
|
player.on('pause', function(data) {;
|
|
// checkScreenOnPause();
|
|
$('.mobile-overlay-video').removeClass('d-none');
|
|
saveStateOnPause(id, data.seconds, data.duration, buttonStatus);
|
|
|
|
if(buttonStatus !== 0) {
|
|
$(`#control${id}`).text('Reprendre')
|
|
}
|
|
$(`#control${id}`).prop('disabled', false);
|
|
$(`#control${id}`).removeAttr('data-toggle');
|
|
$(`#control${id}`).removeAttr('data-placement');
|
|
$(`#control${id}`).removeAttr('title');
|
|
});
|
|
|
|
player.on('ended', function(data) {
|
|
$(`#control${id}`).html('<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 17 13" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9372 0L16.4004 1.47977L6.20039 12.75L0.000391006 6.47977L1.46359 5L6.20039 9.81553L14.9372 0Z" fill="#ffffff"/></svg> Vue')
|
|
buttonStatus = 0 // Finish
|
|
saveStateOnPause(currPlayed, playingCurrentTime, playingDuration, buttonStatus)
|
|
//console.log('ended')
|
|
playNextVideo(id)
|
|
});
|
|
|
|
currPlayed = id;
|
|
|
|
player.ready().then(function() {
|
|
if(previousTime !== 0) {
|
|
if(duration != 0 && Math.floor(previousTime)< Math.floor(duration)) {
|
|
player.setCurrentTime(previousTime).then(function(seconds) {
|
|
player.play();
|
|
playingStatus = 1;
|
|
}).catch(function(error) {
|
|
console.log(error)
|
|
});
|
|
} else {
|
|
player.play();
|
|
playingStatus = 1;
|
|
}
|
|
} else {
|
|
player.play();
|
|
playingStatus = 1;
|
|
}
|
|
|
|
player.on('playing', function(data) {
|
|
$(`#${id}`).attr("max",data.duration);
|
|
playingDuration = data.duration;
|
|
//console.log(data.duration)
|
|
});
|
|
|
|
// player.getDuration().then(function(duration) {
|
|
// $(`#${id}`).attr("max",duration);
|
|
// playingDuration = duration;
|
|
// }).catch(function(error) {
|
|
// console.log(error);
|
|
// });
|
|
|
|
function checkProgress () {
|
|
player.getCurrentTime().then(function(seconds) {
|
|
$(`#${id}`).attr("value",seconds);
|
|
playingCurrentTime = seconds;
|
|
}).catch(function(error) {
|
|
console.log(error)
|
|
});
|
|
}
|
|
|
|
function saveStateEvery2Sec() {
|
|
saveStateOnPause (currPlayed, playingCurrentTime, playingDuration, buttonStatus)
|
|
}
|
|
|
|
setInterval(checkProgress, 500)
|
|
|
|
setInterval(saveStateEvery2Sec, 500)
|
|
|
|
});
|
|
}
|
|
|
|
// Save State when pause
|
|
function saveStateOnPause (id, playingCurrentTime, playingDuration, buttonStatus) {
|
|
|
|
if(playList.length === 0 ) {
|
|
playList.push({id: id, playingCurrentTime: playingCurrentTime, duration: playingDuration, status: buttonStatus})
|
|
localStorage.setItem("playList", JSON.stringify(playList));
|
|
}
|
|
|
|
if(playList.length > 0) {
|
|
var vids = JSON.parse(localStorage.getItem("playList"))
|
|
var found = false
|
|
for (var i in vids) {
|
|
if (vids[i].id == id) {
|
|
playList[i].playingCurrentTime = playingCurrentTime;
|
|
playList[i].duration = playingDuration;
|
|
playList[i].status = buttonStatus;
|
|
localStorage.setItem("playList", JSON.stringify(playList));
|
|
found = true
|
|
break; //Stop this loop, we found it!
|
|
}
|
|
}
|
|
if(found === false) {
|
|
playList.push({id: id, playingCurrentTime: playingCurrentTime, duration: playingDuration, status: buttonStatus})
|
|
localStorage.setItem("playList", JSON.stringify(playList));
|
|
}
|
|
}
|
|
|
|
}
|
|
// Execute this event when playing the first video on the player itself
|
|
player.on('play', function(data) {
|
|
previousTime = 0;
|
|
if(playList.length === 0 ) {
|
|
// checkScreenOnPlay();
|
|
$('.mobile-overlay-video').addClass('d-none');
|
|
var id = $(".control" ).first().attr("value");
|
|
synchronize(id,previousTime,0);
|
|
}
|
|
if(playList.length > 0) {
|
|
var id = $(".control" ).first().attr("value");
|
|
var vids = JSON.parse(localStorage.getItem("playList"))
|
|
var found = false
|
|
for (var i in vids) {
|
|
if (vids[i].id == id) {
|
|
previousTime = vids[i].playingCurrentTime
|
|
found = true
|
|
synchronize(id, previousTime, vids[i].duration)
|
|
break; //Stop this loop, we found it!
|
|
}
|
|
}
|
|
if(found === false) {
|
|
synchronize(id, previousTime, 0)
|
|
}
|
|
} else {
|
|
synchronize(id, previousTime, 0)
|
|
}
|
|
});
|
|
|
|
// Execute play when overlay button is click
|
|
$('#overlay-content-btn').click(function() {
|
|
const iframe = document.querySelector('iframe');
|
|
const player = new Vimeo.Player(iframe);
|
|
player.play();
|
|
// checkScreenOnPlay();
|
|
$('.mobile-overlay-video').addClass('d-none');
|
|
});
|
|
|
|
// Execute play when overlay button is click
|
|
$('#pause-btn').click(function() {
|
|
const iframe = document.querySelector('iframe');
|
|
const player = new Vimeo.Player(iframe);
|
|
player.pause();
|
|
// checkScreenOnPlay();
|
|
$('.mobile-overlay-video').removeClass('d-none');
|
|
});
|
|
|
|
// Execute play when overlay button is click
|
|
player.on('pause', function(data) {;
|
|
// $checkScreenOnPause();
|
|
$('.mobile-overlay-video').removeClass('d-none');
|
|
});
|
|
|
|
|
|
// Execute this event when playing the first video on the player itself
|
|
// player.on('ended', function(data) {
|
|
// if(currPlayed === '') {
|
|
// var id = $(".control" ).first().attr("value");
|
|
// $(`#control${id}`).html('<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 17 13" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9372 0L16.4004 1.47977L6.20039 12.75L0.000391006 6.47977L1.46359 5L6.20039 9.81553L14.9372 0Z" fill="#ffffff"/></svg> Vue')
|
|
// $(`#control${id}`).prop('disabled', false);
|
|
// $(`#control${id}`).removeAttr('data-toggle');
|
|
// $(`#control${id}`).removeAttr('data-placement');
|
|
// $(`#control${id}`).removeAttr('title');
|
|
|
|
// synchronize(id);
|
|
// }
|
|
// });
|
|
function get_selected_video (id, counter) {
|
|
$.ajax({
|
|
url: baseurl+"events/homepage/get_event_video?id="+id,
|
|
type: "get",
|
|
success: function( result ){
|
|
if(result.mtype == 'success') {
|
|
$('#video-player').empty()
|
|
$('#video-player').append(JSON.parse(result.mdata.embed))
|
|
$('#episode_number').text(counter)
|
|
$('#episode_title').text(result.mdata.title)
|
|
previousTime = 0;
|
|
|
|
if(playList.length !== 0) {
|
|
var vids = JSON.parse(localStorage.getItem("playList"))
|
|
var found = false
|
|
for (var i in vids) {
|
|
if (vids[i].id == id) {
|
|
previousTime = vids[i].playingCurrentTime
|
|
found = true
|
|
synchronize(id, previousTime, vids[i].duration)
|
|
break; //Stop this loop, we found it!
|
|
}
|
|
}
|
|
if(found === false) {
|
|
synchronize(id, previousTime, 0)
|
|
}
|
|
} else {
|
|
synchronize(id, previousTime, 0)
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
// Check the currently video played status (main)
|
|
$('.control').click(function() {
|
|
|
|
var id = $(this).attr("value");
|
|
var counter = $(this).attr("count");
|
|
var btnText = $(this).text();
|
|
|
|
// If the user finish the video and want to watch again reset state
|
|
if (btnText !== 'Lire la vidéo' && btnText !== 'Reprendre') {
|
|
$("html, body").animate({ scrollTop: 0 }, 500);
|
|
$(`#control${id}`).prop('disabled', true);
|
|
|
|
$(`#control${id}`).prop('data-toggle', 'tooltip');
|
|
$(`#control${id}`).prop('data-placement', 'top');
|
|
$(`#control${id}`).prop('title', 'Video already playing');
|
|
|
|
get_selected_video(id, counter)
|
|
}
|
|
|
|
if(currPlayed !== id) {
|
|
const iframe = document.querySelector('iframe');
|
|
const player = new Vimeo.Player(iframe);
|
|
player.pause();
|
|
}
|
|
|
|
if (btnText === 'Lire la vidéo') {
|
|
$("html, body").animate({ scrollTop: 0 }, 500);
|
|
|
|
$(`#control${id}`).prop('disabled', true);
|
|
|
|
$(`#control${id}`).prop('data-toggle', 'tooltip');
|
|
$(`#control${id}`).prop('data-placement', 'top');
|
|
$(`#control${id}`).prop('title', 'Video already playing');
|
|
|
|
|
|
get_selected_video(id, counter)
|
|
}
|
|
|
|
if (btnText === 'Reprendre' && currPlayed !== id) {
|
|
|
|
$("html, body").animate({ scrollTop: 0 }, 500);
|
|
|
|
get_selected_video(id, counter)
|
|
}
|
|
|
|
// Run this when user click on the same video and try to pause
|
|
if (btnText === 'Reprendre' && currPlayed === id) {
|
|
|
|
$("html, body").animate({ scrollTop: 0 }, 500);
|
|
|
|
const iframe = document.querySelector('iframe');
|
|
const player = new Vimeo.Player(iframe);
|
|
player.play();
|
|
playingStatus = 1;
|
|
}
|
|
|
|
})
|
|
|
|
});
|