Embedding HTML5 audio player for streaming within Iris, fixes #251

src/js/bootstrap.js

@@ -41,7 +41,9 @@ var initialState = {
 		artists: {},
 		playlists: {},
 		users: {},
-		tracks: {}
+		tracks: {},
+		http_streaming_enabled: false,
+		http_streaming_url: "http://"+window.location.hostname+":8000/mopidy"
 	},
 	ui: {
 		show_initial_setup: true,

src/js/components/PlaybackControls.js

@@ -70,6 +70,10 @@ class PlaybackControls extends React.Component{
 
 		return (
 			<div className={(this.state.expanded ? "expanded playback-controls" : "playback-controls")}>
+
+				{this.props.http_streaming ? <audio className="http-streaming" autoPlay>
+					<source src={this.props.http_streaming} type="audio/mpeg" />
+				</audio> : null}
 				
 				<div className="current-track">
 					<div className="thumbnail-wrapper" onClick={e => this.handleThumbnailClick(e)}>
@@ -135,6 +139,7 @@ class PlaybackControls extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		http_streaming: (state.core.http_streaming_enabled && state.core.http_streaming_url ? state.core.http_streaming_url : ''),
 		current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
 		radio_enabled: (state.ui.radio && state.ui.radio.enabled ? true : false),
 		play_state: state.mopidy.play_state,

src/js/views/Settings.js

@@ -331,7 +331,38 @@ class Settings extends React.Component {
 							</div>
 						</div>
 						{this.renderApplyButton()}
-					</form>
+					</form>					
+
+					<h4 className="underline">Streaming</h4>
+
+					<div className="field checkbox">
+						<div className="name">Enable</div>
+						<div className="input">
+							<label>
+								<input 
+									type="checkbox"
+									name="ssl"
+									checked={this.props.core.http_streaming_enabled}
+									onChange={e => this.props.coreActions.set({http_streaming_enabled: !this.props.core.http_streaming_enabled})} />
+								<span className="label has-tooltip">
+									Enable HTTP streaming
+									<span className="tooltip">Requires streaming service like Icecast2</span>
+								</span>
+							</label>
+						</div>
+					</div>
+					<div className="field">
+						<div className="name">Stream location</div>
+						<div className="input">
+							<input 
+								type="text"
+								onChange={e => this.props.coreActions.set({http_streaming_url: e.target.value})}
+								value={this.props.core.http_streaming_url} />
+							<div className="description">
+								The full URL to your stream endpoint
+							</div>
+						</div>
+					</div>
 
 					<h4 className="underline">Localization</h4>