${escape(item)}
`)\n .join('');\n this.art.emit('subtitle:update', this.activeCue.text);\n }\n }\n\n switch(url, name, ext) {\n const { i18n, notice } = this.art;\n return this.init(url, ext).then((subUrl) => {\n if (name) {\n notice.show = `${i18n.get('Switch subtitle')}: ${name}`;\n }\n this.art.emit('subtitle:switch', subUrl);\n return subUrl;\n });\n }\n\n init(url, ext) {\n const {\n notice,\n events: { proxy },\n template: { $subtitle, $video },\n } = this.art;\n\n if (!this.$track) {\n const $track = document.createElement('track');\n $track.default = true;\n $track.kind = 'metadata';\n $video.appendChild($track);\n this.$track = $track;\n proxy(this.textTrack, 'cuechange', this.update.bind(this));\n }\n\n return fetch(url)\n .then((response) => {\n return response.text();\n })\n .then((text) => {\n this.art.emit('subtitle:load', url);\n switch (ext || getExt(url)) {\n case 'srt':\n return vttToBlob(srtToVtt(text));\n case 'ass':\n return vttToBlob(assToVtt(text));\n case 'vtt':\n return vttToBlob(text);\n default:\n return url;\n }\n })\n .then((subUrl) => {\n $subtitle.innerHTML = '';\n if (this.url === subUrl) return subUrl;\n URL.revokeObjectURL(this.url);\n this.$track.src = subUrl;\n return subUrl;\n })\n .catch((err) => {\n notice.show = err;\n this.art.emit('subtitle:err', err);\n throw err;\n });\n }\n}\n","export default function clickInit(art, events) {\n const {\n controls,\n template: { $player },\n } = art;\n\n events.proxy(document, ['click', 'contextmenu'], (event) => {\n if (event.composedPath && event.composedPath().indexOf($player) > -1) {\n art.isFocus = true;\n art.emit('focus');\n } else {\n art.isFocus = false;\n art.emit('blur');\n }\n });\n\n art.on('blur', () => {\n controls.delayHide();\n });\n}\n","import { addClass, removeClass } from '../utils';\n\nexport default function hoverInit(art, events) {\n const {\n controls,\n template: { $player },\n } = art;\n\n events.hover(\n $player,\n () => {\n addClass($player, 'art-hover');\n art.emit('hoverenter');\n },\n () => {\n removeClass($player, 'art-hover');\n art.emit('hoverleave');\n },\n );\n\n art.on('hoverleave', () => {\n controls.delayHide();\n });\n}\n","import { removeClass } from '../utils';\n\nexport default function mousemoveInitInit(art, events) {\n const {\n template: { $player, $video },\n player,\n controls,\n } = art;\n\n events.proxy($player, 'mousemove', (event) => {\n art.emit('mousemove', event);\n });\n\n art.on('mousemove', (event) => {\n controls.cancelDelayHide();\n removeClass($player, 'art-hide-cursor');\n controls.show = true;\n if (!player.pip && event.target === $video) {\n controls.delayHide();\n }\n });\n}\n","import { throttle } from '../utils';\n\nexport default function resizeInit(art, events) {\n const { option, player } = art;\n\n const resizeFn = throttle(() => {\n if (player.normal) {\n player.autoSize = option.autoSize;\n }\n player.aspectRatioReset = true;\n art.emit('resize');\n }, 500);\n\n events.proxy(window, ['orientationchange', 'resize'], () => {\n resizeFn();\n });\n}\n","import { clamp, secondToTime } from '../utils';\n\nexport default function gestureInit(art, events) {\n if (art.isMobile && !art.option.isLive) {\n const {\n player,\n notice,\n template: { $video },\n } = art;\n\n let isDroging = false;\n let startX = 0;\n let currentTime = 0;\n\n events.proxy($video, 'touchstart', (event) => {\n if (event.touches.length === 1) {\n isDroging = true;\n startX = event.touches[0].clientX;\n }\n });\n\n events.proxy(document, 'touchmove', (event) => {\n if (event.touches.length === 1 && isDroging) {\n const widthDiff = event.touches[0].clientX - startX;\n const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);\n currentTime = clamp(player.currentTime + 60 * proportion, 0, player.duration);\n notice.show = `${secondToTime(currentTime)} / ${secondToTime(player.duration)}`;\n }\n });\n\n events.proxy(document, 'touchend', () => {\n if (isDroging && currentTime) {\n player.seek = currentTime;\n }\n isDroging = false;\n startX = 0;\n currentTime = 0;\n });\n }\n}\n","import clickInit from './clickInit';\nimport hoverInit from './hoverInit';\nimport mousemoveInit from './mousemoveInit';\nimport resizeInit from './resizeInit';\nimport gestureInit from './gestureInit';\n\nexport default class Events {\n constructor(art) {\n this.destroyEvents = [];\n this.proxy = this.proxy.bind(this);\n this.hover = this.hover.bind(this);\n this.loadImg = this.loadImg.bind(this);\n\n if (art.whitelist.state) {\n art.once('ready', () => {\n clickInit(art, this);\n hoverInit(art, this);\n mousemoveInit(art, this);\n resizeInit(art, this);\n gestureInit(art, this);\n });\n }\n }\n\n proxy(target, name, callback, option = {}) {\n if (Array.isArray(name)) {\n return name.map(item => this.proxy(target, item, callback, option));\n }\n\n target.addEventListener(name, callback, option);\n const destroy = () => target.removeEventListener(name, callback, option);\n this.destroyEvents.push(destroy);\n return destroy;\n }\n\n hover(target, mouseenter, mouseleave) {\n if (mouseenter) {\n this.proxy(target, 'mouseenter', mouseenter);\n }\n if (mouseleave) {\n this.proxy(target, 'mouseleave', mouseleave);\n }\n }\n\n loadImg(img) {\n return new Promise((resolve, reject) => {\n let image;\n\n if (img instanceof HTMLImageElement) {\n image = img;\n } else if (typeof img === 'string') {\n image = new Image();\n image.src = img;\n } else {\n return reject(img);\n }\n\n if (image.complete) {\n return resolve(image);\n }\n\n this.proxy(image, 'load', () => resolve(image));\n this.proxy(image, 'error', () => reject(image));\n\n return img;\n });\n }\n\n destroy() {\n this.destroyEvents.forEach(event => event());\n }\n}\n","export default class Hotkey {\n constructor(art) {\n this.keys = {};\n\n const {\n option,\n player,\n events: { proxy },\n } = art;\n\n if (option.hotkey) {\n art.once('ready', () => {\n this.add(27, () => {\n if (player.fullscreenWeb) {\n player.fullscreenWeb = false;\n }\n });\n\n this.add(32, () => {\n player.toggle = true;\n });\n\n this.add(37, () => {\n player.backward = 5;\n });\n\n this.add(38, () => {\n player.volume += 0.1;\n });\n\n this.add(39, () => {\n player.forward = 5;\n });\n\n this.add(40, () => {\n player.volume -= 0.1;\n });\n\n proxy(window, 'keydown', (event) => {\n if (art.isFocus) {\n const tag = document.activeElement.tagName.toUpperCase();\n const editable = document.activeElement.getAttribute('contenteditable');\n if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {\n const events = this.keys[event.keyCode];\n if (events) {\n event.preventDefault();\n events.forEach((fn) => fn());\n art.emit('hotkey', event);\n }\n }\n }\n });\n });\n }\n }\n\n add(key, event) {\n if (this.keys[key]) {\n this.keys[key].push(event);\n } else {\n this.keys[key] = [event];\n }\n }\n}\n","import Component from './utils/component';\n\nexport default class Layer extends Component {\n constructor(art) {\n super(art);\n this.name = 'layer';\n this.$parent = art.template.$layer;\n art.once('ready', () => {\n art.option.layers.forEach(item => {\n this.add(item);\n });\n });\n }\n}\n","import { append } from './utils';\nimport Component from './utils/component';\n\nexport default class Loading extends Component {\n constructor(art) {\n super(art);\n this.name = 'loading';\n append(art.template.$loading, art.icons.loading);\n }\n}\n","import { addClass, removeClass } from './utils';\n\nexport default class Notice {\n constructor(art) {\n this.art = art;\n this.time = 2000;\n this.timer = null;\n }\n\n set show(msg) {\n const { $player, $noticeInner } = this.art.template;\n $noticeInner.innerText = msg instanceof Error ? msg.message.trim() : msg;\n addClass($player, 'art-notice-show');\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n $noticeInner.innerText = '';\n removeClass($player, 'art-notice-show');\n }, this.time);\n }\n}\n","import { append } from './utils';\nimport Component from './utils/component';\n\nexport default class Mask extends Component {\n constructor(art) {\n super(art);\n this.name = 'mask';\n append(art.template.$state, art.icons.state);\n }\n}\n","import { append } from '../utils';\nimport loading from './loading.svg';\nimport state from './state.svg';\nimport play from './play.svg';\nimport pause from './pause.svg';\nimport volume from './volume.svg';\nimport volumeClose from './volume-close.svg';\nimport subtitle from './subtitle.svg';\nimport screenshot from './screenshot.svg';\nimport setting from './setting.svg';\nimport fullscreen from './fullscreen.svg';\nimport fullscreenWeb from './fullscreen-web.svg';\nimport pip from './pip.svg';\n\nexport default class Icons {\n constructor(art) {\n const icons = {\n loading,\n state,\n play,\n pause,\n volume,\n volumeClose,\n subtitle,\n screenshot,\n setting,\n fullscreen,\n fullscreenWeb,\n pip,\n ...art.option.icons,\n };\n\n Object.keys(icons).forEach(key => {\n const icon = document.createElement('i');\n icon.classList.add('art-icon');\n icon.classList.add(`art-icon-${key}`);\n append(icon, icons[key]);\n this[key] = icon;\n });\n }\n}\n","import { inverseClass, queryAll } from '../utils';\n\nexport default function flip(option) {\n return art => {\n const { i18n, player } = art;\n return {\n ...option,\n html: `\n${escape(item)}
`)\n .join('');\n this.art.emit('subtitle:update', this.activeCue.text);\n }\n }\n\n switch(url, name, ext) {\n const { i18n, notice } = this.art;\n return this.init(url, ext).then((subUrl) => {\n if (name) {\n notice.show = `${i18n.get('Switch subtitle')}: ${name}`;\n }\n this.art.emit('subtitle:switch', subUrl);\n return subUrl;\n });\n }\n\n init(url, ext) {\n const {\n notice,\n events: { proxy },\n template: { $subtitle, $video },\n } = this.art;\n\n if (!this.$track) {\n const $track = document.createElement('track');\n $track.default = true;\n $track.kind = 'metadata';\n $video.appendChild($track);\n this.$track = $track;\n proxy(this.textTrack, 'cuechange', this.update.bind(this));\n }\n\n return fetch(url)\n .then((response) => {\n return response.text();\n })\n .then((text) => {\n this.art.emit('subtitle:load', url);\n switch (ext || getExt(url)) {\n case 'srt':\n return vttToBlob(srtToVtt(text));\n case 'ass':\n return vttToBlob(assToVtt(text));\n case 'vtt':\n return vttToBlob(text);\n default:\n return url;\n }\n })\n .then((subUrl) => {\n $subtitle.innerHTML = '';\n if (this.url === subUrl) return subUrl;\n URL.revokeObjectURL(this.url);\n this.$track.src = subUrl;\n return subUrl;\n })\n .catch((err) => {\n notice.show = err;\n this.art.emit('subtitle:err', err);\n throw err;\n });\n }\n}\n","export default function clickInit(art, events) {\n const {\n controls,\n template: { $player },\n } = art;\n\n events.proxy(document, ['click', 'contextmenu'], (event) => {\n if (event.composedPath && event.composedPath().indexOf($player) > -1) {\n art.isFocus = true;\n art.emit('focus');\n } else {\n art.isFocus = false;\n art.emit('blur');\n }\n });\n\n art.on('blur', () => {\n controls.delayHide();\n });\n}\n","import { addClass, removeClass } from '../utils';\n\nexport default function hoverInit(art, events) {\n const {\n controls,\n template: { $player },\n } = art;\n\n events.hover(\n $player,\n () => {\n addClass($player, 'art-hover');\n art.emit('hoverenter');\n },\n () => {\n removeClass($player, 'art-hover');\n art.emit('hoverleave');\n },\n );\n\n art.on('hoverleave', () => {\n controls.delayHide();\n });\n}\n","import { removeClass } from '../utils';\n\nexport default function mousemoveInitInit(art, events) {\n const {\n template: { $player, $video },\n player,\n controls,\n } = art;\n\n events.proxy($player, 'mousemove', (event) => {\n art.emit('mousemove', event);\n });\n\n art.on('mousemove', (event) => {\n controls.cancelDelayHide();\n removeClass($player, 'art-hide-cursor');\n controls.show = true;\n if (!player.pip && event.target === $video) {\n controls.delayHide();\n }\n });\n}\n","import { throttle } from '../utils';\n\nexport default function resizeInit(art, events) {\n const { option, player } = art;\n\n const resizeFn = throttle(() => {\n if (player.normal) {\n player.autoSize = option.autoSize;\n }\n player.aspectRatioReset = true;\n art.emit('resize');\n }, 500);\n\n events.proxy(window, ['orientationchange', 'resize'], () => {\n resizeFn();\n });\n}\n","import { clamp, secondToTime } from '../utils';\n\nexport default function gestureInit(art, events) {\n if (art.isMobile && !art.option.isLive) {\n const {\n player,\n notice,\n template: { $video },\n } = art;\n\n let isDroging = false;\n let startX = 0;\n let currentTime = 0;\n\n events.proxy($video, 'touchstart', (event) => {\n if (event.touches.length === 1) {\n isDroging = true;\n startX = event.touches[0].clientX;\n }\n });\n\n events.proxy(document, 'touchmove', (event) => {\n if (event.touches.length === 1 && isDroging) {\n const widthDiff = event.touches[0].clientX - startX;\n const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);\n currentTime = clamp(player.currentTime + 60 * proportion, 0, player.duration);\n notice.show = `${secondToTime(currentTime)} / ${secondToTime(player.duration)}`;\n }\n });\n\n events.proxy(document, 'touchend', () => {\n if (isDroging && currentTime) {\n player.seek = currentTime;\n }\n isDroging = false;\n startX = 0;\n currentTime = 0;\n });\n }\n}\n","import clickInit from './clickInit';\nimport hoverInit from './hoverInit';\nimport mousemoveInit from './mousemoveInit';\nimport resizeInit from './resizeInit';\nimport gestureInit from './gestureInit';\n\nexport default class Events {\n constructor(art) {\n this.destroyEvents = [];\n this.proxy = this.proxy.bind(this);\n this.hover = this.hover.bind(this);\n this.loadImg = this.loadImg.bind(this);\n\n if (art.whitelist.state) {\n art.once('ready', () => {\n clickInit(art, this);\n hoverInit(art, this);\n mousemoveInit(art, this);\n resizeInit(art, this);\n gestureInit(art, this);\n });\n }\n }\n\n proxy(target, name, callback, option = {}) {\n if (Array.isArray(name)) {\n return name.map(item => this.proxy(target, item, callback, option));\n }\n\n target.addEventListener(name, callback, option);\n const destroy = () => target.removeEventListener(name, callback, option);\n this.destroyEvents.push(destroy);\n return destroy;\n }\n\n hover(target, mouseenter, mouseleave) {\n if (mouseenter) {\n this.proxy(target, 'mouseenter', mouseenter);\n }\n if (mouseleave) {\n this.proxy(target, 'mouseleave', mouseleave);\n }\n }\n\n loadImg(img) {\n return new Promise((resolve, reject) => {\n let image;\n\n if (img instanceof HTMLImageElement) {\n image = img;\n } else if (typeof img === 'string') {\n image = new Image();\n image.src = img;\n } else {\n return reject(img);\n }\n\n if (image.complete) {\n return resolve(image);\n }\n\n this.proxy(image, 'load', () => resolve(image));\n this.proxy(image, 'error', () => reject(image));\n\n return img;\n });\n }\n\n destroy() {\n this.destroyEvents.forEach(event => event());\n }\n}\n","export default class Hotkey {\n constructor(art) {\n this.keys = {};\n\n const {\n option,\n player,\n events: { proxy },\n } = art;\n\n if (option.hotkey) {\n art.once('ready', () => {\n this.add(27, () => {\n if (player.fullscreenWeb) {\n player.fullscreenWeb = false;\n }\n });\n\n this.add(32, () => {\n player.toggle = true;\n });\n\n this.add(37, () => {\n player.backward = 5;\n });\n\n this.add(38, () => {\n player.volume += 0.1;\n });\n\n this.add(39, () => {\n player.forward = 5;\n });\n\n this.add(40, () => {\n player.volume -= 0.1;\n });\n\n proxy(window, 'keydown', (event) => {\n if (art.isFocus) {\n const tag = document.activeElement.tagName.toUpperCase();\n const editable = document.activeElement.getAttribute('contenteditable');\n if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {\n const events = this.keys[event.keyCode];\n if (events) {\n event.preventDefault();\n events.forEach((fn) => fn());\n art.emit('hotkey', event);\n }\n }\n }\n });\n });\n }\n }\n\n add(key, event) {\n if (this.keys[key]) {\n this.keys[key].push(event);\n } else {\n this.keys[key] = [event];\n }\n }\n}\n","import Component from './utils/component';\n\nexport default class Layer extends Component {\n constructor(art) {\n super(art);\n this.name = 'layer';\n this.$parent = art.template.$layer;\n art.once('ready', () => {\n art.option.layers.forEach(item => {\n this.add(item);\n });\n });\n }\n}\n","import { append } from './utils';\nimport Component from './utils/component';\n\nexport default class Loading extends Component {\n constructor(art) {\n super(art);\n this.name = 'loading';\n append(art.template.$loading, art.icons.loading);\n }\n}\n","import { addClass, removeClass } from './utils';\n\nexport default class Notice {\n constructor(art) {\n this.art = art;\n this.time = 2000;\n this.timer = null;\n }\n\n set show(msg) {\n const { $player, $noticeInner } = this.art.template;\n $noticeInner.innerText = msg instanceof Error ? msg.message.trim() : msg;\n addClass($player, 'art-notice-show');\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n $noticeInner.innerText = '';\n removeClass($player, 'art-notice-show');\n }, this.time);\n }\n}\n","import { append } from './utils';\nimport Component from './utils/component';\n\nexport default class Mask extends Component {\n constructor(art) {\n super(art);\n this.name = 'mask';\n append(art.template.$state, art.icons.state);\n }\n}\n","import { append } from '../utils';\nimport loading from './loading.svg';\nimport state from './state.svg';\nimport play from './play.svg';\nimport pause from './pause.svg';\nimport volume from './volume.svg';\nimport volumeClose from './volume-close.svg';\nimport subtitle from './subtitle.svg';\nimport screenshot from './screenshot.svg';\nimport setting from './setting.svg';\nimport fullscreen from './fullscreen.svg';\nimport fullscreenWeb from './fullscreen-web.svg';\nimport pip from './pip.svg';\n\nexport default class Icons {\n constructor(art) {\n const icons = {\n loading,\n state,\n play,\n pause,\n volume,\n volumeClose,\n subtitle,\n screenshot,\n setting,\n fullscreen,\n fullscreenWeb,\n pip,\n ...art.option.icons,\n };\n\n Object.keys(icons).forEach(key => {\n const icon = document.createElement('i');\n icon.classList.add('art-icon');\n icon.classList.add(`art-icon-${key}`);\n append(icon, icons[key]);\n this[key] = icon;\n });\n }\n}\n","import { inverseClass, queryAll } from '../utils';\n\nexport default function flip(option) {\n return art => {\n const { i18n, player } = art;\n return {\n ...option,\n html: `\n