1// Start of animation.js 2jQuery(document).ready(function ($) { 3 // console.log('image-video.js ready'); 4 5 /**************************************/ 6 /* START :: Video / Large Container */ 7 /**************************************/ 8 if ($(".youtube_pause").length) { 9 if ($('.fl-bg-video-player').length) { 10 $("#yt-play-button").trigger("click"); 11 } 12 13 $(".youtube_pause").each(function () { 14 $(this).find('.youtube_pause_box').append('<div class="youtube_controls"><button id="yt-pause-button" class="active yt-control-button hidefocus">Pause Background Video</button><button class="yt-control-button hidefocus" id="yt-play-button">Play Background Video</button></div>'); 15 $("#yt-pause-button").on("click", function () { 16 $(".yt-control-button").addClass("active"); 17 $(this).removeClass("active"); 18 $('.fl-bg-video-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); 19 }); 20 $("#yt-play-button").on("click", function () { 21 $(".yt-control-button").addClass("active"); 22 $(this).removeClass("active"); 23 $('.fl-bg-video-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*'); 24 }); 25 }); 26 } 27 /**************************************/ 28 /* END :: Video / Large Container */ 29 /**************************************/ 30 /*************************/ 31 /* START :: Hero Video */ 32 /*************************/ 33 34 if ($(".youtube_pause").length) {
35 initBackgroundVideoControls(); 36 } 37 38 function initBackgroundVideoControls() { 39 const pauseText = `Pause Video`; 40 const playText = `Play Video`; 41 // Pause Button HTML template 42 const pauseButtonHTML = ` 43 <div class="youtube_controls"> 44 <button id="yt-pause-button" class="yt-control-button yt-pause-button hidefocus" aria-label="Pause background video" aria-pressed="true">${pauseText}</button> 45 </div> 46 `; 47 48 function checkForLoadedVideos(attempts = 0) { 49 if (attempts > 30) { 50 return; 51 } 52 53 let allLoaded = true; 54 55 $('.fl-bg-video').each(function () { 56 const $container = $(this); 57 const rowVideo = $(this).parents('.youtube_pause'); 58 if (!rowVideo.find('.youtube_controls').length) { 59 if ($container.data('loaded')) { 60 rowVideo.find('.youtube_controls_wrapper').append(pauseButtonHTML); 61 initVideoControls($container); 62 } else { 63 allLoaded = false; 64 } 65 } 66 }); 67 68 // If not all videos are loaded, check again in 500ms 69 if (!allLoaded) { 70 setTimeout(() => checkForLoadedVideos(attempts + 1), 500); 71 } 72 // all videos are loaded! 73 else { 74 $("#yt-pause-button").each(function () { 75 // if not mobile with video disabled, show video controls 76 if ($(this).parents('.youtube_pause').find('fl-bg-video-fallback')) { 77 $(this).addClass('active'); 78 } 79 }); 80 81 // wait until videos are loaded to start the 5s accessibility timer 82 // yt_pause = setInterval(function(){ 83 // $(".fl-bg-video-player").each(function () { 84 // var iframe = $( this ); 85 // if ($('.fl-bg-video-player').length) { 86 // iframe.get(0).contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); 87 // iframe.parents(".youtube_pause").find(".yt-pause-button").trigger("click"); 88 // } 89 // }); 90 // },5000) 91 92 // setTimeout(function(){ 93 // clearInterval(yt_pause); 94 // }, 5001) 95 } 96 } 97 // Start checking for loaded videos 98 checkForLoadedVideos(); 99 100 function initVideoControls($container) { 101 const $button = $container.parent().find('#yt-pause-button'); 102 103 // Self-hosted video 104 const $video = $container.find('video'); 105 if ($video.length) { 106 $button.on('click', function (e) { 107 e.preventDefault(); 108 e.stopPropagation(); 109 if ($video[0].paused) { 110 $video[0].play(); 111 $(this) 112 .removeClass('active yt-play-button') 113 .html(pauseText) 114 .addClass('yt-pause-button') 115 .attr({ 116 'aria-label': 'Pause background video', 117 'aria-pressed': true, 118 }) 119 .delay(150).queue(function (next) { 120 // wait before adding active class, for animation 121 $(this).addClass('active'); 122 next(); 123 }); 124 } else { 125 $video[0].pause(); 126 $(this) 127 .removeClass('active yt-pause-button') 128 .html(playText) 129 .addClass('yt-play-button') 130 .attr({ 131 'aria-label': 'Play background video', 132 'aria-pressed': false, 133 }) 134 .delay(150).queue(function (next) { 135 // wait before adding active class, for animation 136 $(this).addClass('active'); 137 next(); 138 }); 139 } 140 }); 141 return; 142 } 143 144 // YouTube video 145 if ($container.data('youtube')) { 146 function checkForPlayer() { 147 const $iframe = $container.find('iframe.fl-bg-video-player'); 148 const player = YT.get($iframe.attr('id')); 149 150 if (!player) { 151 setTimeout(checkForPlayer, 500); 152 return; 153 } 154 155 $button.on('click', function (e) { 156 e.preventDefault(); 157 e.stopPropagation(); 158 const state = player.getPlayerState(); 159 if (state === YT.PlayerState.PLAYING) { 160 player.pauseVideo(); 161 $(this) 162 .removeClass('active yt-pause-button') 163 .html(playText) 164 .addClass('yt-play-button') 165 .attr({ 166 'aria-label': 'Play background video', 167 'aria-pressed': false, 168 }) 169 .delay(150).queue(function (next) { 170 // wait before adding active class, for animation 171 $(this).addClass('active'); 172 next(); 173 }); 174 } else { 175 player.playVideo(); 176 $(this) 177 .removeClass('active yt-play-button') 178 .html(pauseText) 179 .addClass('yt-pause-button') 180 .attr({ 181 'aria-label': 'Pause background video', 182 'aria-pressed': true, 183 }) 184 .delay(150).queue(function (next) { 185 // wait before adding active class, for animation 186 $(this).addClass('active'); 187 next(); 188 }); 189 } 190 }); 191 } 192 193 checkForPlayer(); 194 return; 195 } 196 197 // Vimeo video 198 if ($container.data('vimeo')) { 199 const player = $container.data('VMPlayer'); 200 if (player) { 201 $button.on('click', function (e) { 202 e.preventDefault(); 203 e.stopPropagation(); 204 const $btn = $(this); 205 player.getPaused().then(function (paused) { 206 if (paused) { 207 player.play(); 208 $btn 209 .removeClass('active yt-play-button') 210 .html(pauseText) 211 .addClass('yt-pause-button') 212 .attr({ 213 'aria-label': 'Pause background video', 214 'aria-pressed': true, 215 }) 216 .delay(150).queue(function (next) { 217 // wait before adding active class, for animation 218 $(this).addClass('active'); 219 next(); 220 }); 221 } else { 222 player.pause(); 223 $btn 224 .removeClass('active yt-pause-button') 225 .html(playText) 226 .addClass('yt-play-button') 227 .attr({ 228 'aria-label': 'Play background video', 229 'aria-pressed': false, 230 }) 231 .delay(150).queue(function (next) { 232 // wait before adding active class, for animation 233 $(this).addClass('active'); 234 next(); 235 }); 236 } 237 }); 238 }); 239 } 240 } 241 } 242 } 243 244 245 // WINDOW RESIZE // 246 $(window).on( "resize", function() { 247 248 }); 249 250 // WINDOW SCROLL // 251 $(window).on( "scroll", function() { 252 253 }); 254 255});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.