diff --git a/src/utils.js b/src/utils.js deleted file mode 100644 index 61dd090..0000000 --- a/src/utils.js +++ /dev/null @@ -1,152 +0,0 @@ -const loadScriptCache = {}; -export async function loadScript(src, globalName, readyFnName) { - if (loadScriptCache[src]) return loadScriptCache[src]; - if (globalName && self[globalName]) { - await delay(0); - return self[globalName]; - } - return (loadScriptCache[src] = new Promise(function (resolve, reject) { - const script = document.createElement('script'); - script.src = src; - const ready = () => resolve(self[globalName]); - if (readyFnName) (self[readyFnName] = ready); - script.onload = () => !readyFnName && ready(); - script.onerror = reject; - document.head.append(script); - })); -} - -export const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); - -export function promisify(fn) { - return (...args) => - new Promise((resolve) => { - fn(...args, (...res) => { - if (res.length > 1) resolve(res); - else resolve(res[0]); - }); - }); -} - -export function createPlayPromise(player) { - return promisify((event, cb) => { - let fn; - player.addEventListener( - event, - (fn = () => { - player.removeEventListener(event, fn); - cb(); - }) - ); - })('playing'); -} - -/** - * A utility to create Promises with convenient public resolve and reject methods. - * @return {Promise} - */ -export class PublicPromise extends Promise { - constructor(executor = () => {}) { - let res, rej; - super((resolve, reject) => { - executor(resolve, reject); - res = resolve; - rej = reject; - }); - this.resolve = res; - this.reject = rej; - } -} - -export function createElement(tag, attrs = {}, ...children) { - const el = document.createElement(tag); - Object.keys(attrs).forEach( - (name) => attrs[name] != null && el.setAttribute(name, attrs[name]) - ); - el.append(...children); - return el; -} - -export const allow = - 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'; - -export function createEmbedIframe({ src, ...props }) { - return createElement('iframe', { - src, - width: '100%', - height: '100%', - allow, - allowfullscreen: '', - frameborder: 0, - ...props, - }); -} - -/** - * Generates a unique ID. If `prefix` is given, the ID is appended to it. - * - * @param {string} prefix The value to prefix the ID with. - * @return {string} Returns the unique ID. - * @example - * - * uniqueId('contact_'); - * // => 'contact_104' - * - * uniqueId(); - * // => '105' - */ -let idCounter = 0; -export function uniqueId(prefix) { - let id = ++idCounter; - return `${prefix}${id}`; -} - -export function serialize(props) { - return Object.keys(props) - .map((key) => { - if (props[key] == null) return ''; - return `${key}=${encodeURIComponent(props[key])}`; - }) - .join('&'); -} - -export function boolToBinary(props) { - let p = { ...props }; - for (let key in p) { - if (p[key] === false) p[key] = 0; - else if (p[key] === true) p[key] = 1; - } - return p; -} - -/** - * Creates a fake `TimeRanges` object. - * - * A TimeRanges object. This object is normalized, which means that ranges are - * ordered, don't overlap, aren't empty, and don't touch (adjacent ranges are - * folded into one bigger range). - * - * @param {(Number|Array)} Start of a single range or an array of ranges - * @param {Number} End of a single range - * @return {Array} - */ -export function createTimeRanges(start, end) { - if (Array.isArray(start)) { - return createTimeRangesObj(start); - } else if (start == null || end == null || (start === 0 && end === 0)) { - return createTimeRangesObj([[0, 0]]); - } - return createTimeRangesObj([[start, end]]); -} - -function createTimeRangesObj(ranges) { - Object.defineProperties(ranges, { - start: { - value: i => ranges[i][0] - }, - end: { - value: i => ranges[i][1] - } - }); - return ranges; -} diff --git a/src/vimeo-video-element.js b/src/vimeo-video-element.js index e028482..1b56235 100644 --- a/src/vimeo-video-element.js +++ b/src/vimeo-video-element.js @@ -1,12 +1,5 @@ // https://github.com/vimeo/player.js import VimeoPlayerAPI from '@vimeo/player'; -import { - PublicPromise, - serialize, - boolToBinary, - createEmbedIframe, - createTimeRanges, -} from './utils.js'; const EMBED_BASE = 'https://player.vimeo.com/video'; const MATCH_SRC = /vimeo\.com\/(?:video\/)?(\d+)/; @@ -431,6 +424,97 @@ class VimeoVideoElement extends HTMLElement { } } +/** + * A utility to create Promises with convenient public resolve and reject methods. + * @return {Promise} + */ +class PublicPromise extends Promise { + constructor(executor = () => {}) { + let res, rej; + super((resolve, reject) => { + executor(resolve, reject); + res = resolve; + rej = reject; + }); + this.resolve = res; + this.reject = rej; + } +} + +function createElement(tag, attrs = {}, ...children) { + const el = document.createElement(tag); + Object.keys(attrs).forEach( + (name) => attrs[name] != null && el.setAttribute(name, attrs[name]) + ); + el.append(...children); + return el; +} + +const allow = + 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'; + +function createEmbedIframe({ src, ...props }) { + return createElement('iframe', { + src, + width: '100%', + height: '100%', + allow, + allowfullscreen: '', + frameborder: 0, + ...props, + }); +} + +function serialize(props) { + return Object.keys(props) + .map((key) => { + if (props[key] == null) return ''; + return `${key}=${encodeURIComponent(props[key])}`; + }) + .join('&'); +} + +function boolToBinary(props) { + let p = { ...props }; + for (let key in p) { + if (p[key] === false) p[key] = 0; + else if (p[key] === true) p[key] = 1; + } + return p; +} + +/** + * Creates a fake `TimeRanges` object. + * + * A TimeRanges object. This object is normalized, which means that ranges are + * ordered, don't overlap, aren't empty, and don't touch (adjacent ranges are + * folded into one bigger range). + * + * @param {(Number|Array)} Start of a single range or an array of ranges + * @param {Number} End of a single range + * @return {Array} + */ +function createTimeRanges(start, end) { + if (Array.isArray(start)) { + return createTimeRangesObj(start); + } else if (start == null || end == null || (start === 0 && end === 0)) { + return createTimeRangesObj([[0, 0]]); + } + return createTimeRangesObj([[start, end]]); +} + +function createTimeRangesObj(ranges) { + Object.defineProperties(ranges, { + start: { + value: i => ranges[i][0] + }, + end: { + value: i => ranges[i][1] + } + }); + return ranges; +} + if (!globalThis.customElements.get('vimeo-video')) { globalThis.customElements.define('vimeo-video', VimeoVideoElement); }