xgplayer 2.32.1 → 2.32.3

package/src/skin/controls/screenShot.js

@@ -1,27 +0,0 @@
-import { createDom } from '../../utils/util'
-import '../style/controls/screenShot.scss'
-
-let s_screenShot = function () {
-  let player = this
-  if (!player.config.screenShot || player.config.screenShot.hideButton) {
-    return
-  }
-  let screenShotText = player.lang.SCREENSHOT
-  let btn = createDom('xg-screenshot', `<p class="name"><span>${player.config.screenShot.iconText || screenShotText}</span></p>`, {tabindex: 11}, 'xgplayer-screenshot')
-  player.once('ready', () => {
-    player.controls.appendChild(btn)
-  });
-
-  ['click', 'touchend'].forEach(item => {
-    btn.addEventListener(item, e => {
-      e.preventDefault()
-      e.stopPropagation()
-      player.userGestureTrigEvent('screenShotBtnClick')
-    })
-  })
-}
-
-export default {
-  name: 's_screenShot',
-  method: s_screenShot
-}

package/src/skin/controls/start.js

@@ -1,62 +0,0 @@
-import { createDom, addClass, removeClass, isWeiXin, isUc } from '../../utils/util'
-import StartPlayIcon from '../assets/startPlay.svg'
-import StartPauseIcon from '../assets/startPause.svg'
-import '../style/controls/start.scss'
-
-let s_start = function () {
-  let player = this
-  let root = player.root
-  let btn = createDom('xg-start', `<div class="xgplayer-icon-play">${StartPlayIcon}</div>
-                                      <div class="xgplayer-icon-pause">${StartPauseIcon}</div>`, {}, 'xgplayer-start')
-  function onPlayerReady(player) {
-    addClass(player.root, 'xgplayer-skin-default')
-    if (player.config) {
-      player.config.autoplay && !isWeiXin() && !isUc() && addClass(player.root, 'xgplayer-is-enter')
-      if (player.config.lang && player.config.lang === 'en') {
-        addClass(player.root, 'xgplayer-lang-is-en')
-      } else if (player.config.lang === 'jp') {
-        addClass(player.root, 'xgplayer-lang-is-jp')
-      }
-      if(!player.config.enableContextmenu) {
-        player.video.addEventListener('contextmenu', e => {
-          e.preventDefault()
-          e.stopPropagation()
-        })
-      }
-    }
-  }
-
-  if(player.config && player.config.hideStartBtn) {
-    addClass(root, 'xgplayer-start-hide')
-  }
-
-  if (player.isReady) {
-    root.appendChild(btn)
-    onPlayerReady(player)
-  } else {
-    player.once('ready', () => {
-      root.appendChild(btn)
-      onPlayerReady(player)
-    });
-  }
-
-  player.once('autoplay was prevented', () => {
-    removeClass(player.root, 'xgplayer-is-enter')
-    addClass(player.root, 'xgplayer-nostart')
-  })
-
-  player.once('canplay', () => {
-    removeClass(player.root, 'xgplayer-is-enter')
-  })
-
-  btn.onclick = e => {
-    e.preventDefault()
-    e.stopPropagation()
-    player.userGestureTrigEvent('startBtnClick')
-  }
-}
-
-export default {
-  name: 's_start',
-  method: s_start
-}

package/src/skin/controls/textTrack.js

