@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

package/src/music/plugins/index.ts

@@ -0,0 +1,6 @@
+export * from './musicBackward';
+export * from './musicForward';
+export * from './musicCover';
+export * from './musicMeta';
+export * from './musicNext';
+export * from './musicPrev';

package/src/music/plugins/musicBackward.ts

@@ -0,0 +1,82 @@
+import { Plugin } from 'xgplayer';
+import { PluginEvents } from '@/constants/event';
+import backwardIcon from '../icons/back.svg';
+import forwardIcon from '../icons/forward.svg';
+
+export default class MusicBackward extends Plugin {
+  private timeScaleDom: HTMLElement;
+  static get pluginName() {
+    return 'musicbackword';
+  }
+
+  static get defaultConfig() {
+    return {
+      index: 1,
+      position: Plugin.POSITIONS.CONTROLS_LEFT,
+    };
+  }
+
+  onClick = e => {
+    const { player } = this;
+    e.preventDefault();
+    e.stopPropagation();
+    player.plugins.music.backward();
+  };
+
+  afterCreate() {
+    this.initIcons();
+    const ev = ['click', 'touchstart'];
+    ev.forEach(item => {
+      this.bind(item, this.onClick);
+    });
+    this.timeScaleDom = this.find('.xgplayer-timescale');
+    this.on(PluginEvents.TIME_SCALE_CHANGE, scale => {
+      this.timeScaleDom.innerHTML = scale;
+    });
+  }
+
+  registerIcons() {
+    return {
+      musicBackward: {
+        icon: backwardIcon,
+        class: 'xg-icon-mbackward',
+      },
+    };
+  }
+
+  registerLanguageTexts() {
+    return {
+      backward: {
+        jp: 'あとずさりする',
+        en: 'MusicBackward',
+        zh: '后退',
+        'zh-hk': '後退',
+      },
+    };
+  }
+
+  initIcons() {
+    const { icons } = this;
+    // @ts-ignore
+    this.appendChild('.xgplayer-icon', icons.musicBackward);
+  }
+
+  destroy() {
+    const ev = ['click', 'touchstart'];
+    ev.forEach(item => {
+      this.unbind(item, this.onClick);
+    });
+  }
+
+  render() {
+    const timescale = this.player.plugins.music.config.timeScale || 15;
+    return `<xg-icon class="xgplayer-backward">
+              <div class="xgplayer-icon">
+                <span class="xgplayer-timescale">${timescale}</span>
+              </div>
+              <div class="xg-tips" lang-key="backward">${
+                (this.langText as any).backward
+              }</div>
+          </xg-icon>`;
+  }
+}

package/src/music/plugins/musicCover.ts

@@ -0,0 +1,45 @@
+import { Plugin } from 'xgplayer';
+import { PluginEvents } from '@/constants/event';
+
+export default class MusicCover extends Plugin {
+  static get pluginName() {
+    return 'musiccover';
+  }
+
+  static get defaultConfig() {
+    return {
+      index: 0,
+      position: Plugin.POSITIONS.CONTROLS_LEFT,
+    };
+  }
+
+  afterCreate() {
+    this.on(PluginEvents.MUSIC_CHANGE, item => {
+      if (item && item.poster) {
+        const img: HTMLElement = this.find('img');
+        if (img) {
+          // @ts-ignore
+          img.src = item.poster;
+        } else {
+          this.root.innerHTML = `<img src=${item.poster}  alt=""/>`;
+        }
+        this.show();
+      } else {
+        this.hide();
+      }
+    });
+  }
+
+  render() {
+    const { playerConfig } = this;
+    if (playerConfig.poster || playerConfig?.url?.[0].poster) {
+      return `<xg-icon class="xgplayer-cover">
+                <img src="${
+                  playerConfig.poster || playerConfig?.url?.[0].poster
+                }" alt="">
+              </xg-icon>`;
+    } else {
+      return '<xg-icon class="xgplayer-cover"></xg-icon>';
+    }
+  }
+}

package/src/music/plugins/musicForward.ts

