").removeClass("vimeo").addClass("yt");
$(".nav",context).addClass("yt");
player = new YT.Player($(".video div",context)[0],{
videoId : id,
playerVars: {
'autoplay': autoplay ? 1 : 0,
'controls': 0,
"showinfo" : 0,
'rel' : 0,
'fs' : 0,
"modestbranding" : 1,
"playsinline" : 1,
"allowfullscreen" : 1
},
events : {
"onStateChange" : ytStateChange,
"onReady" : ()=>{
if(isMuted) player.mute();
onLoaded();
playerTimer = setInterval(ytTimeUpdate,100);
}
}
});
player.playerType="yt";
youTubePlayers.push(player);
bindControls();
showPlayer();
},
ytTimeUpdate=()=>{
var currentTime = !player.getCurrentTime ? 0.0 : player.getCurrentTime(),
duration = !player.getDuration ? 0.0 : player.getDuration(),
percent = currentTime / duration;
updatePosition(percent);
if(player.getPlayerState()==2)
$(".nav .play",context).removeClass("playing");
else
$(".nav .play",context).addClass("playing");
$(".nav .loaded",context).width((player.getVideoLoadedFraction() * 100) + "%");
updateTime(duration - currentTime);
},
ytStateChange=(e)=>{
if(e.data==0)
playNext();
},
createVimeoPlayer=(data)=>{
dataArray=data.split(",");
$(".video",context).html("
").removeClass("yt").addClass("vimeo");
$(".nav",context).removeClass("yt");
player = new Vimeo.Player($(".video div",context)[0], {
id : dataArray[0],
autoplay : autoplay,
controls : false,
transparent : false,
playsinline : true
});
player.playerType="vimeo";
player.on("timeupdate", vimeoTimeUpdate);
player.on("ended", vimeoEnded);
player.on("progress", vimeoProgress);
player.on("loaded", onLoaded);
player.on("play", hideLoading);
playerTimer = setInterval(vimeoStatusUpdate,100);
player.thumbs=dataArray[1];
if(isMuted){
player.setVolume(0);
}
else{
player.setVolume(vimeoVolumeLevel);
}
renderVimeoTextTracks();
initThumbs();
bindControls();
showPlayer();
},
setSubtitleLanguage=()=>{
let currentLang = getCookie("language");
$(".nav .subtitle li", context).removeClass("active");
if(getCookie("language")!=="en"){
player.enableTextTrack(getCookie("language"));
$(".nav .subtitle li[data-language=" + currentLang + "]",context).addClass("active");
}else{
player.disableTextTrack();
$(".nav .subtitle li[data-language='']",context).addClass("active");
}
},
renderVimeoTextTracks=()=>{
$(".nav",context).removeClass("subtitle");
$(".nav .subtitle ul",context).html("");
player.getTextTracks().then(data=>{
if(data.length>0){
$(".nav",context).addClass("subtitle");
//create 'None' language in text tracks list
// data.push({
data.unshift({
label: "NO SUBTITLES",
language: "",
mode : data.filter(e=>{return e.mode=="showing"}).length==0 ? "showing" : "none"
});
data.forEach(e=>{
$(".nav .subtitle ul",context).append(`
${e.label}`);
});
$(".nav .subtitle li",context).click(subtitleLanguageClickHandler);
//Remove English Auto generated text
if($('li[data-language="en-x-autogen"]').length !== 0){
var autoGen = $('li[data-language="en-x-autogen"]')[0].innerHTML.split(" ")[0];
$('li[data-language="en-x-autogen"]').html(autoGen);
}
$(".nav .subtitle",context).css("display", "block");
}else{
$(".nav .subtitle",context).css("display", "none");
}
setSubtitleLanguage();
});
},
subtitleClickHandler=e=>{
$(".nav .subtitle ul",context).toggle();
},
subtitleLanguageClickHandler=e=>{
if(e.currentTarget.dataset.language.length>0)
player.enableTextTrack(e.currentTarget.dataset.language);
else
player.disableTextTrack();
$(".nav .subtitle li", context).removeClass("active");
$(".nav .subtitle ul",context).toggle();
subtitleClickHandler();
$(e.currentTarget).addClass("active");
},
vimeoTimeUpdate=(e)=>{
updatePosition(e.percent);
updateTime(e.duration - e.seconds);
},
vimeoStatusUpdate=()=>{
player.getPaused().then(paused=>{
if(paused){
$(context).removeClass("playing");
}
else{
hideLoading();
$(context).addClass("playing");
$(context).addClass("show");
}
});
},
vimeoEnded=()=>{
if(assets==undefined)
vimeoRestart();
else
playNext();
},
vimeoProgress=e=>{
$(".nav .loaded",context).width((e.percent * 100) + "%");
},
vimeoRestart=()=>{
player.setCurrentTime(0);
resetControls();
showBigPlay();
},
updateLabels=(asset)=>{
$(".name",context).html(asset.Name?.toUpperCase());
$(".description",context).html(asset?.Content);
$(".sub",context).html(asset?.Var2);
$(window).resize();
},
updatePosition=(percent)=>{
$(".seek .position",context).width((percent * 100) + "%");
},
updateTime=seconds=>{
if(seconds {
return {
minutes : Math.floor(seconds / 60),
seconds : seconds % 60
};
},
getTimeText=seconds=>{
var time=getTime(seconds);
return time.minutes + ":" + Math.floor(time.seconds).toString().padStart(2,"0");
},
bigPlayTimer = 0,
playPauseMorph=()=>{
var tl = new TimelineMax();
var playR = $(".playR",context),
playL = $(".playL",context),
pauseR = $(".pauseR",context),
pauseL = $(".pauseL",context);
showBigPlay();
hideClickPlay();
tl
.to(playL, 0.5, {morphSVG:{shape: pauseL,shapeIndex:4},delay:0.5})
.to(playR, 0.5, {morphSVG:{shape:pauseR,shapeIndex:4},delay:0.5},0);
$(".play.bigPlay .arrow",context).show();
$(".play.bigPlay .pause",context).hide();
setTimeout(()=>{
hideBigPlay();
bigPlayTimer=1500;
}, bigPlayTimer);
},
pausePlayMorph=()=>{
var tl = new TimelineMax();
var playR = $(".playR",context),
playL = $(".playL",context),
pauseR = $(".pauseR",context),
pauseL = $(".pauseL",context);
playLRef= $(".playLRef",context);
playRRef= $(".playRRef",context);
showBigPlay();
tl
.to(playL, 0.5, {morphSVG:{shape: playLRef,shapeIndex:4}, delay:0.5})
.to(playR, 0.5, {morphSVG:{shape:playRRef,shapeIndex:4},delay:0.5},0);
$(".play.bigPlay .arrow",context).hide();
$(".play.bigPlay .pause",context).show();
setTimeout(()=>{
hideBigPlay();
}, 1500);
},
resetMorph=()=>{
var tl = new TimelineMax();
var playR = $(".playR"),
playL = $(".playL"),
pauseR = $(".pauseR"),
pauseL = $(".pauseL");
playLRef= $(".playLRef");
playRRef= $(".playRRef");
tl
.to(playL, 0.5, {morphSVG:{shape: playLRef,shapeIndex:4}, delay:0.5})
.to(playR, 0.5, {morphSVG:{shape:playRRef,shapeIndex:4},delay:0.5},0);
},
playPause=()=>{
$(".nav .subtitle ul",context).css("display", "none");
if(!autoplay){
stopAllVideos();
}
if(player.playerType=="vimeo"){
player.getPaused().then(paused=>{
if(paused){
player.play();
// hideBigPlay();
playPauseMorph();
$(".frame .poster",context).hide();
// clearPoster();
}
else{
player.pause();
// showBigPlay();
pausePlayMorph();
}
});
}
else{
if(player.getPlayerState() == 1){
player.pauseVideo();
$(context).removeClass("playing");
// showBigPlay();
pausePlayMorph();
}
else{
$(context).addClass("show");
$(context).addClass("playing");
$(".frame .poster",context).hide();
player.playVideo();
// hideBigPlay();
playPauseMorph()
}
}
},
stopAllVideos=()=>{
// Find all Vimeo iframes
var vimeoFrames = document.querySelectorAll(".video.vimeo");
// Loop through each YouTube iframe and create a player instance
if(youTubePlayers.length>=1){
youTubePlayers.forEach(function(p) {
p.pauseVideo();
})
}
if (vimeoFrames.length>=1){
// Loop through each Vimeo iframe and create a player instance
vimeoFrames.forEach(function(frame) {
var player = new Vimeo.Player(frame);
player.getPaused().then(paused=>{
if(!paused){
// Stop Vimeo playback
player.pause();
}
})
});
}
resetMorph();
},
addVolumeControl=()=>{
$( ".slider-vertical",context).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function(e, ui) {
// volumeLevel = ui.value/100;
volumeLevel = ui.value;
// player.setVolume(volumeLevel/100);
vimeoVolumeLevel = volumeLevel/100;
if(player.playerType=="vimeo"){
player.setVolume(vimeoVolumeLevel);
if(vimeoVolumeLevel == 0){
setMuted();
}else{
volumeUnmute();
}
}else{
player.setVolume(volumeLevel);
if(volumeLevel == 0){
setMuted();
}else{
volumeUnmute();
}
}
}
});
},
volumeUnmute=()=>{
if(player.playerType=="vimeo"){
player.getVolume().then(vol=>{
player.setVolume(vimeoVolumeLevel);
$(".nav .mute",context).removeClass("muted");
});
}
else{
player.unMute();
$(".nav .mute",context).removeClass("muted");
$(".player .nav.yt .ui-slider-vertical .ui-slider-range-min",context).height(volumeLevel + "%");
player.setVolume(volumeLevel);
}
},
volume=()=>{
$( ".volume" ,context).addClass("volumeSlider");
$(".nav .volumeControls" ,context).on("mouseout", function(){
hideVolume();
})
},
hideVolume=()=>{
$( ".volume" ,context ).removeClass("volumeSlider");
},
isMuted = false,
setMuted=()=>{
$(".nav .mute",context).addClass("muted");
$(".slider-vertical" ,context).slider({value: 0});
isMuted = true
},
clearMuted=()=>{
$(".nav .mute",context).removeClass("muted");
// $(".slider-vertical" ,context ).slider({value: volumeLevel*100});
$(".slider-vertical" ,context ).slider({value: volumeLevel});
isMuted = false;
},
mute=()=>{
if(player.playerType=="vimeo"){
player.getVolume().then(vol=>{
if(vol != 0){
player.setVolume(0);
setMuted();
}
else{
if(volumeLevel == 0){
vimeoVolumeLevel = 0.5;
volumeLevel = 50;
};
player.setVolume(vimeoVolumeLevel);
clearMuted();
}
});
}
else{
if(player.isMuted()){
if(volumeLevel == 0){
vimeoVolumeLevel = 0.5;
volumeLevel = 50;
};
player.unMute();
clearMuted();
}
else{
player.mute();
setMuted();
}
}
},
fullscreen=()=>{
target = $("iframe",context)[0];
switch(true){
case target.requestFullScreen != undefined:
target.requestFullScreen();
break;
case target.webkitRequestFullscreen != undefined:
target.webkitRequestFullscreen();
break;
case target.mozRequestFullScreen != undefined:
target.mozRequestFullScreen();
break;
case target.webkitRequestFullscreen != undefined:
target.webkitRequestFullscreen();
break;
case player.requestFullscreen != undefined:
player.requestFullscreen();
break;
}
hideBigPlay();
},
seek=(e)=>{
updateThumbs(e);
if(e.buttons==0 && e.which == 0) return;
rect = e.currentTarget.getBoundingClientRect();
percent = (e.clientX - rect.left) / rect.width;
if(player.playerType=="vimeo"){
player.getDuration().then(duration=>{
var seconds = Math.floor(duration * percent);
player.setCurrentTime(seconds);
updateTime(seconds);
updatePosition(percent);
});
}
else{
var seconds = player.getDuration() * percent;
player.seekTo(seconds);
updateTime(seconds);
}
},
thumbsVideo,
initThumbs=()=>{
if(player.thumbs==undefined) return;
thumbsVideo=$(".thumbs video",context)[0];
thumbsVideo.src="/asset/" + player.thumbs;
},
updateThumbs=e=>{
if(player.thumbs==undefined) return;
var seconds=thumbsVideo.duration * (e.originalEvent.offsetX / e.currentTarget.clientWidth);
thumbsVideo.currentTime = seconds;
if(seconds{
$(".thumbs",context).show();
},
navMouseleave=()=>{
$(".thumbs",context).hide();
},
assertControls=()=>{
if(assets==undefined){
$(context).addClass("single");
}
},
bindControls=()=>{
unbindControls();
assertControls();
$(".nav .play",context).click(playPause);
$(".nav .volumeControls .mute",context).click(mute);
addVolumeControl();
$(".nav .volumeControls",context).on( "mouseover", (e)=> {
volume();
e.preventDefault();
});
$(".nav .fullscreen",context).click(fullscreen);
$(".close",context).click(closePlayer);
$(".seek",context).click(seek).on("mousemove",seek).on("touchmove",seek);
$(".next",context).click(playNext);
$(".prev",context).click(playPrevious);
$(".frame .play",context).click(bigPlayClickHandler);
$(".nav .subtitle",context).click(subtitleClickHandler);
// $(".frame .play").click(playPause);
if(player.thumbs!=undefined){
$(".seek",context).on("mouseenter", navMouseEnter);
$(".seek",context).on("mouseleave", navMouseleave);
}
},
unbindControls=()=>{
$(".nav .play, .nav .mute, .nav .fullscreen, .close, .seek, .next, .prev, .frame > .play, .nav .subtitle",context).off("click").off("mouseenter").off("mousemove").off("mouseleave").off("touchmove");
},
closePlayer=()=>{
if(player.playerType=="vimeo"){
player.pause();
}
else{
player.pauseVideo();
}
clearInterval(playerTimer);
hidePlayer();
hideBigPlay();
clearTimeout(playerTimer);
player.destroy();
isActive=false;
},
getNextAsset=()=>{
if(assets==undefined) return player.asset;
var index=assets.indexOf(player.asset);
if(index==(assets.length-1)) return assets[0];
return assets[index+1];
},
getPreviousAsset=()=>{
if(assets==undefined) return player.asset;
var index=assets.indexOf(player.asset);
if(index==0) return assets[assets.length-1];
return assets[index-1];
},
playNext=()=>{
clearInterval(playerTimer);
createPlayer(getNextAsset())
hideBigPlay();
},
playPrevious=()=>{
clearInterval(playerTimer);
createPlayer(getPreviousAsset());
hideBigPlay();
},
resetControls=()=>{
$(context).removeClass("show");
$(".seek .position, .nav .loaded",context).width(0);
$(context).removeClass("playing");
$(".nav .time",context).text("-0:00");
$(".nav .mute",context).removeClass("muted");
$(".frame .loading",context).show();
},
onLoaded=()=>{
hideLoading();
//play if available
if(autoplay){
if(player.playerType=="vimeo"){
var playPromise = player.play();
if (playPromise !== undefined) {
playPromise.then((e) => {
// Auto-play started
playPauseMorph();
if(e?.result && isActive){
playPause();
}
}).catch((error) => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
// showBigPlay();
showClickPlay();
// setPoster(asset.Guid);
// pausePlayMorph();
});
}
}
else{
canAutoplay.video().then(e=>{
if(e.result && isActive){
$(context).addClass("show");
$(context).addClass("playing");
$(".frame .poster",context).hide();
player.playVideo();
hideBigPlay();
playPauseMorph();
$(".frame .loading",context).hide();
}
});
}
}
else
{
showBigPlay();
}
},
hideLoading=()=>{
$(".frame .loading",context).hide();
},
hideLoadingDelay=()=>{
setTimeout(hideLoading,1000);
},
showClickPlay=()=>{
$(".frame > .play",context).addClass("autoPlay");
hideLoading();
},
hideClickPlay=()=>{
$(".frame > .play",context).removeClass("autoPlay");
},
showBigPlay=()=>{
$(".frame > .play",context).addClass("bigPlay");
hideLoading();
},
hideBigPlay=()=>{
$(".frame > .play",context).removeClass("bigPlay");
},
bigPlayClickHandler=()=>{
// playPause();
$(".nav .subtitle ul",context).css("display", "none");
if(!autoplay){
stopAllVideos();
}
if(player.playerType=="vimeo"){
player.getPaused().then(paused=>{
if(paused){
player.play();
// hideBigPlay();
playPauseMorph();
$(".frame .poster",context).hide();
// clearPoster();
}
else{
player.pause();
// showBigPlay();
pausePlayMorph();
}
});
}
else{
if(player.getPlayerState() == 1){
player.pauseVideo();
$(context).removeClass("playing");
// showBigPlay();
pausePlayMorph();
}
else{
$(context).addClass("show");
$(context).addClass("playing");
$(".frame .poster",context).hide();
player.playVideo();
// hideBigPlay();
playPauseMorph();
}
}
},
showPlayer=()=>{
if($(context).css("display")!="block"){
gsap.set(context, {opacity:0, duration: 0.7, display:"block"});
gsap.to(context, { opacity:1 });
}
//$(".player").css({opacity:0}).show().animate({opacity:1},500);
},
hidePlayer=()=>{
gsap.to(context, {opacity:0, duration: 0.7, onComplete: ()=>{ gsap.set(context, {display: "none"}); }});
//$(".player").animate({opacity:0},500,);
},
setPoster=guid=>{
$(".frame .poster",context).css("background-image","url(/asset/" + guid + ")").show();
}
clearPoster=()=>{
$(".frame .poster",context).hide();
}
;
createPlayer(asset,target);
},
// autoplay with url ?play parameter
initAutoplay=()=>{
play=$.getQueryParameters().play;
if(play!=undefined){
getName=n=>{
if(n==null || n==undefined) return "";
return n.replace(/:/g,"").replace(/'/g,"").replace(/\(/g,"").replace(/\)/g,"").replace(/-/g," ").replace(/\./g," ").replace(/,/g,"").replace(/!/g,"").replace(/&/g,"and").replace(/á/g,"a").replace(/à/g,"a").trim();
}
play=play.replace(/-/g," ");
//autoplay=false;
asset = assets.find(a=>getName(a.Name).toLowerCase()==play.toLowerCase());
if(asset!=undefined)
createPlayer(asset);
//$($(".gallery .tile").toArray().find(e=>$(e).data().asset.Name.toLowerCase()==play)).click();
}
},
// iframe events
initEvents=()=>{
window.document.addEventListener("player_play", e=>{
//received play event from child document in iframe
e.preventDefault(); //signal to embedded player that this player will play the video.
createPlayer(e.detail);
});
},
dispatchEvent = asset=>{
try{
return window.parent.document.dispatchEvent(new CustomEvent("player_play", { cancelable : true, detail : asset }));
}
catch(e){
return true;
}
},
//ga events
logEvent=(asset)=>{
gtag("event","Trailer", {
event_label : asset.Name
});
},
// inline player
createInlineElement=e=>{
if(Array.isArray(e)){
e.forEach(e=>{
initInlineVideoElement(e);
});
}
else{
initInlineVideoElement(e);
}
},
initInlineVideoElement=e=>{
//create asset
var asset={
Guid: e.parentElement.dataset.assetid,
Var1: e.dataset.var1,
};
createPlayer(asset,e);
}
;
init();
return {
createPlayer : (asset)=>{createPlayer(asset);},
createInlineElement : e=>{createInlineElement(e);},
setAssets: (data)=>{assets = data;},
initAutoplay: ()=>{initAutoplay();},
getPlayers: ()=>{return players;},
//initEvents : ()=>{initEvents();}
};
})();
