完成迷你播放器功能

src/controls/pip.js

@@ -1,4 +1,5 @@
-import { append } from '../utils';
+import { append, tooltip } from '../utils';
+import icons from '../icons';
 
 export default class Pip {
   constructor(option) {
@@ -7,9 +8,10 @@ export default class Pip {
 
   apply(art, $control) {
     const { events: { proxy }, i18n, player } = art;
-    this.$pip = append($control, '画中画');
+    this.$pip = append($control, icons.pip);
+    tooltip(this.$pip, i18n.get('Mini player'));
     proxy($control, 'click', () => {
-      player.pipToggle();
+      player.pipEnabled();
     });
   }
 }

src/events.js

@@ -22,10 +22,17 @@ export default class Events {
 
     const hideCursor = debounce(() => {
       $player.classList.add('artplayer-hide-cursor');
+      if (this.art.player.fullscreenState || this.art.player.fullscreenWebState) {
+        $player.classList.remove('artplayer-hover');
+        this.art.controls.hide();
+      }
     }, 5000);
     this.proxy($player, 'mousemove', () => {
       $player.classList.remove('artplayer-hide-cursor');
-      hideCursor();
+      this.art.controls.show();
+      if (!this.art.player.pipState) {
+        hideCursor();
+      }
     });
   }
 

src/i18n.js

@@ -27,7 +27,8 @@ let i18nMap = {
     'Exit web fullscreen': '退出网页全屏',
     'Common': '常规',
     'Hide setting': '隐藏设置',
-    'Show setting': '显示设置'
+    'Show setting': '显示设置',
+    'Mini player': '迷你播放器'
   },
   'zh-tw': {
     'About author': '關於作者',
@@ -57,7 +58,8 @@ let i18nMap = {
     'Exit web fullscreen': '退出網頁全屏',
     'Common': '常規',
     'Hide setting': '隱藏設置',
-    'Show setting': '顯示設置'
+    'Show setting': '顯示設置',
+    'Mini player': '迷你播放器'
   }
 };
 

src/icons/close.svg

@@ -0,0 +1,3 @@
+<svg height="100%" viewBox="0 0 24 24" width="100%">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="#fff"></path>
+</svg>

src/icons/index.js

@@ -10,6 +10,7 @@ import danmu from './danmu.svg';
 import setting from './setting.svg';
 import fullscreen from './fullscreen.svg';
 import fullscreenWeb from './fullscreen-web.svg';
+import pip from './pip.svg';
 
 const icons = {
   loading,
@@ -23,7 +24,8 @@ const icons = {
   danmu,
   setting,
   fullscreen,
-  fullscreenWeb
+  fullscreenWeb,
+  pip
 };
 
 function creatDomFromSvg(map) {

src/icons/pip.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 36 36" style="width: 100%; height: 100%">
+    <path d="M25,17 L17,17 L17,23 L25,23 L25,17 L25,17 Z M29,25 L29,10.98 C29,9.88 28.1,9 27,9 L9,9 C7.9,9 7,9.88 7,10.98 L7,25 C7,26.1 7.9,27 9,27 L27,27 C28.1,27 29,26.1 29,25 L29,25 Z M27,25.02 L9,25.02 L9,10.97 L27,10.97 L27,25.02 L27,25.02 Z" fill="#fff" id="ytp-id-20"></path>
+</svg>

src/icons/play-big.svg

@@ -1,6 +1,3 @@
-<svg style="width: 60px; height: 60px; filter: drop-shadow(0px 1px 1px black);" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="info"/>
-    <g id="icons">
-        <path d="M20,2H4C1.8,2,0,3.8,0,6v12c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V6C24,3.8,22.2,2,20,2z M15.6,12.8L10.5,16   C9.9,16.5,9,16,9,15.2V8.8C9,8,9.9,7.5,10.5,8l5.1,3.2C16.3,11.5,16.3,12.5,15.6,12.8z" id="video"/>
-    </g>
+<svg style="width: 60px; height: 60px; filter: drop-shadow(0px 1px 1px black);" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" >
+    <path d="M20,2H4C1.8,2,0,3.8,0,6v12c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V6C24,3.8,22.2,2,20,2z M15.6,12.8L10.5,16   C9.9,16.5,9,16,9,15.2V8.8C9,8,9.9,7.5,10.5,8l5.1,3.2C16.3,11.5,16.3,12.5,15.6,12.8z" id="video"/>
 </svg>

src/index.js

@@ -47,6 +47,7 @@ class Artplayer extends Emitter {
       container: '.artplayer',
       url: '',
       poster: '',
+      title: '',
       volume: 0.7,
       thumbnails: {
         url: '',

src/mask.js

@@ -14,7 +14,7 @@ export default class Mask {
 
   show() {
     const { $mask } = this.art.refs;
-    setStyle($mask, 'display', 'block');
+    setStyle($mask, 'display', 'flex');
     this.art.emit('mask:show', $mask);
   }
 

src/player/pipMix.js

@@ -1,12 +1,35 @@
+import Draggabilly from 'draggabilly';
+import { setStyle, append } from '../utils';
+
+let draggie = null;
 export default function pipMix(art, player) {
-  const { refs: { $player } } = art;
+  const { option, i18n, refs: { $player, $pipClose, $pipTitle }, events: { destroyEvents, proxy } } = art;
 
   Object.defineProperty(player, 'pipState', {
     get: () => $player.classList.contains('artplayer-pip')
   });
 
+  Object.defineProperty(player, 'pipDraggie', {
+    get: () => draggie
+  });
+
   Object.defineProperty(player, 'pipEnabled', {
     value: () => {
+      if (!draggie) {
+        draggie = new Draggabilly($player, {
+          handle: '.artplayer-pip-header'
+        });
+
+        append($pipTitle, option.title || i18n.get('Mini player'));
+
+        proxy($pipClose, 'click', () => {
+          player.pipExit();
+        });
+
+        destroyEvents.push(() => {
+          draggie.destroy();
+        });
+      }
       $player.classList.add('artplayer-pip');
       player.fullscreenExit();
       player.fullscreenWebExit();
@@ -19,6 +42,8 @@ export default function pipMix(art, player) {
   Object.defineProperty(player, 'pipExit', {
     value: () => {
       $player.classList.remove('artplayer-pip');
+      setStyle($player, 'left', null);
+      setStyle($player, 'top', null);
       player.fullscreenExit();
       player.fullscreenWebExit();
       player.aspectRatioRemove();

src/scheme/index.js

@@ -9,6 +9,7 @@ export default {
     type: 'string',
     required: true
   },
+  title: 'string',
   volume: 'number',
   thumbnails: {
     type: 'object',

src/style/contextmenu.scss

@@ -1,7 +1,7 @@
 .artplayer-video-player {
     .artplayer-contextmenu {
         position: absolute;
-        z-index: 100;
+        z-index: 110;
         left: 0;
         top: 0;
         min-width: 200px;

src/style/pip.scss

@@ -1,5 +1,65 @@
 .artplayer-video-player {
+    .artplayer-pip-header {
+        display: none;
+        position: absolute;
+        z-index: 120;
+        left: 0;
+        top: 0;
+        right: 0;
+        height: 35px;
+        line-height: 35px;
+        color: #fff;
+        background: rgba(0, 0, 0, 0.5);
+        align-items: center;
+        justify-content: space-between;
+        .artplayer-pip-title {
+            flex: 1;
+            padding: 0 10px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .artplayer-pip-close {
+            width: 35px;
+            text-align: center;
+            font-size: 22px;
+            cursor: pointer;
+        }
+    }
+
+    &.is-dragging {
+        opacity: 0.7;
+    }
+
     &.artplayer-pip {
-        background: red;
+        position: fixed;
+        right: 20px;
+        bottom: 20px;
+        width: 400px;
+        height: 225px;
+        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 3px 6px 0 rgba(0,0,0,0.20);
+
+        .artplayer-pip-header {
+            display: flex;
+        }
+
+        .artplayer-mask {
+            align-items: center;
+            justify-content: center;
+            .art-icon-playBig {
+                position: static;
+            }
+        }
+
+        .artplayer-contextmenu,
+        .artplayer-bottom,
+        .artplayer-danmu,
+        .artplayer-info,
+        .artplayer-layers,
+        .artplayer-notice,
+        .artplayer-setting,
+        .artplayer-subtitle {
+            display: none !important;
+        }
     }
 }

src/template.js

@@ -29,6 +29,10 @@ export default class Template {
           <div class="artplayer-info-panel"></div>
           <div class="artplayer-info-close">[x]</div>
         </div>
+        <div class="artplayer-pip-header">
+          <div class="artplayer-pip-title"></div>
+          <div class="artplayer-pip-close">×</div>
+        </div>
       </div>
     `;
     refs.$player = refs.$container.querySelector('.artplayer-video-player');
@@ -52,5 +56,8 @@ export default class Template {
     refs.$info = refs.$container.querySelector('.artplayer-info');
     refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel');
     refs.$infoClose = refs.$container.querySelector('.artplayer-info-close');
+    refs.$pipHeader = refs.$container.querySelector('.artplayer-pip-header');
+    refs.$pipTitle = refs.$container.querySelector('.artplayer-pip-title');
+    refs.$pipClose = refs.$container.querySelector('.artplayer-pip-close');
   }
 }