@@ -1,113 +0,0 @@
-import { createDom, addClass, removeClass, hasClass } from '../../utils/util'
-import '../style/controls/textTrack.scss'
-
-function renderList (root, textTrack, offText, isDefaultShow) {
-  if (textTrack.length === 0) {
-    root.innerHTML = ''
-    return
-  }
-  let tmp = []
-  tmp.push(`<li data-type="off" class="${isDefaultShow ? '' : 'selected'}">${offText}</li>`)
-  textTrack.forEach(item => {
-    tmp.push(`<li data-id=${item.id} data-language=${item.language} class="${item.isDefault && isDefaultShow ? 'selected' : ''}">${item.label}</li>`)
-  })
-  root.innerHTML = tmp.join('')
-}
-
-// eslint-disable-next-line camelcase
-let s_textTrack = function () {
-  let player = this
-  if (!this.config.textTrack) {
-    return
-  }
-  let textTrack = this.config.textTrack
-  let controlText = player.lang.TEXTTRACK
-  const container = createDom('xg-texttrack', `<ul></ul><p class="name">${controlText}</p>`, {tabindex: 7}, 'xgplayer-texttrack')
-
-  function onCanPlay () {
-    const urlInRoot = player.root.querySelector('.xgplayer-texttrack')
-    if (!urlInRoot) {
-      player.controls.appendChild(container)
-      const cur = container.querySelector('.name')
-      if (!player.config.textTrackActive || player.config.textTrackActive === 'hover') {
-        cur.addEventListener('mouseenter', e => {
-          e.preventDefault()
-          e.stopPropagation()
-          addClass(player.root, 'xgplayer-texttrack-active')
-          container.focus()
-        })
-        container.addEventListener('mouseleave', e => {
-          e.preventDefault()
-          e.stopPropagation()
-          removeClass(player.root, 'xgplayer-texttrack-active')
-        })
-      } else {
-        cur.addEventListener('click', e => {
-          e.preventDefault()
-          e.stopPropagation()
-          if (hasClass(player.root, 'xgplayer-texttrack-active')) {
-            removeClass(player.root, 'xgplayer-texttrack-active')
-          } else {
-            addClass(player.root, 'xgplayer-texttrack-active')
-          }
-        })
-      }
-    }
-
-    ['touchend', 'click'].forEach(item => {
-      container.addEventListener(item, function (e) {
-        e.preventDefault()
-        e.stopPropagation()
-        let li = e.target || e.srcElement
-        if (li && li.tagName.toLocaleLowerCase() === 'li') {
-          const id = li.getAttribute('data-id')
-          const type = li.getAttribute('data-type')
-          const language = li.getAttribute('data-language')
-          Array.prototype.forEach.call(li.parentNode.childNodes, item => {
-            removeClass(item, 'selected')
-          })
-          addClass(li, 'selected')
-          if (type === 'off') {
-            player.switchOffSubtile()
-            removeClass(player.root, 'xgplayer-texttrack-active')
-          } else {
-            player.switchSubTitle({id, language})
-            addClass(player.root, 'xgplayer-texttrack-active')
-          }
-        }
-      })
-    })
-
-    const ul = container.getElementsByTagName('ul')[0]
-    renderList(ul, textTrack, player.lang.OFF, player.textTrackShowDefault)
-    if (textTrack.length === 0) {
-      addClass(container, 'xgplayer-texttrack-hide')
-    } else {
-      removeClass(container, 'xgplayer-texttrack-hide')
-    }
-  }
-
-  const onListUpdate = function (data) {
-    if (!data.isListUpdate) return
-    const ul = container.getElementsByTagName('ul')[0]
-    textTrack = data.list
-    renderList(ul, data.list, player.lang.OFF, player.textTrackShowDefault)
-    data.list.length > 0 ? addClass(player.root, 'xgplayer-is-texttrack') : removeClass(player.root, 'xgplayer-is-texttrack')
-    if (data.list.length === 0) {
-      addClass(container, 'xgplayer-texttrack-hide')
-    } else {
-      removeClass(container, 'xgplayer-texttrack-hide')
-    }
-  }
-
-  if (textTrack && Array.isArray(textTrack)) {
-    textTrack.length > 0 && addClass(player.root, 'xgplayer-is-texttrack')
-    player.once('canplay', onCanPlay)
-    player.on('subtitle_change', onListUpdate)
-  }
-}
-
-export default {
-  name: 's_textTrack',
-  method: s_textTrack
-}

package/src/skin/controls/time.js

