From 2f039e75aab6fac27a545e9c67249c69c232f3fa Mon Sep 17 00:00:00 2001 From: haibao Date: Mon, 30 Oct 2017 10:17:56 +0800 Subject: [PATCH 1/2] using the new version grammar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 更新所有包到最新版本，并修改代码为最新webpack和react的语法 --- app/components/header.js | 18 ++++ .../logo.less => components/header.less} | 0 app/{final => }/components/listItem.js | 17 ++-- app/{final => }/components/listitem.less | 6 +- app/{final => }/components/progress.js | 21 ++--- app/{final => }/components/progress.less | 0 app/{final => }/config/config.js | 0 app/final/components/logo.js | 15 ---- app/final/index.js | 24 ----- app/final/page/list.js | 24 ----- app/helloworld/Root.js | 25 ------ app/helloworld/components/button.js | 23 ----- app/{helloworld => }/index.js | 19 ++-- app/index.tpl.html | 4 +- app/page/list.js | 30 +++++++ app/{final => }/page/player.js | 64 ++++++------- app/{final => }/page/player.less | 15 +++- app/playmusic/Root.js | 49 ---------- app/playmusic/components/progress.js | 13 --- app/playmusic/index.js | 24 ----- app/{final/Root.js => root.js} | 90 ++++++++++--------- app/router/Root.js | 71 --------------- app/router/components/listItem.js | 24 ----- app/router/components/listitem.less | 37 -------- app/router/components/logo.js | 15 ---- app/router/components/logo.less | 6 -- app/router/components/progress.js | 13 --- app/router/config/config.js | 40 --------- app/router/index.js | 24 ----- app/router/page/list.js | 23 ----- app/router/page/player.js | 38 -------- app/{final => }/utils/util.js | 0 package.json | 58 ++++++------ webpack.config.js | 13 ++- webpack.production.config.js | 11 +-- 35 files changed, 217 insertions(+), 637 deletions(-) create mode 100644 app/components/header.js rename app/{final/components/logo.less => components/header.less} (100%) rename app/{final => }/components/listItem.js (75%) mode change 100644 => 100755 rename app/{final => }/components/listitem.less (91%) mode change 100644 => 100755 rename app/{final => }/components/progress.js (72%) mode change 100644 => 100755 rename app/{final => }/components/progress.less (100%) mode change 100644 => 100755 rename app/{final => }/config/config.js (100%) mode change 100644 => 100755 delete mode 100644 app/final/components/logo.js delete mode 100644 app/final/index.js delete mode 100644 app/final/page/list.js delete mode 100644 app/helloworld/Root.js delete mode 100644 app/helloworld/components/button.js rename app/{helloworld => }/index.js (51%) mode change 100644 => 100755 app/index.tpl.html create mode 100755 app/page/list.js rename app/{final => }/page/player.js (76%) mode change 100644 => 100755 rename app/{final => }/page/player.less (75%) mode change 100644 => 100755 delete mode 100644 app/playmusic/Root.js delete mode 100644 app/playmusic/components/progress.js delete mode 100644 app/playmusic/index.js rename app/{final/Root.js => root.js} (67%) delete mode 100644 app/router/Root.js delete mode 100644 app/router/components/listItem.js delete mode 100644 app/router/components/listitem.less delete mode 100644 app/router/components/logo.js delete mode 100644 app/router/components/logo.less delete mode 100644 app/router/components/progress.js delete mode 100644 app/router/config/config.js delete mode 100644 app/router/index.js delete mode 100644 app/router/page/list.js delete mode 100644 app/router/page/player.js rename app/{final => }/utils/util.js (100%) mode change 100644 => 100755 mode change 100644 => 100755 webpack.config.js mode change 100644 => 100755 webpack.production.config.js diff --git a/app/components/header.js b/app/components/header.js new file mode 100644 index 0000000..3b688a0 --- /dev/null +++ b/app/components/header.js @@ -0,0 +1,18 @@ +import React from 'react' +import './header.less' + +class Header extends React.Component { + constructor(props) { + super(props); + } + render() { + return ( +
+ +

React Music Player

+
+ ) + } +} + +export default Header; \ No newline at end of file diff --git a/app/final/components/logo.less b/app/components/header.less similarity index 100% rename from app/final/components/logo.less rename to app/components/header.less diff --git a/app/final/components/listItem.js b/app/components/listItem.js old mode 100644 new mode 100755 similarity index 75% rename from app/final/components/listItem.js rename to app/components/listItem.js index 852804c..a1d3a06 --- a/app/final/components/listItem.js +++ b/app/components/listItem.js @@ -1,15 +1,18 @@ import React from 'react'; -require('./listitem.less'); -let PubSub = require('pubsub-js'); +import './listitem.less'; +import PubSub from 'pubsub-js'; -let ListItem = React.createClass({ - deleteHandler(item, event) { +class ListItem extends React.Component { + constructor(props) { + super(props); + } + deleteHandler(item, event) { event.stopPropagation(); PubSub.publish('DEL_MUSIC', item); - }, + } playMusic(item, e) { PubSub.publish('PLAY_MUSIC', item); - }, + } render() { let item = this.props.data; return ( @@ -19,6 +22,6 @@ let ListItem = React.createClass({ ); } -}); +} export default ListItem; diff --git a/app/final/components/listitem.less b/app/components/listitem.less old mode 100644 new mode 100755 similarity index 91% rename from app/final/components/listitem.less rename to app/components/listitem.less index 8393c72..9fa61f9 --- a/app/final/components/listitem.less +++ b/app/components/listitem.less @@ -1,8 +1,8 @@ .components-listitem { - height: 36px; - line-height: 36px; + height: 40px; + line-height: 40px; border-bottom: 1px solid #ddd; - text-indent: 10px; + text-indent: 15px; cursor: pointer; .delete { cursor: pointer; diff --git a/app/final/components/progress.js b/app/components/progress.js old mode 100644 new mode 100755 similarity index 72% rename from app/final/components/progress.js rename to app/components/progress.js index 51f741d..e7a379f --- a/app/final/components/progress.js +++ b/app/components/progress.js @@ -1,24 +1,25 @@ import React from 'react'; -require('./progress.less'); +import './progress.less'; -let Progress = React.createClass({ - getDefaultProps() { - return { - barColor: '#2f9842' - } - }, +class Progress extends React.Component { + constructor (props) { + super(props); + } changeProgress(e) { let progressBar = this.refs.progressBar; let progress = (e.clientX - progressBar.getBoundingClientRect().left) / progressBar.clientWidth; this.props.onProgressChange && this.props.onProgressChange(progress); - }, + } render() { return ( -
+
); } -}); +} +Progress.defaultProps = { + barColor: '#2f9842' +} export default Progress; diff --git a/app/final/components/progress.less b/app/components/progress.less old mode 100644 new mode 100755 similarity index 100% rename from app/final/components/progress.less rename to app/components/progress.less diff --git a/app/final/config/config.js b/app/config/config.js old mode 100644 new mode 100755 similarity index 100% rename from app/final/config/config.js rename to app/config/config.js diff --git a/app/final/components/logo.js b/app/final/components/logo.js deleted file mode 100644 index 4fe731b..0000000 --- a/app/final/components/logo.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -require('./logo.less'); - -let Logo = React.createClass({ - render() { - return ( -
- -

Music Player Build By React

-
- ); - } -}); - -export default Logo; diff --git a/app/final/index.js b/app/final/index.js deleted file mode 100644 index ef6f229..0000000 --- a/app/final/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { render } from 'react-dom'; -import { AppContainer } from 'react-hot-loader'; -import Root from './Root'; - - -render( - - - , - document.getElementById('root') -); - -if (module.hot) { - module.hot.accept('./Root', () => { - const NewRoot = require('./Root').default; - render( - - - , - document.getElementById('root') - ); - }); -} diff --git a/app/final/page/list.js b/app/final/page/list.js deleted file mode 100644 index 2f4078b..0000000 --- a/app/final/page/list.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { MUSIC_LIST } from '../config/config'; -import ListItem from '../components/listitem'; - -let List = React.createClass({ - render() { - let Items = this.props.musicList.map((item) => { - return ( - - ); - }); - return ( - - ); - } -}); - -export default List; diff --git a/app/helloworld/Root.js b/app/helloworld/Root.js deleted file mode 100644 index c641d2f..0000000 --- a/app/helloworld/Root.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import Button from './components/button'; - -let Root = React.createClass({ - getInitialState() { - return { - count: 0 - } - }, - counterHandler() { - this.setState({ - count: this.state.count + 1 - }); - }, - render() { - return ( -
-

hello world，welcome to the React lesson~

- -
- ); - } -}); - -export default Root; diff --git a/app/helloworld/components/button.js b/app/helloworld/components/button.js deleted file mode 100644 index 6fd4fb7..0000000 --- a/app/helloworld/components/button.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -let Button = React.createClass({ - getInitialState() { - return { - count: 0 - } - }, - counterHandler() { - this.setState({ - count: this.state.count + 1 - }); - }, - render() { - return ( -
- -
- ); - } -}); - -export default Button; diff --git a/app/helloworld/index.js b/app/index.js similarity index 51% rename from app/helloworld/index.js rename to app/index.js index ef6f229..8744a50 100644 --- a/app/helloworld/index.js +++ b/app/index.js @@ -1,19 +1,18 @@ -import React from 'react'; -import { render } from 'react-dom'; -import { AppContainer } from 'react-hot-loader'; -import Root from './Root'; - +import React from 'react' +import { render } from 'react-dom' +import { AppContainer } from 'react-hot-loader' +import Root from './root' render( , document.getElementById('root') -); +) -if (module.hot) { - module.hot.accept('./Root', () => { - const NewRoot = require('./Root').default; +if(module.hot) { + module.hot.accept('./root', () => { + const NewRoot = require('./root').default; render( @@ -21,4 +20,4 @@ if (module.hot) { document.getElementById('root') ); }); -} +} \ No newline at end of file diff --git a/app/index.tpl.html b/app/index.tpl.html old mode 100644 new mode 100755 index a358ea1..5a8df88 --- a/app/index.tpl.html +++ b/app/index.tpl.html @@ -7,8 +7,8 @@ - - + + diff --git a/app/page/list.js b/app/page/list.js new file mode 100755 index 0000000..00827ae --- /dev/null +++ b/app/page/list.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { MUSIC_LIST } from '../config/config'; +import ListItem from '../components/listitem'; + +class List extends React.Component { + constructor(props) { + super(props); + } + render() { + let Items = null; + if(this.props.musicList) { + Items = this.props.musicList.map((item) => { + return ( + + ); + }); + } + return ( +
    + { Items } +
+ ); + } +} + +export default List; diff --git a/app/final/page/player.js b/app/page/player.js old mode 100644 new mode 100755 similarity index 76% rename from app/final/page/player.js rename to app/page/player.js index f5245be..9621485 --- a/app/final/page/player.js +++ b/app/page/player.js @@ -1,12 +1,21 @@ import React from 'react'; import Progress from '../components/progress'; -import { Link } from 'react-router'; -let PubSub = require('pubsub-js'); -require('./player.less'); +import { Link } from 'react-router-dom'; +import PubSub from 'pubsub-js'; +import './player.less'; let duration = null; -let Player = React.createClass({ +class Player extends React.Component { + constructor(props) { + super(props); + this.state = { + progress: 0, + volume: 0, + isPlay: true, + leftTime: '' + } + } componentDidMount() { $("#player").bind($.jPlayer.event.timeupdate, (e) => { duration = e.jPlayer.status.duration; @@ -16,26 +25,26 @@ let Player = React.createClass({ leftTime: this.formatTime(duration * (1 - e.jPlayer.status.currentPercentAbsolute / 100)) }); }); - }, + } componentWillUnmount() { $("#player").unbind($.jPlayer.event.timeupdate); - }, + } formatTime(time) { time = Math.floor(time); let miniute = Math.floor(time / 60); let seconds = Math.floor(time % 60); return miniute + ':' + (seconds < 10 ? '0' + seconds : seconds); - }, + } changeProgressHandler(progress) { $("#player").jPlayer("play", duration * progress); this.setState({ isPlay: true }); - }, + } changeVolumeHandler(progress) { $("#player").jPlayer("volume", progress); - }, + } play() { if (this.state.isPlay) { $("#player").jPlayer("pause"); @@ -45,32 +54,25 @@ let Player = React.createClass({ this.setState({ isPlay: !this.state.isPlay }); - }, + } next() { PubSub.publish('PLAY_NEXT'); - }, + } prev() { PubSub.publish('PLAY_PREV'); - }, + } changeRepeat() { PubSub.publish('CHANAGE_REPEAT'); - }, - getInitialState() { - return { - progress: 0, - volume: 0, - isPlay: true, - leftTime: '' - } - }, + } render() { + let {title, artist, cover} = this.props; return ( -
+

我的私人音乐坊 >

-

{this.props.currentMusitItem.title}

-

{this.props.currentMusitItem.artist}

+

{this.props.currentMusicItem.title}

+

{this.props.currentMusicItemartist}

-{this.state.leftTime}
@@ -78,7 +80,7 @@ let Player = React.createClass({
@@ -88,15 +90,15 @@ let Player = React.createClass({
- - - + + +
@@ -104,12 +106,12 @@ let Player = React.createClass({
- {this.props.currentMusitItem.title}/ + {this.props.currentMusicItem.title}/
); } -}); +} export default Player; diff --git a/app/final/page/player.less b/app/page/player.less old mode 100644 new mode 100755 similarity index 75% rename from app/final/page/player.less rename to app/page/player.less index 979b1fd..ffbc2cb --- a/app/final/page/player.less +++ b/app/page/player.less @@ -17,6 +17,11 @@ width: 180px; height: 180px; border-radius: 50%; + + &.playing { + animation: rotation 10s linear infinite; + -webkit-animation: rotation 10s linear infinite; + } } } .volume-container { @@ -61,5 +66,13 @@ .volume-wrapper { width: 60px; display: inline-block; - } + } + @keyframes rotation{ + from {transform: rotate(0deg);} + to {transform: rotate(360deg);} + } + @-webkit-keyframes rotation{ + from {-webkit-transform: rotate(0deg);} + to {-webkit-transform: rotate(360deg);} + } } \ No newline at end of file diff --git a/app/playmusic/Root.js b/app/playmusic/Root.js deleted file mode 100644 index 8af99e2..0000000 --- a/app/playmusic/Root.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import Progress from './components/progress'; - -let Root = React.createClass({ - componentDidMount() { - $("#player").jPlayer({ - ready: function () { - $(this).jPlayer("setMedia", { - mp3: "http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.mp3" - }).jPlayer('play'); - }, - supplied: "mp3", - wmode: "window", - useStateClassSkin: true - }); - $("#player").bind($.jPlayer.event.timeupdate, (e) => { - this.setState({ - progress: Math.round(e.jPlayer.status.currentTime) - }); - }); - }, - componentWillUnmout() { - $("#player").unbind($.jPlayer.event.timeupdate); - }, - getInitialState() { - return { - progress: 0 - } - }, - counterHandler() { - this.setState({ - count: this.state.count + 1 - }); - }, - render() { - return ( -
-

Welcome to the React lesson~

-

Let us play music

- - -
- ); - } -}); - -export default Root; diff --git a/app/playmusic/components/progress.js b/app/playmusic/components/progress.js deleted file mode 100644 index 0c7ca20..0000000 --- a/app/playmusic/components/progress.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -let Progress = React.createClass({ - render() { - return ( -

- 已播放：{this.props.progress}s -

- ); - } -}); - -export default Progress; diff --git a/app/playmusic/index.js b/app/playmusic/index.js deleted file mode 100644 index ef6f229..0000000 --- a/app/playmusic/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { render } from 'react-dom'; -import { AppContainer } from 'react-hot-loader'; -import Root from './Root'; - - -render( - - - , - document.getElementById('root') -); - -if (module.hot) { - module.hot.accept('./Root', () => { - const NewRoot = require('./Root').default; - render( - - - , - document.getElementById('root') - ); - }); -} diff --git a/app/final/Root.js b/app/root.js similarity index 67% rename from app/final/Root.js rename to app/root.js index 7f2baa0..b4fdb68 100644 --- a/app/final/Root.js +++ b/app/root.js @@ -1,16 +1,24 @@ -import React, { render } from 'react'; -import { Router, IndexRoute, Link, Route, browserHistory, hashHistory} from 'react-router'; +import React from 'react'; +import { HashRouter, Route, Switch } from 'react-router-dom'; import { MUSIC_LIST } from './config/config'; import { randomRange } from './utils/util'; -let PubSub = require('pubsub-js'); +import PubSub from 'pubsub-js'; -import PlayerPage from './page/player'; -import listPage from './page/list'; -import Logo from './components/logo' +import Header from './components/header'; +import Player from './page/player'; +import List from './page/list'; +class Root extends React.Component { + constructor(props) { + super(props); -let App = React.createClass({ - componentDidMount() { + this.state = { + musicList: MUSIC_LIST, + currentMusitItem: {}, + repeatType: 'cycle' + } + } + componentDidMount() { $("#player").jPlayer({ supplied: "mp3", wmode: "window", @@ -50,21 +58,14 @@ let App = React.createClass({ repeatType: repeatList[index] }); }); - }, + } componentWillUnmount() { PubSub.unsubscribe('PLAY_MUSIC'); PubSub.unsubscribe('DEL_MUSIC'); PubSub.unsubscribe('CHANAGE_REPEAT'); PubSub.unsubscribe('PLAY_NEXT'); PubSub.unsubscribe('PLAY_PREV'); - }, - getInitialState() { - return { - musicList: MUSIC_LIST, - currentMusitItem: {}, - repeatType: 'cycle' - } - }, + } playWhenEnd() { if (this.state.repeatType === 'random') { let index = this.findMusicIndex(this.state.currentMusitItem); @@ -78,7 +79,7 @@ let App = React.createClass({ } else { this.playNext(); } - }, + } playNext(type = 'next') { let index = this.findMusicIndex(this.state.currentMusitItem); if (type === 'next') { @@ -91,11 +92,11 @@ let App = React.createClass({ currentMusitItem: musicItem }); this.playMusic(musicItem); - }, + } findMusicIndex(music) { let index = this.state.musicList.indexOf(music); return Math.max(0, index); - }, + } playMusic(item) { $("#player").jPlayer("setMedia", { mp3: item.file @@ -103,28 +104,37 @@ let App = React.createClass({ this.setState({ currentMusitItem: item }); - }, + } render() { + let value = this.state; + + const Home = () => ( + + ); + + const musicList = () => ( + + ); + return ( -
- - {React.cloneElement(this.props.children, this.state)} -
+ +
+
+ + + + + +
+ ); } -}); - -let Root = React.createClass({ - render() { - return ( - - - - - - - ); - } -}); +} -export default Root; +export default Root; \ No newline at end of file diff --git a/app/router/Root.js b/app/router/Root.js deleted file mode 100644 index 87ba954..0000000 --- a/app/router/Root.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, { render } from 'react'; -import { Router, IndexRoute, Link, Route, browserHistory, hashHistory} from 'react-router'; -import { MUSIC_LIST } from './config/config'; -let PubSub = require('pubsub-js'); - -import PlayerPage from './page/player'; -import listPage from './page/list'; -import Logo from './components/logo' - - -let App = React.createClass({ - componentDidMount() { - $("#player").jPlayer({ - supplied: "mp3", - wmode: "window", - useStateClassSkin: true - }); - this.playMusic(MUSIC_LIST[0]); - PubSub.subscribe('PLAY_MUSIC', (msg, item) => { - this.playMusic(item); - }); - PubSub.subscribe('DEL_MUSIC', (msg, item) => { - this.setState({ - musicList: this.state.musicList.filter((music) => { - return music !== item; - }) - }); - }); - }, - componentWillUnmount() { - PubSub.unsubscribe('PLAY_MUSIC'); - PubSub.unsubscribe('DEL_MUSIC'); - }, - getInitialState() { - return { - musicList: MUSIC_LIST, - currentMusitItem: {} - } - }, - playMusic(item) { - $("#player").jPlayer("setMedia", { - mp3: item.file - }).jPlayer('play'); - this.setState({ - currentMusitItem: item - }); - }, - render() { - return ( -
- - {React.cloneElement(this.props.children, {musicList: this.state.musicList, currentMusitItem: this.state.currentMusitItem})} -
- ); - } -}); - -let Root = React.createClass({ - render() { - return ( - - - - - - - ); - } -}); - -export default Root; diff --git a/app/router/components/listItem.js b/app/router/components/listItem.js deleted file mode 100644 index 381f9f7..0000000 --- a/app/router/components/listItem.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -require('./listitem.less'); -let PubSub = require('pubsub-js'); - -let ListItem = React.createClass({ - deleteHandler(item, event) { - event.stopPropagation(); - PubSub.publish('DEL_MUSIC', item); - }, - playMusic(item, e) { - PubSub.publish('PLAY_MUSIC', item); - }, - render() { - let item = this.props.data; - return ( -
  • -

    {item.title} - {item.artist}

    -

    -
    • - ); - } -}); - -export default ListItem; diff --git a/app/router/components/listitem.less b/app/router/components/listitem.less deleted file mode 100644 index fab08f1..0000000 --- a/app/router/components/listitem.less +++ /dev/null @@ -1,37 +0,0 @@ -.components-listitem { - height: 36px; - line-height: 36px; - border-bottom: 1px solid #ddd; - text-indent: 10px; - cursor: pointer; - .delete { - cursor: pointer; - height: 30px; - width: 30px; - top: 3px; - position: relative; - transform: rotate(45deg); - margin-right: 15px; - &::before, &::after{ - content: ''; - display: block; - background: #666; - position: absolute; - } - &::before { - width: 100%; - height: 1px; - top: 14px; - left: 0; - } - &::after { - height: 100%; - width: 1px; - left: 15px; - top: 0; - } - } -} -.components-listitem:hover { - background: #eee; -} \ No newline at end of file diff --git a/app/router/components/logo.js b/app/router/components/logo.js deleted file mode 100644 index 4fe731b..0000000 --- a/app/router/components/logo.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -require('./logo.less'); - -let Logo = React.createClass({ - render() { - return ( -
    - -

    Music Player Build By React

    -
    - ); - } -}); - -export default Logo; diff --git a/app/router/components/logo.less b/app/router/components/logo.less deleted file mode 100644 index 44f516d..0000000 --- a/app/router/components/logo.less +++ /dev/null @@ -1,6 +0,0 @@ -.components-logo { - .caption { - font-size: 20px; - text-indent: 20px; - } -} \ No newline at end of file diff --git a/app/router/components/progress.js b/app/router/components/progress.js deleted file mode 100644 index 0c7ca20..0000000 --- a/app/router/components/progress.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -let Progress = React.createClass({ - render() { - return ( -

    - 已播放：{this.props.progress}s -

    - ); - } -}); - -export default Progress; diff --git a/app/router/config/config.js b/app/router/config/config.js deleted file mode 100644 index 287e023..0000000 --- a/app/router/config/config.js +++ /dev/null @@ -1,40 +0,0 @@ -export const MUSIC_LIST = [ - { - id: 1, - title: '天使中的魔鬼', - artist: '田馥甄', - file: 'http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.mp3', - cover: 'http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.jpg' - }, { - id: 2, - title: '风继续吹', - artist: '张国荣', - file: 'http://oj4t8z2d5.bkt.clouddn.com/%E9%A3%8E%E7%BB%A7%E7%BB%AD%E5%90%B9.mp3', - cover: 'http://oj4t8z2d5.bkt.clouddn.com/%E9%A3%8E%E7%BB%A7%E7%BB%AD%E5%90%B9.jpg' - }, { - id: 3, - title: '恋恋风尘', - artist: '老狼', - file: 'http://oj4t8z2d5.bkt.clouddn.com/%E6%81%8B%E6%81%8B%E9%A3%8E%E5%B0%98.mp3', - cover: 'http://oj4t8z2d5.bkt.clouddn.com/%E6%81%8B%E6%81%8B%E9%A3%8E%E5%B0%98.jpg' - }, { - id: 4, - title: '我要你', - artist: '任素汐', - file: 'http://oj4t8z2d5.bkt.clouddn.com/%E6%88%91%E8%A6%81%E4%BD%A0.mp3', - cover: 'http://oj4t8z2d5.bkt.clouddn.com/%E6%88%91%E8%A6%81%E4%BD%A0.jpg' - }, { - id: 5, - title: '成都', - artist: '赵雷', - file: 'http://oj4t8z2d5.bkt.clouddn.com/%E6%88%90%E9%83%BD.mp3', - cover: 'http://oj4t8z2d5.bkt.clouddn.com/%E6%88%90%E9%83%BD.jpg' - }, { - id: 6, - title: 'sound of silence', - artist: 'Simon & Garfunkel', - file: 'http://oj4t8z2d5.bkt.clouddn.com/sound-of-silence.mp3', - cover: 'http://oj4t8z2d5.bkt.clouddn.com/sound-of-silence.jpg' - } - -]; diff --git a/app/router/index.js b/app/router/index.js deleted file mode 100644 index ef6f229..0000000 --- a/app/router/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { render } from 'react-dom'; -import { AppContainer } from 'react-hot-loader'; -import Root from './Root'; - - -render( - - - , - document.getElementById('root') -); - -if (module.hot) { - module.hot.accept('./Root', () => { - const NewRoot = require('./Root').default; - render( - - - , - document.getElementById('root') - ); - }); -} diff --git a/app/router/page/list.js b/app/router/page/list.js deleted file mode 100644 index 8dcbe30..0000000 --- a/app/router/page/list.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { MUSIC_LIST } from '../config/config'; -import ListItem from '../components/listitem'; - -let List = React.createClass({ - render() { - let Items = this.props.musicList.map((item) => { - return ( - - ); - }); - return ( -
      - { Items } -
    - ); - } -}); - -export default List; diff --git a/app/router/page/player.js b/app/router/page/player.js deleted file mode 100644 index e1c5572..0000000 --- a/app/router/page/player.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import Progress from '../components/progress'; -import { Link } from 'react-router'; - -let Player = React.createClass({ - componentDidMount() { - $("#player").bind($.jPlayer.event.timeupdate, (e) => { - this.setState({ - progress: Math.round(e.jPlayer.status.currentTime) - }); - }); - }, - componentWillUnmount() { - $("#player").unbind($.jPlayer.event.timeupdate); - }, - getInitialState() { - return { - progress: 0 - } - }, - render() { - return ( -
    -

    Welcome to the React lesson~

    -
    See my music list
    -

    {this.props.currentMusitItem.title} 播放中...

    -
    - - -
    -
    - ); - } -}); - -export default Player; diff --git a/app/final/utils/util.js b/app/utils/util.js old mode 100644 new mode 100755 similarity index 100% rename from app/final/utils/util.js rename to app/utils/util.js diff --git a/package.json b/package.json index 11aa431..301106b 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "react-music-player", + "name": "react-music-palyer", "version": "1.0.0", - "description": "music player build with react, redux and react-router with the help of webpack.", - "main": "index.js", + "description": "music player build by react", + "main": "app/index.js", "scripts": { "test": "", "start": "node server", @@ -10,38 +10,36 @@ "eslint": "eslint ." }, "keywords": [ - "es6", + "webpack", "react", - "redux" + "music-player" ], - "author": "musiq", + "author": "haibao", "license": "MIT", - "repository": { - "type": "git", - "url": "git+https://github.com/xiaolin3303/react-music-player" - }, "dependencies": { - "pubsub-js": "^1.5.4", - "react": "^15.0.2", - "react-dom": "^15.0.2", - "react-hot-loader": "^3.0.0-beta.2", - "react-router": "^2.0.0" + "pubsub-js": "^1.5.7", + "react": "^16.0.0", + "react-dom": "^16.0.0", + "react-hot-loader": "^3.1.1", + "react-router": "^4.2.0", + "react-router-dom": "^4.2.2" }, "devDependencies": { - "autoprefixer": "^6.3.6", - "babel-core": "^6.5.2", - "babel-loader": "^6.2.2", - "babel-plugin-react-transform": "^2.0.0", - "babel-preset-es2015": "^6.5.0", - "babel-preset-react": "^6.5.0", - "css-loader": "^0.23.1", - "extract-text-webpack-plugin": "^1.0.1", - "html-webpack-plugin": "^2.16.1", - "json-loader": "^0.5.4", - "less": "^2.6.0", - "less-loader": "^2.2.2", - "style-loader": "^0.13.1", - "webpack": "^1.13.0", - "webpack-dev-server": "^1.14.1" + "autoprefixer": "^7.1.6", + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-plugin-react-transform": "^3.0.0", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "css-loader": "^0.28.7", + "extract-text-webpack-plugin": "^3.0.1", + "html-webpack-plugin": "^2.30.1", + "json-loader": "^0.5.7", + "less": "^2.7.3", + "less-loader": "^4.0.5", + "path": "^0.12.7", + "style-loader": "^0.19.0", + "webpack": "^3.8.1", + "webpack-dev-server": "^2.9.3" } } diff --git a/webpack.config.js b/webpack.config.js old mode 100644 new mode 100755 index 3399468..9f34477 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,7 +10,7 @@ module.exports = { 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', 'react-hot-loader/patch', - path.join(__dirname, 'app/final/index.js') + path.join(__dirname, 'app/index.js') ], output: { path: path.join(__dirname, '/dist/'), @@ -23,18 +23,15 @@ module.exports = { inject: 'body', filename: './index.html' }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin(), + new webpack.NoEmitOnErrorsPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }) ], - module: { - resolve:{ - extensions:['','.js','.json'] - }, - loaders: [ + module: { + rules: [ { test: /\.js$/, exclude: /node_modules/, diff --git a/webpack.production.config.js b/webpack.production.config.js old mode 100644 new mode 100755 index 473de87..038dd07 --- a/webpack.production.config.js +++ b/webpack.production.config.js @@ -5,9 +5,9 @@ var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { - // The entry file. All your app roots fromn here. + // The entry file. All your app roots from here. entry: [ - path.join(__dirname, 'app/final/index.js') + path.join(__dirname, 'app/index.js') ], // Where you want the output to go output: { @@ -19,7 +19,7 @@ module.exports = { // webpack gives your modules and chunks ids to identify them. Webpack can vary the // distribution of the ids to get the smallest id length for often used ids with // this plugin - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), // handles creating an index.html file and injecting assets. necessary because assets // change name because the hash part changes. We want hash name changes to bust cache @@ -66,8 +66,5 @@ module.exports = { loader: 'style-loader!css-loader!less-loader' } ] - }, - postcss: [ - require('autoprefixer') - ] + } }; From 571f45f7181ea2ca89f39f5f19146e510cade13f Mon Sep 17 00:00:00 2001 From: haibao Date: Mon, 30 Oct 2017 13:06:36 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=92=AD=E6=94=BE&?= =?UTF-8?q?=E6=9A=82=E5=81=9C=E6=97=B6=EF=BC=8C=E5=B0=81=E9=9D=A2=E5=8A=A8?= =?UTF-8?q?=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 更新播放&暂停时，封面动画 --- app/page/player.less | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/page/player.less b/app/page/player.less index ffbc2cb..6d81d66 100755 --- a/app/page/player.less +++ b/app/page/player.less @@ -17,10 +17,17 @@ width: 180px; height: 180px; border-radius: 50%; + animation: rotation 10s linear infinite; + -webkit-animation: rotation 10s linear infinite; &.playing { - animation: rotation 10s linear infinite; - -webkit-animation: rotation 10s linear infinite; + -webkit-animation-play-state: running; + animation-play-state: running; + } + + &.pausing { + -webkit-animation-play-state: paused; + animation-play-state: paused; } } }