Added the queue and adding songs to the queue.

frontend/app/js/actions/stationOverlay.js

@@ -11,11 +11,12 @@ export function openOverlay1(overlay) {
 		overlay,
 	};
 }
-export function openOverlay2(overlay, extraProps) {
+export function openOverlay2(overlay, extraProps, callback) {
 	return {
 		type: OPEN_OVERLAY2,
 		overlay,
 		extraProps,
+		callback,
 	};
 }
 export function openOverlay3(overlay, callback) {

frontend/app/js/reducers/station.js

@@ -19,6 +19,7 @@ const initialState = Map({
 	locked: false,
 	partyMode: false,
 	privatePlaylist: "",
+	ownerId: "",
 });
 
 const actionsMap = {
@@ -35,6 +36,7 @@ const actionsMap = {
 			locked: action.station.locked,
 			partyMode: action.station.partyMode,
 			privatePlaylist: action.station.privatePlaylist,
+			ownerId: action.station.owner,
 		});
 	},
 	[PAUSE_STATION]: (state, action) => {

frontend/app/js/reducers/stationOverlay.js

@@ -27,6 +27,7 @@ const actionsMap = {
 		return state.merge({
 			overlay2: action.overlay,
 			extraProps2: action.extraProps,
+			callback: action.callback,
 		});
 	},
 	[OPEN_OVERLAY3]: (state, action) => {

frontend/app/js/views/Station/Views/EditPlaylist.jsx

@@ -6,7 +6,7 @@ import CustomErrors from "components/CustomMessages.jsx";
 
 import { connect } from "react-redux";
 
-import { closeOverlay2, openOverlay3 } from "actions/stationOverlay";
+import { closeOverlay2, openOverlay3, closeOverlay3 } from "actions/stationOverlay";
 
 import io from "io";
 
@@ -127,6 +127,7 @@ export default class EditPlaylist extends Component {
 				} else {
 					this.messages.addError(res.message);
 				}
+				this.props.dispatch(closeOverlay3());
 			});
 		});
 	};

frontend/app/js/views/Station/Views/Overlays.jsx

@@ -7,6 +7,7 @@ import Settings from "./Settings";
 import Playlists from "./Playlists";
 import EditPlaylist from "./EditPlaylist";
 import SearchYouTube from "./SearchYouTube";
