分离播放器功能

src/player/aspectRatioMix.js

@@ -0,0 +1,66 @@
+import { setStyle, sublings } from '../utils';
+
+export default function aspectRatioMix(art, player) {
+  Object.defineProperty(player, 'aspectRatio', {
+    value: ratio => {
+      console.log(1);
+      const { refs: { $video, $player }, i18n, notice } = art;
+      const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : i18n.get('Default');
+
+      if (ratio.length === 2) {
+        const { videoWidth, videoHeight } = $video;
+        const { clientWidth, clientHeight } = $player;
+        const videoRatio = videoWidth / videoHeight;
+        const setupRatio = Number(ratio[0]) / Number(ratio[1]);
+
+        if (videoRatio > setupRatio) {
+          const percentage = setupRatio * videoHeight / videoWidth;
+          setStyle($video, 'width', `${percentage * 100}%`);
+          setStyle($video, 'height', '100%');
+          setStyle($video, 'padding', `0 ${(clientWidth - clientWidth * percentage) / 2}px`);
+        } else {
+          const percentage = videoWidth / setupRatio / videoHeight;
+          setStyle($video, 'width', '100%');
+          setStyle($video, 'height', `${percentage * 100}%`);
+          setStyle($video, 'padding', `${(clientHeight - clientHeight * percentage) / 2}px 0`);
+        }
+
+        $player.dataset.aspectRatio = ratioName;
+      } else {
+        setStyle($video, 'width', null);
+        setStyle($video, 'height', null);
+        setStyle($video, 'padding', null);
+        delete $player.dataset.aspectRatio;
+      }
+
+      notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
+      art.emit('aspectRatio', ratio);
+    }
+  });
+
+  Object.defineProperty(player, 'removeAspectRatio', {
+    value: () => {
+      const { refs: { $video }, contextmenu: { $aspectRatio } } = art;
+      setStyle($video, 'width', null);
+      setStyle($video, 'height', null);
+      setStyle($video, 'padding', null);
+      if ($aspectRatio) {
+        const $default = $aspectRatio.querySelector('.default');
+        sublings($default).forEach(item => item.classList.remove('current'));
+        $default.classList.add('current');
+      }
+    }
+  });
+
+  Object.defineProperty(player, 'resetAspectRatio', {
+    value: () => {
+      const { refs: { $player } } = art;
+      const { aspectRatio } = $player.dataset;
+      console.log($player.dataset);
+      console.log(aspectRatio);
+      if (aspectRatio) {
+        player.aspectRatio(aspectRatio.split(':'));
+      }
+    }
+  });
+}

src/player/attrInit.js

@@ -0,0 +1,12 @@
+import { clamp } from '../utils';
+
+export default function attrInit(art) {
+  const { option, refs: { $video } } = art;
+  Object.keys(option.moreVideoAttr).forEach(key => {
+    $video[key] = option.moreVideoAttr[key];
+  });
+  $video.volume = clamp(option.volume, 0, 1);
+  $video.poster = option.poster;
+  $video.autoplay = option.autoplay;
+  $video.src = option.url;
+}

src/player/currentTimeMix.js

@@ -0,0 +1,5 @@
+export default function currentTimeMix(art, player) {
+  Object.defineProperty(player, 'currentTime', {
+    value: () => art.refs.$video.currentTime || 0
+  });
+}

src/player/durationMix.js

@@ -0,0 +1,5 @@
+export default function durationMix(art, player) {
+  Object.defineProperty(player, 'duration', {
+    value: () => art.refs.$video.duration || 0
+  });
+}

src/player/eventInit.js

@@ -0,0 +1,97 @@
+import config from '../config';
+import { sleep } from '../utils';
+
+export default function eventInit(art, player) {
+  const { option, events: { proxy, hover }, refs: { $player, $video }, i18n, notice } = art;
+  let firstCanplay = false;
+
+  hover($player, () => {
+    $player.classList.add('artplayer-hover');
+    art.emit('hoverenter');
+  }, () => {
+    $player.classList.remove('artplayer-hover');
+    art.emit('hoverleave');
+  });
+
+  proxy($video, 'click', () => {
+    player.toggle();
+  });
+
+  config.video.events.forEach(eventName => {
+    proxy($video, eventName, event => {
+      art.emit(`video:${event.type}`, event);
+    });
+  });
+
+  art.on('video:loadstart', () => {
+    art.loading.show();
+  });
+
+  art.on('video:loadeddata', () => {
+    art.loading.hide();
+  });
+
+  art.on('video:waiting', () => {
+    art.loading.show();
+  });
+
+  art.on('video:seeking', () => {
+    art.loading.show();
+  });
+
+  art.on('video:canplay', () => {
+    if (!firstCanplay) {
+      firstCanplay = true;
+      art.emit('firstCanplay');
+    }
+
+    art.controls.show();
+    art.mask.show();
+    art.loading.hide();
+    if (option.autoplay) {
+      player.play();
+    }
+  });
+
+  art.on('video:playing', () => {
+    art.isPlaying = true;
+    art.controls.hide();
+    art.mask.hide();
+  });
+
+  art.on('video:pause', () => {
+    art.isPlaying = false;
+    art.controls.show();
+    art.mask.show();
+  });
+
+  art.on('video:ended', () => {
+    art.isPlaying = false;
+    art.controls.show();
+    art.mask.show();
+    if (option.loop) {
+      player.seek(0);
+      player.play();
+    }
+  });
+
+  art.on('video:error', () => {
+    if (player.reconnectTime < player.maxReconnectTime) {
+      sleep(1000).then(() => {
+        player.reconnectTime++;
+        $video.src = option.url;
+        notice.show(`${i18n.get('Reconnect')}: ${player.reconnectTime}`);
+      });
+    } else {
+      art.isError = true;
+      art.isPlaying = false;
+      art.loading.hide();
+      art.controls.hide();
+      $player.classList.add('artplayer-error');
+      sleep(1000).then(() => {
+        notice.show(i18n.get('Video load failed'), false);
+        art.destroy();
+      });
+    }
+  });
+}

