optimize thumbnails and bar-time in mobile

Author: DIYgod

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dplayer",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "description": "Wow, such a lovely HTML5 danmaku video player",
   "main": "dist/DPlayer.min.js",
   "style": "dist/DPlayer.min.css",

src/css/player.scss

@@ -140,15 +140,20 @@
         width: 100%;
         height: 100%;
     }
-    &.dplayer-mobile .dplayer-controller .dplayer-icons {
-        .dplayer-volume,
-        .dplayer-camera-icon {
-            display: none;
+    &.dplayer-mobile {
+        .dplayer-controller .dplayer-icons {
+            .dplayer-volume,
+            .dplayer-camera-icon {
+                display: none;
+            }
+            .dplayer-full .dplayer-full-in-icon {
+                position: static;
+                display: inline-block;
+            }
         }
 
-        .dplayer-full .dplayer-full-in-icon {
-            position: static;
-            display: inline-block;
+        .dplayer-bar-time {
+            display: none;
         }
     }
 }

src/js/controller.js

@@ -105,26 +105,37 @@ class Controller {
                     return;
                 }
                 const time = this.player.video.duration * (tx / this.player.template.playedBarWrap.offsetWidth);
+                if (utils.isMobile) {
+                    this.thumbnails && this.thumbnails.show();
+                }
                 this.thumbnails && this.thumbnails.move(tx);
                 this.player.template.playedBarTime.style.left = `${(tx - 20)}px`;
                 this.player.template.playedBarTime.innerText = utils.secondToTime(time);
                 this.player.template.playedBarTime.classList.remove('hidden');
             }
         });
 
-        this.player.template.playedBarWrap.addEventListener('mouseenter', () => {
-            if (this.player.video.duration) {
-                this.thumbnails && this.thumbnails.show();
-                this.player.template.playedBarTime.classList.remove('hidden');
-            }
-        });
-
-        this.player.template.playedBarWrap.addEventListener('mouseleave', () => {
-            if (this.player.video.duration) {
+        this.player.template.playedBarWrap.addEventListener(utils.nameMap.dragEnd, () => {
+            if (utils.isMobile) {
                 this.thumbnails && this.thumbnails.hide();
-                this.player.template.playedBarTime.classList.add('hidden');
             }
         });
+
+        if (!utils.isMobile) {
+            this.player.template.playedBarWrap.addEventListener('mouseenter', () => {
+                if (this.player.video.duration) {
+                    this.thumbnails && this.thumbnails.show();
+                    this.player.template.playedBarTime.classList.remove('hidden');
+                }
+            });
+
+            this.player.template.playedBarWrap.addEventListener('mouseleave', () => {
+                if (this.player.video.duration) {
+                    this.thumbnails && this.thumbnails.hide();
+                    this.player.template.playedBarTime.classList.add('hidden');
+                }
+            });
+        }
     }
 
     initFullButton () {