@@ -0,0 +1,82 @@
+import { Plugin } from 'xgplayer';
+import { PluginEvents } from '@/constants/event';
+import back from '../icons/back.svg';
+import forwardIcon from '../icons/forward.svg';
+
+export default class MusicForward extends Plugin {
+  private timeScaleDom: HTMLElement;
+  static get pluginName() {
+    return 'musicforward';
+  }
+
+  static get defaultConfig() {
+    return {
+      index: 5,
+      position: Plugin.POSITIONS.CONTROLS_LEFT,
+    };
+  }
+
+  onClick = e => {
+    const { player } = this;
+    e.preventDefault();
+    e.stopPropagation();
+    player.plugins.music.forward();
+  };
+
+  afterCreate() {
+    this.initIcons();
+    const ev = ['click', 'touchstart'];
+    ev.forEach(item => {
+      this.bind(item, this.onClick);
+    });
+    this.timeScaleDom = this.find('.xgplayer-timescale');
+    this.on(PluginEvents.TIME_SCALE_CHANGE, scale => {
+      this.timeScaleDom.innerHTML = scale;
+    });
+  }
+
+  registerIcons() {
+    return {
+      musicForward: {
+        icon: forwardIcon,
+        class: 'xg-icon-mforward',
+      },
+    };
+  }
+
+  registerLanguageTexts() {
+    return {
+      forward: {
+        jp: '早送り',
+        en: 'MusicForward',
+        zh: '快进',
+        'zh-hk': '快進',
+      },
+    };
+  }
+
+  initIcons() {
+    const { icons } = this;
+    // @ts-ignore
+    this.appendChild('.xgplayer-icon', icons.musicForward);
+  }
+
+  destroy() {
+    const ev = ['click', 'touchstart'];
+    ev.forEach(item => {
+      this.unbind(item, this.onClick);
+    });
+  }
+
+  render() {
+    const timescale = this.player.plugins.music.config.timeScale || 15;
+    return `<xg-icon class="xgplayer-forward">
+            <div class="xgplayer-icon">
+            <span class="xgplayer-timescale">${timescale}</span>
+            </div>
+            <div class="xg-tips" lang-key="forward">${
+              (this.langText as any).forward
+            }</div>
+          </xg-icon>`;
+  }
+}

package/src/music/plugins/musicMeta.ts

@@ -0,0 +1,32 @@
+import { Plugin } from 'xgplayer';
+import { PluginEvents } from '@/constants/event';
+
+export default class MusicMeta extends Plugin {
+  static get pluginName() {
+    return 'musicmeta';
+  }
+
+  static get defaultConfig() {
+    return {
+      index: 0,
+      position: Plugin.POSITIONS.CONTROLS_LEFT,
+    };
+  }
+
+  afterCreate() {
+    this.on(PluginEvents.MUSIC_CHANGE, item => {
+      if (item && item.title) {
+        this.root.innerHTML = `${item.title}`;
+      } else {
+        this.root.innerHTML = '';
+      }
+    });
+  }
+
+  render() {
+    const { playerConfig } = this;
+    return `<xg-title class="xgplayer-name">
+          ${playerConfig.title || ''}
+       </xg-title>`;
+  }
+}

package/src/music/plugins/musicMode.ts

