Mobile optimzation

demo/index.html

@@ -95,12 +95,8 @@ <h1>cPlayer DEMO</h1>
         add163(cp,27669789);
         add163(cp,691504);
         add163(cp,20744075);
-        add163(cp,412951925);/*
-        add163(cp,38574225);
-        add163(cp,34072418);
-        add163(cp,32102072);
-        add163(cp,766471);*/
-        setTimeout(function(){location.reload()},60*30*1000);
+        add163(cp,412951925);
+        //setTimeout(function(){location.reload()},60*30*1000);
         addEventListener("keypress",function(e){if(e.keyCode===13)cp.__LIST__.toggle.click()})
     </script>
 </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cPlayer",
-  "version": "2.5.000",
+  "version": "2.5.001",
   "description": "A beautiful and clean WEB Music Player by HTML5.",
   "main": "dist/cplayer.js",
   "types": "declaration/cplayer.d.ts",

src/js/cplayer.ts

@@ -93,6 +93,7 @@ class cPlayer extends cEmitter {
 			"volumeBody": this.CBASE.getByClass("volume-body"),
 			"volumeLine": this.CBASE.getByClass("volume-line"),
 			"volumePoint": this.CBASE.getByClass("volume-point"),
+			"volume": this.CBASE.getByClass("volume"),
 			"listPower": this.CBASE.getByClass("list-power"),
 			"list": this.CBASE.getByClass("list"),
 			"listBody": this.CBASE.getByTagName("list-body")
@@ -125,16 +126,12 @@ class cPlayer extends cEmitter {
 				},
 				2: {
 					get: () => {
-						return options.target === that.__LIST__.timePoint
-							|| options.target === that.__LIST__.volumePoint
-							|| options.target === that.__LIST__.timeBody
+						return options.target === that.__LIST__.timeBody
 							|| options.target === that.__LIST__.volumeBody
-							|| options.target === that.__LIST__.timeLine
-							|| options.target === that.__LIST__.volumeLine
 					}
 				}
 			});
-			if (!rightTarget[2]) return;//Warning!!! rightTarget[2] checks if mouse focus on the percentage.
+			if (!(rightTarget[2] || rightTarget[1] || rightTarget[0])) return;//Warning!!! rightTarget[2] checks if mouse focus on the percentage.
 			that.dragging.contain = true;
 			that.dragging.target = <HTMLElement>options.target;
 			let mover = function (options: MouseEvent) {
@@ -210,6 +207,10 @@ class cPlayer extends cEmitter {
 				this.hideList();
 			}
 		}).on("clickVolumePower", () => {
+			if (window.innerWidth < 600) {
+				(<HTMLElement>this.__LIST__.volume.parentElement).classList.toggle("hover");
+				return;
+			}
 			if (this.isMuted()) {
 				this.music.muted = false;
 			} else {

src/scss/cplayer.scss

@@ -219,6 +219,23 @@ c-player{
 			@media screen and (max-width: 600px) {
 				&{
 					flex:1;
+					.volume{
+						width:auto !important;
+						.volume-body{visibility: hidden!important}
+					}
+				}
+				&.hover{
+					.list-button,
+					.lyric-button{
+						display:none;
+					}
+					.volume-body{
+						width:100% !important;
+						visibility: visible !important;
+					}
+					.volume{
+						width:100% !important;
+					}
 				}
 			}
 			display:flex;
@@ -240,11 +257,6 @@ c-player{
 					transition: width 0.2s;
 				}
 				&:hover,&:active{
-					@media screen and (max-width: 800px) {
-						&{
-							width:100% !important;
-						}
-					}
 					width:12em;
 					.volume-body{
 						visibility: visible;
@@ -323,8 +335,6 @@ c-player{
 			.music-name{
 				flex:1;
 			}
-			.music-artist{
-			}
 		}
 	}
 }