update examples

kosmetism · Aug 7, 2016 · f71bca2 · f71bca2
1 parent 659cb5e
commit f71bca2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 17 deletions.
diff --git a/examples/app.js b/examples/app.js
@@ -65,7 +65,6 @@ class PureComponents extends React.Component {
         } else {
             this.setState({playing: !!!this.state.playing});
         }
-
     }
 
     seekTrack(xPos) {
@@ -97,7 +96,7 @@ class PureComponents extends React.Component {
                 </h3>
                 <div className="mb2">Play or pause track.</div>
                 <PlayButton
-                    className="button button-big button-outline button-grow orange rounded mb2"
+                    className="button btn-big button-outline button-grow orange rounded mb2"
                     playing={playing}
                     seeking={seeking}
                     seekingIcon={seekingIcon}
@@ -120,7 +119,7 @@ class PureComponents extends React.Component {
                     </a>
                 </h3>
                 <div className="mb2">Switch to the next track in a playlist.</div>
-                <NextButton className="button button-big button-outline button-grow orange rounded mb2" />
+                <NextButton className="button btn-big button-outline button-grow orange rounded mb2" />
                 <pre><code className="html">{`<NextButton
     className={String}
     onNextClick={Function}
@@ -135,7 +134,7 @@ class PureComponents extends React.Component {
                     </a>
                 </h3>
                 <div className="mb2">Return to the previous track in a playlist.</div>
-                <PrevButton className="button button-big button-outline button-grow orange rounded mb2" />
+                <PrevButton className="button btn-big button-outline button-grow orange rounded mb2" />
                 <pre><code className="html">{`<PrevButton
     className={String}
     onPrevClick={Function}
@@ -182,7 +181,7 @@ class PureComponents extends React.Component {
                     </a>
                 </h3>
                 <div className="mb2">
-                    {`Shows current time of the track and its' duration in`} <code className="black bg-darken-1 rounded">(hh:)mm:ss/(hh:)mm:ss</code> format.
+                    {'Shows current time of the track and its\' duration in'} <code className="black bg-darken-1 rounded">(hh:)mm:ss/(hh:)mm:ss</code> format.
                 </div>
                 <Timer
                     className="mb2"
@@ -359,7 +358,7 @@ class BuiltInPlayers extends React.Component {
                 <hr className="mt1 mb1 b2 border-orange" />
                 <div className="mt3">
                     These beautiful players are built using <a href="http://labs.voronianski.com/react-soundplayer#PureComponents">pure components</a> and <a href="http://labs.voronianski.com/react-soundplayer#SoundPlayerContainer">SoundPlayerContainer</a>.
-                    What makes them extremely pretty is a low-level modular CSS toolkit named <a href="http://www.basscss.com"><strong>BASSCSS</strong></a>. {`It's easy to create your own!`}
+                    What makes them extremely pretty is a low-level modular CSS toolkit named <a href="http://www.basscss.com"><strong>BASSCSS</strong></a>. {'It\'s easy to create your own!'}
                 </div>
                 <BasicSoundPlayer
                     clientId={clientId}
@@ -398,16 +397,16 @@ class App extends React.Component {
                     <img src="./assets/soundcloud.png" width="90" className="mt2" />
                     <h1 className="h1 caps mt2 mb0">React Sound Player</h1>
                     <p className="h3 mt1 mb2">Create custom SoundCloud players with React.js</p>
-                    <a href="https://github.com/soundblogs/react-soundplayer" className="h4 button button-outline button-big mb3 mt2 mr2 b2">View on Github</a>
-                    <a href="#ExamplePlayers" className="h4 button bg-orange button-big mb3 mt2 b2">Check Examples</a>
+                    <a href="https://github.com/soundblogs/react-soundplayer" className="h4 button button-outline btn-big mb3 mt2 mr2 b2">View on Github</a>
+                    <a href="#ExamplePlayers" className="h4 button bg-orange btn-big mb3 mt2 b2">Check Examples</a>
                 </header>
                 <div className="container">
                     {/* getting started */}
                     <h2 id="GettingStarted" className="caps mt3">
                         <a href="#GettingStarted" className="black">Getting Started</a>
                     </h2>
                     <hr className="mt1 mb1 b2 border-orange" />
-                    <pre className="mt3 mb2"><code className="bash">{`npm install react-soundplayer --save`}</code></pre>
+                    <pre className="mt3 mb2"><code className="bash">{'npm install react-soundplayer --save'}</code></pre>
                     <div className="mb2">
                         ReactSoundPlayer is bundled with <a href="#PureComponents">components</a> and <a href="#Containers">addons</a> inside, both should be required separately.
                     </div>
@@ -458,7 +457,7 @@ PrevIconSVG
                     <hr className="mt1 mb1 b2 border-orange" />
                     <div className="mt3">
                         Please keep in mind that SoundCloud provides an option for users to prevent streaming to third-party apps.
-                        {`If your sound isn't playing check the `}<a href="https://developers.soundcloud.com/docs/api/reference#tracks">track</a> <code className="black bg-darken-1 rounded">streamable</code> property.
+                        {'If your sound isn\'t playing check the '}<a href="https://developers.soundcloud.com/docs/api/reference#tracks">track</a> <code className="black bg-darken-1 rounded">streamable</code> property.
                         If it is set to <code className="black bg-darken-1 rounded">false</code>, there is no way to play that sound with the API.
                     </div>
 

diff --git a/examples/package.json b/examples/package.json
@@ -1,12 +1,12 @@
-{
+  {
   "main": "app.js",
   "scripts": {
     "start": "watchify . -o bundle.js -v -d",
     "build-css": "../node_modules/cssnext/dist/bin.js main.css styles.css -c",
     "build-js": "browserify . -o bundle.js",
-    "build-js-prod": "browserify app.js | uglifyjs -cm > bundle.min.js",
+    "build-js-prod": "NODE_ENV=production browserify app.js | uglifyjs -cm > bundle.min.js",
     "build-dev": "npm run build-css && npm run build-js",
-    "build-prod": "NODE_ENV=production npm run build-css && npm run build-js-prod"
+    "build-prod": "npm run build-css && npm run build-js-prod"
   },
   "browserify": {
     "transform": [
@@ -16,14 +16,15 @@
   },
   "dependencies": {
     "babel-polyfill": "^6.13.0",
+    "basscss": "^6.1.6",
+    "highlight.js": "^8.5.0",
     "react": "^15.3.0",
     "react-dom": "^15.3.0"
   },
   "devDependencies": {
     "babelify": "^7.3.0",
     "browserify": "^13.1.0",
     "envify": "^3.4.1",
-    "highlight.js": "^8.5.0",
     "uglify-js": "^2.7.0",
     "watchify": "^3.7.0"
   }

diff --git a/examples/players/ProgressSoundPlayer.js b/examples/players/ProgressSoundPlayer.js
@@ -8,14 +8,14 @@ class Player extends Component {
 
         return (
             <div className="p2 border navy mt1 mb3 flex flex-center rounded">
-                <PlayButton className="flex-none h4 mr2 button white button-big button-outline button-grow bg-orange circle" {...this.props} />
+                <PlayButton className="flex-none h4 mr2 button white btn-big button-outline button-grow bg-orange circle" {...this.props} />
                 <div className="flex-auto">
                     <h2 className="h4 nowrap m0">{track ? track.user.username : ''}</h2>
                     <h2 className="h4 nowrap caps m0">{track ? track.title : ''}</h2>
                     <Progress
                         className="mt1 mb1 rounded"
                         innerClassName="rounded-left"
-                        value={currentTime / duration * 100 || 0}
+                        value={(currentTime / duration) * 100 || 0}
                         {...this.props}
                     />
                 </div>

diff --git a/package.json b/package.json
@@ -40,7 +40,6 @@
     "babel-preset-es2015": "^6.13.1",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
-    "basscss": "^7.0.0",
     "cssnext": "^1.2.3",
     "eslint": "^3.2.2",
     "eslint-config-airbnb": "^10.0.0",