���� JFIF �� � ( %"1"%)+...383,7(-.-
![]() Server : Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.20 System : Linux st2.domain.com 3.10.0-1127.10.1.el7.x86_64 #1 SMP Wed Jun 3 14:28:03 UTC 2020 x86_64 User : apache ( 48) PHP Version : 7.4.20 Disable Function : NONE Directory : /var/www/html/video/layout/js/node_modules/artplayer/src/setting/ |
import flip from './flip'; import aspectRatio from './aspectRatio'; import playbackRate from './playbackRate'; import subtitleOffset from './subtitleOffset'; import Component from '../utils/component'; import { errorHandle } from '../utils/error'; import { def, has, append, addClass, setStyle, isMobile, inverseClass, createElement, includeFromEvent, isStringOrNumber, } from '../utils'; export default class Setting extends Component { constructor(art) { super(art); const { option, controls, template: { $setting }, } = art; this.name = 'setting'; this.$parent = $setting; this.option = []; this.events = []; this.cache = new Map(); if (option.setting) { this.init(); art.on('blur', () => { if (this.show) { this.show = false; this.render(this.option); } }); art.on('focus', (event) => { const isSetting = includeFromEvent(event, controls.setting); const isParent = includeFromEvent(event, this.$parent); if (this.show && !isSetting && !isParent) { this.show = false; this.render(this.option); } }); } } static makeRecursion(option, parentItem, parentList) { for (let index = 0; index < option.length; index++) { const item = option[index]; item.$parentItem = parentItem; item.$parentList = parentList; Setting.makeRecursion(item.selector || [], item, option); } return option; } get defaultSettings() { const result = []; const { option } = this.art; if (option.playbackRate) { result.push(playbackRate(this.art)); } if (option.aspectRatio) { result.push(aspectRatio(this.art)); } if (option.flip) { result.push(flip(this.art)); } if (option.subtitleOffset) { result.push(subtitleOffset(this.art)); } return result; } init() { const { option } = this.art; const mergeSettings = [...this.defaultSettings, ...option.settings]; this.option = Setting.makeRecursion(mergeSettings); this.destroy(); this.render(this.option); } destroy() { for (let index = 0; index < this.events.length; index++) { this.art.events.remove(this.events[index]); } this.$parent.innerHTML = ''; this.events = []; this.cache = new Map(); } find(name = '', option = this.option) { for (let index = 0; index < option.length; index++) { const item = option[index]; if (item.name === name) { return item; } else { const result = this.find(name, item.selector || []); if (result) return result; } } } remove(name) { const item = this.find(name); errorHandle(item, `Can't find [${name}] from the [setting]`); const parent = item.$parentItem ? item.$parentItem.selector : this.option; parent.splice(parent.indexOf(item), 1); this.option = Setting.makeRecursion(this.option); this.destroy(); this.render(this.option); return this.option; } update(setting) { const item = this.find(setting.name); if (item) { Object.assign(item, setting); this.option = Setting.makeRecursion(this.option); this.destroy(); this.render(this.option); } else { this.add(setting); } return this.option; } add(setting) { this.option.push(setting); this.option = Setting.makeRecursion(this.option); this.destroy(); this.render(this.option); return this.option; } creatHeader(item) { const { icons, proxy, constructor } = this.art; const $item = createElement('div'); setStyle($item, 'height', `${constructor.SETTING_ITEM_HEIGHT}px`); addClass($item, 'art-setting-item'); addClass($item, 'art-setting-item-back'); const $left = append($item, '<div class="art-setting-item-left"></div>'); const $icon = createElement('div'); addClass($icon, 'art-setting-item-left-icon'); append($icon, icons.arrowLeft); append($left, $icon); append($left, item.$parentItem.html); const event = proxy($item, 'click', () => this.render(item.$parentList)); this.events.push(event); return $item; } creatItem(type, item) { const { icons, proxy, constructor } = this.art; const $item = createElement('div'); addClass($item, 'art-setting-item'); setStyle($item, 'height', `${constructor.SETTING_ITEM_HEIGHT}px`); if (isStringOrNumber(item.name)) { $item.dataset.name = item.name; } if (isStringOrNumber(item.value)) { $item.dataset.value = item.value; } const $left = append($item, '<div class="art-setting-item-left"></div>'); const $right = append($item, '<div class="art-setting-item-right"></div>'); const $icon = createElement('div'); addClass($icon, 'art-setting-item-left-icon'); switch (type) { case 'switch': case 'range': append($icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config); break; case 'selector': if (item.selector && item.selector.length) { append( $icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config, ); } else { append($icon, icons.check); } break; default: break; } append($left, $icon); item.$icon = $icon; def(item, 'icon', { configurable: true, get() { return $icon.innerHTML; }, set(value) { if (isStringOrNumber(value)) { $icon.innerHTML = value; } }, }); const $html = createElement('div'); addClass($html, 'art-setting-item-left-text'); append($html, item.html || ''); append($left, $html); item.$html = $html; def(item, 'html', { configurable: true, get() { return $html.innerHTML; }, set(value) { if (isStringOrNumber(value)) { $html.innerHTML = value; } }, }); const $tooltip = createElement('div'); addClass($tooltip, 'art-setting-item-right-tooltip'); append($tooltip, item.tooltip || ''); append($right, $tooltip); item.$tooltip = $tooltip; def(item, 'tooltip', { configurable: true, get() { return $tooltip.innerHTML; }, set(value) { if (isStringOrNumber(value)) { $tooltip.innerHTML = value; } }, }); switch (type) { case 'switch': { const $state = createElement('div'); addClass($state, 'art-setting-item-right-icon'); const $switchOn = append($state, icons.switchOn); const $switchOff = append($state, icons.switchOff); setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none'); append($right, $state); item.$switch = item.switch; def(item, 'switch', { configurable: true, get() { return item.$switch; }, set(value) { item.$switch = value; if (value) { setStyle($switchOff, 'display', 'none'); setStyle($switchOn, 'display', null); } else { setStyle($switchOff, 'display', null); setStyle($switchOn, 'display', 'none'); } }, }); break; } case 'range': { const $state = createElement('div'); addClass($state, 'art-setting-item-right-icon'); const $range = append($state, '<input type="range">'); $range.value = item.range[0] || 0; $range.min = item.range[1] || 0; $range.max = item.range[2] || 10; $range.step = item.range[3] || 1; addClass($range, 'art-setting-range'); append($right, $state); item.$range = $range; def(item, 'range', { configurable: true, get() { return $range.valueAsNumber; }, set(value) { $range.value = Number(value); }, }); } break; case 'selector': if (item.selector && item.selector.length) { const $state = createElement('div'); addClass($state, 'art-setting-item-right-icon'); append($state, icons.arrowRight); append($right, $state); } break; default: break; } switch (type) { case 'switch': { if (item.onSwitch) { const event = proxy($item, 'click', async (event) => { item.switch = await item.onSwitch.call(this.art, item, $item, event); }); this.events.push(event); } break; } case 'range': { if (item.$range) { if (item.onRange) { const event = proxy(item.$range, 'change', async (event) => { item.tooltip = await item.onRange.call(this.art, item, $item, event); }); this.events.push(event); } if (item.onChange) { const event = proxy(item.$range, 'input', async (event) => { item.tooltip = await item.onChange.call(this.art, item, $item, event); }); this.events.push(event); } } break; } case 'selector': { const event = proxy($item, 'click', async (event) => { if (item.selector && item.selector.length) { this.render(item.selector, item.width); } else { inverseClass($item, 'art-current'); for (let index = 0; index < item.$parentItem.selector.length; index++) { const element = item.$parentItem.selector[index]; element.default = element === item; } if (item.$parentList) { this.render(item.$parentList); } if (item.$parentItem && item.$parentItem.onSelect) { const result = await item.$parentItem.onSelect.call(this.art, item, $item, event); if (item.$parentItem.$tooltip && isStringOrNumber(result)) { item.$parentItem.$tooltip.innerHTML = result; } } } }); this.events.push(event); if (item.default) { addClass($item, 'art-current'); } } break; default: break; } return $item; } updateStyle(width) { const { controls, constructor, template: { $player, $setting }, } = this.art; if (controls.setting && !isMobile) { const settingWidth = width || constructor.SETTING_WIDTH; const { left: controlLeft, width: controlWidth } = controls.setting.getBoundingClientRect(); const { left: playerLeft, width: playerWidth } = $player.getBoundingClientRect(); const settingLeft = controlLeft - playerLeft + controlWidth / 2 - settingWidth / 2; if (settingLeft + settingWidth > playerWidth) { setStyle($setting, 'left', null); setStyle($setting, 'right', null); } else { setStyle($setting, 'left', `${settingLeft}px`); setStyle($setting, 'right', 'auto'); } } } render(option, width) { const { constructor } = this.art; if (this.cache.has(option)) { const $panel = this.cache.get(option); inverseClass($panel, 'art-current'); setStyle(this.$parent, 'width', `${$panel.dataset.width}px`); setStyle(this.$parent, 'height', `${$panel.dataset.height}px`); this.updateStyle(Number($panel.dataset.width)); } else { const $panel = createElement('div'); addClass($panel, 'art-setting-panel'); $panel.dataset.width = width || constructor.SETTING_WIDTH; $panel.dataset.height = option.length * constructor.SETTING_ITEM_HEIGHT; if (option[0] && option[0].$parentItem) { append($panel, this.creatHeader(option[0])); $panel.dataset.height = Number($panel.dataset.height) + constructor.SETTING_ITEM_HEIGHT; } for (let index = 0; index < option.length; index++) { const item = option[index]; if (has(item, 'switch')) { append($panel, this.creatItem('switch', item)); } else if (has(item, 'range')) { append($panel, this.creatItem('range', item)); } else { append($panel, this.creatItem('selector', item)); } } append(this.$parent, $panel); this.cache.set(option, $panel); inverseClass($panel, 'art-current'); setStyle(this.$parent, 'width', `${$panel.dataset.width}px`); setStyle(this.$parent, 'height', `${$panel.dataset.height}px`); this.updateStyle(Number($panel.dataset.width)); if (option[0] && option[0].$parentItem && option[0].$parentItem.mounted) { option[0].$parentItem.mounted.call(this.art, $panel, option[0].$parentItem); } } } }