https://www.justborn.com/wp-content/themes/studioswift/blocks/video-module/script.js

1/**
2 * Video Module: custom play/pause for .js-video-module-controls
3 *
4 * @package StudioSwift
5 */
6(function () {
7	'use strict';
8
9	function init() {
10		document.querySelectorAll( '.js-video-module-controls' ).forEach( function ( controlsEl ) {
11			var video = controlsEl.previousElementSibling;
12			var btn = controlsEl.querySelector( '.js-video-module-play-pause-btn' );
13			var playIcon = controlsEl.querySelector( '.js-video-module-play-icon' );
14			var pauseIcon = controlsEl.querySelector( '.js-video-module-pause-icon' );
15
16			if ( ! video || video.tagName !== 'VIDEO' || ! btn || ! playIcon || ! pauseIcon ) {
17				return;
18			}
19			if ( btn.dataset.videoModuleInit === '1' ) {
20				return;
21			}
22			btn.dataset.videoModuleInit = '1';
23
24			function setPlaying( playing ) {
25				if ( playing ) {
26					playIcon.hidden = true;
27					pauseIcon.hidden = false;
28					btn.setAttribute( 'title', btn.getAttribute( 'data-title-pause' ) || 'Pause' );
29					btn.setAttribute( 'aria-label', btn.getAttribute( 'data-aria-pause' ) || 'Pause video' );
30				} else {
31					playIcon.hidden = false;
32					pauseIcon.hidden = true;
33					btn.setAttribute( 'title', btn.getAttribute( 'data-title-play' ) || 'Play' );
34					btn.setAttribute( 'aria-label', btn.getAttribute( 'data-aria-play' ) || 'Play video' );
35				}
36			}
37
38			btn.addEventListener( 'click', function ( e ) {
39				e.preventDefault();
40				if ( video.paused ) {
41					video.play();
42				} else {
43					video.pause();
44				}
45			} );
46
47			video.addEventListener( 'play', function () {
48				setPlaying( true );
49			} );
50			video.addEventListener( 'pause', function () {
51				setPlaying( false );
52			} );
53
54			// If autoplay is on but the browser hasn't started playback yet (it's still
55			// buffering), keep the server-rendered "pause" state as-is instead of
56			// flipping it to "play"; the play/pause listeners above will correct it
57			// once autoplay actually starts (or if the browser ever blocks it).
58			if ( ! video.autoplay || ! video.paused ) {
59				setPlaying( ! video.paused );
60			}
61		} );
62	}
63
64	if ( document.readyState === 'loading' ) {
65		document.addEventListener( 'DOMContentLoaded', init );
66	} else {
67		init();
68	}
69
70	// Re-init after ACF re-renders the block preview in the editor (e.g. once content is added).
71	if ( typeof window.acf !== 'undefined' ) {
72		window.acf.addAction( 'render_block_preview/type=video-module', function () {
73			setTimeout( init, 50 );
74		} );
75	}
76})();