add bar

src/contextmenu.js

@@ -37,9 +37,9 @@ export default class Contextmenu {
       }
     );
 
-    proxy(refs.$container, 'contextmenu', event => {
+    proxy(refs.$player, 'contextmenu', event => {
       event.preventDefault();
-      this.art.focus = true;
+      this.art.isFocus = true;
       if (!refs.$contextmenu) {
         this.creatMenu();
       }
@@ -47,7 +47,7 @@ export default class Contextmenu {
       this.setPos(event);
     });
 
-    proxy(refs.$container, 'click', event => {
+    proxy(refs.$player, 'click', event => {
       if (refs.$contextmenu && !event.path.includes(refs.$contextmenu)) {
         this.hide();
       }
@@ -79,14 +79,14 @@ export default class Contextmenu {
       }
       append(refs.$contextmenu, $menu);
     });
-    append(refs.$container, refs.$contextmenu);
+    append(refs.$player, refs.$contextmenu);
   }
 
   setPos(event) {
     const { refs } = this.art;
     const mouseX = event.clientX;
     const mouseY = event.clientY;
-    const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$container.getBoundingClientRect();
+    const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$player.getBoundingClientRect();
     const { height: mHeight, width: mWidth } = refs.$contextmenu.getBoundingClientRect();
     let menuLeft = mouseX - cLeft;
     let menuTop = mouseY - cTop;

src/controls/index.js

@@ -29,7 +29,7 @@ export default class Controls {
     this.add({
       control: Progress,
       disable: false,
-      html: 'Progress',
+      html: '',
       position: 'top',
       index: 10
     });
@@ -37,7 +37,7 @@ export default class Controls {
     this.add({
       control: Highlight,
       disable: false,
-      html: 'Highlight',
+      html: '<div class="art-progress-highlight"></div>',
       position: 'top',
       index: 20
     });
@@ -45,7 +45,7 @@ export default class Controls {
     this.add({
       control: Screenshot,
       disable: false,
-      html: 'Screenshot',
+      html: '<div class="art-progress-screenshot"></div>',
       position: 'top',
       index: 30
     });
@@ -194,12 +194,12 @@ export default class Controls {
   }
 
   show() {
-    const { $container } = this.art.refs;
-    $container.classList.add('controls-show');
+    const { $player } = this.art.refs;
+    $player.classList.add('controls-show');
   }
 
   hide() {
-    const { $container } = this.art.refs;
-    $container.classList.remove('controls-show');
+    const { $player } = this.art.refs;
+    $player.classList.remove('controls-show');
   }
 }

src/controls/progress.js

@@ -1,6 +1,116 @@
+import { append, secondToTime, clamp } from '../utils';
+
 export default class Progress {
   constructor(art, option) {
     this.art = art;
     this.option = option;
+    this.getLoaded = this.getLoaded.bind(this);
+    this.getPlayed = this.getPlayed.bind(this);
+    this.getPos = this.getPos.bind(this);
+    this.set = this.set.bind(this);
+    this.init();
+  }
+
+  init() {
+    const { option: { theme }, events: { proxy }, player } = this.art;
+
+    append(this.option.ref, `
+      <div class="art-control-progress-inner">
+        <div class="art-progress-loaded"></div>
+        <div class="art-progress-played" style="background: ${theme}"></div>
+        <div class="art-progress-indicator" style="background: ${theme}"></div>
+        <div class="art-progress-timer">00:00</div>
+      </div>
+    `);
+
+    this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
+    this.$played = this.option.ref.querySelector('.art-progress-played');
+    this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
+    this.$timer = this.option.ref.querySelector('.art-progress-timer');
+
+    this.art.on('video:canplay', () => {
+      this.set('loaded', this.getLoaded());
+    });
+
+    this.art.on('video:progress', () => {
+      this.set('loaded', this.getLoaded());
+    });
+
+    this.art.on('video:timeupdate', () => {
+      this.set('played', this.getPlayed());
+    });
+
+    this.art.on('video:ended', () => {
+      this.set('played', 1);
+    });
+
+    proxy(this.option.ref, 'mousemove', event => {
+      const { width, time } = this.getPos(event);
+      if (width <= 20) {
+        this.$timer.style.left = 0;
+      } else if (width > this.option.ref.clientWidth - 20) {
+        this.$timer.style.left = `${this.option.ref.clientWidth - 40}px`;
+      } else {
+        this.$timer.style.left = `${width - 20}px`;
+      }
+      this.$timer.innerHTML = time;
+    });
+
+    proxy(this.option.ref, 'click', event => {
+      if (event.target !== this.$indicator) {
+        const { second, percentage } = this.getPos(event);
+        this.set('played', percentage);
+        player.seek(second);
+      }
+    });
+
+    this.isDroging = false;
+    proxy(this.$indicator, 'mousedown', () => {
+      this.isDroging = true;
+    });
+
+    proxy(document, 'mousemove', event => {
+      if (this.isDroging) {
+        const { second, percentage } = this.getPos(event);
+        this.$indicator.classList.add('show-indicator');
+        this.set('played', percentage);
+        player.seek(second);
+      }
+    });
+
+    proxy(document, 'mouseup', () => {
+      if (this.isDroging) {
+        this.isDroging = false;
+        this.$indicator.classList.remove('show-indicator');
+      }
+    });
+  }
+
+  getPos(event) {
+    const { $video } = this.art.refs;
+    const { left } = this.option.ref.getBoundingClientRect();
+    const width = event.x - left;
+    const second = width / this.option.ref.clientWidth * $video.duration;
+    const time = secondToTime(second);
+    const percentage = clamp(width / this.option.ref.clientWidth, 0, 1);
+    return { second, time, width, percentage };
+  }
+
+  getPlayed() {
+    const { $video } = this.art.refs;
+    return $video.currentTime / $video.duration;
+  }
+
+  getLoaded() {
+    const { $video } = this.art.refs;
+    return $video.buffered.length ? $video.buffered.end($video.buffered.length - 1) / $video.duration : 0;
+  }
+
+  set(type, percentage) {
+    this[`$${type}`].style.width = `${percentage * 100}%`;
+    if (type === 'played') {
+      this.$indicator.style.left = `calc(${percentage * 100}% - 6.5px)`;
+    }
   }
 }
+

src/events.js

@@ -6,10 +6,19 @@ export default class Events {
   }
 
   proxy(target, name, callback, option = {}) {
+    if (Array.isArray(name)) {
+      name.forEach(item => this.proxy(target, item, callback, option));
+    }
+
     target.addEventListener(name, callback, option);
-    this.destroyEvents.push(() => {
+
+    const destroy = () => {
       target.removeEventListener(name, callback, option);
-    });
+    };
+
+    this.destroyEvents.push(destroy);
+
+    return destroy;
   }
 
   destroy() {

src/hotkey.js

@@ -11,16 +11,16 @@ export default class Hotkey {
       player,
       notice,
       i18n,
-      refs: { $container },
+      refs: { $player },
       events: { proxy }
     } = this.art;
 
     proxy(document, 'click', event => {
-      this.art.focus = event.path.indexOf($container) > -1;
+      this.art.isFocus = event.path.indexOf($player) > -1;
     });
 
     proxy(window, 'keydown', event => {
-      if (this.art.focus) {
+      if (this.art.isFocus) {
         const tag = document.activeElement.tagName.toUpperCase();
         const editable = document.activeElement.getAttribute('contenteditable');
         if (

src/index.js

@@ -53,7 +53,7 @@ class Artplayer extends Emitter {
       layers: [],
       contextmenu: [],
       loading: '',
-      theme: '#1aafff',
+      theme: '#f00',
       hotkey: true,
       subtitle: {
         url: '',
@@ -82,8 +82,8 @@ class Artplayer extends Emitter {
   }
 
   init() {
-    this.focus = false;
-    this.playing = false;
+    this.isFocus = false;
+    this.isPlaying = false;
     this.refs = {};
 
     if (this.option.container instanceof Element) {
@@ -91,7 +91,6 @@ class Artplayer extends Emitter {
     } else {
       this.refs.$container = document.querySelector(this.option.container);
     }
-    this.refs.$container.classList.add('artplayer-container');
 
     this.template = new Template(this);
     this.i18n = new I18n(this);
@@ -116,7 +115,6 @@ class Artplayer extends Emitter {
 
   destroy() {
     this.events.destroy();
-    this.refs.$container.classList.remove('artplayer-container');
     this.refs.$container.innerHTML = '';
     instances.splice(instances.indexOf(this), 1);
     this.emit('destroy');

src/player.js

@@ -11,7 +11,7 @@ export default class Player {
   init() {
     const { option } = this.art;
     const { $video } = this.art.refs;
-    $video.controls = true;
+    $video.controls = false;
     $video.poster = option.poster;
     $video.volume = clamp(option.volume, 0, 1);
     $video.autoplay = option.autoplay;
@@ -36,9 +36,14 @@ export default class Player {
       this.art.loading.hide();
     });
 
+    this.art.on('video:seeking', () => {
+      this.art.loading.show();
+    });
+
     this.art.on('video:canplay', () => {
       this.art.controls.show();
       this.art.mask.show();
+      this.art.loading.hide();
       if (this.art.option.autoplay) {
         const promise = this.play();
         if (promise !== undefined) {
@@ -50,22 +55,26 @@ export default class Player {
     });
 
     this.art.on('video:playing', () => {
-      this.art.playing = true;
+      this.art.isPlaying = true;
       this.art.controls.hide();
       this.art.mask.hide();
     });
 
     this.art.on('video:pause', () => {
-      this.art.playing = false;
+      this.art.isPlaying = false;
       this.art.controls.show();
       this.art.mask.show();
     });
 
     this.art.on('video:ended', () => {
-      this.art.playing = false;
+      this.art.isPlaying = false;
       this.art.controls.show();
       this.art.mask.show();
     });
+
+    this.art.on('video:error', () => {
+      this.art.isPlaying = false;
+    });
   }
 
   play() {
@@ -82,7 +91,7 @@ export default class Player {
   }
 
   toggle() {
-    if (this.art.playing) {
+    if (this.art.isPlaying) {
       this.pause();
     } else {
       this.play();

src/style/index.scss

@@ -1,12 +1,26 @@
 @charset "UTF-8";
 
-.artplayer-container {
+.artplayer-video-player {
     position: relative;
-    text-align: left;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
+    outline: 0;
     font-family: Roboto,Arial,Helvetica,sans-serif;
-    -webkit-font-smoothing: antialiased;
+    color: #eee;
+    text-align: left;
+    direction: ltr;
+    font-size: 14px;
+    line-height: 1.3;
     user-select: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    touch-action: manipulation;
+    -ms-high-contrast-adjust: none;
+
+    * {
+        box-sizing: border-box;
+    }
 
     .art-icon {
         svg {
@@ -23,6 +37,8 @@
         bottom: 0;
         width: 100%;
         height: 100%;
+        background-color: #000;
+        outline: 0;
     }
 
     .artplayer-subtitle {
@@ -74,30 +90,10 @@
         }
     }
 
-    .artplayer-bottom {
-        position: absolute;
-        z-index: 40;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 100px;
-        opacity: 0;
-        visibility: hidden;
-        transition: all .2s ease-in-out;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
-    }
-    
-    &.controls-show, &:hover {
-        .artplayer-bottom {
-            opacity: 1;
-            visibility: visible;
-        }
-    }
-
     .artplayer-loading {
         display: none;
         position: absolute;
-        z-index: 50;
+        z-index: 40;
         left: 0;
         top: 0;
         right: 0;
@@ -108,6 +104,104 @@
         justify-content: center;
     }
 
+    .artplayer-bottom {
+        position: absolute;
+        z-index: 50;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 100px;
+        padding: 50px 10px 0;
+        opacity: 0;
+        visibility: hidden;
+        transition: all .2s ease-in-out;
+        box-sizing: border-box;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
+    
+        .art-control-progress {
+            position: relative;
+            height: 5px;
+            padding: 1px 0;
+            cursor: pointer;
+            box-sizing: border-box;
+
+            .art-control-progress-inner {
+                position: relative;
+                height: 100%;
+                background: rgba(255,255,255,.2);
+                .art-progress-loaded {
+                    position: absolute;
+                    z-index: 1;
+                    left: 0;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    height: 100%;
+                    width: 0;
+                    background: rgba(255,255,255,.4);
+                    transform-origin: 0 0;
+                }
+    
+                .art-progress-played {
+                    position: absolute;
+                    z-index: 2;
+                    left: 0;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    height: 100%;
+                    width: 0;
+                    transform-origin: 0 0;
+                }
+    
+                .art-progress-indicator {
+                    display: none;
+                    position: absolute;
+                    z-index: 3;
+                    top: -5px;
+                    left: -6.5px;
+                    width: 13px;
+                    height: 13px;
+                    border-radius: 50%;
+
+                    &.show-indicator {
+                        display: block;
+                    }
+                }
+    
+                .art-progress-timer {
+                    display: none;
+                    position: absolute;
+                    z-index: 4;
+                    top: -25px;
+                    left: 0;
+                    width: 40px;
+                    height: 20px;
+                    line-height: 20px;
+                    color: #fff;
+                    font-size: 12px;
+                    text-align: center;
+                    background: rgba(0,0,0,.7);
+                    border-radius: 3px;
+                    font-weight: bold;
+                }
+            }
+
+            &:hover {
+                .art-progress-indicator, .art-progress-timer {
+                    display: block;
+                }
+            }
+        }
+    }
+    
+    &.controls-show, &:hover {
+        .artplayer-bottom {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+
     .artplayer-notice {
         display: none;
         font-size: 13px;

src/template.js

@@ -7,20 +7,23 @@ export default class Template {
   init() {
     const { refs } = this.art;
     refs.$container.innerHTML = `
-        <video class="artplayer-video" webkit-playsinline playsinline></video>
-        <div class="artplayer-subtitle"></div>
-        <div class="artplayer-layers"></div>
-        <div class="artplayer-mask"></div>
-        <div class="artplayer-bottom">
-          <div class="artplayer-progress"></div>
-          <div class="artplayer-controls">
-            <div class="artplayer-controls-left"></div>
-            <div class="artplayer-controls-right"></div>
+        <div class="artplayer-video-player">
+          <video class="artplayer-video" webkit-playsinline playsinline></video>
+          <div class="artplayer-subtitle"></div>
+          <div class="artplayer-layers"></div>
+          <div class="artplayer-mask"></div>
+          <div class="artplayer-bottom">
+            <div class="artplayer-progress"></div>
+            <div class="artplayer-controls">
+              <div class="artplayer-controls-left"></div>
+              <div class="artplayer-controls-right"></div>
+            </div>
           </div>
+          <div class="artplayer-loading"></div>
+          <div class="artplayer-notice"></div>
         </div>
-        <div class="artplayer-loading"></div>
-        <div class="artplayer-notice"></div>
       `;
+    refs.$player = refs.$container.querySelector('.artplayer-video-player');
     refs.$video = refs.$container.querySelector('.artplayer-video');
     refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
     refs.$bottom = refs.$container.querySelector('.artplayer-bottom');

src/utils/index.js

@@ -15,6 +15,10 @@ export function getExt(url) {
     return getExt(url.split('?')[0]);
   }
 
+  if (url.includes('#')) {
+    return getExt(url.split('#')[0]);
+  }
+
   return url
     .trim()
     .toLowerCase()
@@ -22,12 +26,11 @@ export function getExt(url) {
     .pop();
 }
 
-
 export function append(parent, child) {
   if (child instanceof Element) {
     parent.appendChild(child);
   } else {
-    parent.innerHTML = child;
+    parent.insertAdjacentHTML('beforeend', child);
   }
   return parent;
 }
@@ -38,3 +41,11 @@ export function setStyle(element, styles) {
   });
   return element;
 }
+
+export function secondToTime(second) {
+  const add0 = num => num < 10 ? `0${num}` : String(num);
+  const hour = Math.floor(second / 3600);
+  const min = Math.floor((second - hour * 3600) / 60);
+  const sec = Math.floor(second - hour * 3600 - min * 60);
+  return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
+}