Merge pull request #360 from A-Circle-Zhang/master

fix #359 and keep thumbnails within the player

src/css/controller.scss

@@ -100,7 +100,6 @@
             position: absolute;
             left: 0px;
             top: -20px;
-            width: 30px;
             border-radius: 4px;
             padding: 5px 7px;
             background-color: rgba(0, 0, 0, 0.62);

src/js/controller.js

@@ -134,7 +134,7 @@ class Controller {
                     this.thumbnails && this.thumbnails.show();
                 }
                 this.thumbnails && this.thumbnails.move(tx);
-                this.player.template.playedBarTime.style.left = `${(tx - 20)}px`;
+                this.player.template.playedBarTime.style.left = `${(tx - (time >= 3600 ? 25 : 20))}px`;
                 this.player.template.playedBarTime.innerText = utils.secondToTime(time);
                 this.player.template.playedBarTime.classList.remove('hidden');
             }

src/js/thumbnails.js

@@ -19,7 +19,7 @@ class Thumbnails {
 
     move (position) {
         this.container.style.backgroundPosition = `-${(Math.ceil(position / this.barWidth * 100) - 1) * 160}px 0`;
-        this.container.style.left = `${(position - this.container.offsetWidth / 2)}px`;
+        this.container.style.left = `${Math.min(Math.max(position - this.container.offsetWidth / 2, -10), this.barWidth - 150)}px`;
     }
 
     hide () {
@@ -29,4 +29,4 @@ class Thumbnails {
     }
 }
 
-export default Thumbnails;
+export default Thumbnails;