${item}
`)\n .join('');\n }\n this.art.emit('subtitle:update', $subtitle);\n });\n }\n });\n }\n\n load(url) {\n let type;\n return fetch(url)\n .then(response => {\n type = response.headers.get('Content-Type');\n return response.text();\n })\n .then(text => {\n if ((/x-subrip/gi).test(type)) {\n return this.srtToVtt(text);\n }\n return url;\n })\n .catch(err => {\n throw err;\n });\n }\n\n srtToVtt(text) {\n const vttText = 'WEBVTT \\r\\n\\r\\n'.concat(\n text\n .replace(/\\{\\\\([ibu])\\}/g, '')\n .replace(/\\{\\\\([ibu])1\\}/g, '<$1>')\n .replace(/\\{([ibu])\\}/g, '<$1>')\n .replace(/\\{\\/([ibu])\\}/g, '')\n .replace(/(\\d\\d:\\d\\d:\\d\\d),(\\d\\d\\d)/g, '$1.$2')\n .concat('\\r\\n\\r\\n')\n );\n return URL.createObjectURL(\n new Blob([vttText], {\n type: 'text/vtt'\n })\n );\n }\n\n checkExt(url) {\n const ext = getExt(url);\n errorHandle(\n ext === 'vtt' || ext === 'srt',\n `'subtitle.url' option require 'vtt' or 'srt' format, but got '${ext}'.`\n );\n }\n\n show() {\n const { refs: { $subtitle }, i18n, notice } = this.art;\n setStyle($subtitle, 'display', 'block');\n this.isOpen = true;\n notice.show(i18n.get('Show subtitle'));\n this.art.emit('subtitle:show', $subtitle);\n }\n\n hide() {\n const { refs: { $subtitle }, i18n, notice } = this.art;\n setStyle($subtitle, 'display', 'none');\n this.isOpen = false;\n notice.show(i18n.get('Hide subtitle'));\n this.art.emit('subtitle:hide', $subtitle);\n }\n\n switch(url) {\n const { $track } = this.art.refs;\n this.checkExt(url);\n errorHandle($track, 'You need to initialize the subtitle option first.');\n this.load(url).then(data => {\n if (url !== data) {\n $track.src = data;\n this.art.emit('subtitle:switch', url);\n }\n });\n }\n}\n","export default class Events {\n constructor(art) {\n this.art = art;\n this.destroyEvents = [];\n this.proxy = this.proxy.bind(this);\n this.hover = this.hover.bind(this);\n }\n\n proxy(target, name, callback, option = {}) {\n if (Array.isArray(name)) {\n name.forEach(item => this.proxy(target, item, callback, option));\n }\n\n target.addEventListener(name, callback, option);\n this.destroyEvents.push(() => {\n target.removeEventListener(name, callback, option);\n });\n }\n\n hover(target, mouseenter, mouseleave) {\n this.proxy(target, 'mouseenter', mouseenter);\n this.proxy(target, 'mouseleave', mouseleave);\n }\n\n destroy() {\n this.destroyEvents.forEach(event => event());\n }\n}\n","export default class Hotkey {\n constructor(art) {\n this.art = art;\n if (this.art.option.hotkey) {\n this.init();\n }\n }\n\n init() {\n const { player, refs: { $player }, events: { proxy } } = this.art;\n\n proxy(document, 'click', event => {\n this.art.isFocus = event.path.indexOf($player) > -1;\n });\n\n proxy(window, 'keydown', event => {\n if (this.art.isFocus) {\n const tag = document.activeElement.tagName.toUpperCase();\n const editable = document.activeElement.getAttribute('contenteditable');\n if (\n tag !== 'INPUT' &&\n tag !== 'TEXTAREA' &&\n editable !== '' &&\n editable !== 'true'\n ) {\n switch (event.keyCode) {\n case 39:\n event.preventDefault();\n player.seek(player.currentTime() + 10);\n break;\n case 37:\n event.preventDefault();\n player.seek(player.currentTime() - 10);\n break;\n case 38:\n event.preventDefault();\n player.volume(player.volume() + 0.05);\n break;\n case 40:\n event.preventDefault();\n player.volume(player.volume() - 0.05);\n break;\n case 32:\n event.preventDefault();\n player.toggle();\n break;\n default:\n break;\n }\n }\n }\n });\n }\n}\n","import { append, setStyles, setStyle } from './utils';\n\nlet id = 0;\nexport default class Layers {\n constructor(art) {\n this.art = art;\n this.add = this.add.bind(this);\n this.art.option.layers.filter(item => item.disable === false).forEach(this.add);\n this.init();\n }\n\n init() {\n const { refs, player, events: { proxy } } = this.art;\n proxy(refs.$layers, 'click', event => {\n if (event.path[0] === refs.$layers) {\n player.pause();\n }\n });\n }\n\n add(option, callback) {\n const { refs } = this.art;\n id++;\n\n const $layer = document.createElement('div');\n $layer.setAttribute('data-art-layer-id', id);\n $layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);\n setStyle($layer, 'z-index', option.index || id);\n append($layer, option.html);\n setStyles($layer, option.style || {});\n refs.$layers.appendChild($layer);\n this.art.emit('layers:add', $layer);\n callback && callback($layer);\n }\n\n show() {\n const { $layers } = this.art.refs;\n setStyle($layers, 'display', 'block');\n this.art.emit('layers:show', $layers);\n }\n\n hide() {\n const { $layers } = this.art.refs;\n setStyle($layers, 'display', 'none');\n this.art.emit('layers:hide', $layers);\n }\n}\n","import icons from './icons';\nimport { append, setStyle } from './utils';\n\nexport default class Loading {\n constructor(art) {\n this.art = art;\n this.init();\n }\n\n init() {\n const { option, refs: { $loading } } = this.art;\n append($loading, option.loading || icons.loading);\n }\n\n hide() {\n const { $loading } = this.art.refs;\n setStyle($loading, 'display', 'none');\n this.art.emit('loading:hide', $loading);\n }\n\n show() {\n const { $loading } = this.art.refs;\n setStyle($loading, 'display', 'flex');\n this.art.emit('loading:show', $loading);\n }\n}\n","import { setStyle } from './utils';\n\nexport default class Notice {\n constructor(art) {\n this.art = art;\n this.timer = null;\n }\n\n show(msg, autoHide = true, time = 1000) {\n const { $notice, $noticeInner } = this.art.refs;\n setStyle($notice, 'display', 'block');\n $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;\n if (autoHide) {\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.hide();\n }, time);\n }\n this.art.emit('notice:show', $notice);\n }\n\n hide() {\n const { $notice } = this.art.refs;\n setStyle($notice, 'display', 'none');\n this.art.emit('notice:hide', $notice);\n }\n}\n","import icons from './icons';\nimport { append, setStyle } from './utils';\n\nexport default class Mask {\n constructor(art) {\n this.art = art;\n this.init();\n }\n\n init() {\n const { player, refs, events: { proxy } } = this.art;\n\n append(refs.$mask, icons.playBig);\n\n proxy(refs.$mask, 'click', () => {\n player.play();\n this.hide();\n });\n }\n\n show() {\n const { $mask } = this.art.refs;\n setStyle($mask, 'display', 'block');\n this.art.emit('mask:show', $mask);\n }\n\n hide() {\n const { $mask } = this.art.refs;\n setStyle($mask, 'display', 'none');\n this.art.emit('mask:show', $mask);\n }\n}\n","import { append } from '../utils';\n\nexport default class Common {\n constructor(option) {\n this.option = option;\n }\n\n apply(art) {\n this.art = art;\n const { $setting } = this.option;\n this.$header = $setting.querySelector('.art-setting-header');\n this.$body = $setting.querySelector('.art-setting-body');\n append(this.$body, '———— 先占坑，暂无设置 ————');\n }\n}\n","import { setStyle, append } from '../utils';\nimport Common from './common';\n\nlet id = 0;\nexport default class Setting {\n constructor(art) {\n this.art = art;\n this.isOpen = false;\n this.$settings = [];\n if (art.option.setting) {\n this.init();\n this.mount();\n }\n }\n\n init() {\n const { refs: { $settingClose }, events: { proxy } } = this.art;\n\n proxy($settingClose, 'click', () => {\n this.hide();\n });\n\n this.add(new Common({\n name: 'common',\n title: 'Common',\n disable: false,\n index: 10\n }));\n }\n\n add(setting) {\n const { option } = setting;\n if (option && !option.disable) {\n id++;\n const name = option.name || setting.constructor.name.toLowerCase() || `setting${id}`;\n const title = option.title || name;\n const $setting = document.createElement('div');\n $setting.setAttribute('class', `art-setting art-setting-${name}`);\n $setting.dataset.settingIndex = option.index || id;\n append($setting, `${item}
`)\n .join('');\n }\n this.art.emit('subtitle:update', $subtitle);\n });\n }\n });\n }\n\n load(url) {\n let type;\n return fetch(url)\n .then(response => {\n type = response.headers.get('Content-Type');\n return response.text();\n })\n .then(text => {\n if ((/x-subrip/gi).test(type)) {\n return this.srtToVtt(text);\n }\n return url;\n })\n .catch(err => {\n throw err;\n });\n }\n\n srtToVtt(text) {\n const vttText = 'WEBVTT \\r\\n\\r\\n'.concat(\n text\n .replace(/\\{\\\\([ibu])\\}/g, '')\n .replace(/\\{\\\\([ibu])1\\}/g, '<$1>')\n .replace(/\\{([ibu])\\}/g, '<$1>')\n .replace(/\\{\\/([ibu])\\}/g, '')\n .replace(/(\\d\\d:\\d\\d:\\d\\d),(\\d\\d\\d)/g, '$1.$2')\n .concat('\\r\\n\\r\\n')\n );\n return URL.createObjectURL(\n new Blob([vttText], {\n type: 'text/vtt'\n })\n );\n }\n\n checkExt(url) {\n const ext = getExt(url);\n errorHandle(\n ext === 'vtt' || ext === 'srt',\n `'subtitle.url' option require 'vtt' or 'srt' format, but got '${ext}'.`\n );\n }\n\n show() {\n const { refs: { $subtitle }, i18n, notice } = this.art;\n setStyle($subtitle, 'display', 'block');\n this.isOpen = true;\n notice.show(i18n.get('Show subtitle'));\n this.art.emit('subtitle:show', $subtitle);\n }\n\n hide() {\n const { refs: { $subtitle }, i18n, notice } = this.art;\n setStyle($subtitle, 'display', 'none');\n this.isOpen = false;\n notice.show(i18n.get('Hide subtitle'));\n this.art.emit('subtitle:hide', $subtitle);\n }\n\n switch(url) {\n const { $track } = this.art.refs;\n this.checkExt(url);\n errorHandle($track, 'You need to initialize the subtitle option first.');\n this.load(url).then(data => {\n if (url !== data) {\n $track.src = data;\n this.art.emit('subtitle:switch', url);\n }\n });\n }\n}\n","export default class Events {\n constructor(art) {\n this.art = art;\n this.destroyEvents = [];\n this.proxy = this.proxy.bind(this);\n this.hover = this.hover.bind(this);\n }\n\n proxy(target, name, callback, option = {}) {\n if (Array.isArray(name)) {\n name.forEach(item => this.proxy(target, item, callback, option));\n }\n\n target.addEventListener(name, callback, option);\n this.destroyEvents.push(() => {\n target.removeEventListener(name, callback, option);\n });\n }\n\n hover(target, mouseenter, mouseleave) {\n this.proxy(target, 'mouseenter', mouseenter);\n this.proxy(target, 'mouseleave', mouseleave);\n }\n\n destroy() {\n this.destroyEvents.forEach(event => event());\n }\n}\n","export default class Hotkey {\n constructor(art) {\n this.art = art;\n if (this.art.option.hotkey) {\n this.init();\n }\n }\n\n init() {\n const { player, refs: { $player }, events: { proxy } } = this.art;\n\n proxy(document, 'click', event => {\n this.art.isFocus = event.path.indexOf($player) > -1;\n });\n\n proxy(window, 'keydown', event => {\n if (this.art.isFocus) {\n const tag = document.activeElement.tagName.toUpperCase();\n const editable = document.activeElement.getAttribute('contenteditable');\n if (\n tag !== 'INPUT' &&\n tag !== 'TEXTAREA' &&\n editable !== '' &&\n editable !== 'true'\n ) {\n switch (event.keyCode) {\n case 39:\n event.preventDefault();\n player.seek(player.currentTime() + 10);\n break;\n case 37:\n event.preventDefault();\n player.seek(player.currentTime() - 10);\n break;\n case 38:\n event.preventDefault();\n player.volume(player.volume() + 0.05);\n break;\n case 40:\n event.preventDefault();\n player.volume(player.volume() - 0.05);\n break;\n case 32:\n event.preventDefault();\n player.toggle();\n break;\n default:\n break;\n }\n }\n }\n });\n }\n}\n","import { append, setStyles, setStyle } from './utils';\n\nlet id = 0;\nexport default class Layers {\n constructor(art) {\n this.art = art;\n this.add = this.add.bind(this);\n this.art.option.layers.filter(item => item.disable === false).forEach(this.add);\n this.init();\n }\n\n init() {\n const { refs, player, events: { proxy } } = this.art;\n proxy(refs.$layers, 'click', event => {\n if (event.path[0] === refs.$layers) {\n player.pause();\n }\n });\n }\n\n add(option, callback) {\n const { refs } = this.art;\n id++;\n\n const $layer = document.createElement('div');\n $layer.setAttribute('data-art-layer-id', id);\n $layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);\n setStyle($layer, 'z-index', option.index || id);\n append($layer, option.html);\n setStyles($layer, option.style || {});\n refs.$layers.appendChild($layer);\n this.art.emit('layers:add', $layer);\n callback && callback($layer);\n }\n\n show() {\n const { $layers } = this.art.refs;\n setStyle($layers, 'display', 'block');\n this.art.emit('layers:show', $layers);\n }\n\n hide() {\n const { $layers } = this.art.refs;\n setStyle($layers, 'display', 'none');\n this.art.emit('layers:hide', $layers);\n }\n}\n","import icons from './icons';\nimport { append, setStyle } from './utils';\n\nexport default class Loading {\n constructor(art) {\n this.art = art;\n this.init();\n }\n\n init() {\n const { option, refs: { $loading } } = this.art;\n append($loading, option.loading || icons.loading);\n }\n\n hide() {\n const { $loading } = this.art.refs;\n setStyle($loading, 'display', 'none');\n this.art.emit('loading:hide', $loading);\n }\n\n show() {\n const { $loading } = this.art.refs;\n setStyle($loading, 'display', 'flex');\n this.art.emit('loading:show', $loading);\n }\n}\n","import { setStyle } from './utils';\n\nexport default class Notice {\n constructor(art) {\n this.art = art;\n this.timer = null;\n }\n\n show(msg, autoHide = true, time = 1000) {\n const { $notice, $noticeInner } = this.art.refs;\n setStyle($notice, 'display', 'block');\n $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;\n if (autoHide) {\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.hide();\n }, time);\n }\n this.art.emit('notice:show', $notice);\n }\n\n hide() {\n const { $notice } = this.art.refs;\n setStyle($notice, 'display', 'none');\n this.art.emit('notice:hide', $notice);\n }\n}\n","import icons from './icons';\nimport { append, setStyle } from './utils';\n\nexport default class Mask {\n constructor(art) {\n this.art = art;\n this.init();\n }\n\n init() {\n const { player, refs, events: { proxy } } = this.art;\n\n append(refs.$mask, icons.playBig);\n\n proxy(refs.$mask, 'click', () => {\n player.play();\n this.hide();\n });\n }\n\n show() {\n const { $mask } = this.art.refs;\n setStyle($mask, 'display', 'block');\n this.art.emit('mask:show', $mask);\n }\n\n hide() {\n const { $mask } = this.art.refs;\n setStyle($mask, 'display', 'none');\n this.art.emit('mask:show', $mask);\n }\n}\n","import { append } from '../utils';\n\nexport default class Common {\n constructor(option) {\n this.option = option;\n }\n\n apply(art, $setting) {\n this.art = art;\n this.$header = $setting.querySelector('.art-setting-header');\n this.$body = $setting.querySelector('.art-setting-body');\n append(this.$body, '———— 先占坑，暂无设置 ————');\n }\n}\n","import { setStyle, append } from '../utils';\nimport Common from './common';\n\nlet id = 0;\nexport default class Setting {\n constructor(art) {\n this.art = art;\n this.isOpen = false;\n this.$settings = [];\n if (art.option.setting) {\n this.init();\n this.mount();\n }\n }\n\n init() {\n const { refs: { $settingClose }, events: { proxy } } = this.art;\n\n proxy($settingClose, 'click', () => {\n this.hide();\n });\n\n this.add(new Common({\n name: 'common',\n title: 'Common',\n disable: false,\n index: 10\n }));\n }\n\n add(setting) {\n const { option } = setting;\n if (option && !option.disable) {\n id++;\n const name = option.name || setting.constructor.name.toLowerCase() || `setting${id}`;\n const title = option.title || name;\n const $setting = document.createElement('div');\n $setting.setAttribute('class', `art-setting art-setting-${name}`);\n $setting.dataset.settingIndex = option.index || id;\n append($setting, `