@@ -0,0 +1,152 @@
+import { Plugin } from 'xgplayer';
+import { PluginEvents } from '@/constants/event';
+import OrderSvg from '../icons/order.svg';
+import LoopSvg from '../icons/loop.svg';
+import RandomSvg from '../icons/random.svg';
+import SloopSvg from '../icons/sloop.svg';
+import Music, { PLAY_MODES } from '@/music/music';
+
+export default class MusicMode extends Plugin {
+  public icons: {
+    [propName: string]: any;
+  };
+  static get pluginName() {
+    return 'MusicMode';
+  }
+
+  static get defaultConfig() {
+    return {
+      position: Plugin.POSITIONS.CONTROLS_RIGHT,
+      index: 9,
+      disable: false,
+    };
+  }
+
+  afterCreate() {
+    super.afterCreate();
+    if (!this.player.plugins.music || this.config.disable) {
+      return;
+    }
+    this.initIcons();
+    this.btnClick = this.btnClick.bind(this);
+    this.bind(['touchend', 'click'], this.btnClick);
+    this.on(PluginEvents.MUSIC_MODE_CHANGE, val => {
+      this.animate(val);
+    });
+    const mode = this.player.plugins?.music?.config?.mode;
+    this.animate(mode);
+    this.updateVisible();
+    this.on(PluginEvents.MUSIC_LIST_CHANGE, this.updateVisible.bind(this));
+  }
+
+  updateVisible() {
+    if (this.player.plugins?.music?.list?.length > 1) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  registerIcons() {
+    return {
+      order: { icon: OrderSvg, class: 'xg-icon-order' },
+      loop: { icon: LoopSvg, class: 'xg-icon-loop' },
+      sloop: { icon: SloopSvg, class: 'xg-icon-sloop' },
+      random: { icon: RandomSvg, class: 'xg-icon-random' },
+    };
+  }
+
+  registerLanguageTexts() {
+    return {
+      order: {
+        jp: '順番に遊ぶ',
+        en: 'Play in order',
+        zh: '顺序播放',
+        'zh-hk': '順序播放',
+      },
+      loop: {
+        jp: 'リストループ',
+        en: 'List loop',
+        zh: '列表循环',
+        'zh-hk': '列表循環',
+      },
+      sloop: {
+        jp: 'シングルサイクル',
+        en: 'Single loop',
+        zh: '单曲循环',
+        'zh-hk': '單曲循環',
+      },
+      random: {
+        jp: 'シャッフル再生',
+        en: 'Play in shuffle',
+        zh: '随机播放',
+        'zh-hk': '隨機播放',
+      },
+    };
+  }
+
+  initIcons() {
+    const { icons } = this;
+    this.appendChild('.xgplayer-icon', icons.order);
+    this.appendChild('.xgplayer-icon', icons.sloop);
+    this.appendChild('.xgplayer-icon', icons.loop);
+    this.appendChild('.xgplayer-icon', icons.random);
+  }
+
+  btnClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const curMode = this.player.plugins?.music?.config?.mode;
+    const curIndex = Music.ModeType.findIndex(el => el === curMode);
+    let nextIndex = 0;
+    if (curIndex + 1 < Music.ModeType.length) {
+      nextIndex = curIndex + 1;
+    }
+    this.player.plugins.music.mode = Music.ModeType[nextIndex];
+  }
+
+  animate(mode) {
+    switch (mode) {
+      case PLAY_MODES.ORDER:
+        this.setAttr('data-state', 'order');
+        // @ts-ignore
+        this.changeLangTextKey(this.find('.xg-tips'), 'order');
+        break;
+      case PLAY_MODES.LOOP:
+        this.setAttr('data-state', 'loop');
+        // @ts-ignore
+        this.changeLangTextKey(this.find('.xg-tips'), 'loop');
+        break;
+      case PLAY_MODES.SLOOP:
+        this.setAttr('data-state', 'sloop');
+        // @ts-ignore
+        this.changeLangTextKey(this.find('.xg-tips'), 'sloop');
+        break;
+      case PLAY_MODES.RANDOM:
+        this.setAttr('data-state', 'random');
+        // @ts-ignore
+        this.changeLangTextKey(this.find('.xg-tips'), 'random');
+        break;
+      default:
+        this.setAttr('data-state', 'order');
+        // @ts-ignore
+        this.changeLangTextKey(this.find('.xg-tips'), 'order');
+        break;
+    }
+  }
+
+  destroy() {
+    this.unbind(['touchend', 'click'], this.btnClick);
+  }
+
+  render() {
+    return `
+    <xg-icon class="xgplayer-music-mode">
+      <div class="xgplayer-icon"></div>
+      <div class="xg-tips" lang-key="musicMode">${
+        (this.langText as any).order
+      }</div>
+    </xg-icon>
+    `;
+  }
+}

package/src/music/plugins/musicNext.ts

