vendor
7 years ago
admin.js
2 years ago
ads.js
2 years ago
documents-viewer-script.js
3 years ago
front.js
2 years ago
index.html
7 years ago
initplyr.js
2 years ago
pdfobject.min.js
3 years ago
plyr.polyfilled.js
3 years ago
preview.js
3 years ago
settings.js
6 years ago
vimeo-player.js
2 years ago
ytiframeapi.js
2 years ago
initplyr.js
232 lines
| 1 | /** |
| 2 | * Note: This is complex initialization, but it is necessary for Gutenberg and Elementor compatibility. There are some known issues in Gutenberg that require this complex setup. |
| 3 | */ |
| 4 | var playerInit = []; |
| 5 | |
| 6 | // Event listener for when the DOM content is loaded |
| 7 | document.addEventListener('DOMContentLoaded', function () { |
| 8 | |
| 9 | |
| 10 | const overlayMask = document.createElement('div'); |
| 11 | overlayMask.className = 'overlay-mask'; |
| 12 | |
| 13 | |
| 14 | // Select all embed wrappers with the class 'ep-embed-content-wraper' |
| 15 | let embedWrappers = document.querySelectorAll('.ep-embed-content-wraper'); |
| 16 | |
| 17 | // Initialize the player for each embed wrapper |
| 18 | embedWrappers.forEach(wrapper => { |
| 19 | initPlayer(wrapper); |
| 20 | }); |
| 21 | |
| 22 | // Mutation observer to detect any changes in the DOM |
| 23 | const observer = new MutationObserver(mutations => { |
| 24 | mutations.forEach(mutation => { |
| 25 | const addedNodes = Array.from(mutation.addedNodes); |
| 26 | addedNodes.forEach(node => { |
| 27 | traverseAndInitPlayer(node); |
| 28 | }); |
| 29 | }); |
| 30 | }); |
| 31 | |
| 32 | // Start observing changes in the entire document body and its subtree |
| 33 | observer.observe(document.body, { childList: true, subtree: true }); |
| 34 | |
| 35 | // Recursive function to traverse the DOM and initialize the player for each embed wrapper |
| 36 | function traverseAndInitPlayer(node) { |
| 37 | if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('ep-embed-content-wraper')) { |
| 38 | initPlayer(node); |
| 39 | } |
| 40 | |
| 41 | if (node.hasChildNodes()) { |
| 42 | node.childNodes.forEach(childNode => { |
| 43 | traverseAndInitPlayer(childNode); |
| 44 | }); |
| 45 | } |
| 46 | } |
| 47 | |
| 48 | |
| 49 | }); |
| 50 | |
| 51 | |
| 52 | // Function to initialize the player for a given wrapper |
| 53 | function initPlayer(wrapper) { |
| 54 | const playerId = wrapper.getAttribute('data-playerid'); |
| 55 | |
| 56 | // Get the options for the player from the wrapper's data attribute |
| 57 | let options = document.querySelector(`[data-playerid="${playerId}"]`)?.getAttribute('data-options'); |
| 58 | |
| 59 | if(!options) { |
| 60 | return false; |
| 61 | } |
| 62 | |
| 63 | // Parse the options string into a JSON object |
| 64 | options = JSON.parse(options); |
| 65 | |
| 66 | // Create DOM elements from the icon strings |
| 67 | const pipPlayIconElement = document.createElement('div'); |
| 68 | pipPlayIconElement.className = 'pip-play'; |
| 69 | pipPlayIconElement.innerHTML = '<svg width="20" height="20" viewBox="-0.15 -0.112 0.9 0.9" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin" class="jam jam-play"><path fill="#fff" d="M.518.357A.037.037 0 0 0 .506.306L.134.08a.039.039 0 0 0-.02-.006.038.038 0 0 0-.038.037v.453c0 .007.002.014.006.02a.039.039 0 0 0 .052.012L.506.37A.034.034 0 0 0 .518.358zm.028.075L.174.658A.115.115 0 0 1 .017.622.109.109 0 0 1 0 .564V.111C0 .05.051 0 .114 0c.021 0 .042.006.06.017l.372.226a.11.11 0 0 1 0 .189z"/></svg>'; |
| 70 | pipPlayIconElement.style.display = 'none'; |
| 71 | |
| 72 | |
| 73 | const pipPauseIconElement = document.createElement('div'); |
| 74 | pipPauseIconElement.className = 'pip-pause'; |
| 75 | pipPauseIconElement.innerHTML = '<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 2.5 2.5" xml:space="preserve"><path d="M1.013.499 1.006.5V.499H.748a.054.054 0 0 0-.054.054v1.394c0 .03.024.054.054.054h.266a.054.054 0 0 0 .054-.054V.553a.054.054 0 0 0-.054-.054zm.793 1.448V.553a.054.054 0 0 0-.054-.054L1.745.5V.499h-.258a.054.054 0 0 0-.054.054v1.394c0 .03.024.054.054.054h.265a.054.054 0 0 0 .054-.054z"/></svg>'; |
| 76 | |
| 77 | const pipCloseElement = document.createElement('div'); |
| 78 | pipCloseElement.className = 'pip-close'; |
| 79 | pipCloseElement.innerHTML = '<svg width="20" height="20" viewBox="0 0 0.9 0.9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.198.198a.037.037 0 0 1 .053 0L.45.397.648.199a.037.037 0 1 1 .053.053L.503.45l.198.198a.037.037 0 0 1-.053.053L.45.503.252.701A.037.037 0 0 1 .199.648L.397.45.198.252a.037.037 0 0 1 0-.053z" fill="#fff"/></svg>'; |
| 80 | |
| 81 | // Check if the player has not been initialized for this wrapper |
| 82 | if (playerId && !wrapper.classList.contains('plyr-initialized')) { |
| 83 | |
| 84 | |
| 85 | let selector = `[data-playerid="${playerId}"] .ose-embedpress-responsive`; |
| 86 | |
| 87 | if (options.self_hosted && options.hosted_format === 'video') { |
| 88 | selector = `[data-playerid="${playerId}"] .ose-embedpress-responsive video`; |
| 89 | } |
| 90 | else if (options.self_hosted && options.hosted_format === 'audio') { |
| 91 | selector = `[data-playerid="${playerId}"] .ose-embedpress-responsive audio`; |
| 92 | } |
| 93 | |
| 94 | |
| 95 | // Set the main color of the player |
| 96 | document.querySelector(`[data-playerid="${playerId}"]`).style.setProperty('--plyr-color-main', options.player_color); |
| 97 | document.querySelector(`[data-playerid="${playerId}"].custom-player-preset-1, [data-playerid="${playerId}"].custom-player-preset-3, [data-playerid="${playerId}"].custom-player-preset-4`)?.style.setProperty('--plyr-range-fill-background', '#ffffff'); |
| 98 | |
| 99 | // Set the poster thumbnail for the player |
| 100 | if (document.querySelector(`[data-playerid="${playerId}"] iframe`)) { |
| 101 | document.querySelector(`[data-playerid="${playerId}"] iframe`).setAttribute('data-poster', options.poster_thumbnail); |
| 102 | } |
| 103 | |
| 104 | |
| 105 | // Define the controls to be displayed |
| 106 | const controls = [ |
| 107 | 'play-large', |
| 108 | options.restart ? 'restart' : '', |
| 109 | options.rewind ? 'rewind' : '', |
| 110 | 'play', |
| 111 | options.fast_forward ? 'fast-forward' : '', |
| 112 | 'progress', |
| 113 | 'current-time', |
| 114 | 'duration', |
| 115 | 'mute', |
| 116 | 'volume', |
| 117 | 'captions', |
| 118 | 'settings', |
| 119 | options.pip ? 'pip' : '', |
| 120 | 'airplay', |
| 121 | options.download ? 'download' : '', |
| 122 | options.fullscreen ? 'fullscreen' : '', |
| 123 | |
| 124 | ].filter(control => control !== ''); |
| 125 | |
| 126 | // Create a new Plyr player instance with the specified options and controls |
| 127 | const player = new Plyr(selector, { |
| 128 | controls: controls, |
| 129 | seekTime: 10, |
| 130 | poster: options.poster_thumbnail, |
| 131 | storage: { |
| 132 | enabled: true, |
| 133 | key: 'plyr_volume' |
| 134 | }, |
| 135 | displayDuration: true, |
| 136 | tooltips: { controls: options.player_tooltip, seek: options.player_tooltip }, |
| 137 | hideControls: options.hide_controls, |
| 138 | youtube: { |
| 139 | ...(options.autoplay && { autoplay: options.autoplay }), |
| 140 | ...(options.start && { start: options.start }), |
| 141 | ...(options.end && { end: options.end }), |
| 142 | ...(options.rel && { rel: options.rel }), |
| 143 | ...(options.fullscreen && { fs: options.fullscreen }) |
| 144 | }, |
| 145 | vimeo: { |
| 146 | byline: false, |
| 147 | portrait: false, |
| 148 | title: false, |
| 149 | speed: true, |
| 150 | transparent: false, |
| 151 | controls: false, |
| 152 | ...(options.t && { t: options.t }), |
| 153 | ...(options.vautoplay && { autoplay: options.vautoplay }), |
| 154 | ...(options.autopause && { autopause: options.autopause }), |
| 155 | ...(options.dnt && { dnt: options.dnt }), |
| 156 | } |
| 157 | }); |
| 158 | |
| 159 | playerInit[playerId] = player; |
| 160 | |
| 161 | |
| 162 | |
| 163 | // Mark the wrapper as initialized |
| 164 | wrapper.classList.add('plyr-initialized'); |
| 165 | } |
| 166 | |
| 167 | // Check for the existence of the player's pip button at regular intervals |
| 168 | const pipInterval = setInterval(() => { |
| 169 | |
| 170 | let playerPip = document.querySelector(`[data-playerid="${playerId}"] [data-plyr="pip"]`); |
| 171 | if (playerPip) { |
| 172 | clearInterval(pipInterval); |
| 173 | |
| 174 | let options = document.querySelector(`[data-playerid="${playerId}"]`).getAttribute('data-options'); |
| 175 | |
| 176 | options = JSON.parse(options); |
| 177 | if (!options.self_hosted) { |
| 178 | |
| 179 | const iframeSelector = document.querySelector(`[data-playerid="${playerId}"] .plyr__video-wrapper`); |
| 180 | |
| 181 | // Add click event listener to toggle the pip mode |
| 182 | playerPip.addEventListener('click', () => { |
| 183 | iframeSelector.classList.toggle('pip-mode'); |
| 184 | |
| 185 | let parentElement = iframeSelector.parentElement; |
| 186 | while (parentElement) { |
| 187 | parentElement.style.zIndex = '9999'; |
| 188 | parentElement = parentElement.parentElement; |
| 189 | } |
| 190 | |
| 191 | }); |
| 192 | |
| 193 | |
| 194 | if (options.pip) { |
| 195 | iframeSelector.appendChild(pipPlayIconElement); |
| 196 | iframeSelector.appendChild(pipPauseIconElement); |
| 197 | iframeSelector.appendChild(pipCloseElement); |
| 198 | const pipPlay = document.querySelector(`[data-playerid="${playerId}"] .plyr__video-wrapper .pip-play`); |
| 199 | const pipPause = document.querySelector(`[data-playerid="${playerId}"] .plyr__video-wrapper .pip-pause`); |
| 200 | const pipClose = document.querySelector(`[data-playerid="${playerId}"] .plyr__video-wrapper .pip-close`); |
| 201 | |
| 202 | console.log(pipClose); |
| 203 | |
| 204 | pipClose.addEventListener('click', () => { |
| 205 | iframeSelector.classList.remove('pip-mode'); |
| 206 | console.log(iframeSelector.classList); |
| 207 | }); |
| 208 | |
| 209 | |
| 210 | iframeSelector.addEventListener('click', () => { |
| 211 | const ariaPressedValue = document.querySelector(`[data-playerid="${playerId}"] .plyr__controls [data-plyr="play"]`).getAttribute('aria-pressed'); |
| 212 | |
| 213 | console.log(ariaPressedValue); |
| 214 | if (ariaPressedValue === 'true') { |
| 215 | pipPause.style.display = 'none'; |
| 216 | pipPlay.style.display = 'flex'; |
| 217 | } else { |
| 218 | pipPlay.style.display = 'none'; |
| 219 | pipPause.style.display = 'flex'; |
| 220 | } |
| 221 | }); |
| 222 | |
| 223 | } |
| 224 | |
| 225 | |
| 226 | } |
| 227 | } |
| 228 | |
| 229 | }, 200); |
| 230 | |
| 231 | } |
| 232 |