@@ -1,40 +0,0 @@
-import { createDom, format } from '../../utils/util'
-import '../style/controls/time.scss'
-
-let s_time = function () {
-  let player = this
-  let container = createDom('xg-time', `<span class="xgplayer-time-current">${player.currentTime || format(0)}</span>
-                                           <span>${player.duration || format(0)}</span>`, {}, 'xgplayer-time')
-  player.once('ready', () => {
-    if(player.controls) {
-      player.controls.appendChild(container)
-    }
-  })
-  let onTimeChange = function () {
-    // let liveText = player.lang.LIVE
-    // if(player.duration === Infinity) {
-    //   addClass(player.root, 'xgplayer-is-live')
-    //   if(!findDom(player.root, '.xgplayer-live')) {
-    //     const live = createDom('xg-live', liveText, {}, 'xgplayer-live')
-    //     player.controls.appendChild(live)
-    //   }
-    // }
-    if (player.videoConfig.mediaType !== 'audio' || !player.isProgressMoving || !player.dash) {
-      container.innerHTML = `<span class="xgplayer-time-current">${format(player.currentTime || 0)}</span>` + `<span>${format(player.duration)}</span>`
-    }
-  }
-  player.on('durationchange', onTimeChange)
-  player.on('timeupdate', onTimeChange)
-
-  function onDestroy () {
-    player.off('durationchange', onTimeChange)
-    player.off('timeupdate', onTimeChange)
-    player.off('destroy', onDestroy)
-  }
-  player.once('destroy', onDestroy)
-}
-
-export default {
-  name: 's_time',
-  method: s_time
-}

package/src/skin/controls/volume.js

@@ -1,63 +0,0 @@
-import { createDom } from '../../utils/util'
-import MutedIcon from '../assets/volumeMuted.svg'
-import SmallIcon from '../assets/volumeSmall.svg'
-import LargeIcon from '../assets/volumeLarge.svg'
-import '../style/controls/volume.scss'
-
-let s_volume = function () {
-  let player = this
-  let container = createDom('xg-volume', `<xg-icon class="xgplayer-icon">
-                                         <div class="xgplayer-icon-large">${LargeIcon}</div>
-                                         <div class="xgplayer-icon-small">${SmallIcon}</div>
-                                         <div class="xgplayer-icon-muted">${MutedIcon}</div>
-                                       </xg-icon>
-                                       <xg-slider class="xgplayer-slider" tabindex="2">
-                                         <xg-bar class="xgplayer-bar">
-                                           <xg-drag class="xgplayer-drag"></xg-drag>
-                                         </xg-bar>
-                                       </xg-slider>`, {}, 'xgplayer-volume')
-  player.once('ready', () => {
-    if(player.controls) {
-      player.controls.appendChild(container)
-    }
-  })
-  let slider = container.querySelector('.xgplayer-slider')
-  let bar = container.querySelector('.xgplayer-bar')
-  let selected = container.querySelector('.xgplayer-drag')
-  let icon = container.querySelector('.xgplayer-icon')
-  selected.style.height = `${player.config.volume * 100}%`
-  slider.volume = player.config.volume;
-
-  bar.addEventListener('mousedown', e => {
-    e.preventDefault()
-    e.stopPropagation()
-    player.userGestureTrigEvent('volumeBarClick', e)
-  });
-
-  ['click', 'touchend'].forEach(item => {
-    icon.addEventListener(item, e => {
-      e.preventDefault()
-      e.stopPropagation()
-      player.userGestureTrigEvent('volumeIconClick')
-    })
-  })
-
-  icon.addEventListener('mouseenter', e => {
-    e.preventDefault()
-    e.stopPropagation()
-    player.userGestureTrigEvent('volumeIconEnter')
-  });
-
-  ['blur', 'mouseleave'].forEach(item => {
-    container.addEventListener(item, e => {
-      e.preventDefault()
-      e.stopPropagation()
-      player.userGestureTrigEvent('volumeIconLeave')
-    })
-  })
-}
-
-export default {
-  name: 's_volume',
-  method: s_volume
-}

package/src/skin/index.js