+import QueueList from "./QueueList";
 
 @connect(state => ({
 	overlay1: state.stationOverlay.get("overlay1"),
@@ -31,6 +32,7 @@ export default class Overlays extends Component {
 		else if (type === "playlists") input = <Playlists t={ this.props.t } key={ key }/>;
 		else if (type === "editPlaylist") input = <EditPlaylist t={ this.props.t } key={ key } playlistId={ this.props.extraProps2.get("playlistId") }/>;
 		else if (type === "searchYouTube") input = <SearchYouTube t={ this.props.t } key={ key }/>;
+		else if (type === "queueList") input = <QueueList t={ this.props.t } key={ key }/>;
 		return input;
 	};
 

frontend/app/js/views/Station/Views/QueueList.jsx

@@ -0,0 +1,168 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import CustomInput from "components/CustomInput.jsx";
+import CustomErrors from "components/CustomMessages.jsx";
+
+import { connect } from "react-redux";
+
+import { closeOverlay1, openOverlay2 } from "actions/stationOverlay";
+
+import io from "io";
+import {closeOverlay2} from "../../../actions/stationOverlay";
+
+@connect(state => ({
+	user: {
+		userId: state.user.get("userId"),
+		role: state.user.get("role"),
+	},
+	loggedIn: state.user.get("loggedIn"),
+	stationId: state.station.get("id"),
+	stationOwner: state.station.get("ownerId"),
+	songTitle: state.songPlayer.get("title"),
+	songArtists: state.songPlayer.get("artists"),
+	songDuration: state.songPlayer.get("duration"),
+	simpleSong: state.songPlayer.get("simple"),
+	songExists: state.songPlayer.get("exists"),
+}))
+export default class Settings extends Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			queue: [],
+			userIdMap: {},
+			userIdMapLoading: [],
+		};
+
+		io.getSocket((socket) => {
+			socket.emit('stations.getQueue', this.props.stationId, data => {
+				if (data.status === 'success') {
+					this.setState({
+						queue: data.queue,
+					});
+					data.queue.forEach((song) => {
+						this.checkUserId(song.requestedBy);
+					});
+				}
+			});
+
+			socket.on('event:queue.update', queue => {
+				this.setState({
+					queue,
+				});
+				queue.forEach((song) => {
+					this.checkUserId(song.requestedBy);
+				});
+			});
+		});
+	}
+
+	isOwner = () => {
+		if (this.props.loggedIn) {
+			if (this.props.user.role === "admin") return true;
+			if (this.props.user.userId === this.props.stationOwner) return true;
+		}
+
+		return false;
+	};
+
+	deleteSong = (songId) => {
+		io.getSocket((socket) => {
+			socket.emit("stations.removeFromQueue", this.props.stationId, songId, (data) => {
+				if (data.status === "success") this.messages.clearAddSuccess("Successfully removed song.");
+				else this.messages.clearAddError("Failed to remove song.", data.message);
+			});
+		});
+	};
+
+	checkUserId = (userId) => {
+		if (!this.state.userIdMap[`Z${ userId }`] && !this.state.userIdMapLoading[`Z${ userId }`]) {
+			this.setState({
+				userIdMapLoading: this.state.userIdMapLoading.concat([`Z${ userId }`]),
+			});
+			io.getSocket((socket) => {
+				socket.emit("users.getUsernameFromId", userId, (data) => {
+					if (data.status === "success") {
+						this.setState({
+							userIdMap: {
+								[`Z${ userId }`]: data.data,
+							},
+						});
+					}
+				});
+			});
+		}
+	};
+
+	addSongToQueueCallback = (songId) => {
+		io.getSocket((socket) => {
+			// Add song to queue
+			socket.emit("stations.addToQueue", this.props.stationId, songId, res => {
+				if (res.status === "success") {
+					this.messages.clearAddSuccess("Successfully added song.");
+				} else {
+					this.messages.addError(res.message);
+				}
+				this.props.dispatch(closeOverlay2());
+			});
+		});
+	};
+
+	addSongToQueue = () => {
+		this.props.dispatch(openOverlay2("searchYouTube", null, this.addSongToQueueCallback));
+	};
+
+	close = () => {
+		this.props.dispatch(closeOverlay1());
+	};
+
+	render() {
+		console.log(this.isOwner());
+
+		return (
+			<div className="overlay">
+				<button onClick={ this.close }>Back</button>
+				<h1>Queue</h1>
+				<CustomErrors onRef={ ref => (this.messages = ref) } />
+
+				{
+					(this.state.queue)
+					? (
+						<ul>
+							{
+								(this.props.songExists)
+								? (
+									<li>
+										<p>{ this.props.songTitle }</p>
+										<p>{ this.props.songDuration }</p>
+										<hr/>
+									</li>
+								) : null
+							}
+							{
+								this.state.queue.map((song) => {
+									return (
+										<li key={ song.songId }>
+											<p>{ song.title }</p>
+											<p>{ song.duration }</p>
+											<a href={ `/u/${ this.state.userIdMap[`Z${ song.requestedBy }`] }` }>{ this.state.userIdMap[`Z${ song.requestedBy }`] }</a>
+											<p onClick={ () => { this.deleteSong(song.songId) } }>Delete</p>
+											<hr/>
+										</li>
+									);
+								})
+							}
+						</ul>
+					)
+					: null
+				}
+
+				<button onClick={ this.addSongToQueue }>Add song to queue</button>
+
+				<button onClick={ () => {io.getSocket((socket) => {socket.emit("stations.addToQueue", this.props.stationId, "A1PAO3jgmXY", (data) => {console.log(data);});});} }>Add temp</button>
+				<button onClick={ () => {io.getSocket((socket) => {socket.emit('stations.updatePartyMode', this.props.stationId, true, res => {console.log(res);});})}}>Enable party</button>
+			</div>
+		);
+	}
+}

frontend/app/js/views/Station/Views/SearchYouTube.jsx

@@ -83,7 +83,7 @@ export default class SearchYouTube extends Component {
 											<img src={ result.thumbnail }/>
 											<a href={ result.url }>{ result.title }</a>
 											<span>12:12</span>
-											<span onClick={ () => { this.props.dispatch(closeOverlay3()); this.props.callback(result.songId) } }>ADD</span>
+											<span onClick={ () => { this.props.callback(result.songId); } }>ADD</span>
 										</li>
 									);
 								})

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

@@ -250,6 +250,7 @@ export default class Station extends Component {
 
 				<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>
 
 				<h1>{ this.props.station.displayName }</h1>