添加画中画功能

src/controls/pip.js

@@ -1,9 +1,15 @@
+import { append } from '../utils';
+
 export default class Pip {
   constructor(option) {
     this.option = option;
   }
 
   apply(art, $control) {
-    this.art = art;
+    const { events: { proxy }, i18n, player } = art;
+    this.$pip = append($control, '画中画');
+    proxy($control, 'click', () => {
+      player.pipToggle();
+    });
   }
 }

src/player/aspectRatioMix.js

@@ -1,7 +1,7 @@
 import { setStyle, sublings } from '../utils';
 
 export default function aspectRatioMix(art, player) {
-  const { refs: { $video, $player }, i18n, notice, contextmenu } = art;
+  const { refs: { $video, $player }, i18n, notice } = art;
 
   Object.defineProperty(player, 'aspectRatio', {
     value: ratio => {
@@ -27,10 +27,7 @@ export default function aspectRatioMix(art, player) {
 
         $player.dataset.aspectRatio = ratioName;
       } else {
-        setStyle($video, 'width', null);
-        setStyle($video, 'height', null);
-        setStyle($video, 'padding', null);
-        delete $player.dataset.aspectRatio;
+        player.aspectRatioRemove();
       }
 
       notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
@@ -43,8 +40,9 @@ export default function aspectRatioMix(art, player) {
       setStyle($video, 'width', null);
       setStyle($video, 'height', null);
       setStyle($video, 'padding', null);
-      if (contextmenu.$aspectRatio) {
-        const $default = contextmenu.$aspectRatio.querySelector('.default');
+      delete $player.dataset.aspectRatio;
+      if (art.contextmenu.$aspectRatio) {
+        const $default = art.contextmenu.$aspectRatio.querySelector('.default');
         sublings($default).forEach(item => item.classList.remove('current'));
         $default.classList.add('current');
       }

src/player/fullscreenMix.js

@@ -45,12 +45,10 @@ export default function fullscreenMix(art, player) {
 
   Object.defineProperty(player, 'fullscreenToggle', {
     value: () => {
-      if (screenfull.enabled) {
-        if (screenfull.isFullscreen) {
-          player.fullscreenExit();
-        } else {
-          player.fullscreenEnabled();
-        }
+      if (player.fullscreenState) {
+        player.fullscreenExit();
+      } else {
+        player.fullscreenEnabled();
       }
     }
   });

src/player/fullscreenWebMix.js

@@ -30,9 +30,9 @@ export default function fullscreenWebMix(art, player) {
   Object.defineProperty(player, 'fullscreenWebToggle', {
     value: () => {
       if (player.fullscreenWebState) {
-        player.exit();
+        player.fullscreenWebExit();
       } else {
-        player.enabled();
+        player.fullscreenWebEnabled();
       }
     }
   });

src/player/index.js

@@ -13,6 +13,7 @@ import aspectRatioMix from './aspectRatioMix';
 import screenshotMix from './screenshotMix';
 import fullscreenMix from './fullscreenMix';
 import fullscreenWebMix from './fullscreenWebMix';
+import pipMix from './pipMix';
 
 export default class Player {
   constructor(art) {
@@ -34,5 +35,6 @@ export default class Player {
     screenshotMix(art, this);
     fullscreenMix(art, this);
     fullscreenWebMix(art, this);
+    pipMix(art, this);
   }
 }

src/player/pipMix.js

@@ -0,0 +1,39 @@
+export default function pipMix(art, player) {
+  const { refs: { $player } } = art;
+
+  Object.defineProperty(player, 'pipState', {
+    get: () => $player.classList.contains('artplayer-pip')
+  });
+
+  Object.defineProperty(player, 'pipEnabled', {
+    value: () => {
+      $player.classList.add('artplayer-pip');
+      player.fullscreenExit();
+      player.fullscreenWebExit();
+      player.aspectRatioRemove();
+      player.playbackRateRemove();
+      art.emit('pip', true);
+    }
+  });
+
+  Object.defineProperty(player, 'pipExit', {
+    value: () => {
+      $player.classList.remove('artplayer-pip');
+      player.fullscreenExit();
+      player.fullscreenWebExit();
+      player.aspectRatioRemove();
+      player.playbackRateRemove();
+      art.emit('pip', false);
+    }
+  });
+
+  Object.defineProperty(player, 'pipToggle', {
+    value: () => {
+      if (player.pipState) {
+        player.pipExit();
+      } else {
+        player.pipEnabled();
+      }
+    }
+  });
+}

src/player/playbackRateMix.js

@@ -1,7 +1,7 @@
 import { clamp, sublings } from '../utils';
 
 export default function playbackRateMix(art, player) {
-  const { refs: { $video, $player }, i18n, notice, contextmenu } = art;
+  const { refs: { $video, $player }, i18n, notice } = art;
 
   Object.defineProperty(player, 'playbackRate', {
     value: rate => {
@@ -15,8 +15,10 @@ export default function playbackRateMix(art, player) {
 
   Object.defineProperty(player, 'playbackRateRemove', {
     value: () => {
-      if (contextmenu.$playbackRate) {
-        const $normal = contextmenu.$playbackRate.querySelector('.normal');
+      player.playbackRate(1);
+      delete $player.dataset.playbackRate;
+      if (art.contextmenu.$playbackRate) {
+        const $normal = art.contextmenu.$playbackRate.querySelector('.normal');
         sublings($normal).forEach(item => item.classList.remove('current'));
         $normal.classList.add('current');
       }

src/style/index.js

@@ -13,3 +13,4 @@ import './info.scss';
 import './hideCursor.scss';
 import './aspectRatio.scss';
 import './fullscreenWeb.scss';
+import './pip.scss';

src/style/pip.scss

@@ -0,0 +1,5 @@
+.artplayer-video-player {
+    &.artplayer-pip {
+        background: red;
+    }
+}