@@ -1,63 +0,0 @@
-import Player from '../player'
-
-import I18n from './controls/i18n.js'
-import Enter from './controls/enter.js'
-import Play from './controls/play.js'
-import Start from './controls/start.js'
-import Poster from './controls/poster.js'
-import Flex from './controls/flex.js'
-import Fullscreen from './controls/fullscreen.js'
-import CssFullscreen from './controls/cssFullscreen.js'
-import Volume from './controls/volume.js'
-import Definition from './controls/definition.js'
-import Loading from './controls/loading.js'
-import Progress from './controls/progress.js'
-import Time from './controls/time.js'
-import Replay from './controls/replay.js'
-import PlaybackRate from './controls/playbackRate.js'
-import LocalPreview from './controls/localPreview.js'
-import Download from './controls/download.js'
-import Danmu from './controls/danmu.js'
-import Pip from './controls/pip.js'
-import Miniplayer from './controls/miniplayer.js'
-import PlayNext from './controls/playNext.js'
-import Rotate from './controls/rotate.js'
-import Reload from './controls/reload.js'
-import ScreenShot from './controls/screenShot.js'
-import NativeTextTrack from './controls/nativeTextTrack.js'
-import TextTrack from './controls/textTrack.js'
-import ErrorControl from './controls/error.js'
-import MemoryPlay from './controls/memoryPlay.js'
-import Airplay from './controls/airplay.js'
-
-Player.installAll([
-    I18n,
-    Enter,
-    Play,
-    Start,
-    Poster,
-    Flex,
-    Fullscreen,
-    CssFullscreen,
-    Volume,
-    Definition,
-    Loading,
-    Progress,
-    Time,
-    Replay,
-    PlaybackRate,
-    LocalPreview,
-    Download,
-    Danmu,
-    Pip,
-    Miniplayer,
-    PlayNext,
-    Rotate,
-    Reload,
-    ScreenShot,
-    NativeTextTrack,
-    TextTrack,
-    ErrorControl,
-    MemoryPlay,
-    Airplay
-])

package/src/skin/style/common/animation.scss

@@ -1,16 +0,0 @@
-@keyframes loadingRotate {
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes loadingDashOffset {
-  0% {
-    stroke-dashoffset: 236;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}

package/src/skin/style/common/svg-url.scss

@@ -1,70 +0,0 @@
-//
-//  Function to create an optimized svg url
-//
-//  Helper function to replace characters in a string
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-  @return if($index,
-          str-slice($string, 1, $index - 1) + $replace +
-        str-replace(str-slice($string, $index +
-        str-length($search)), $search, $replace),
-          $string);
-}
-
-@function svg-url($svg){
-  //
-  //  Add missing namespace
-  //
-  @if not str-index($svg,xmlns) {
-    $svg: str-replace($svg, '<svg','<svg xmlns="http://www.w3.org/2000/svg"');
-  }
-  //
-  //  Chunk up string in order to avoid
-  //  "stack level too deep" error
-  //
-  $encoded:'';
-  $slice: 2000;
-  $index: 0;
-  $loops: ceil(str-length($svg)/$slice);
-  @for $i from 1 through $loops {
-    $chunk: str-slice($svg, $index, $index + $slice - 1);
-    //
-    //   Encode
-    //
-    $chunk: str-replace($chunk, '"', '\'');
-    $chunk: str-replace($chunk, '%', '%25');
-    $chunk: str-replace($chunk, '#', '%23');
-    $chunk: str-replace($chunk, '{', '%7B');
-    $chunk: str-replace($chunk, '}', '%7D');
-    $chunk: str-replace($chunk, '<', '%3C');
-    $chunk: str-replace($chunk, '>', '%3E');
-
-    //
-    //    The maybe list
-    //
-    //    Keep size and compile time down
-    //    ... only add on documented fail
-    //
-    //  $chunk: str-replace($chunk, '&', '%26');
-    //  $chunk: str-replace($chunk, '|', '%7C');
-    //  $chunk: str-replace($chunk, '[', '%5B');
-    //  $chunk: str-replace($chunk, ']', '%5D');
-    //  $chunk: str-replace($chunk, '^', '%5E');
-    //  $chunk: str-replace($chunk, '`', '%60');
-    //  $chunk: str-replace($chunk, ';', '%3B');
-    //  $chunk: str-replace($chunk, '?', '%3F');
-    //  $chunk: str-replace($chunk, ':', '%3A');
-    //  $chunk: str-replace($chunk, '@', '%40');
-    //  $chunk: str-replace($chunk, '=', '%3D');
-
-    $encoded: #{$encoded}#{$chunk};
-    $index: $index + $slice;
-  }
-  @return url("data:image/svg+xml,#{$encoded}");
-}
-
-//  Background svg mixin
-@mixin background-svg($svg){
-  background-image: svg-url($svg);
-}
-

package/src/skin/style/controls/airplay.scss

@@ -1,35 +0,0 @@
-.xgplayer-skin-default {
-  .xgplayer-airplay {
-    position: relative;
-    order: 11;
-    display: block;
-    cursor: pointer;
-    margin-left: 5px;
-    margin-right: 3px;
-    .xgplayer-icon {
-      margin-top: 6px;
-      margin-left: 6px;
-      div {
-        position: absolute;
-      }
-      .xgplayer-icon-airplay {
-        display: block;
-      }
-    }
-    .xgplayer-tips {
-      position: absolute;
-      right: 0;
-      left: auto;
-      .xgplayer-tip-airplay {
-        display: block;
-      }
-    }
-    &:hover {
-      opacity: 0.85;
-      .xgplayer-tips {
-        display: block;
-      }
-    }
-  }
-}
-

package/src/skin/style/controls/controls.scss

@@ -1,40 +0,0 @@
-.xgplayer-skin-default {
-  .xgplayer-controls {
-    display: flex;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 40px;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .37), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75));
-    z-index: 10;
-  }
-}
-
-.xgplayer-skin-default.xgplayer-nostart {
-  .xgplayer-controls {
-    display: none;
-  }
-}
-
-.xgplayer-skin-default.xgplayer-no-controls {
-  .xgplayer-controls {
-    display: none;
-  }
-}
-
-.xgplayer-skin-default.xgplayer-inactive {
-  .xgplayer-controls {
-    display: none;
-  }
-}
-.xgplayer-skin-default.xgplayer-is-live {
-  .xgplayer-controls {
-    .xgplayer-time,.xgplayer-progress {
-      display: none;
-    }
-    .xgplayer-live {
-      display: block;
-    }
-  }
-}

