Added the sidebar to the station page and fixed issue with YT.Player not being initialized.

frontend/app/js/views/Station/Player.jsx

@@ -112,65 +112,72 @@ export default class Player extends Component {
 		});
 	}
 
-	initializePlayer = () => {
-		// TODO Ensure YT.Player exists
-		if (this.state.player.ready || this.state.player.initializing) return;
-		this.setState({
-			player: {
-				...this.state.player,
-				initializing: true,
-			},
-		});
-		this.player = new YT.Player("player", {
-			height: 270,
-			width: 480,
-			videoId: "",
-			playerVars: {controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0},
-			events: {
-				"onReady": () => {
-					this.setState({
-						player: {
-							...this.state.player,
-							initializing: false,
-							ready: true,
-						},
-					});
-
-					getPlayerCallbacks.forEach((cb) => {
-						cb(this.player);
-					});
-
-					this.player.setVolume(this.props.volume);
-					if (this.props.muted) this.mute();
-					else this.unmute();
-				},
-				"onError": function(err) {
-					console.log("iframe error", err);
-					// VOTE TO SKIP SONG
+	initializePlayer = (force) => {
+		if ((this.state.player.ready || this.state.player.initializing) && !force) return;
+		if (!force) {
+			this.setState({
+				player: {
+					...this.state.player,
+					initializing: true,
 				},
-				"onStateChange": (event) => {
-					this.getPlayer((player) => {
-						if (event.data === YT.PlayerState.PLAYING) {
-							if (this.state.player.loading) this.setState({
-								player: {
-									...this.state.player,
-									loading: false,
-								},
-							});
-							if (this.props.paused) player.pauseVideo();
-							if (this.props.paused || this.state.player.loading) player.seekTo(this.getProperVideoTime(), true);
-						}
-
-						if (event.data === YT.PlayerState.PAUSED) {
-							if (!this.props.paused) {
-								player.seekTo(this.getProperVideoTime(), true);
-								player.playVideo();
+			});
+		}
+		if (!YT.Player) {
+			setTimeout(() => {
+				this.initializePlayer(true);
+			}, 100);
+		} else {
+			this.player = new YT.Player("player", {
+				height: 270,
+				width: 480,
+				videoId: "",
+				playerVars: {controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0},
+				events: {
+					"onReady": () => {
+						this.setState({
+							player: {
+								...this.state.player,
+								initializing: false,
+								ready: true,
+							},
+						});
+
+						getPlayerCallbacks.forEach((cb) => {
+							cb(this.player);
+						});
+
+						this.player.setVolume(this.props.volume);
+						if (this.props.muted) this.mute();
+						else this.unmute();
+					},
+					"onError": function (err) {
+						console.log("iframe error", err);
+						// VOTE TO SKIP SONG
+					},
+					"onStateChange": (event) => {
+						this.getPlayer((player) => {
+							if (event.data === YT.PlayerState.PLAYING) {
+								if (this.state.player.loading) this.setState({
+									player: {
+										...this.state.player,
+										loading: false,
+									},
+								});
+								if (this.props.paused) player.pauseVideo();
+								if (this.props.paused || this.state.player.loading) player.seekTo(this.getProperVideoTime(), true);
+							}
+
+							if (event.data === YT.PlayerState.PAUSED) {
+								if (!this.props.paused) {
+									player.seekTo(this.getProperVideoTime(), true);
+									player.playVideo();
+								}
 							}
-						}
-					});
+						});
+					},
 				},
-			},
-		});
+			});
+		}
 	};
 
 	getPlayer(cb) {

frontend/app/js/views/Station/index.jsx

@@ -49,6 +49,7 @@ const formatTime = (duration) => {
 		displayName: state.station.get("displayName"),
 		paused: state.station.get("paused"),
 		pausedAt: state.station.get("pausedAt"),
+		ownerId: state.station.get("ownerId"),
 	},
 }))
 
@@ -154,10 +155,10 @@ export default class Station extends Component {
 		});
 	};
 
-	isOwner = (ownerId) => {
+	isOwner = () => {
 		if (this.props.loggedIn) {
 			if (this.props.user.role === "admin") return true;
-			if (this.props.user.userId === ownerId) return true;
+			if (this.props.user.userId === this.props.station.ownerId) return true;
 		}
 
 		return false;
@@ -233,7 +234,7 @@ export default class Station extends Component {
 		});
 	};
 
-	skip = () => {
+	skipStation = () => {
 		io.getSocket(socket => {
 			socket.emit('stations.forceSkip', this.props.station.stationId, data => {});
 		});
@@ -248,17 +249,33 @@ export default class Station extends Component {
 			<main id="station">
 				<Overlays t={ this.props.t } />
 
-				<button onClick={ () => { this.props.dispatch(openOverlay1("settings")) } }>Open settings</button>
-				<button onClick={ () => { this.props.dispatch(openOverlay1("playlists")) } }>Open playlists</button>
-				<button onClick={ () => { this.props.dispatch(openOverlay1("queueList")) } }>Open queue list</button>
+				<aside>
+					<h2>Sidebar</h2>
+					<button onClick={ () => { this.props.dispatch(openOverlay1("users")) } }>Users</button>
+					<button onClick={ () => { this.props.dispatch(openOverlay1("queueList")) } }>Queue</button>
+					<button onClick={ () => { this.props.dispatch(openOverlay1("playlists")) } }>Playlists</button>
+					{
+						(this.isOwner())
+						? (this.props.station.paused)
+							? <button onClick={ this.resumeStation }>Resume</button>
+							: <button onClick={ this.pauseStation }>Pause</button>
+						: null
+					}
+					{
+						(this.isOwner())
+						? <button onClick={ this.skipStation }>Skip</button>
+						: null
+					}
+					{
+						(this.isOwner())
+						? <button onClick={ () => { this.props.dispatch(openOverlay1("settings")) } }>Settings</button>
+						: null
+					}
+					<hr/>
+				</aside>
 
 				<h1>{ this.props.station.displayName }</h1>
 
-				{ (this.props.station.paused) ? <button onClick={ this.resumeStation }>Resume</button> : <button onClick={ this.pauseStation }>Pause</button>}
-
-				<button onClick={ this.addSongTemp }>Add song to queue TEMP</button>
-				<button onClick={ this.skip }>Skip</button>
-
 				<hr/>
 				<div className={(!this.props.songExists) ? "hidden" : ""}>
 					<Player onRef={ ref => (this.player = ref) }/>