@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

package/src/plugins/inner/common/danmu/lang.ts

@@ -0,0 +1,139 @@
+export interface langMap {
+  danmuSwitch: string;
+  danmuSetting: string;
+  openDanmu: string;
+  reset: string;
+  opacity: string;
+  area: string;
+  speed: string;
+  fontSize: string;
+
+  screen0: string;
+  screen1: string;
+  screen2: string;
+  screen3: string;
+
+  opacity0: string;
+  opacity1: string;
+  opacity2: string;
+  opacity3: string;
+
+  speed0: string;
+  speed1: string;
+  speed2: string;
+  speed3: string;
+  speed4: string;
+  speed5: string;
+
+  fontSize0: string;
+  fontSize1: string;
+  fontSize2: string;
+  [props: string]: string;
+}
+
+const zh: langMap = {
+  danmuSwitch: '弹幕开关',
+  danmuSetting: '弹幕设置',
+  openDanmu: '打开弹幕',
+  reset: '重置',
+  opacity: '不透明度',
+  area: '显示区域',
+  speed: '弹幕速度',
+  fontSize: '字体大小',
+  danmuMask: '智能挡板',
+
+  screen0: '1/4屏',
+  screen1: '半屏',
+  screen2: '3/4屏',
+  screen3: '全屏',
+
+  opacity0: '0',
+  opacity1: '1/3',
+  opacity2: '2/3',
+  opacity3: '1',
+
+  speed0: '0.25',
+  speed1: '0.5',
+  speed2: '正常',
+  speed3: '1.25',
+  speed4: '1.5',
+  speed5: '2',
+
+  fontSize0: '极小',
+  fontSize1: '适中',
+  fontSize2: '极大',
+};
+
+const en: langMap = {
+  danmuSwitch: 'Barrage switch',
+  danmuSetting: 'Barrage settings',
+  openDanmu: 'Open Barrage',
+  reset: 'Reset',
+  opacity: 'Opacity',
+  area: 'Display  area',
+  speed: 'Barrage speed',
+  fontSize: 'Font size',
+  danmuMask: 'Intelligent blocking',
+
+  screen0: '1/4 screen',
+  screen1: 'Half screen',
+  screen2: '3/4 screen',
+  screen3: 'Full screen',
+
+  opacity0: '0',
+  opacity1: '1/3',
+  opacity2: '2/3',
+  opacity3: '1',
+
+  speed0: '0.25',
+  speed1: '0.5',
+  speed2: 'Normal',
+  speed3: '1.25',
+  speed4: '1.5',
+  speed5: '2',
+
+  fontSize0: 'Minimal',
+  fontSize1: 'Moderate',
+  fontSize2: 'Great',
+};
+
+const jp: langMap = en;
+const zhHK: langMap = {
+  danmuSwitch: '彈幕開關',
+  danmuSetting: '彈幕設置',
+  openDanmu: '打開彈幕',
+  reset: '重置',
+  opacity: '不透明度',
+  area: '顯示區域',
+  speed: '彈幕速度',
+  fontSize: '字體大小',
+  danmuMask: '智能擋板',
+
+  screen0: '1/4屏',
+  screen1: '半屏',
+  screen2: '3/4屏',
+  screen3: '全屏',
+
+  opacity0: '0',
+  opacity1: '1/3',
+  opacity2: '2/3',
+  opacity3: '1',
+
+  speed0: '0.25',
+  speed1: '0.5',
+  speed2: '正常',
+  speed3: '1.25',
+  speed4: '1.5',
+  speed5: '2',
+
+  fontSize0: '極小',
+  fontSize1: '適中',
+  fontSize2: '極大',
+};
+export default {
+  zh,
+  'zh-cn': zh,
+  en,
+  jp,
+  'zh-hk': zhHK,
+};

package/src/plugins/inner/common/danmu/panel.ts

@@ -0,0 +1,20 @@
+import helpers from 'dom-helpers';
+import State from './state';
+export default class Panel {
+  root: HTMLElement;
+  state: State;
+  constructor(state: State) {
+    this.state = state;
+    this.root = document.createElement('div');
+    helpers.addClass(this.root, 'panel-box');
+    helpers.addEventListener(this.root, 'click', event => {
+      event.stopPropagation();
+    });
+  }
+  destroy() {
+    if (this.root.parentNode) {
+      this.root.parentNode.removeChild(this.root);
+    }
+    this.root = null;
+  }
+}

package/src/plugins/inner/common/danmu/slider.ts