@@ -0,0 +1,93 @@
+import { Plugin } from 'xgplayer';
+import { PluginEvents } from '@/constants/event';
+
+export default class MusicNext extends Plugin {
+  static get pluginName() {
+    return 'musicnext';
+  }
+
+  static get defaultConfig() {
+    return {
+      index: 4,
+      position: Plugin.POSITIONS.CONTROLS_LEFT,
+    };
+  }
+
+  onClick = e => {
+    const { player } = this;
+    e.preventDefault();
+    e.stopPropagation();
+    player.plugins.music.next();
+  };
+
+  afterCreate() {
+    this.initIcons();
+    const ev = ['click', 'touchstart'];
+    ev.forEach(item => {
+      this.bind(item, this.onClick);
+    });
+    this.updateVisible();
+    this.on(PluginEvents.MUSIC_LIST_CHANGE, this.updateVisible.bind(this));
+  }
+
+  updateVisible() {
+    if (this.player.plugins?.music?.list?.length > 1) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  registerIcons() {
+    return {
+      musicNext: {
+        icon: ` <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0_20323_25776)">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M3.92 0.242135L18.32 11.0402C18.96 11.5201 18.96 12.4799 18.32 12.9598L3.92 23.7579C3.12892 24.3511 2 23.7867 2 22.798V1.20196C2 0.213286 3.12892 -0.35107 3.92 0.242135Z" fill="white"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M20.6 0.00219727C20.9314 0.00219727 21.2 0.270826 21.2 0.602197V23.3978C21.2 23.7292 20.9314 23.9978 20.6 23.9978H19.4C19.0687 23.9978 18.8 23.7292 18.8 23.3978V0.602197C18.8 0.270826 19.0687 0.00219727 19.4 0.00219727H20.6Z" fill="white"/>
+              </g>
+              <defs>
+              <clipPath id="clip0_20323_25776">
+              <rect width="24" height="24" fill="white"/>
+              </clipPath>
+              </defs>
+              </svg>
+              `,
+        class: 'xg-icon-mnext',
+      },
+    };
+  }
+
+  registerLanguageTexts() {
+    return {
+      musicNext: {
+        jp: '次の曲',
+        en: 'MusicNext',
+        zh: '下一首',
+        'zh-hk': '下一首',
+      },
+    };
+  }
+
+  initIcons() {
+    const { icons } = this;
+    // @ts-ignore
+    this.appendChild('.xgplayer-icon', icons.musicNext);
+  }
+
+  destroy() {
+    const ev = ['click', 'touchstart'];
+    ev.forEach(item => {
+      this.unbind(item, this.onClick);
+    });
+  }
+
+  render() {
+    return `<xg-icon class="xgplayer-next">
+            <div class="xgplayer-icon"></div>
+            <div class="xg-tips" lang-key="musicNext">${
+              (this.langText as any).musicNext
+            }</div>
+          </xg-icon>`;
+  }
+}

package/src/music/plugins/musicPrev.ts

@@ -0,0 +1,94 @@
+import { Plugin } from 'xgplayer';
+import { PluginEvents } from '@/constants/event';
+
+export default class MusicPrev extends Plugin {
+  static get pluginName() {
+    return 'musicprev';
+  }
+
+  static get defaultConfig() {
+    return {
+      index: 2,
+      position: Plugin.POSITIONS.CONTROLS_LEFT,
+    };
+  }
+
+  onClick = e => {
+    const { player } = this;
+    e.preventDefault();
+    e.stopPropagation();
+    player.plugins.music.prev();
+  };
+
+  afterCreate() {
+    this.initIcons();
+    const ev = ['click', 'touchstart'];
+    ev.forEach(item => {
+      this.bind(item, this.onClick);
+    });
+    this.updateVisible();
+    this.on(PluginEvents.MUSIC_LIST_CHANGE, this.updateVisible.bind(this));
+  }
+
+  updateVisible() {
+    if (this.player.plugins?.music?.list?.length > 1) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  registerIcons() {
+    return {
+      musicPrev: {
+        icon: ` <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#clip0_20323_25783)">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M21.2 1.20196V22.798C21.2 23.7867 20.0711 24.3511 19.28 23.7579L4.88002 12.9598C4.24002 12.4799 4.24002 11.5201 4.88002 11.0402L19.28 0.242135C20.0711 -0.35107 21.2 0.213286 21.2 1.20196Z" fill="white"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.8 0.00219727C4.13137 0.00219727 4.4 0.270826 4.4 0.602197V23.3978C4.4 23.7292 4.13137 23.9978 3.8 23.9978H2.6C2.26863 23.9978 2 23.7292 2 23.3978V0.602197C2 0.270826 2.26863 0.00219727 2.6 0.00219727H3.8Z" fill="white"/>
+          </g>
+          <defs>
+          <clipPath id="clip0_20323_25783">
+          <rect width="24" height="24" fill="white"/>
+          </clipPath>
+          </defs>
+          </svg>
+          `,
+        class: 'xg-icon-mprev',
+      },
+    };
+  }
+
+  registerLanguageTexts() {
+    return {
+      musicPrev: {
+        jp: '前の曲',
+        en: 'MusicPrev',
+        zh: '上一首',
+        'zh-hk': '上一首',
+      },
+    };
+  }
+
+  initIcons() {
+    const { icons } = this;
+    // @ts-ignore
+    this.appendChild('.xgplayer-icon', icons.musicPrev);
+  }
+
+  destroy() {
+    const ev = ['click', 'touchstart'];
+    ev.forEach(item => {
+      this.unbind(item, this.onClick);
+    });
+  }
+
+  render() {
+    return `<xg-icon class="xgplayer-next">
+            <div class="xgplayer-icon">
+            </div>
+            <div class="xg-tips" lang-key="musicPrev">${
+              (this.langText as any).musicPrev
+            }</div>
+          </xg-icon>`;
+  }
+}

package/src/music/preset.ts

@@ -0,0 +1,69 @@
+import { Util, Sniffer } from 'xgplayer';
+import Music from './music';
+import Cover from './plugins/musicCover';
+import MusicBackward from './plugins/musicBackward';
+import MusicPrev from './plugins/musicPrev';
+import MusicForward from './plugins/musicForward';
+import MusicNext from './plugins/musicNext';
+import Meta from './plugins/musicMeta';
+import Mode from './plugins/musicMode';
+import musicPlaySVG from './icons/play-circle.svg';
+import musicPauseSVG from './icons/pause-circle.svg';
+import './plugins/index.less';
+
+function initMusicConfig(playerConfig) {
+  if (Util.typeOf(playerConfig.controls) !== 'Object') {
+    playerConfig.controls = {
+      mode: 'flex',
+      initShow: true,
+    };
+  } else {
+    const _c = playerConfig.controls;
+    playerConfig.controls = {
+      mode: 'flex',
+      initShow: true,
+      ..._c,
+    };
+  }
+  const _p = playerConfig.play || {};
+  playerConfig.play = {
+    index: 3,
+    ..._p,
+  };
+  playerConfig.marginControls = true;
+  playerConfig.icons = {
+    play: musicPlaySVG,
+    pause: musicPauseSVG,
+    ...(playerConfig.icons || {}),
+  };
+}
+export default class MusicPreset {
+  public ignores: string[];
+  public plugins: any[];
+  constructor(options, playerConfig) {
+    initMusicConfig(playerConfig);
+    const isMobile = Sniffer.device === 'mobile';
+    this.plugins = [
+      Music,
+      Meta,
+      Cover,
+      ...(isMobile
+        ? []
+        : [MusicBackward, MusicPrev, MusicForward, MusicNext, Mode]),
+    ];
+    this.ignores = [
+      'start',
+      'cssFullScreen',
+      'fullscreen',
+      'pip',
+      'enter',
+      'replay',
+      'pc',
+      'loading',
+      'poster',
+      'error',
+      'playbackrate',
+      'mobile',
+    ];
+  }
+}

package/src/music/xhr.ts

@@ -0,0 +1,37 @@
+class Xhr {
+  private url: any;
+  private xhr: XMLHttpRequest;
+  constructor(url, callback) {
+    this.url = url;
+    const xhr = new window.XMLHttpRequest();
+    // @ts-ignore
+    xhr.target = this;
+    xhr.responseType = 'arraybuffer';
+    xhr.open('get', url);
+    xhr.onload = function () {
+      if (xhr.status === 200 || xhr.status === 206) {
+        if (callback && callback instanceof Function) {
+          callback(xhr.response);
+        }
+      }
+    };
+    xhr.onerror = function (e) {
+      // TODO: 改成回调或者promise
+      // xhr.target.emit('error' + e.message)
+    };
+    this.xhr = xhr;
+    this.run();
+  }
+
+  cancel() {
+    this.xhr.abort();
+  }
+
+  run() {
+    if (this.xhr.readyState === 1) {
+      this.xhr.send();
+    }
+  }
+}
+
+export default Xhr;