@fancyapps/ui
Version:
Robust JavaScript UI Component Library
3 lines (2 loc) • 6.16 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 s=i+"",r=t.match(/#t=((.*)?\d+s)/);return r&&(s+=`#t=${r[1]}`),s},s={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}},r=()=>{let r,c=!1;function l(){const t=r?.getOptions().Video;return e(t)?{...s,...t}:s}function a(){return r?.getPage()?.slides[0]}const m=t=>{try{let e=JSON.parse(t.data);if("https://player.vimeo.com"===t.origin){if("ready"===e.event)for(let e of Array.from(r?.getContainer()?.getElementsByClassName("f-iframe")||[]))e instanceof HTMLIFrameElement&&e.contentWindow===t.source&&(e.dataset.ready="true")}else if(t.origin.match(/^https:\/\/(www.)?youtube(-nocookie)?.com$/)&&"onReady"===e.event){const t=document.getElementById(e.id);t&&(t.dataset.ready="true")}}catch(t){}};function d(t,e){const n=e.src;if(!o(n))return;let s=e.type;if(!s||"html5video"===s){const t=n.match(/\.(mp4|mov|ogv|webm)((\?|#).*)?$/i);t&&(s="html5video",e.html5videoFormat=e.html5videoFormat||"video/"+("ogv"===t[1]?"ogg":t[1]))}if(!s||"youtube"===s){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={...l().youtube,...e.youtube||{}},r=`www.youtube${o.nocookie?"-nocookie":""}.com`,c=i(n,o),a=encodeURIComponent(t[2]);e.videoId=a,e.src=`https://${r}/embed/${a}?${c}`,e.thumb=e.thumb||`https://i.ytimg.com/vi/${a}/mqdefault.jpg`,s="youtube"}}if(!s||"vimeo"===s){const t=n.match(/^.+vimeo.com\/(?:\/)?(video\/)?([\d]+)((\/|\?h=)([a-z0-9]+))?(.*)?/);if(t){const o={...l().vimeo,...e.vimeo||{}},r=i(n,o),c=encodeURIComponent(t[2]),a=t[5]||"";e.videoId=c,e.src=`https://player.vimeo.com/video/${c}?${a?`h=${a}${r?"&":""}`:""}${r}`,s="vimeo"}}e.type=s}function u(e,i){"html5video"===i.type&&function(e){const i=e.el,s=e.src;if(!r||!i||!s)return;const c=e.html5videoTpl||l().html5videoTpl,a=e.html5videoFormat||l().html5videoFormat;if(!c)return;const m=e.poster||(e.thumb&&o(e.thumb)?e.thumb:""),d=n(c.replace(/\{\{src\}\}/gi,s+"").replace(/\{\{format\}\}/gi,a||"").replace(/\{\{poster\}\}/gi,m+""));if(!d)return;const u=document.createElement("div");t(u,"f-html"),u.append(d),e.contentEl=d,e.htmlEl=u,t(i,`has-${e.type}`),i.prepend(u),y(e),r.emit("contentReady",e)}(i),"youtube"!==i.type&&"vimeo"!==i.type||function(e){const o=e.el,n=e.src;if(!r||!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(l().iframeAttr||{}))i.setAttribute(t,e);"youtube"===e.type&&(i.onload=()=>{1===r?.getState()&&i.contentWindow?.postMessage(JSON.stringify({event:"listening",id:i.getAttribute("id")}),"*")}),i.onerror=()=>{r?.showError(e,"{{IFRAME_ERROR}}")};const s=document.createElement("div");t(s,"f-html"),s.append(i),e.contentEl=i,e.htmlEl=s,t(o,`has-html has-iframe has-${e.type}`),i.src=`${e.src}`,o.prepend(s),y(e),r.emit("contentReady",e)}(i)}function f(t,e){"html5video"!==e.type&&"youtube"!==e.type&&"vimeo"!==e.type||(e.contentEl?.remove(),e.contentEl=void 0,e.htmlEl?.remove(),e.htmlEl=void 0),e.poller&&clearTimeout(e.poller)}function p(){c=!1}function h(){if(c)return;c=!0;const t=a();(t&&void 0!==t.autoplay?t.autoplay:l().autoplay)&&(function(){const t=a(),e=t?.el;if(e&&"html5video"===t?.type)try{const t=e.querySelector("video");if(t){const e=t.play();void 0!==e&&e.then(()=>{}).catch(e=>{t.muted=!0,t.play()})}}catch(t){}const o=t?.htmlEl;o instanceof HTMLIFrameElement&&o.contentWindow?.postMessage('{"event":"command","func":"stopVideo","args":""}',"*")}(),function(){const t=a(),e=t?.type,o=t?.el;if(!o||"youtube"!==e&&"vimeo"!==e)return;const n=()=>{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(n,250)};n()}())}function y(t){const e=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,s=n&&i?n/i:n;e.offsetHeight;const r=e.getBoundingClientRect(),c=s<(r.width||1)/(r.height||1);e.style.aspectRatio=`${t.aspectRatio}`,e.style.width=c?"auto":"",e.style.height=c?"":"auto"}}}function v(){y(a())}return{init:function(t){r=t,r.on("addSlide",d),r.on("attachSlideEl",u),r.on("detachSlideEl",f),r.on("ready",h),r.on("change",p),r.on("settle",h),r.on("refresh",v),window.addEventListener("message",m)},destroy:function(){r?.off("addSlide",d),r?.off("attachSlideEl",u),r?.off("detachSlideEl",f),r?.off("ready",h),r?.off("change",p),r?.off("settle",h),r?.off("refresh",v),window.removeEventListener("message",m),r=void 0}}};export{r as Video};