[5.4.7] Fix some style conflict

moefront · Oct 15, 2017 · ab7adf7 · ab7adf7
1 parent 9bad0b8
commit ab7adf7
Show file tree

Hide file tree

Showing 13 changed files with 175 additions and 386 deletions.
diff --git a/README.md b/README.md
@@ -100,6 +100,11 @@ Firstly, import **./dist/assets/muse-player.js** to your own page (Stylesheet ha
 <script type="text/javascript" src="./dist/assets/muse-player.js"></script>
 ```
 
+We recommend that you import ```muse-player.js``` from unpkg, where you can get the latest version of MUSE:
+```javascript
+<script src="https://unpkg.com/muse-player@5.4.6/dist/assets/muse-player.js" type="text/javascript"></script>
+```
+
 Secondly, use ```MUSE.render()``` method to render player to your page.
 
 > PS: If you are migrating from YMPlayer 4 to MUSE, pay attention that the method of using custom tag to render player has been removed. But you can still use ```MUSE.render()``` or ```YMPlayer.render()``` to render a player:

diff --git a/dist/assets/muse-player-preact.js b/dist/assets/muse-player-preact.js
diff --git a/dist/assets/muse-player-react-lite.js b/dist/assets/muse-player-react-lite.js
diff --git a/dist/assets/muse-player.js b/dist/assets/muse-player.js
diff --git a/dist/index.html b/dist/index.html
@@ -44,6 +44,9 @@
     }
 
     #header h1 {
+      height: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
       text-align: center;
       margin: 0px;
       font-size: 30px;
@@ -62,6 +65,10 @@
       font-size: 14px;
       text-align: center;
     }
+
+    @media screen and (max-width: 640px) {
+      .github { display: none;  }
+    }
   </style>
 </head>
 <body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "muse-player",
-  "version": "5.4.6",
+  "version": "5.4.7",
   "description": "Just a simple and dilligent HTML5 Audio Player written in React.",
   "main": "dist/assets/muse-player.js",
   "scripts": {
@@ -11,11 +11,10 @@
     "serve": "node server.js --env=dev",
     "serve:dist": "node server.js --env=dist",
     "serve:react-lite": "node server.js --env=react-lite",
-    "serve:preact": "node server.js --env=preact",
     "dist": "npm run copy & webpack --env=dist",
     "dist:react-lite": "webpack --env=react-lite",
     "dist:preact": "webpack --env=preact",
-    "dist:all": "npm run dist:react-lite & npm run dist:preact & npm run dist",
+    "dist:all": "npm run dist:react-lite & npm run dist",
     "lint": "eslint ./src",
     "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./src/example.js ./dist",
     "clean": "rimraf dist/*",
@@ -51,12 +50,12 @@
     "bower-webpack-plugin": "^0.1.9",
     "chai": "^4.1.1",
     "copyfiles": "^1.0.0",
-    "coveralls": "^2.13.1",
+    "coveralls": "^3.0.0",
     "css-loader": "^0.28.5",
-    "eslint": "^4.7.0",
+    "eslint": "^4.9.0",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-react": "^7.4.0",
-    "file-loader": "^0.11.2",
+    "file-loader": "^1.1.5",
     "glob": "^7.0.0",
     "isparta-instrumenter-loader": "^1.0.0",
     "karma": "^1.0.0",
@@ -66,31 +65,31 @@
     "karma-mocha": "^1.0.0",
     "karma-mocha-reporter": "^2.2.4",
     "karma-sourcemap-loader": "^0.3.5",
-    "karma-webpack": "^2.0.4",
+    "karma-webpack": "^2.0.5",
     "minimist": "^1.2.0",
-    "mocha": "^3.5.3",
+    "mocha": "^4.0.1",
     "null-loader": "^0.1.1",
     "open": "0.0.5",
     "react-addons-test-utils": "^15.6.2",
-    "react-hot-loader": "^v3.0.0-beta.6",
+    "react-hot-loader": "^3.0.0",
     "rimraf": "^2.6.2",
-    "style-loader": "^0.18.2",
+    "style-loader": "^0.19.0",
     "stylus-loader": "^3.0.1",
-    "url-loader": "^0.5.6",
-    "webpack": "^3.6.0",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.7.1",
     "webpack-bundle-analyzer": "^2.8.2",
-    "webpack-dev-server": "^2.8.2"
+    "webpack-dev-server": "^2.9.1"
   },
   "dependencies": {
     "core-js": "^2.0.0",
-    "mobx": "^3.2.2",
-    "mobx-react": "^4.2.2",
+    "mobx": "^3.3.1",
+    "mobx-react": "^4.3.3",
     "normalize.css": "^7.0.0",
     "preact": "^8.2.5",
     "preact-compat": "^3.17.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-lite": "^0.15.38",
+    "react-lite": "^0.15.39",
     "stylus": "^0.54.5"
   }
 }
diff --git a/src/config/base.js b/src/config/base.js
@@ -2,5 +2,5 @@
 
 // Settings configured here will be merged into the final config object.
 export default {
-	MUSE_VERSION: '5.4.6'
+	MUSE_VERSION: '5.4.7'
 }
diff --git a/src/containers/DevToolsContainer.js b/src/containers/DevToolsContainer.js
diff --git a/src/containers/DrawerContainer.js b/src/containers/DrawerContainer.js
@@ -263,7 +263,7 @@ export default class DrawerContainer extends Component {
         this.setTransform(transf);
       }
       // respond API
-      if (index != -1) {
+      if (index != -1 && refs[index]) {
         applyMiddleware('onLyricUpdate', instance, {
           timeline: refs[index].props.timeline,
           text: refs[index].props.text,

diff --git a/src/index.html b/src/index.html
@@ -44,6 +44,9 @@
     }
 
     #header h1 {
+      height: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
       text-align: center;
       margin: 0px;
       font-size: 30px;
@@ -62,6 +65,10 @@
       font-size: 14px;
       text-align: center;
     }
+
+    @media screen and (max-width: 640px) {
+      .github { display: none;  }
+    }
   </style>
 </head>
 <body>

diff --git a/src/layouts/landscape/landscape.styl b/src/layouts/landscape/landscape.styl
@@ -140,6 +140,11 @@ fullscreen() {
 		}
 	}
 
+	// conflict wth default layout
+	.muse-drawer .muse-drawer__state-playlist-active {
+		transform(translateX(0px));
+	}	
+
 	/* Responsive */
 	&[responsive='650px'] {
 		.muse-drawer {
@@ -153,7 +158,7 @@ fullscreen() {
 		.muse-drawer__playList, .muse-drawer__lyric {
 			width: 50%;
 		}
-	}
+	}	
 }
 
 /* fullscreen related */

diff --git a/src/styles/default.styl b/src/styles/default.styl
@@ -35,10 +35,11 @@ fullscreen() {
 .muse-player.muse-layout-default {
   width: 320px;
   height: (320 / 9) * 14px;
+  max-width: 100%;
 
   overflow: hidden;
-  border-radius: 8px;
-  box-shadow: 0 3px 8px #666;
+  border-radius: 4px;
+  box-shadow: 0 3px 6px #666;
 
   position: relative;
 }
@@ -144,7 +145,8 @@ Y8P 888  888  888  "Y88888  88888P'  "Y8888          "Y8888P "Y88P"  888  888  "
     position: absolute;
     bottom: 0px;
     right: 0px;
-
+
+    font-size: 1rem !important;
     padding: 0px 10px;
 
     .muse-btn__play {
@@ -159,6 +161,7 @@ Y8P 888  888  888  "Y88888  88888P'  "Y8888          "Y8888P "Y88P"  888  888  "
       border-radius: 50%;
       cursor: pointer;
       outline: none;
+      padding: 0px
 
       transition(.5s all ease-in-out);
 
@@ -588,7 +591,7 @@ Y8P 888  888  888  "Y88888  88888P'  "Y8888          "Y88888 888    "Y888888  "Y
 }
 
 .muse-player.muse-layout-default[data-length='1'] {
-  .muse-btn__playlist {
+  .muse-btn__playlist, .muse-selector {
     display: none;
   }
 }