1 line
8.8 KiB
JavaScript
1 line
8.8 KiB
JavaScript
"use strict";class AIOVGVideoElement extends HTMLElement{constructor(){super(),this._isRendered=!1,this._isCookieConsentLoaded=!1,this._isPosterImageLoaded=!1,this._isPlayerLoaded=!1,this._player=null,this._playerEl=null,this._cookieConsentEl=null,this._intersectionObserver=null,this._isInViewport=!1}connectedCallback(){this._uid=parseInt(this.getAttribute("reference_id")),this._params=window["aiovg_player_"+this._uid],this._playerId="aiovg-player-"+this._uid,this._render()}static get observedAttributes(){return["cookieconsent"]}attributeChangedCallback(e,t,i){if(t==i)return!1;"cookieconsent"===e&&(this.cookieConsent||this._isRendered||(this._cookieConsentEl.remove(),this._render()))}get cookieConsent(){return this.hasAttribute("cookieconsent")}set cookieConsent(e){let t=Boolean(e);t?this.setAttribute("cookieconsent",""):this.removeAttribute("cookieconsent")}_render(){return!this._isRendered&&(this._params.lazyloading&&!this._isInViewport?(this._initIntersectionObserver(),!1):this.cookieConsent?(this._addCookieConsent(),!1):void(this._isRendered=!0,this._addPlayer()))}_addCookieConsent(){if(this._isCookieConsentLoaded)return!1;this._isCookieConsentLoaded=!0,this._cookieConsentEl=this.querySelector(".aiovg-privacy-wrapper"),this._addPosterImage(),this._cookieConsentEl.querySelector(".aiovg-privacy-consent-button").addEventListener("click",()=>this._onCookieConsent())}_onCookieConsent(){this._isRendered=!0,this._cookieConsentEl.remove(),this.cookieConsent=!1,this._params.player.autoplay=!0,this._addPlayer(),this._setCookie()}_addPosterImage(){if(this._isPosterImageLoaded)return!1;this._isPosterImageLoaded=!0;let e=this._cookieConsentEl.getAttribute("data-poster")||"";AIOVGVideoElement.isValidUrl(e)&&(this._cookieConsentEl.style.backgroundImage=`url("${e}")`)}_addPlayer(){if(this._isPlayerLoaded)return!1;this._isPlayerLoaded=!0;let e=document.getElementById(this._playerId);this._player=new Plyr(e,this._params.player),this._playerEl=this.querySelector(".plyr");let t={player:this._player,settings:this._params};this.dispatchEvent(new CustomEvent("player.init",{detail:t,bubbles:!0,cancelable:!0})),this._player.on("ready",()=>{(this._params.hasOwnProperty("share")||this._params.hasOwnProperty("embed"))&&this._initShareEmbed(),this._params.hasOwnProperty("logo")&&this._initLogo()});let i=!1;if(this._player.on("playing",()=>{if(i)return!1;i=!0,this._updateViewsCount()}),this._player.on("ended",()=>{this._playerEl.className+=" plyr--stopped"}),this._params.hasOwnProperty("hls")){let s=new Hls;s.loadSource(this._params.hls),s.attachMedia(e),window.hls=s,this._player.on("languagechange",()=>{setTimeout(()=>s.subtitleTrack=this._player.currentTrack,50)})}if(this._params.hasOwnProperty("dash")){let a=dashjs.MediaPlayer().create();a.initialize(e,this._params.dash,!0),window.dash=a}this._params.player.hasOwnProperty("ads")&&this._initAds(),this._params.hasOwnProperty("contextmenu")&&this._initContextMenu()}_initAds(){this._player.ads.config.tagUrl=this._getVastUrl();let e=!1;this._player.ads.on("loaded",()=>{if(e)return!1;e=!0;let t=this._player.ads.manager,i=document.createElement("button");i.type="button",i.className="plyr__control plyr__control--overlaid",i.style.display="none",i.innerHTML='<svg aria-hidden="true" focusable="false"><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span>',this.querySelector(".plyr__ads").appendChild(i),i.addEventListener("click",()=>{i.style.display="none",t.resume()}),t.addEventListener(google.ima.AdEvent.Type.STARTED,e=>{this._params.player.ads.companion&&this._initCompanionAds(e)}),t.addEventListener(google.ima.AdEvent.Type.PAUSED,e=>{i.style.display=""})})}_getVastUrl(){let e=this._params.player.ads.tagUrl;return(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=e.replace("[domain]",encodeURIComponent(this._params.site_url))).replace("[player_width]",this._player.elements.container.offsetWidth)).replace("[player_height]",this._player.elements.container.offsetHeight)).replace("[random_number]",Date.now())).replace("[timestamp]",Date.now())).replace("[page_url]",encodeURIComponent(window.location))).replace("[referrer]",encodeURIComponent(document.referrer))).replace("[ip_address]",this._params.ip_address)).replace("[post_id]",this._params.post_id)).replace("[post_title]",encodeURIComponent(this._params.post_title))).replace("[post_excerpt]",encodeURIComponent(this._params.post_excerpt))).replace("[video_file]",encodeURIComponent(this._player.source))).replace("[video_duration]",this._player.duration||"")).replace("[autoplay]",this._params.player.autoplay)}_initCompanionAds(e){let t=e.getAd(),i=[];try{i=window.AIOVGGetCompanionElements()}catch(s){}if(i.length){let a=new google.ima.CompanionAdSelectionSettings;a.resourceType=google.ima.CompanionAdSelectionSettings.ResourceType.ALL,a.creativeType=google.ima.CompanionAdSelectionSettings.CreativeType.ALL,a.sizeCriteria=google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_NEAR_MATCH;for(let r=0;r<i.length;r++){let n=i[r].id,o=i[r].width,l=i[r].height;try{let p=t.getCompanionAds(o,l,a),d=p[0],h=d.getContent();document.getElementById(n).innerHTML=h}catch(c){}}}}_initShareEmbed(){let e=document.createElement("button");e.type="button",e.className="plyr__controls__item plyr__control plyr__share-embed-button aiovg-icon-share",e.innerHTML='<span class="plyr__sr-only">Share</span>',this._playerEl.appendChild(e);let t=this.querySelector(".plyr__share-embed-modal-close-button"),i=this.querySelector(".plyr__share-embed-modal");this._playerEl.appendChild(i),i.style.display="";let s=!1;e.addEventListener("click",()=>{this._player.playing?(s=!0,this._player.pause()):s=!1,e.style.display="none",i.className+=" fadein"}),t.addEventListener("click",()=>{s&&this._player.play(),i.className=i.className.replace(" fadein",""),setTimeout(function(){e.style.display=""},500)}),this._params.hasOwnProperty("embed")&&this.querySelector(".plyr__embed-code-input").addEventListener("focus",function(){this.select(),document.execCommand("copy")})}_initLogo(){let e="bottom:50px; left:"+this._params.logo.margin+"px;";switch(this._params.logo.position){case"topleft":e="top:"+this._params.logo.margin+"px; left:"+this._params.logo.margin+"px;";break;case"topright":e="top:"+this._params.logo.margin+"px; right:"+this._params.logo.margin+"px;";break;case"bottomright":e="bottom:50px; right:"+this._params.logo.margin+"px;"}let t=document.createElement("div");t.className="plyr__logo",t.innerHTML='<a href="'+this._params.logo.link+'" style="'+e+'" target="_blank"><img src="'+this._params.logo.image+'" alt="" /><span class="plyr__sr-only">Logo</span></a>',this._playerEl.appendChild(t)}_initContextMenu(){if(!window.AIOVGIsContextMenuAdded){window.AIOVGIsContextMenuAdded=!0;let e=document.createElement("div");e.id="aiovg-contextmenu",e.style.display="none",e.innerHTML='<div class="aiovg-contextmenu-content">'+this._params.contextmenu.content+"</div>",document.body.appendChild(e)}let t=document.getElementById("aiovg-contextmenu"),i="";this._playerEl.addEventListener("contextmenu",function(e){if(3==e.keyCode||3==e.which){e.preventDefault(),e.stopPropagation();let s=t.offsetWidth,a=t.offsetHeight,r=e.pageX,n=e.pageY,o=document.documentElement,l=(window.pageXOffset||o.scrollLeft)-(o.clientLeft||0),p=(window.pageYOffset||o.scrollTop)-(o.clientTop||0),d=r+s>window.innerWidth+l?r-s:r,h=n+a>window.innerHeight+p?n-a:n;t.style.display="",t.style.left=d+"px",t.style.top=h+"px",clearTimeout(i),i=setTimeout(function(){t.style.display="none"},1500)}}),this._params.hasOwnProperty("logo")&&t.addEventListener("click",()=>{window.location.href=this._params.logo.link}),document.addEventListener("click",()=>{t.style.display="none"})}_initIntersectionObserver(){if(this._intersectionObserver)return!1;this._intersectionObserver=new IntersectionObserver((e,t)=>{e.forEach(e=>{e.isIntersecting?(this._isInViewport=!0,this._render(),this._isRendered&&t.unobserve(this)):this._isInViewport=!1})},{root:null,rootMargin:"0px",threshold:0}),this._intersectionObserver.observe(this)}async _updateViewsCount(){if("aiovg_videos"==this._params.post_type&&AIOVGVideoElement.isValidUrl(this._params.ajax_url)){let e=new FormData;e.append("action","aiovg_update_views_count"),e.append("post_id",parseInt(this._params.post_id)),e.append("security",this._params.ajax_nonce),fetch(this._params.ajax_url,{method:"POST",body:e})}}async _setCookie(){try{if(AIOVGVideoElement.isValidUrl(this._params.ajax_url)){let e=new FormData;e.append("action","aiovg_set_cookie"),e.append("security",this._params.ajax_nonce),fetch(this._params.ajax_url,{method:"POST",body:e})}let t=document.querySelectorAll(".aiovg-player-element[cookieconsent]");for(let i=0;i<t.length;i++)t[i].removeAttribute("cookieconsent")}catch(s){}}static isValidUrl(e){if(""==e)return!1;try{return new URL(e),!0}catch(t){return!1}}}window.AIOVGIsContextMenuAdded=!1,document.addEventListener("DOMContentLoaded",function(){customElements.define("aiovg-video",AIOVGVideoElement)}); |