@@ -0,0 +1,210 @@
+/**
+ * @description 滑块
+ */
+import helpers from 'dom-helpers';
+import throttle from 'lodash-es/throttle';
+
+import { SliderItemProps, Tick } from './index';
+
+enum DragStatus {
+  start = 1,
+  drag = 2,
+  end = 3,
+}
+export default class Slider {
+  parent: HTMLElement;
+  sliderTitle: HTMLElement;
+  sliderContent: HTMLElement;
+  sliderValue: HTMLElement;
+  wrapper: HTMLElement;
+  inner: HTMLElement;
+  button: HTMLElement;
+  ticks: Tick[] = [];
+  range = [0, 100];
+  currentValue = 0;
+  currentTick: Tick = { name: '', val: 0, renderVal: 0 };
+  buttonStatus: DragStatus = DragStatus.start;
+  startClientX = 0;
+  wrapperWidth = 1;
+  wrapperLeft = 0;
+  handleChange: Function = () => {};
+  itemProps: SliderItemProps;
+
+  constructor(div: HTMLElement, props: SliderItemProps) {
+    this.parent = div;
+    this.ticks = props.ticks;
+    this.itemProps = props;
+    this.sliderTitle = document.createElement('div');
+    this.sliderTitle.innerHTML = props.name;
+    this.sliderContent = document.createElement('div');
+    this.sliderValue = document.createElement('div');
+
+    this.wrapper = document.createElement('div');
+    this.inner = document.createElement('div');
+    this.button = document.createElement('div');
+    helpers.addClass(this.wrapper, 'wrapper');
+    helpers.addClass(this.parent, 'xg-player-slider');
+    helpers.addClass(this.sliderContent, 'line-slider');
+    helpers.addClass(this.sliderTitle, 'line-title');
+    helpers.addClass(this.sliderValue, 'line-value');
+    this.renderTicks();
+    this.rendInner();
+    this.parent.appendChild(this.sliderTitle);
+    this.parent.appendChild(this.sliderContent);
+    this.parent.appendChild(this.sliderValue);
+    this.sliderContent.appendChild(this.wrapper);
+    this.bindEvents();
+    this.setValue(props.defaultValue);
+  }
+  renderTicks() {
+    const wrapper = this.wrapper;
+    const ticks = document.createElement('div');
+    helpers.addClass(ticks, 'ticks');
+    for (let i = 1; i < this.ticks.length - 1; i++) {
+      const item = this.ticks[i];
+      const tick = document.createElement('div');
+      helpers.addClass(tick, 'tick');
+      helpers.style(tick, { left: item.val + '%' });
+      ticks.appendChild(tick);
+    }
+    wrapper.appendChild(ticks);
+  }
+  rendInner() {
+    const wrapper = this.wrapper;
+    const inner = this.inner;
+    helpers.addClass(inner, 'inner');
+    const button = this.button;
+    helpers.addClass(button, 'button');
+    wrapper.appendChild(inner);
+    wrapper.appendChild(button);
+  }
+  bindEvents() {
+    helpers.addEventListener(this.wrapper, 'click', this.onClick.bind(this));
+    helpers.addEventListener(
+      this.button,
+      'touchstart',
+      this.onTouchStart.bind(this),
+    );
+    helpers.addEventListener(
+      this.button,
+      'touchmove',
+      throttle(this.onTouchmove.bind(this), 30),
+    );
+    helpers.addEventListener(
+      this.button,
+      'touchend',
+      this.onTouchend.bind(this),
+    );
+    helpers.addEventListener(
+      this.button,
+      'touchcancel',
+      this.onTouchend.bind(this),
+    );
+  }
+  setValue(val: number): boolean {
+    if (val > this.range[1] || val < this.range[0]) {
+      return false;
+    }
+
+    this.currentTick = this.getCurrentTick(val);
+    this.currentValue = this.currentTick.val;
+    const percent = this.currentValue + '%';
+    setTimeout(() => {
+      helpers.style(this.inner, { width: percent });
+      helpers.style(this.button, { left: percent });
+    });
+    this.sliderValue.innerHTML = this.currentTick.name;
+    this.handleChange(this.currentValue);
+    return true;
+  }
+  renderText(props: SliderItemProps) {
+    this.ticks = props.ticks;
+    this.itemProps = props;
+    this.sliderTitle.innerHTML = props.name;
+    this.currentTick = this.ticks.filter(
+      tick => tick.val === this.currentValue,
+    )[0];
+    this.sliderValue.innerHTML = this.currentTick.name;
+  }
+  onChange(callback: Function) {
+    this.handleChange = callback;
+  }
+  getCurrentTick(val: number) {
+    for (let i = 0; i < this.ticks.length - 1; i++) {
+      if (this.ticks[i].val <= val && this.ticks[i + 1].val >= val) {
+        return val - this.ticks[i].val > this.ticks[i + 1].val - val
+          ? this.ticks[i + 1]
+          : this.ticks[i];
+      }
+    }
+    return this.ticks[0];
+  }
+  onMousedown(event: MouseEvent) {
+    this.startClientX = event.clientX;
+    this.onStart();
+  }
+  onTouchStart(event: TouchEvent) {
+    event.stopPropagation();
+    this.startClientX = event.touches[0].clientX;
+    this.onStart();
+  }
+  onStart() {
+    this.buttonStatus = DragStatus.drag;
+    const position = helpers.offset(this.wrapper);
+    this.wrapperWidth = position.width;
+    this.wrapperLeft = position.left;
+  }
+  onMousemove(event: MouseEvent) {
+    if (this.buttonStatus !== DragStatus.drag) {
+      return;
+    }
+    const deltaX = event.clientX - this.startClientX;
+    this.onMove(deltaX);
+  }
+  onTouchmove(event: TouchEvent) {
+    event.stopPropagation();
+
+    const deltaX = event.touches[0].clientX - this.startClientX;
+    this.onMove(deltaX);
+  }
+  onMove(deltaX: number) {
+    const nextClientX = this.startClientX + deltaX;
+    if (
+      nextClientX - this.wrapperLeft < 0 ||
+      nextClientX - this.wrapperLeft > this.wrapperWidth
+    ) {
+      return;
+    }
+    this.startClientX = this.startClientX + deltaX;
+    const percent =
+      ((this.startClientX - this.wrapperLeft) *
+        (this.range[1] - this.range[0])) /
+      this.wrapperWidth;
+    helpers.style(this.inner, { width: percent + '%' });
+    helpers.style(this.button, { left: percent + '%' });
+  }
+  onMouseup(event: MouseEvent) {
+    this.onEnd();
+  }
+  onTouchend() {
+    this.onEnd();
+  }
+  onEnd() {
+    this.buttonStatus = DragStatus.end;
+    const val =
+      ((this.startClientX - this.wrapperLeft) *
+        (this.range[1] - this.range[0])) /
+      this.wrapperWidth;
+    this.setValue(val);
+  }
+  onClick(event: MouseEvent) {
+    event.stopPropagation();
+    const position = helpers.offset(this.wrapper);
+    this.wrapperWidth = position.width;
+    this.wrapperLeft = position.left;
+    const val =
+      ((event.clientX - this.wrapperLeft) * (this.range[1] - this.range[0])) /
+      this.wrapperWidth;
+    this.setValue(val);
+  }
+}

