add example without soundcloud api

kosmetism · Oct 1, 2017 · 44a2486 · 44a2486
1 parent 64ca513
commit 44a2486
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 [![Dependency Status](http://david-dm.org/soundblogs/react-soundplayer.svg)](http://david-dm.org/soundblogs/react-soundplayer) 
 [![Download Count](http://img.shields.io/npm/dm/react-soundplayer.svg?style=flat)](http://www.npmjs.com/package/react-soundplayer)
 
-> Create highly-customizable SoundCloud (or HTML5 audio) players with React.
+> Create highly-customizable SoundCloud (or any audio) players with React.js.
 
 [<img src="https://user-images.githubusercontent.com/974035/31037146-c21d53e2-a56f-11e7-9cd4-b4784f99040c.png" width="600" />](http://labs.voronianski.com/react-soundplayer#ExamplePlayers)
 
@@ -66,6 +66,46 @@ ReactDOM.render(
 );
 ```
 
+### Custom Audio Example
+
+It is also easy to built players **without** using SoundCloud API. You just need to pass audio source via `streamUrl` and all other necessary track meta information can be passed as custom props.
+
+```js
+import React from 'react';
+import { withSoundCloudAudio } from 'react-soundplayer/addons';
+import { PlayButton, Timer } from 'react-soundplayer/components';
+
+// audio source
+const streamUrl = 'https://s3-eu-west-1.amazonaws.com/react-soundplayer-examples/ksmtk-reborn-edit.mp3';
+
+// some track meta information
+const trackTitle = 'Ksmtk - Reborn';
+
+const AWSSoundPlayer = withSoundCloudAudio(props => {
+  const { trackTitle } = props;
+
+  return (
+    <div>
+      <PlayButton {...this.props} />
+      <h2>{trackTitle}</h2>
+      <Timer {...this.props} />
+    </div>
+  );
+});
+
+class App extends React.Component {
+  render() {
+    return (
+      <AWSSoundPlayer
+        streamUrl={streamUrl}
+        trackTitle={trackTitle} />
+    );
+  }
+}
+
+React.render(<App />, document.getElementById('app'));
+```
+
 ## References
 
 - simply the best CSS modular toolkit on the web - [BASSCSS](http://www.basscss.com/)

diff --git a/examples/app.js b/examples/app.js
@@ -22,6 +22,7 @@ import BasicSoundPlayer from './players/BasicSoundPlayer';
 import ProgressSoundPlayer from './players/ProgressSoundPlayer';
 import PlaylistSoundPlayer from './players/PlaylistSoundPlayer';
 import BackgroundSoundPlayer from './players/BackgroundSoundPlayer';
+import AWSSoundPlayer from './players/AWSSoundPlayer';
 
 // dummy data
 const ksmtk = 'https://soundcloud.com/ksmtk/chronemics';
@@ -34,6 +35,8 @@ const data = {
   artist: 'Chromatics',
   track: 'Cherry (Full Album)'
 };
+const awsKsmtkStreamUrl = 'https://s3-eu-west-1.amazonaws.com/react-soundplayer-examples/ksmtk-reborn-edit.mp3';
+const awsKsmtkTrackTitle = 'Ksmtk - Reborn';
 
 const users = [{
   title: 'Fanburst',
@@ -53,7 +56,7 @@ const users = [{
   logo: 'http://www.wearestraightline.com/safari-pinned-tab.svg'
 }];
 
-const clientId = window.clientId = process.env.CLIENT_ID || ''; // OR PUT YOUR CLIENT ID HERE
+const clientId = process.env.CLIENT_ID || ''; // OR PUT YOUR CLIENT ID HERE
 
 const seekingIcon = (
   <img src="./assets/preloader.svg" className="sb-soundplayer-icon" />
@@ -130,7 +133,7 @@ class PureComponents extends React.Component {
           seekingIcon={seekingIcon}
           onTogglePlay={this.handleClick.bind(this)}
         />
-        <pre><code className="html">{`<PlayButton
+        <pre><code className="javascript">{`<PlayButton
   className={String}
   playing={Boolean}
   seeking={Boolean}
@@ -147,7 +150,7 @@ class PureComponents extends React.Component {
         </h3>
         <div className="mb2">Switch to the next track in a playlist.</div>
         <NextButton className="button btn-big button-outline button-grow orange rounded mb2" />
-        <pre><code className="html">{`<NextButton
+        <pre><code className="javascript">{`<NextButton
   className={String}
   onNextClick={Function}
   soundCloudAudio={instanceof SoundCloudAudio} />
@@ -161,7 +164,7 @@ class PureComponents extends React.Component {
         </h3>
         <div className="mb2">Return to the previous track in a playlist.</div>
         <PrevButton className="button btn-big button-outline button-grow orange rounded mb2" />
-        <pre><code className="html">{`<PrevButton
+        <pre><code className="javascript">{`<PrevButton
   className={String}
   onPrevClick={Function}
   soundCloudAudio={instanceof SoundCloudAudio} />
@@ -187,11 +190,11 @@ class PureComponents extends React.Component {
           className='mb2 flex flex-center'
           buttonClassName="flex-none button btn-big button-outline button-grow orange rounded"
         />
-        <pre><code className="html">{`<VolumeControl
+        <pre><code className="javascript">{`<VolumeControl
   className={String}
   buttonClassName={String}
   rangeClassName={String}
-  volume={Number}
+  volume={Number} // in range 0-1
   onVolumeChange={Function}
   onToggleMute={Function}
   soundCloudAudio={instanceof SoundCloudAudio} />
@@ -212,10 +215,10 @@ class PureComponents extends React.Component {
           value={progressVal}
           onSeekTrack={this.seekTrack.bind(this)}
         />
-        <pre><code className="html">{`<Progress
+        <pre><code className="javascript">{`<Progress
   className={String}
   innerClassName={String}
-  value={Number}
+  value={Number} // in range 0-100
   onSeekTrack={Function}
   soundCloudAudio={instanceof SoundCloudAudio} />
 `}</code></pre>
@@ -234,10 +237,10 @@ class PureComponents extends React.Component {
           duration={duration}
           currentTime={currentTime}
         />
-        <pre><code className="html">{`<Timer
+        <pre><code className="javascript">{`<Timer
   className={String}
-  duration={Number}
-  currentTime={Number} />
+  duration={Number} // in seconds
+  currentTime={Number} /> // in seconds
 `}</code></pre>
         <hr />
 
@@ -253,7 +256,7 @@ class PureComponents extends React.Component {
           artistName={data.artist}
           backgroundUrl={data.image}
         />
-        <pre><code className="html">{`<Cover
+        <pre><code className="javascript">{`<Cover
   className={String}
   trackName={String}
   artistName={String}
@@ -373,7 +376,7 @@ class App extends React.Component {
   render() {
     return (
       <CustomPlayer
-        resolveUrl={streamUrl}
+        resolveUrl={resolveUrl}
         clientId={clientId}
         onReady={() => {
           console.log('player url ready!');
@@ -398,7 +401,7 @@ class BuiltInPlayers extends React.Component {
         </h2>
         <hr className="mt1 mb1 b2 border-orange" />
         <div className="mt3">
-          Example players on this page 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>.
+          Example players on this page are built using <a href="http://labs.voronianski.com/react-soundplayer#PureComponents">pure components</a> and <a href="http://labs.voronianski.com/react-soundplayer#withSoundCloudAudio">withSoundCloudAudio</a> addon.
           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>
 
@@ -450,6 +453,67 @@ class BuiltInPlayers extends React.Component {
   }
 }
 
+class CustomAudioExample extends React.Component {
+  render() {
+    return (
+      <div>
+        <h2 id="CustomAudioExample" className="caps mt4">
+          <a href="#CustomAudioExample" className="black">Custom Audio Example</a>
+        </h2>
+        <hr className="mt1 mb1 b2 border-orange" />
+        <div className="mt3">
+          It is also easy to built players <strong>without</strong> using SoundCloud API. You just need to pass audio source via <code className="black bg-darken-1 rounded">streamUrl</code> and
+          all other necessary track meta information can be passed as custom props.
+        </div>
+        <h3 className="mb1 mt3 h5">
+          <a href="https://github.com/soundblogs/react-soundplayer/blob/master/examples/players/AWSSoundPlayer.js" className="black">
+            AWSSoundPlayer.js
+          </a>
+        </h3>
+        <AWSSoundPlayer
+          streamUrl={awsKsmtkStreamUrl}
+          trackTitle={awsKsmtkTrackTitle}
+          {...this.props} />
+        <div className="mt2">
+          <pre><code className="javascript">{`import React from 'react';
+import { withSoundCloudAudio } from 'react-soundplayer/addons';
+import { PlayButton, Timer } from 'react-soundplayer/components';
+
+// audio source
+const streamUrl = 'https://s3-eu-west-1.amazonaws.com/react-soundplayer-examples/ksmtk-reborn-edit.mp3';
+
+// some track meta information
+const trackTitle = 'Ksmtk - Reborn';
+
+const AWSSoundPlayer = withSoundCloudAudio(props => {
+  const { trackTitle } = props;
+
+  return (
+    <div>
+      <PlayButton {...this.props} />
+      <h2>{trackTitle}</h2>
+      <Timer {...this.props} />
+    </div>
+  );
+});
+
+class App extends React.Component {
+  render() {
+    return (
+      <AWSSoundPlayer
+        streamUrl={streamUrl}
+        trackTitle={trackTitle} />
+    );
+  }
+}
+
+React.render(<App />, document.getElementById('app'));`}</code></pre>
+        </div>
+      </div>
+    );
+  }
+}
+
 class App extends React.Component {
   componentDidMount() {
     hljs.initHighlighting();
@@ -461,7 +525,7 @@ class App extends React.Component {
         <header className="center px3 py4 white mb4">
           <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>
+          <p className="h3 mt1 mb2">Create custom SoundCloud (or any audio) players with React.js</p>
           <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 white rounded">Check Examples</a>
         </header>
@@ -495,6 +559,9 @@ const { SoundCloudLogoSVG } = Icons;
           {/* players */}
           <BuiltInPlayers />
 
+          {/* non-soundcloud audio source */}
+          <CustomAudioExample />
+
           {/* icons */}
           <h2 id="IconComponents" className="caps mt4">
             <a href="#IconComponents" className="black">Icon Components</a>

diff --git a/examples/players/AWSSoundPlayer.js b/examples/players/AWSSoundPlayer.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withSoundCloudAudio } from '../../addons';
+import { PlayButton, Timer } from '../../components';
+
+class AWSSoundPlayer extends Component {
+  render() {
+    const { trackTitle } = this.props;
+
+    return (
+      <div className="p1 mb3 mt1 flex flex-center bg-darken-1 orange rounded">
+        <PlayButton
+          className="flex-none h4 button button-transparent button-grow rounded mr2"
+          {...this.props} />
+        <h2 className="h5 nowrap caps flex-auto m0">{trackTitle}</h2>
+        <Timer className="h6 mr1" {...this.props} />
+      </div>
+    );
+  }
+}
+
+AWSSoundPlayer.propTypes = {
+  streamUrl: PropTypes.string.isRequired,
+  trackTitle: PropTypes.string.isRequired
+};
+
+export default withSoundCloudAudio(AWSSoundPlayer);
diff --git a/examples/players/BasicSoundPlayer.js b/examples/players/BasicSoundPlayer.js
@@ -5,14 +5,24 @@ import { PlayButton, Timer, VolumeControl } from '../../components';
 
 class BasicSoundPlayer extends Component {
   render() {
-    const { track, currentTime } = this.props;
+    const { track } = this.props;
 
     return (
       <div className="p1 mb3 mt1 flex flex-center bg-darken-1 red rounded">
-        <PlayButton className="flex-none h4 button button-transparent button-grow rounded" {...this.props} />
-        <VolumeControl className='flex flex-center mr2' buttonClassName="flex-none h4 button button-transparent button-grow rounded" {...this.props} />
-        <h2 className="h5 nowrap caps flex-auto m0">{track ? track.title : 'Loading...'}</h2>
-        <Timer className="h6 mr1" duration={track ? track.duration / 1000 : 0} currentTime={currentTime} {...this.props} />
+        <PlayButton
+          className="flex-none h4 button button-transparent button-grow rounded"
+          {...this.props} />
+        <VolumeControl
+          className='flex flex-center mr2'
+          buttonClassName="flex-none h4 button button-transparent button-grow rounded"
+          {...this.props} />
+        <h2 className="h5 nowrap caps flex-auto m0">
+          {track ? track.title : 'Loading...'}
+        </h2>
+        <Timer
+          className="h6 mr1"
+          duration={track ? track.duration / 1000 : 0}
+          {...this.props} />
       </div>
     );
   }

diff --git a/examples/players/PlaylistSoundPlayer.js b/examples/players/PlaylistSoundPlayer.js
@@ -14,41 +14,47 @@ class PlaylistSoundPlayer extends Component {
   }
 
   playTrackAtIndex(playlistIndex) {
-    let { soundCloudAudio } = this.props;
+    const { soundCloudAudio } = this.props;
+
     this.setState({activeIndex: playlistIndex});
+
     soundCloudAudio.play({ playlistIndex });
   }
 
   nextIndex() {
+    const { playlist } = this.props;
     let { activeIndex } = this.state;
-    let { playlist } = this.props;
+
     if (activeIndex >= playlist.tracks.length - 1) {
       return;
     }
+
     if (activeIndex || activeIndex === 0) {
       this.setState({activeIndex: ++activeIndex});
     }
   }
 
   prevIndex() {
     let { activeIndex } = this.state;
+
     if (activeIndex <= 0) {
       return;
     }
+
     if (activeIndex || activeIndex === 0) {
       this.setState({activeIndex: --activeIndex});
     }
   }
 
   renderTrackList() {
-    let { playlist } = this.props;
+    const { playlist } = this.props;
 
     if (!playlist) {
-      return <div>Loading...</div>;
+      return <div className="p2 center">Loading...</div>;
     }
 
-    let tracks = playlist.tracks.map((track, i) => {
-      let classNames = ClassNames('flex flex-center full-width left-align button button-transparent', {
+    const tracks = playlist.tracks.map((track, i) => {
+      const classNames = ClassNames('flex flex-center full-width left-align button button-transparent', {
         'is-active': this.props.soundCloudAudio._playlistIndex === i
       });
 

diff --git a/examples/players/ProgressSoundPlayer.js b/examples/players/ProgressSoundPlayer.js
@@ -5,7 +5,7 @@ import { PlayButton, Progress, VolumeControl } from '../../components';
 
 class ProgressSoundPlayer extends Component {
   render() {
-    let { track, currentTime, duration } = this.props;
+    const { track, currentTime, duration } = this.props;
 
     return (
       <div className="p2 border navy mt1 mb3 flex flex-center rounded">