package/src/skin/style/controls/cssfullscreen.scss

@@ -1,103 +0,0 @@
-.xgplayer-skin-default {
-  .xgplayer-cssfullscreen, .xgplayer-cssfullscreen-img {
-    position: relative;
-    order: 12;
-    display: block;
-    cursor: pointer;
-    .xgplayer-icon {
-      width: 32px;
-      margin-top: 5px;
-      div {
-        position: absolute;
-      }
-      .xgplayer-icon-requestfull {
-        display: block;
-      }
-      .xgplayer-icon-exitfull {
-        display: none;
-      }
-    }
-    .xgplayer-tips {
-      margin-left: -40px;
-      .xgplayer-tip-requestfull {
-        display: block;
-      }
-      .xgplayer-tip-exitfull {
-        display: none;
-      }
-    }
-    &:hover {
-      opacity: 0.85;
-      .xgplayer-tips {
-        display: block;
-      }
-    }
-  }
-}
-
-.xgplayer-skin-default.xgplayer-is-cssfullscreen {
-  .xgplayer-cssfullscreen, .xgplayer-cssfullscreen-img {
-    .xgplayer-icon {
-      .xgplayer-icon-requestfull {
-        display: none;
-      }
-      .xgplayer-icon-exitfull {
-        display: block;
-      }
-    }
-    .xgplayer-tips {
-      margin-left: -47px;
-      .xgplayer-tip-requestfull {
-        display: none;
-      }
-      .xgplayer-tip-exitfull {
-        display: block;
-      }
-    }
-  }
-}
-
-.xgplayer-skin-default.xgplayer-is-fullscreen {
-  .xgplayer-cssfullscreen, .xgplayer-cssfullscreen-img {
-    display: none;
-  }
-}
-
-.xgplayer-skin-default.xgplayer-is-cssfullscreen {
-  position: fixed !important;
-  left: 0 !important;
-  top: 0 !important;
-  width: 100%!important;
-  height: 100%!important;
-  z-index: 99999 !important;
-}
-
-.xgplayer-lang-is-en {
-  .xgplayer-cssfullscreen, .xgplayer-cssfullscreen-img {
-    .xgplayer-tips {
-      margin-left: -46px;
-    }
-  }
-}
-.xgplayer-lang-is-en.xgplayer-is-cssfullscreen {
-  .xgplayer-cssfullscreen, .xgplayer-cssfullscreen-img {
-    .xgplayer-tips {
-      margin-left: -46px;
-    }
-  }
-}
-
-.lang-is-jp {
-  .xgplayer-cssfullscreen, .xgplayer-cssfullscreen-img {
-    .xgplayer-tips {
-      margin-left: -120px;
-    }
-  }
-}
-.lang-is-jp.xgplayer-is-cssfullscreen {
-  .xgplayer-cssfullscreen, .xgplayer-cssfullscreen-img {
-    .xgplayer-tips {
-      margin-left: -60px;
-    }
-  }
-}