package/src/plugins/inner/common/danmu/state.ts

@@ -0,0 +1,118 @@
+import { IDanmuConfig, SliderItemProps } from './index';
+
+import lang, { langMap } from './lang';
+
+export default class State {
+  public curLang = 'en';
+  public curLangMap: langMap;
+  private _defaultConfig: IDanmuConfig = {
+    opacity: 99,
+    area: 99,
+    fontSize: 50,
+    speed: 40,
+    active: true,
+    usePanel: true,
+    danmuItems: [],
+    maskConfig: {
+      maskUrl: '',
+      maskOffset: 0,
+      interval: 200,
+    },
+    maskActive: false,
+    external: [
+      // {
+      //   key: 'mask',
+      //   name: '智能挡板',
+      //   lang: {
+      //     en: 'Intelligent blocking',
+      //     zh: '智能挡板',
+      //     'zh-cn': '智能挡板',
+      //     'zh-hk': '智能擋板',
+      //   },
+      //   value: false,
+      // },
+    ],
+  };
+  public sliderItemsProps: SliderItemProps[];
+
+  constructor(config: IDanmuConfig) {
+    Object.assign(this._defaultConfig, config);
+  }
+
+  updateLang(language: string) {
+    this.curLang = language;
+    this.curLangMap = lang[language] || lang['en'];
+    const curLangMap = this.curLangMap;
+    this.sliderItemsProps = [
+      {
+        key: 'opacity',
+        name: curLangMap.opacity,
+        defaultValue: 99,
+        ticks: [
+          { name: curLangMap.opacity0, val: 0, renderVal: 0 },
+          { name: curLangMap.opacity1, val: 33, renderVal: 0.33 },
+          { name: curLangMap.opacity2, val: 66, renderVal: 0.66 },
+          { name: curLangMap.opacity3, val: 99, renderVal: 1 },
+        ],
+      },
+      {
+        key: 'area',
+        name: curLangMap.area,
+        defaultValue: 99,
+        ticks: [
+          { name: curLangMap.screen0, val: 0, renderVal: 1 / 4 },
+          { name: curLangMap.screen1, val: 33, renderVal: 1 / 2 },
+          { name: curLangMap.screen2, val: 66, renderVal: 3 / 4 },
+          { name: curLangMap.screen3, val: 99, renderVal: 1 },
+        ],
+      },
+      {
+        key: 'speed',
+        name: curLangMap.speed,
+        defaultValue: 40,
+        ticks: [
+          { name: curLangMap.speed0, val: 0, renderVal: 1 / 4 },
+          { name: curLangMap.speed1, val: 20, renderVal: 1 / 2 },
+          { name: curLangMap.speed2, val: 40, renderVal: 1 },
+          { name: curLangMap.speed3, val: 60, renderVal: 5 / 4 },
+          { name: curLangMap.speed4, val: 80, renderVal: 3 / 2 },
+          { name: curLangMap.speed5, val: 100, renderVal: 2 },
+        ],
+      },
+      {
+        key: 'fontSize',
+        name: curLangMap.fontSize,
+        defaultValue: 50,
+        ticks: [
+          { name: curLangMap.fontSize0, val: 0, renderVal: 14 },
+          { name: curLangMap.fontSize1, val: 50, renderVal: 16 },
+          { name: curLangMap.fontSize2, val: 100, renderVal: 20 },
+        ],
+      },
+    ];
+    this._defaultConfig.external.forEach(ex => {
+      ex.name = ex.lang[language] || ex.lang['en'];
+    });
+  }
+
+  getConfig(): IDanmuConfig {
+    return this._defaultConfig;
+  }
+
+  updateConfig(config: Partial<IDanmuConfig>) {
+    Object.assign(this._defaultConfig, config);
+    // update UI
+  }
+
+  updateComments(danmuItems: []) {
+    this._defaultConfig.danmuItems = danmuItems;
+  }
+
+  getRenderVal(key: string, val: number) {
+    const Item =
+      this.sliderItemsProps.find(item => item.key === key) ||
+      this.sliderItemsProps[0];
+    const Tick = Item.ticks.find(tick => tick.val === val) || Item.ticks[0];
+    return Tick.renderVal;
+  }
+}

