@fancyapps/ui
Version:
Robust JavaScript UI Component Library
3 lines (2 loc) • 6.64 kB
JavaScript
/*! License details at fancyapps.com/license */
import{addClass as t}from"../utils/addClass.js";import{isPlainObject as e}from"../utils/isPlainObject.js";import{isString as o}from"../utils/isString.js";import{stringToHtml as n}from"../utils/strToHtml.js";const i=(t,e={})=>{const o=new URL(t),n=new URLSearchParams(o.search),i=new URLSearchParams;for(const[t,o]of[...n,...Object.entries(e)]){let e=o+"";if("t"===t){let t=e.match(/((\d*)m)?(\d*)s?/);t&&i.set("start",60*parseInt(t[2]||"0")+parseInt(t[3]||"0")+"")}else i.set(t,e)}let l=i+"",s=t.match(/#t=((.*)?\d+s)/);return s&&(l+=`#t=${s[1]}`),l},l={autoplay:!1,html5videoTpl:'<video class="f-html5video" playsinline controls controlsList="nodownload" poster="{{poster}}">\n <source src="{{src}}" type="{{format}}" />Sorry, your browser doesn\'t support embedded videos.</video>',iframeAttr:{allow:"autoplay; fullscreen",scrolling:"no",referrerPolicy:"strict-origin-when-cross-origin",credentialless:""},vimeo:{byline:1,color:"00adef",controls:1,dnt:1,muted:0},youtube:{controls:1,enablejsapi:1,nocookie:1,rel:0,fs:1}},s=()=>{let s,r=!1;function c(){const t=null==s?void 0:s.getOptions().Video;return e(t)?Object.assign(Object.assign({},l),t):l}function a(){var t;return null===(t=null==s?void 0:s.getPage())||void 0===t?void 0:t.slides[0]}const d=t=>{var e;try{let o=JSON.parse(t.data);if("https://player.vimeo.com"===t.origin){if("ready"===o.event)for(let o of Array.from((null===(e=null==s?void 0:s.getContainer())||void 0===e?void 0:e.getElementsByClassName("f-iframe"))||[]))o instanceof HTMLIFrameElement&&o.contentWindow===t.source&&(o.dataset.ready="true")}else if(t.origin.match(/^https:\/\/(www.)?youtube(-nocookie)?.com$/)&&"onReady"===o.event){const t=document.getElementById(o.id);t&&(t.dataset.ready="true")}}catch(t){}};function m(t,e){const n=e.src;if(!o(n))return;let l=e.type;if(!l||"html5video"===l){const t=n.match(/\.(mp4|mov|ogv|webm)((\?|#).*)?$/i);t&&(l="html5video",e.html5videoFormat=e.html5videoFormat||"video/"+("ogv"===t[1]?"ogg":t[1]))}if(!l||"youtube"===l){const t=n.match(/(youtube\.com|youtu\.be|youtube\-nocookie\.com)\/(?:watch\?(?:.*&)?v=|v\/|u\/|shorts\/|embed\/?)?(videoseries\?list=(?:.*)|[\w-]{11}|\?listType=(?:.*)&list=(?:.*))(?:.*)/i);if(t){const o=Object.assign(Object.assign({},c().youtube),e.youtube||{}),s=`www.youtube${o.nocookie?"-nocookie":""}.com`,r=i(n,o),a=encodeURIComponent(t[2]);e.videoId=a,e.src=`https://${s}/embed/${a}?${r}`,e.thumb=e.thumb||`https://i.ytimg.com/vi/${a}/mqdefault.jpg`,l="youtube"}}if(!l||"vimeo"===l){const t=n.match(/^.+vimeo.com\/(?:\/)?(video\/)?([\d]+)((\/|\?h=)([a-z0-9]+))?(.*)?/);if(t){const o=Object.assign(Object.assign({},c().vimeo),e.vimeo||{}),s=i(n,o),r=encodeURIComponent(t[2]),a=t[5]||"";e.videoId=r,e.src=`https://player.vimeo.com/video/${r}?${a?`h=${a}${s?"&":""}`:""}${s}`,l="vimeo"}}e.type=l}function u(e,i){"html5video"===i.type&&function(e){const i=e.el,l=e.src;if(!s||!i||!l)return;const r=e.html5videoTpl||c().html5videoTpl,a=e.html5videoFormat||c().html5videoFormat;if(!r)return;const d=e.poster||(e.thumb&&o(e.thumb)?e.thumb:""),m=n(r.replace(/\{\{src\}\}/gi,l+"").replace(/\{\{format\}\}/gi,a||"").replace(/\{\{poster\}\}/gi,d+""));if(!m)return;const u=document.createElement("div");t(u,"f-html"),u.append(m),e.contentEl=m,e.htmlEl=u,t(i,`has-${e.type}`),i.prepend(u),v(e),s.emit("contentReady",e)}(i),"youtube"!==i.type&&"vimeo"!==i.type||function(e){const o=e.el,n=e.src;if(!s||!o||!n)return;const i=document.createElement("iframe");t(i,"f-iframe"),i.setAttribute("id",`f-iframe_${e.videoId}`);for(const[t,e]of Object.entries(c().iframeAttr||{}))i.setAttribute(t,e);"youtube"===e.type&&(i.onload=()=>{var t;1===(null==s?void 0:s.getState())&&(null===(t=i.contentWindow)||void 0===t||t.postMessage(JSON.stringify({event:"listening",id:i.getAttribute("id")}),"*"))}),i.onerror=()=>{null==s||s.showError(e,"{{IFRAME_ERROR}}")};const l=document.createElement("div");t(l,"f-html"),l.append(i),e.contentEl=i,e.htmlEl=l,t(o,`has-html has-iframe has-${e.type}`),i.src=`${e.src}`,o.prepend(l),v(e),s.emit("contentReady",e)}(i)}function f(t,e){var o,n;"html5video"!==e.type&&"youtube"!==e.type&&"vimeo"!==e.type||(null===(o=e.contentEl)||void 0===o||o.remove(),e.contentEl=void 0,null===(n=e.htmlEl)||void 0===n||n.remove(),e.htmlEl=void 0),e.poller&&clearTimeout(e.poller)}function p(){r=!1}function h(){if(r)return;r=!0;const t=a();(t&&void 0!==t.autoplay?t.autoplay:c().autoplay)&&(function(){var t;const e=a(),o=null==e?void 0:e.el;if(o&&"html5video"===(null==e?void 0:e.type))try{const t=o.querySelector("video");if(t){const e=t.play();void 0!==e&&e.then(()=>{}).catch(e=>{t.muted=!0,t.play()})}}catch(t){}const n=null==e?void 0:e.htmlEl;n instanceof HTMLIFrameElement&&(null===(t=n.contentWindow)||void 0===t||t.postMessage('{"event":"command","func":"stopVideo","args":""}',"*"))}(),function(){const t=a(),e=null==t?void 0:t.type;if(!(null==t?void 0:t.el)||"youtube"!==e&&"vimeo"!==e)return;const o=()=>{if(t.contentEl&&t.contentEl instanceof HTMLIFrameElement&&t.contentEl.contentWindow){let e;if("true"===t.contentEl.dataset.ready)return e="youtube"===t.type?{event:"command",func:"playVideo"}:{method:"play",value:"true"},e&&t.contentEl.contentWindow.postMessage(JSON.stringify(e),"*"),void(t.poller=void 0);"youtube"===t.type&&(e={event:"listening",id:t.contentEl.getAttribute("id")},t.contentEl.contentWindow.postMessage(JSON.stringify(e),"*"))}t.poller=setTimeout(o,250)};o()}())}function v(t){const e=null==t?void 0:t.htmlEl;if(t&&e&&("html5video"===t.type||"youtube"===t.type||"vimeo"===t.type)){if(e.style.aspectRatio="",e.style.width="",e.style.height="",e.style.maxWidth="",e.style.maxHeight="",t.width){let o=`${t.width}`;o.match(/^\d+$/)&&(o+="px"),e.style.maxWidth=`${o}`}if(t.height){let o=`${t.height}`;o.match(/^\d+$/)&&(o+="px"),e.style.maxHeight=`${o}`}if(t.aspectRatio){const o=t.aspectRatio.split("/"),n=parseFloat(o[0].trim()),i=o[1]?parseFloat(o[1].trim()):0,l=n&&i?n/i:n;e.offsetHeight;const s=e.getBoundingClientRect(),r=l<(s.width||1)/(s.height||1);e.style.aspectRatio=`${t.aspectRatio}`,e.style.width=r?"auto":"",e.style.height=r?"":"auto"}}}function y(){v(a())}return{init:function(t){s=t,s.on("addSlide",m),s.on("attachSlideEl",u),s.on("detachSlideEl",f),s.on("ready",h),s.on("change",p),s.on("settle",h),s.on("refresh",y),window.addEventListener("message",d)},destroy:function(){null==s||s.off("addSlide",m),null==s||s.off("attachSlideEl",u),null==s||s.off("detachSlideEl",f),null==s||s.off("ready",h),null==s||s.off("change",p),null==s||s.off("settle",h),null==s||s.off("refresh",y),window.removeEventListener("message",d),s=void 0}}};export{s as Video};