[5.3.8] onLyricUpdate API, version checker, some changes.

README.md

@@ -1,16 +1,19 @@
-<h1 align="center">MUSE</h1>
+<h1 align="center">
+	<img src="favicon.png" alt="MUSE" />
+</h1>
 
 [![Build Status](https://travis-ci.org/moefront/muse.svg?branch=master)](https://travis-ci.org/moefront/muse)
 [![Coverage Status](https://coveralls.io/repos/github/moefront/muse/badge.svg?branch=master)](https://coveralls.io/github/moefront/muse?branch=master)
 [![npm](https://img.shields.io/npm/v/muse-player.svg?style=flat)]()
+![npm download](https://img.shields.io/npm/dm/muse-player.svg)
 [![devDependencies](https://img.shields.io/david/dev/moefront/muse.svg?style=flat)]()
 [![license](https://img.shields.io/github/license/moefront/muse.svg?style=flat)]()
 ![built by](https://img.shields.io/badge/built_by-MoeFront-ff69b4.svg)
 
 
 MUSE is a simple and diligent HTML5 audio player made with ❤ :)
 
-[中文文档](https://github.com/moefront/muse/wiki) [Old version](https://github.com/moefront/muse/tree/v4-legacy)
+[中文文档](https://github.com/moefront/muse/wiki/MUSE-5:-Getting-Start) / [Redux build](https://github.com/moefront/muse/tree/v5-redux) / [Old version](https://github.com/moefront/muse/tree/v4-legacy)
 
 ## Demo
 
@@ -99,6 +102,21 @@ MUSE.render([{
 
 ---
 
+### Generating music JSON from Netease Cloud Music automatically
+
+First have ```muse-json-generator``` installed. You can install it from npm. Also you should know the music's Netease Cloud Music ID that you want to add.
+
+```shell
+$ npm install -g muse-json-generator
+$ muse 2333666 id1 id2 ...
+```
+
+Then you will find a ```playlist.json``` on your workspace, which contains the detials(title, artist, lyric, cover, src, translation) of your target.
+
+For more detail, see https://github.com/moefront/muse-json-generator .
+
+---
+
 ### Using MUSE in your own project
 
 ---
@@ -161,6 +179,7 @@ Projects related to MUSE below can help you construct MUSE Player on your site e
 
  - **muse-json-generator** by [@kokororin](https;//github.com/kokororin): https://github.com/moefront/muse-json-generator
  - **typecho-plugin-ymplayer** by [@kokororin](https;//github.com/kokororin): https://github.com/kokororin/typecho-plugin-ymplayer
+ - **muse-plugin-desktop-lyric**: https://github.com/kirainmoe/muse-plugin-desktop-lyric
 
 ## Troubleshooting
 
@@ -182,13 +201,10 @@ You can find a detailed documentation about APIs, methods, specification, etc. o
 --- | --- | --- | --- | --- |
 IE 10+ ✔ | Chrome 24.0+ ✔ | Firefox 24.0+ ✔ | Opera 15.0+ ✔ | Safari 7.0+ ✔ |
 
-## What's not working
-
-Currently everything is OK on my dev environment.
-
 ## Todo list
 
- - [ ] Custom layouts full support
+ - [x] Custom layouts full support
+ - [ ] Documents for developing (plugins, themes...)
 
 ## License
 

dist/index.html

@@ -6,9 +6,6 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
-  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css">
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
   <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
   <style type="text/css">
     html, body {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "muse-player",
-  "version": "5.3.7",
+  "version": "5.3.8",
   "description": "Just a simple and dilligent HTML5 Audio Player written in React.",
   "main": "dist/assets/muse-player.js",
   "scripts": {

src/config/base.js

@@ -2,5 +2,5 @@
 
 // Settings configured here will be merged into the final config object.
 export default {
-	MUSE_VERSION: '5.3.7'
+	MUSE_VERSION: '5.3.8'
 }

src/containers/DrawerContainer.js

@@ -16,7 +16,7 @@ import { observer } from 'mobx-react';
 // Container
 import LyricItemContainer from './LyricItemContainer';
 // Utils
-import { lyricParser, classifier } from '../utils';
+import { lyricParser, classifier, applyMiddleware } from '../utils';
 // icons
 import { LyricToggler, PlayListToggler } from '../sources/icons';
 
@@ -172,14 +172,16 @@ export default class DrawerContainer extends Component {
     */
   synchronizeLyric(obj) {
     const { currentTime } = obj,
-      { offset } = this.props.store,
+      { offset, instance } = this.props.store,
       refs = this.state.lrcComponents;
     let current = currentTime + offset, // fix timeline offset
       index = Number(this.lrcContainer.getAttribute('data-current-index'));
     if (index >= refs.length) {
       index = 0; // reset index
     }
 
+    const prevIndex = index;
+
     if (
       this.state.lrcComponents == null ||
       this.state.lrcComponents.length == 0
@@ -235,29 +237,39 @@ export default class DrawerContainer extends Component {
 
     index = Number(this.lrcContainer.getAttribute('data-current-index'));
 
-    // remove active element class
-    let currentActive = this.lrcContainer.querySelector(
-      '.muse-lyric__item.muse-lyric__state-active'
-    ),
-      nextActive = this.lrcContainer.querySelector(
-        '.muse-lyric__item[data-lyric-item-id="' + index + '"]'
-      );
-    if (currentActive)
-      classifier.remove(currentActive, 'muse-lyric__state-active');
-
-    if (index != -1 && nextActive != null) {
-      classifier.add(nextActive, 'muse-lyric__state-active');
-      // change container position
-      let boxHeight = this.lrcContainer.offsetHeight,
-        targetOffset =
-          nextActive.offsetTop -
-          Math.abs(boxHeight - nextActive.offsetHeight) / 2;
-      if (targetOffset < 0) {
-        targetOffset = 0;
-      }
+    if (prevIndex != index) {
+      // remove active element class
+      let currentActive = this.lrcContainer.querySelector(
+        '.muse-lyric__item.muse-lyric__state-active'
+      ),
+        nextActive = this.lrcContainer.querySelector(
+          '.muse-lyric__item[data-lyric-item-id="' + index + '"]'
+        );
+      if (currentActive)
+        classifier.remove(currentActive, 'muse-lyric__state-active');
+
+      if (index != -1 && nextActive != null) {
+        classifier.add(nextActive, 'muse-lyric__state-active');
+        // change container position
+        let boxHeight = this.lrcContainer.offsetHeight,
+          targetOffset =
+            nextActive.offsetTop -
+            Math.abs(boxHeight - nextActive.offsetHeight) / 2;
+        if (targetOffset < 0) {
+          targetOffset = 0;
+        }
 
-      let transf = String(targetOffset + 'px');
-      this.setTransform(transf);
+        let transf = String(targetOffset + 'px');
+        this.setTransform(transf);
+      }
+      // respond API
+      if (index != -1) {
+        applyMiddleware('onLyricUpdate', instance, {
+          timeline: refs[index].props.timeline,
+          text: refs[index].props.text,
+          translation: refs[index].props.translation
+        });
+      }
     }
   }
 

src/containers/MenuContainer.js

@@ -139,8 +139,10 @@ export default class MenuContainer extends Component {
       isFullscreen,
       volume,
       playRate,
-      offset
+      offset,
+      parent
     } = this.props.store;
+
     return (
       <div
         className={'muse-menu' + (!isMenuOpen ? ' muse-menu__state-close' : '')}
@@ -241,10 +243,14 @@ export default class MenuContainer extends Component {
         <div
           className={'muse-menu__item'}
           onClick={() => {
-            window.open('https://github.com/moefront/MUSE');
+            window.open('https://github.com/moefront/muse');
           }}
         >
-          <span>MUSE Player ver.{config.MUSE_VERSION}</span>
+          <span>
+            {config.MUSE_VERSION != parent.latest
+              ? '发现新版本：MUSE ' + parent.latest
+              : 'MUSE Player ver.' + config.MUSE_VERSION}
+          </span>
         </div>
       </div>
     );