package/src/plugins/inner/common/danmu/switch.ts

@@ -0,0 +1,74 @@
+import { ExternalItem } from './index';
+import helpers from 'dom-helpers';
+import debounce from 'lodash-es/debounce';
+
+export type SwitchInstance = InstanceType<typeof Switch>;
+
+export default class Switch {
+  key: string;
+  name: string;
+  value: boolean;
+  root: HTMLElement;
+  $left: HTMLDivElement;
+  $right: HTMLDivElement;
+  callback: Function = () => {};
+  constructor(item: ExternalItem) {
+    this.key = item.key;
+    this.name = item.name;
+    this.value = item.value;
+    this.root = document.createElement('div');
+    helpers.addClass(this.root, 'xg-player-switch-wrapper');
+    this.render();
+  }
+  render() {
+    if (!this.root.childNodes.length) {
+      const left = document.createElement('div');
+      this.$left = left;
+      helpers.addClass(left, 'left');
+      left.innerHTML = this.name;
+
+      const right = document.createElement('div');
+      this.$right = right;
+      helpers.addClass(right, 'right');
+
+      right.innerHTML = `<label class="switch">
+    <input type="checkbox">
+    <span class="slider round"></span>
+  </label>`;
+
+      this.root.appendChild(left);
+      this.root.appendChild(right);
+
+      const input = this.$right.querySelector('input');
+
+      helpers.addEventListener(
+        this.$right,
+        'click',
+        debounce(event => {
+          event.stopPropagation();
+          this.value = !this.value;
+          if (this.value) {
+            input?.setAttribute('checked', 'checked');
+          } else {
+            input?.removeAttribute('checked');
+          }
+          this.callback(this.value);
+        }, 50),
+      );
+    }
+
+    const input = this.$right.querySelector('input');
+    if (this.value) {
+      input?.setAttribute('checked', 'checked');
+    } else {
+      input.removeAttribute('checked');
+    }
+    input.checked = this.value;
+  }
+  renderName(name = '') {
+    this.$left.innerHTML = name;
+  }
+  onChange(callback: Function) {
+    this.callback = callback;
+  }
+}