src/player/index.js

@@ -0,0 +1,32 @@
+import attrInit from './attrInit';
+import eventInit from './eventInit';
+import playMix from './playMix';
+import pauseMin from './pauseMin';
+import toggleMix from './toggleMix';
+import seekMix from './seekMix';
+import volumeMix from './volumeMix';
+import currentTimeMix from './currentTimeMix';
+import durationMix from './durationMix';
+import switchMix from './switchMix';
+import playbackRateMix from './playbackRateMix';
+import aspectRatioMix from './aspectRatioMix';
+
+export default class Player {
+  constructor(art) {
+    this.reconnectTime = 0;
+    this.maxReconnectTime = 5;
+
+    attrInit(art, this);
+    eventInit(art, this);
+    playMix(art, this);
+    pauseMin(art, this);
+    toggleMix(art, this);
+    seekMix(art, this);
+    volumeMix(art, this);
+    currentTimeMix(art, this);
+    durationMix(art, this);
+    switchMix(art, this);
+    playbackRateMix(art, this);
+    aspectRatioMix(art, this);
+  }
+}

src/player/pauseMin.js

@@ -0,0 +1,10 @@
+export default function pauseMin(art, player) {
+  Object.defineProperty(player, 'pause', {
+    value: () => {
+      const { refs: { $video }, i18n, notice } = art;
+      $video.pause();
+      notice.show(i18n.get('Pause'));
+      art.emit('pause', $video);
+    }
+  });
+}

src/player/playMix.js

@@ -0,0 +1,16 @@
+export default function playMix(art, player) {
+  Object.defineProperty(player, 'play', {
+    value: () => {
+      const { refs: { $video }, i18n, notice } = art;
+      const promise = $video.play();
+      if (promise !== undefined) {
+        promise.then().catch(err => {
+          notice.show(err, true, 3000);
+          console.warn(err);
+        });
+      }
+      notice.show(i18n.get('Play'));
+      art.emit('play', $video);
+    }
+  });
+}

src/player/playbackRateMix.js

@@ -0,0 +1,25 @@
+import { clamp, sublings } from '../utils';
+
+export default function playbackRateMix(art, player) {
+  Object.defineProperty(player, 'playbackRate', {
+    value: rate => {
+      const { refs: { $video, $player }, i18n, notice } = art;
+      const newRate = clamp(rate, 0.1, 10);
+      $video.playbackRate = newRate;
+      $player.dataset.playbackRate = newRate;
+      notice.show(`${i18n.get('Rate')}: ${newRate === 1 ? i18n.get('Normal') : `${newRate}x`}`);
+      art.emit('playbackRate', newRate);
+    }
+  });
+
+  Object.defineProperty(player, 'removePlaybackRate', {
+    value: () => {
+      const { contextmenu: { $playbackRate } } = art;
+      if ($playbackRate) {
+        const $normal = $playbackRate.querySelector('.normal');
+        sublings($normal).forEach(item => item.classList.remove('current'));
+        $normal.classList.add('current');
+      }
+    }
+  });
+}

src/player/seekMix.js

@@ -0,0 +1,16 @@
+import { secondToTime } from '../utils';
+
+export default function seekMix(art, player) {
+  Object.defineProperty(player, 'seek', {
+    value: time => {
+      const { refs: { $video }, notice } = art;
+      let newTime = Math.max(time, 0);
+      if ($video.duration) {
+        newTime = Math.min(newTime, $video.duration);
+      }
+      $video.currentTime = newTime;
+      notice.show(`${secondToTime(newTime)} / ${secondToTime($video.duration)}`);
+      art.emit('seek', newTime);
+    }
+  });
+}

src/player/switchMix.js

@@ -0,0 +1,19 @@
+export default function switchMix(art, player) {
+  Object.defineProperty(player, 'switch', {
+    value: (url, name = 'Unknown') => {
+      const { refs: { $video }, i18n, notice, isPlaying, option } = art;
+      const currentTime = player.currentTime();
+      $video.src = url;
+      option.url = url;
+      player.removePlaybackRate();
+      player.removeAspectRatio();
+      player.reconnectTime = 0;
+      player.seek(currentTime);
+      if (isPlaying) {
+        player.play();
+      }
+      notice.show(`${i18n.get('Switch video')}: ${name}`);
+      art.emit('switch', url);
+    }
+  });
+}

src/player/toggleMix.js

@@ -0,0 +1,11 @@
+export default function toggleMix(art, player) {
+  Object.defineProperty(player, 'toggle', {
+    value: () => {
+      if (art.isPlaying) {
+        player.pause();
+      } else {
+        player.play();
+      }
+    }
+  });
+}

src/player/volumeMix.js

@@ -0,0 +1,18 @@
+import { clamp, setStorage } from '../utils';
+
+export default function volumeMix(art, player) {
+  Object.defineProperty(player, 'volume', {
+    value: percentage => {
+      const { refs: { $video }, i18n, notice } = art;
+      if (percentage !== undefined) {
+        $video.volume = clamp(percentage, 0, 1);
+        notice.show(`${i18n.get('Volume')}: ${parseInt($video.volume * 100)}`);
+        if ($video.volume !== 0) {
+          setStorage('volume', $video.volume);
+        }
+        art.emit('volume', $video.volume);
+      }
+      return $video.volume || 0;
+    }
+  });
+}