https://www.tigerbeer.com/dist/js/utils-sustainability-info-screen.js?h=02ebbdd5aaa371674813

1"use strict";(self.webpackChunkbabel_seed_project=self.webpackChunkbabel_seed_project||[]).push([[6425,1908],{179:function(e,t,s){s.r(t),s.d(t,{default:function(){return i}});var a=s(6894);class i{constructor(e){this.content=e.content,this.element=null,this.scrollable=!0,this.eventListeners={close:[]},this.youtubePlayer=new a.default,this.activeVideos=[],this.parentElement=document.getElementById("info-screen-section")}on(e,t){this.eventListeners[e]?this.eventListeners[e].push(t):this.eventListeners[e]=[t]}trigger(e){this.eventListeners[e]&&this.eventListeners[e].forEach((e=>e()))}getSortedBlocks(){return[...this.content.articleBlock||[]].sort(((e,t)=>parseInt(e.blockIndex)-parseInt(t.blockIndex)))}handleWheel(e){this.element&&(this.element.scrollLeft+=e.deltaY)}scrollHorizontal(e,t="auto"){this.element&&this.element.scrollTo({left:this.element.scrollLeft+e,behavior:t})}recalculateScrollEnd(){if(this.element){const e=this.element.scrollWidth-this.element.offsetWidth-this.element.scrollLeft;this.scrollable=e>0,this.updateScrollButton()}}updateScrollButton(){const e=this.element.parentElement.querySelector(".scroll");e&&(this.scrollable?e.classList.remove("hidden"):e.classList.add("hidden"))}createInfoControls(){const e=document.createElement("div");e.className="controls";const t=document.createElement("button");t.className="back";let s="Back to overview";this.content.backToOverviewLabel&&(s=this.content.backToOverviewLabel),t.innerHTML=`\n      <div class="icon cross"></div>

1\n      <span class="text">${s}</span>\n    `,t.addEventListener("click",(()=>{sessionStorage.setItem("returningFromInfo","true");const e=(window.location.hash.slice(1)||"").split("/").filter(Boolean);e.length>0&&(window.location.hash=`/${e[0]}`),this.element?(this.element.style.animation="fadeOut 1s",this.element.style.transform="translateX(2000px)",this.element.style.transition="transform 0.5s",this.parentElement.classList.remove("fade-in"),document.body.classList.remove("info-open"),setTimeout((()=>{this.trigger("close")}),1e3)):this.trigger("close")}));const a=document.createElement("button");a.className="scroll",this.scrollable||a.classList.add("hidden");let i="Scroll";return this.content.scrollButtonLabel&&(i=this.content.scrollButtonLabel),a.innerHTML=`\n      <span class="scroll-text">${i}</span>\n      <div class="icon"></div>\n    `,a.addEventListener("click",(()=>this.scrollHorizontal(500,"smooth"))),e.appendChild(t),e.appendChild(a),e}pauseAllVideos(){this.activeVideos.forEach((e=>{this.youtubePlayer.pauseVideo(e)}))}createInfoBlock(e){const t=document.createElement("section");t.className="block";const s=!!e.articleImage,a=!!e.youtubeVideoID;if(e.title){const s=document.createElement("h1");s.className="heading mobile",s.innerHTML=e.title,t.appendChild(s)}if(s){const s=document.createElement("div");s.className="image-wrap";const a=document.createElement("img");a.className="image",a.src=e.articleImage,a.alt=e.title,s.appendChild(a),t.appendChild(s)}if(a){const s=document.createElement("div");s.className="info-video",s.classList.add("loading"),s.classList.add("loop"),e.imgVideoFallback&&(s.style.backgroundImage=`url(${e.imgVideoFallback})`);const a=`video-${e.blockIndex}`;this.activeVideos.push(a);const i=document.createElement("div");i.className="drawer",i.innerHTML=`<div id="${a}"></div>`,s.appendChild(i),t.appendChild(s),this.youtubePlayer.createPlayer(a,e.youtubeVideoID,{controls:!1,loop:!0,autoplay:!0,mute:!0,onReady:e=>{e.target.playVideo(),setTimeout((()=>{s.classList.remove("loading"),i.classList.add("visible"),s.classList.add("visible")}),1e3)},onStateChange:e=>{e.data===YT.PlayerState.PLAYING?setTimeout((()=>{s.classList.remove("loading"),i.classList.add("visible"),s.classList.add("visible")}),1e3):e.data===YT.PlayerState.UNSTARTED&&s.classList.remove("visible")},onError:e=>{console.error("YouTube player error:",e.data),s.classList.remove("loading"),s.classList.remove("visible")}})}const i=document.createElement("section");i.className="content";let o=null;e.title&&(o=document.createElement("h1"),o.className="heading desktop",o.innerHTML=e.title);const l=document.createElement("p");return l.className="content-body",l.innerHTML=e.paragraph,o&&i.appendChild(o),i.appendChild(l),t.appendChild(i),t}render(e){if(!e)return;e.innerHTML="";const t=document.createElement("div");t.className="info-screen";const s=this.createInfoControls();window.innerWidth<768?t.appendChild(s):e.appendChild(s);this.getSortedBlocks().forEach((e=>{t.appendChild(this.createInfoBlock(e))})),this.element=t,t.addEventListener("wheel",(e=>this.handleWheel(e))),t.addEventListener("scroll",(()=>this.recalculateScrollEnd())),setTimeout((()=>this.recalculateScrollEnd()),0);const a=setInterval((()=>this.recalculateScrollEnd()),1e3);t.style.animation="fadeIn 1s",t.style.transform="translateX(1000px)",t.style.transition="transform 0.5s",this.parentElement.classList.add("fade-in"),e.appendChild(t);const i=()=>{"undefined"!=typeof YT&&YT.Player?this.initializeYouTubePlayers():setTimeout(i,100)};return i(),setTimeout((()=>{t.style.transition="transform 1s",t.style.transform="translateX(0)"}),10),{destroy:()=>{clearInterval(a),this.pauseAllVideos(),this.youtubePlayer.destroyAllPlayers(),this.activeVideos=[],t.parentNode&&t.remove()}}}initializeYouTubePlayers(){this.element.querySelectorAll(".info-video").forEach((e=>{const t=e.querySelector('div[id^="video-"]')?.id;if(t){const s=this.activeVideos.find((e=>e===t));if(s){if(!this.youtubePlayer.getPlayer(s)){const a=t.split("-")[1],i=this.getSortedBlocks().find((e=>e.blockIndex===a));i?.youtubeVideoID&&this.youtubePlayer.createPlayer(s,i.youtubeVideoID,{controls:!1,loop:!0,autoplay:!0,mute:!0,onReady:t=>{e.classList.remove("loading"),t.target.playVideo()},onStateChange:t=>{t.data===YT.PlayerState.PLAYING&&(e.querySelector(".drawer").classList.add("visible"),e.classList.add("visible"))},onError:()=>{e.classList.remove("loading"),e.classList.remove("visible")}})}}}}))}}},6894:function(e,t,s){s.r(t),s.d(t,{default:function(){return a}});class a{constructor(){this.players={},this.apiLoaded=!1,this.apiLoading=!1,this.pendingPlayers=[],this.playersState={},this.pageVisible=!document.hidden,this.userInteracted=!1,this.setupVisibilityHandler(),this.loadAPI(),["click","touchstart","keydown"].forEach((e=>{document.addEventListener(e,(()=>{this.userInteracted=!0}),{once:!0})}))}setupVisibilityHandler(){document.addEventListener("visibilitychange",(()=>{const e=!document.hidden;this.pageVisible=e,e?this.resumePlayersOnVisibility():this.savePlayerStates()})),window.addEventListener("beforeunload",(()=>{this.savePlayerStates(),this.storePlayerStates()})),window.addEventListener("load",(()=>{this.loadPlayerStates()}))}

1savePlayerStates(){Object.keys(this.players).forEach((e=>{const t=this.players[e];if(t&&t.getPlayerState)try{const s={currentTime:t.getCurrentTime(),playing:1===t.getPlayerState(),videoId:t.getVideoData().video_id};this.playersState[e]=s}catch(e){console.log("Could not save player state",e)}}))}storePlayerStates(){try{sessionStorage.setItem("youtubePlayerStates",JSON.stringify(this.playersState))}catch(e){console.log("Could not store player states",e)}}loadPlayerStates(){try{const e=sessionStorage.getItem("youtubePlayerStates");e&&(this.playersState=JSON.parse(e))}catch(e){console.log("Could not load player states",e)}}resumePlayersOnVisibility(){Object.keys(this.players).forEach((e=>{const t=this.players[e],s=this.playersState[e];if(t&&s&&s.playing)try{t.seekTo(s.currentTime),t.playVideo()}catch(e){console.log("Could not resume player",e)}}))}loadAPI(){if(!this.apiLoaded&&!this.apiLoading)return this.apiLoading=!0,new Promise((e=>{if(window.YT&&window.YT.Player)return this.apiLoaded=!0,this.apiLoading=!1,this.pendingPlayers.forEach((e=>{console.log("pendingPlayers: ",e),console.log("window.YT.Player: ",window.YT.Player),this.createPlayer(e.containerId,e.videoId,e.options)})),this.pendingPlayers=[],e(window.YT);if(document.querySelector('script[src*="youtube.com/iframe_api"]')){const t=window.onYouTubeIframeAPIReady;return void(window.onYouTubeIframeAPIReady=()=>{this.apiLoaded=!0,this.apiLoading=!1,this.pendingPlayers.forEach((e=>{this.createPlayer(e.containerId,e.videoId,e.options)})),this.pendingPlayers=[],"function"==typeof t&&t(),e(window.YT)})}const t=document.createElement("script");t.src="https://www.youtube.com/iframe_api";const s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s);const a=window.onYouTubeIframeAPIReady;window.onYouTubeIframeAPIReady=()=>{this.apiLoaded=!0,this.apiLoading=!1,this.pendingPlayers.forEach((e=>{this.createPlayer(e.containerId,e.videoId,e.options)})),this.pendingPlayers=[],"function"==typeof a&&a(),e(window.YT)}}))}createPlayer(e,t,s={}){if(!document.getElementById(e))return null;if(!this.apiLoaded)return console.log("API not loaded, queueing player",e,t,s),this.pendingPlayers.push({containerId:e,videoId:t,options:s}),null;this.players[e]&&(console.log(`Player with ID "${e}" already exists, destroying it first`),this.destroyPlayer(e));const a=this.playersState[e],i={videoId:t,host:"https://www.youtube-nocookie.com",width:"100%",height:"100%",playerVars:{autoplay:s.autoplay?1:0,controls:0,modestbranding:1,rel:0,showinfo:0,fs:0,playsinline:1,mute:s.autoplay?1:0,origin:window.location.origin,enablejsapi:1,loop:s.loop?1:0,playlist:s.loop?t:void 0,iv_load_policy:3,disablekb:1},events:{onReady:i=>{a&&a.videoId===t?(i.target.seekTo(a.currentTime),(a.playing||s.autoplay)&&i.target.playVideo()):s.autoplay&&i.target.playVideo(),this.playersState[e]={currentTime:0,playing:s.autoplay,videoId:t,visible:!1},s.onReady&&s.onReady(i)},onStateChange:t=>{if(console.log("onStateChange",t.data),t.data===YT.PlayerState.PLAYING){if(this.playersState[e]){this.playersState[e].playing=!0,this.playersState[e].visible=!0;const t=document.getElementById(e)?.parentElement;t&&t.classList.add("visible")}}else if((t.data===YT.PlayerState.PAUSED||t.data===YT.PlayerState.UNSTARTED)&&this.playersState[e]&&(this.playersState[e].playing=t.data===YT.PlayerState.PAUSED,t.data===YT.PlayerState.UNSTARTED)){this.playersState[e].visible=!1;const t=document.getElementById(e)?.parentElement;t&&t.classList.remove("visible")}if(t.data===YT.PlayerState.ENDED&&s.loop){const s=document.getElementById(e)?.parentElement;s&&s.classList.add("visible"),t.target.seekTo(0),setTimeout((()=>{t.target.playVideo()}),0)}s.onStateChange&&s.onStateChange(t)},onError:t=>{console.error("YouTube player error:",t.data),this.playersState[e]&&(this.playersState[e].visible=!1);const a=document.getElementById(e)?.parentElement;a&&a.classList.remove("visible"),s.onError&&s.onError(t)}}};try{console.log(`Creating new YT.Player for container "${e}"`);const t=new YT.Player(e,i);return this.players[e]=t,t}catch(e){return console.error("Error creating YouTube player:",e),null}}playVideo(e){const t=this.getPlayer(e);t&&t.playVideo&&(t.playVideo(),this.playersState[e]&&(this.playersState[e].playing=!0))}pauseVideo(e){const t=this.getPlayer(e);t&&t.pauseVideo&&(t.pauseVideo(),this.playersState[e]&&(this.playersState[e].playing=!1))}getPlayer(e){return this.players[e]||null}createPlaceholder(e,t=null){const s=document.createElement("div");

1return s.id=e,s.className="youtube-player-placeholder",t&&(s.style.backgroundImage=`url(${t})`,s.style.backgroundSize="cover",s.style.backgroundPosition="center"),s}destroyPlayer(e){const t=this.getPlayer(e);if(t&&"function"==typeof t.destroy){if(t.getCurrentTime&&t.getPlayerState&&t.getVideoData)try{this.playersState[e]={currentTime:t.getCurrentTime(),playing:t.getPlayerState()===YT.PlayerState.PLAYING,videoId:t.getVideoData().video_id}}catch(e){console.log("Could not save final player state",e)}t.destroy(),delete this.players[e]}}destroyAllPlayers(){this.savePlayerStates(),this.storePlayerStates(),Object.keys(this.players).forEach((e=>this.destroyPlayer(e)))}switchVideo(e,t,s={}){const a=this.getPlayer(e);return!(!a||!a.loadVideoById)&&(s.loop?(a.loadVideoById({videoId:t,startSeconds:0,suggestedQuality:"default"}),a.setLoop(!0),a.setShuffle(!1),a.playVideo()):a.loadVideoById(t),this.playersState[e]&&(this.playersState[e].videoId=t),!0)}safeUnmute(e){const t=this.getPlayer(e);if(!t||!t.unMute)return!1;if(!this.userInteracted)return console.log("Cannot unmute without user interaction - keeping video muted"),!1;try{return t.unMute(),!0}catch(e){return console.log("Could not unmute video despite user interaction",e),!1}}}}}]);