${item}
`)\n .join('');\n }\n this.art.emit('subtitle:update', $subtitle);\n }\n\n if (!this.isInit) {\n this.isInit = true;\n proxy(track, 'cuechange', updateSubtitle.bind(this));\n }\n\n this.art.on('artplayerPluginSubtitleOffset', updateSubtitle.bind(this));\n }\n\n resolve(blobUrl);\n });\n });\n }\n\n load(url) {\n const { notice } = this.art;\n return fetch(url)\n .then(response => {\n return response.text();\n })\n .then(text => {\n switch (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 .catch(err => {\n notice.show(err);\n throw err;\n });\n }\n\n set show(value) {\n const { $player } = this.art.template;\n if (value) {\n this.state = true;\n removeClass($player, 'artplayer-subtitle-hide');\n this.art.emit('subtitle:show');\n } else {\n this.state = false;\n addClass($player, 'artplayer-subtitle-hide');\n this.art.emit('subtitle:hide');\n }\n }\n\n toggle() {\n this.show = !this.state;\n }\n}\n","export default function clickInit(art, events) {\n const {\n template: { $player },\n } = art;\n events.proxy(document, ['click', 'contextmenu'], event => {\n if (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","import { addClass, removeClass } from '../utils';\n\nexport default function hoverInit(art, events) {\n const {\n template: { $player },\n } = art;\n events.hover(\n $player,\n () => {\n addClass($player, 'artplayer-hover');\n art.emit('hoverenter');\n },\n () => {\n removeClass($player, 'artplayer-hover');\n art.emit('hoverleave');\n },\n );\n}\n","import { debounce, addClass, removeClass } from '../utils';\n\nexport default function mousemoveInitInit(art, events) {\n const {\n template: { $player, $video },\n player,\n } = art;\n\n const autoHide = debounce(() => {\n addClass($player, 'artplayer-hide-cursor');\n removeClass($player, 'artplayer-hover');\n art.controls.show = false;\n }, 3000);\n\n art.on('hoverleave', () => {\n if (player.playing) {\n autoHide();\n }\n });\n\n events.proxy($player, 'mousemove', event => {\n autoHide.clearTimeout();\n removeClass($player, 'artplayer-hide-cursor');\n art.controls.show = true;\n if (!art.player.pip && player.playing && event.target === $video) {\n autoHide();\n }\n });\n}\n","import { throttle } from '../utils';\n\nexport default function resizeInit(art, events) {\n const {\n option,\n player,\n template: { $player },\n } = art;\n\n const object = document.createElement('object');\n object.setAttribute('aria-hidden', 'true');\n object.setAttribute('tabindex', -1);\n object.type = 'text/html';\n object.data = 'about:blank';\n let playerWidth = player.width;\n let playerHeight = player.height;\n const resizeFn = throttle(() => {\n if (player.width !== playerWidth || player.height !== playerHeight) {\n playerWidth = player.width;\n playerHeight = player.height;\n if (option.autoSize) {\n if (!art.player.fullscreen && !art.player.fullscreenWeb && !art.player.pip) {\n art.player.autoSize = true;\n } else {\n art.player.autoSize = false;\n }\n }\n art.player.aspectRatioReset = true;\n art.emit('resize', {\n width: player.width,\n height: player.height,\n });\n }\n }, 500);\n\n events.proxy(object, 'load', () => {\n events.proxy(object.contentDocument.defaultView, 'resize', resizeFn);\n });\n\n $player.appendChild(object);\n}\n","import clickInit from './clickInit';\nimport hoverInit from './hoverInit';\nimport mousemoveInit from './mousemoveInit';\nimport resizeInit from './resizeInit';\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('video:canplay', () => {\n clickInit(art, this);\n hoverInit(art, this);\n mousemoveInit(art, this);\n resizeInit(art, this);\n });\n }\n }\n\n proxy(target, name, callback, option = {}) {\n if (Array.isArray(name)) {\n name.forEach(item => this.proxy(target, item, callback, option));\n return;\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 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.art = art;\n this.keys = {};\n if (this.art.option.hotkey) {\n this.art.on('ready', () => {\n this.add(27, () => {\n if (art.player.fullscreenWeb) {\n art.player.fullscreenWeb = false;\n }\n });\n\n this.add(32, () => {\n art.player.toggle = true;\n });\n\n this.add(37, () => {\n art.player.seek = art.player.currentTime - 5;\n });\n\n this.add(38, () => {\n art.player.volume += 0.1;\n });\n\n this.add(39, () => {\n art.player.seek = art.player.currentTime + 5;\n });\n\n this.add(40, () => {\n art.player.volume -= 0.1;\n });\n\n this.init();\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 init() {\n const { proxy } = this.art.events;\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 (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 this.art.emit('hotkey', event);\n }\n }\n }\n });\n }\n}\n","import { addClass, removeClass } from './utils';\nimport component from './utils/component';\n\nexport default class Layers {\n constructor(art) {\n this.id = 0;\n this.art = art;\n this.add = this.add.bind(this);\n this.art.on('ready', () => {\n this.art.option.layers.forEach(item => {\n this.add(item);\n });\n });\n }\n\n add(item, callback) {\n this.id += 1;\n const { $layers } = this.art.template;\n return component(this.art, this, $layers, item, callback, 'layer');\n }\n\n set show(value) {\n const { $player } = this.art.template;\n if (value) {\n this.state = true;\n removeClass($player, 'artplayer-layers-hide');\n this.art.emit('layers:show');\n } else {\n this.state = false;\n addClass($player, 'artplayer-layers-hide');\n this.art.emit('layers:hide');\n }\n }\n\n toggle() {\n this.show = !this.state;\n }\n}\n","import { append, addClass, removeClass } from './utils';\n\nexport default class Loading {\n constructor(art) {\n this.art = art;\n const { $loading } = art.template;\n append($loading, art.icons.loading);\n }\n\n set show(value) {\n const { $player } = this.art.template;\n if (value) {\n this.state = true;\n addClass($player, 'artplayer-loading-show');\n this.art.emit('loading:show');\n } else {\n this.state = false;\n removeClass($player, 'artplayer-loading-show');\n this.art.emit('loading:hide');\n }\n }\n\n toggle() {\n this.show = !this.state;\n }\n}\n","import { addClass, removeClass } 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 { $player, $noticeInner } = this.art.template;\n this.state = true;\n addClass($player, 'artplayer-notice-show');\n $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;\n clearTimeout(this.timer);\n if (autoHide) {\n this.timer = setTimeout(() => {\n this.hide();\n }, time);\n }\n this.art.emit('notice:show');\n }\n\n hide() {\n const { $player } = this.art.template;\n this.state = false;\n removeClass($player, 'artplayer-notice-show');\n this.art.emit('notice:hide');\n }\n}\n","import { append, addClass, removeClass } from './utils';\n\nexport default class Mask {\n constructor(art) {\n this.art = art;\n const { $mask } = art.template;\n const $playBig = append($mask, '');\n append($playBig, art.icons.state);\n }\n\n set show(value) {\n const { $player } = this.art.template;\n if (value) {\n this.state = true;\n addClass($player, 'artplayer-mask-show');\n this.art.emit('mask:show');\n } else {\n this.state = false;\n removeClass($player, 'artplayer-mask-show');\n this.art.emit('mask:hide');\n }\n }\n\n toggle() {\n this.show = !this.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';\nimport prev from './prev.svg';\nimport next from './next.svg';\n\nexport default class Icons {\n constructor(art) {\n const icons = Object.assign(\n {\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 prev,\n next,\n },\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${item}
`)\n .join('');\n }\n this.art.emit('subtitle:update', $subtitle);\n }\n\n if (!this.isInit) {\n this.isInit = true;\n proxy(track, 'cuechange', updateSubtitle.bind(this));\n }\n\n this.art.on('artplayerPluginSubtitleOffset', updateSubtitle.bind(this));\n }\n\n resolve(blobUrl);\n });\n });\n }\n\n load(url) {\n const { notice } = this.art;\n return fetch(url)\n .then(response => {\n return response.text();\n })\n .then(text => {\n switch (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 .catch(err => {\n notice.show(err);\n throw err;\n });\n }\n\n set show(value) {\n const { $player } = this.art.template;\n if (value) {\n this.state = true;\n removeClass($player, 'artplayer-subtitle-hide');\n this.art.emit('subtitle:show');\n } else {\n this.state = false;\n addClass($player, 'artplayer-subtitle-hide');\n this.art.emit('subtitle:hide');\n }\n }\n\n toggle() {\n this.show = !this.state;\n }\n}\n","export default function clickInit(art, events) {\n const {\n template: { $player },\n } = art;\n events.proxy(document, ['click', 'contextmenu'], event => {\n if (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","import { addClass, removeClass } from '../utils';\n\nexport default function hoverInit(art, events) {\n const {\n template: { $player },\n } = art;\n events.hover(\n $player,\n () => {\n addClass($player, 'artplayer-hover');\n art.emit('hoverenter');\n },\n () => {\n removeClass($player, 'artplayer-hover');\n art.emit('hoverleave');\n },\n );\n}\n","import { debounce, addClass, removeClass } from '../utils';\n\nexport default function mousemoveInitInit(art, events) {\n const {\n template: { $player, $video },\n player,\n } = art;\n\n const autoHide = debounce(() => {\n addClass($player, 'artplayer-hide-cursor');\n removeClass($player, 'artplayer-hover');\n art.controls.show = false;\n }, 3000);\n\n art.on('hoverleave', () => {\n if (player.playing) {\n autoHide();\n }\n });\n\n events.proxy($player, 'mousemove', event => {\n autoHide.clearTimeout();\n removeClass($player, 'artplayer-hide-cursor');\n art.controls.show = true;\n if (!art.player.pip && player.playing && event.target === $video) {\n autoHide();\n }\n });\n}\n","import { throttle } from '../utils';\n\nexport default function resizeInit(art, events) {\n const {\n option,\n player,\n template: { $player },\n } = art;\n\n const object = document.createElement('object');\n object.setAttribute('aria-hidden', 'true');\n object.setAttribute('tabindex', -1);\n object.type = 'text/html';\n object.data = 'about:blank';\n let playerWidth = player.width;\n let playerHeight = player.height;\n const resizeFn = throttle(() => {\n if (player.width !== playerWidth || player.height !== playerHeight) {\n playerWidth = player.width;\n playerHeight = player.height;\n if (option.autoSize) {\n if (!art.player.fullscreen && !art.player.fullscreenWeb && !art.player.pip) {\n art.player.autoSize = true;\n } else {\n art.player.autoSize = false;\n }\n }\n art.player.aspectRatioReset = true;\n art.emit('resize', {\n width: player.width,\n height: player.height,\n });\n }\n }, 500);\n\n events.proxy(object, 'load', () => {\n events.proxy(object.contentDocument.defaultView, 'resize', resizeFn);\n });\n\n $player.appendChild(object);\n}\n","import clickInit from './clickInit';\nimport hoverInit from './hoverInit';\nimport mousemoveInit from './mousemoveInit';\nimport resizeInit from './resizeInit';\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('video:canplay', () => {\n clickInit(art, this);\n hoverInit(art, this);\n mousemoveInit(art, this);\n resizeInit(art, this);\n });\n }\n }\n\n proxy(target, name, callback, option = {}) {\n if (Array.isArray(name)) {\n name.forEach(item => this.proxy(target, item, callback, option));\n return;\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 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.art = art;\n this.keys = {};\n if (this.art.option.hotkey) {\n this.art.on('ready', () => {\n this.add(27, () => {\n if (art.player.fullscreenWeb) {\n art.player.fullscreenWeb = false;\n }\n });\n\n this.add(32, () => {\n art.player.toggle = true;\n });\n\n this.add(37, () => {\n art.player.seek = art.player.currentTime - 5;\n });\n\n this.add(38, () => {\n art.player.volume += 0.1;\n });\n\n this.add(39, () => {\n art.player.seek = art.player.currentTime + 5;\n });\n\n this.add(40, () => {\n art.player.volume -= 0.1;\n });\n\n this.init();\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 init() {\n const { proxy } = this.art.events;\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 (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 this.art.emit('hotkey', event);\n }\n }\n }\n });\n }\n}\n","import { addClass, removeClass } from './utils';\nimport component from './utils/component';\n\nexport default class Layers {\n constructor(art) {\n this.id = 0;\n this.art = art;\n this.add = this.add.bind(this);\n this.art.on('ready', () => {\n this.art.option.layers.forEach(item => {\n this.add(item);\n });\n });\n }\n\n add(item, callback) {\n this.id += 1;\n const { $layers } = this.art.template;\n return component(this.art, this, $layers, item, callback, 'layer');\n }\n\n set show(value) {\n const { $player } = this.art.template;\n if (value) {\n this.state = true;\n removeClass($player, 'artplayer-layers-hide');\n this.art.emit('layers:show');\n } else {\n this.state = false;\n addClass($player, 'artplayer-layers-hide');\n this.art.emit('layers:hide');\n }\n }\n\n toggle() {\n this.show = !this.state;\n }\n}\n","import { append, addClass, removeClass } from './utils';\n\nexport default class Loading {\n constructor(art) {\n this.art = art;\n const { $loading } = art.template;\n append($loading, art.icons.loading);\n }\n\n set show(value) {\n const { $player } = this.art.template;\n if (value) {\n this.state = true;\n addClass($player, 'artplayer-loading-show');\n this.art.emit('loading:show');\n } else {\n this.state = false;\n removeClass($player, 'artplayer-loading-show');\n this.art.emit('loading:hide');\n }\n }\n\n toggle() {\n this.show = !this.state;\n }\n}\n","import { addClass, removeClass } 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 { $player, $noticeInner } = this.art.template;\n this.state = true;\n addClass($player, 'artplayer-notice-show');\n $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;\n clearTimeout(this.timer);\n if (autoHide) {\n this.timer = setTimeout(() => {\n this.hide();\n }, time);\n }\n this.art.emit('notice:show');\n }\n\n hide() {\n const { $player } = this.art.template;\n this.state = false;\n removeClass($player, 'artplayer-notice-show');\n this.art.emit('notice:hide');\n }\n}\n","import { append, addClass, removeClass } from './utils';\n\nexport default class Mask {\n constructor(art) {\n this.art = art;\n const { $mask } = art.template;\n const $playBig = append($mask, '');\n append($playBig, art.icons.state);\n }\n\n set show(value) {\n const { $player } = this.art.template;\n if (value) {\n this.state = true;\n addClass($player, 'artplayer-mask-show');\n this.art.emit('mask:show');\n } else {\n this.state = false;\n removeClass($player, 'artplayer-mask-show');\n this.art.emit('mask:hide');\n }\n }\n\n toggle() {\n this.show = !this.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';\nimport prev from './prev.svg';\nimport next from './next.svg';\n\nexport default class Icons {\n constructor(art) {\n const icons = Object.assign(\n {\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 prev,\n next,\n },\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