Fixed issues with SearchYouTube and Queue station overlays.

frontend/app/js/ducks/stationInfo.js

@@ -155,6 +155,12 @@ function reducer(state = initialState, action) {
 		description = action.station.description;
 		userCount = action.station.userCount;
 
+		songList = fromJS(action.station.songList.map((song) => {
+			song.songId = song._id;
+			delete song._id;
+			return song;
+		}));
+
 		return state.merge({
 			stationId,
 			name: action.station.name,
@@ -167,7 +173,7 @@ function reducer(state = initialState, action) {
 			mode: (getModeTemp(action.station.partyMode, action.station.locked)),
 			userList: fromJS(action.station.userList),
 			userCount,
-			songList: fromJS(action.station.songList),
+			songList: fromJS(songList),
 			privatePlaylist: action.station.privatePlaylist,
 		});
 	case LEAVE:
@@ -197,12 +203,24 @@ function reducer(state = initialState, action) {
 			mode: action.mode,
 		});
 	case QUEUE_INDEX:
+		songList = fromJS(action.station.songList.map((song) => {
+			song.songId = song._id;
+			delete song._id;
+			return song;
+		}));
+
 		return state.merge({
-			songList: fromJS(action.songList),
+			songList,
 		});
 	case QUEUE_UPDATE:
+		songList = fromJS(action.station.songList.map((song) => {
+			song.songId = song._id;
+			delete song._id;
+			return song;
+		}));
+
 		return state.merge({
-			songList: fromJS(action.songList),
+			songList,
 		});
 	case PAUSE:
 		return state.merge({

frontend/app/js/utils.js

@@ -0,0 +1,6 @@
+export const formatTime = (duration) => {
+	let d = moment.duration(duration, "seconds");
+	if (duration < 0) return "0:00";
+	return ((d.hours() > 0) ? (d.hours() < 10 ? ("0" + d.hours() + ":") : (d.hours() + ":")) : "") + (d.minutes() + ":") + (d.seconds() < 10 ? ("0" + d.seconds()) : d.seconds());
+};
+

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

@@ -1,13 +1,9 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
-import { connect } from "react-redux";
+import { formatTime } from "utils";
 
-const formatTime = (duration) => {
-	let d = moment.duration(duration, "seconds");
-	if (duration < 0) return "0:00";
-	return ((d.hours() > 0) ? (d.hours() < 10 ? ("0" + d.hours() + ":") : (d.hours() + ":")) : "") + (d.minutes() + ":") + (d.seconds() < 10 ? ("0" + d.seconds()) : d.seconds());
-};
+import { connect } from "react-redux";
 
 @connect(state => ({
 	duration: state.station.currentSong.getIn(["timings", "duration"]),

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

@@ -6,7 +6,7 @@ import { connect } from "react-redux";
 import Settings from "./Settings";
 import Playlists from "./Playlists/index.jsx";
 import EditPlaylist from "./Playlists/EditPlaylist";
-import SearchYouTube from "./SearchYouTube";
+import SearchYouTube from "./SearchYouTube/index.jsx";
 import QueueList from "./Queue/index.jsx";
 
 @connect(state => ({

frontend/app/js/views/Station/Views/Queue/SongItem.jsx

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
+import { formatTime } from "utils";
+
 import { connect } from "react-redux";
 
 import io from "io";
@@ -8,6 +10,7 @@ import io from "io";
 @connect(state => ({
 	station: {
 		stationId: state.station.info.get("id"),
+		owner: state.station.info.get("ownerId"),
 	},
 }))
 export default class SongItem extends Component {
@@ -35,29 +38,29 @@ export default class SongItem extends Component {
 
 	render() {
 		const { song } = this.props;
-		const showRequestedBy = (song.requestedByUsername && song.requestedByUsername !== "Unknown");
+		const showRequestedBy = (song.get("requestedByUsername") && song.get("requestedByUsername") !== "Unknown");
 		const showDelete = (this.isOwner());
 
 		return (
 			<li>
 				<div className="left">
-					<img src={ song.thumbnail } onError={function(e) {e.target.src="/assets/images/notes.png"}}/>
+					<img src={ song.get("thumbnail") } onError={function(e) {e.target.src="/assets/images/notes.png"}}/>
 				</div>
 				<div className="right">
-					<span className="duration">{ song.duration }</span>
-					<p className="title">{ song.title }</p>
+					<span className="duration">{ formatTime(song.get("duration")) }</span>
+					<p className="title">{ song.get("title") }</p>
 					<span className="title-artists-spacing"/>
-					<p className="artists">{ song.artists.join(", ") }</p>
+					<p className="artists">{ song.get("artists").join(", ") }</p>
 					{
 						(showRequestedBy) ?
 						<span>
 							<span>Requested by: </span>
-							<a href={`/u/${ song.requestedByUsername }`}>{ song.requestedByUsername }</a>
+							<a href={`/u/${ song.get("requestedByUsername") }`}>{ song.get("requestedByUsername") }</a>
 						</span> : null
 					}
 					{
 						(showDelete)
-						? <i onClick={ () => { this.deleteSong(song.songId) } }>Delete</i>
+						? <i onClick={ () => { this.deleteSong(song.get("songId")) } }>Delete</i>
 						: null
 					}
 				</div>

frontend/app/js/views/Station/Views/Queue/SongList.jsx

@@ -22,7 +22,7 @@ export default class SongList extends Component {
 			<ul>
 				{
 					songList.map((song) => {
-						return <SongItem key={ song.songId } song={ song }/>;
+						return <SongItem key={ song.get("songId") } song={ song }/>;
 					})
 				}
 				{

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

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { formatTime } from "utils";
+
+import { connect } from "react-redux";
+
+export default class SongItem extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		const { song, callback } = this.props;
+
+		return (
+			<li>
+				<img src={ song.thumbnail }/>
+				<a href={ song.url } target="_blank">{ song.title }</a>
+				<div>
+					{ /*<span className="duration">{ formatTime(song.duration) }</span>*/ }
+					<span onClick={ () => { callback(song.songId); } } className="add" tabIndex="0"><i className="material-icons">add</i></span>
+				</div>
+			</li>
+		);
+	}
+}

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

@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { connect } from "react-redux";
+
+import SongItem from "./SongItem.jsx";
+
+export default class SongList extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		const { callback, songs } = this.props;
+
+		return (
+			<ul>
+				{
+					songs.map((song) => {
+						return (
+							<SongItem key={ song.songId } song={ song } callback={ callback }/>
+						);
+					})
+				}
+			</ul>
+		);
+	}
+}

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

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import CustomInput from "components/CustomInput.jsx";
 import CustomErrors from "components/CustomMessages.jsx";
 
+import SongList from "./SongList.jsx";
+
 import { connect } from "react-redux";
 
 import { closeOverlay3, closeOverlay2 } from "actions/stationOverlay";
@@ -81,29 +83,11 @@ export default class SearchYouTube extends Component {
 						? (
 							<div className="search-youtube-results">
 								<h2>Results</h2>
-								<ul>
-								{
-									this.state.results.map((result) => {
-										return (
-											<li key={ this.input.query.getValue() + result.songId }>
-												<img src={ result.thumbnail }/>
-												<a href={ result.url } target="_blank">{ result.title }</a>
-												<div>
-													<span className="duration">12:12</span>
-													<span onClick={ () => { this.props.callback(result.songId); } } className="add" tabIndex="0"><i className="material-icons">add</i></span>
-												</div>
-											</li>
-										);
-									})
-								}
-								</ul>
+								<SongList songs={ this.state.results } callback={ this.props.callback }/>
 							</div>
 						)
 						: null
 					}
-					<ul>
-						{}
-					</ul>
 
 					<CustomErrors onRef={ ref => (this.messages = ref) } />
 				</div>