Started working on station pages. Added Player component.

frontend/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-	"extends": ["eslint-config-airbnb"],
+	//"extends": ["eslint-config-airbnb"],
 	"parser": "babel-eslint",
 	"settings": {
 		"ecmascript": 6

frontend/app/index.tpl.html

@@ -35,7 +35,7 @@
 	<meta name="google" content="nositelinkssearchbox"/>
 
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-	<!--script src="https://www.youtube.com/iframe_api"></script-->
+	<script src="https://www.youtube.com/iframe_api"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
 	<script type="text/javascript"
 			src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>

frontend/app/js/app.jsx

@@ -150,6 +150,15 @@ class App extends Component { // eslint-disable-line react/no-multi-comp
 						})}
 						auth="ignored"
 					/>
+					<AuthRoute
+						path="/c/:station"
+						component={ asyncComponent({
+							resolve: () => System.import("views/Station"),
+							name: "Station"
+						})}
+						auth="ignored"
+						title="TODO"
+					/>
 					<AuthRoute
 						exact
 						path="/"

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

@@ -56,198 +56,6 @@ export default class Homepage extends Component {
 						else community.push(station);
 					});
 
-					if (this.isOwner("fd")) official.push({
-						"_id": "59b522222634af57e8e2fffdbcf",
-						"name": "pr_o",
-						"displayName": "PrivateOfficial",
-						"description": "Test official station. Private.",
-						"type": "official",
-						"queue": [],
-						"locked": false,
-						"privacy": "private",
-						"blacklistedGenres": [],
-						"genres": [],
-						"playlist": [],
-						"startedAt": 0,
-						"pausedAt": 0,
-						"timePaused": 0,
-						"currentSongIndex": 0,
-						userCount: 0,
-						"currentSong": {
-							"songId": "60ItHLz5WEA",
-							"title": "Faded - Alan Walker",
-							"duration": 212,
-							"skipDuration": 0,
-							"skipVotes": [],
-							"dislikes": -1,
-							"likes": -1,
-							"artists": [],
-							thumbnail: "/assets/images/notes-transparent.png"
-						},
-						"paused": false,
-						"__v": 0
-					});
-
-					if (this.isOwner("fd")) official.push({
-						"_id": "59b52sss2222634af57e8e2dbcf",
-						"name": "un_o",
-						"displayName": "UnlistedOfficial",
-						"description": "Test official station. Unlisted.",
-						"type": "official",
-						"queue": [],
-						"locked": false,
-						"privacy": "unlisted",
-						"blacklistedGenres": [],
-						"genres": [],
-						"playlist": [],
-						"startedAt": 0,
-						"pausedAt": 0,
-						"timePaused": 0,
-						"currentSongIndex": 0,
-						userCount: 0,
-						"currentSong": {
-							"songId": "60ItHLz5WEA",
-							"title": "Faded - Alan Walker",
-							"duration": 212,
-							"skipDuration": 0,
-							"skipVotes": [],
-							"dislikes": -1,
-							"likes": -1,
-							"artists": [],
-							thumbnail: "/assets/images/notes-transparent.png"
-						},
-						"paused": false,
-						"__v": 0
-					});
-
-					official.push({
-						"_id": "59b5222ggfg22634afe7e8e2dbcf",
-						"name": "pu_o",
-						"displayName": "PublicOfficial",
-						"description": "Test official station. Public.",
-						"type": "official",
-						"queue": [],
-						"locked": false,
-						"privacy": "public",
-						"blacklistedGenres": [],
-						"genres": [],
-						"playlist": [],
-						"startedAt": 0,
-						"pausedAt": 0,
-						"timePaused": 0,
-						"currentSongIndex": 0,
-						userCount: 0,
-						"currentSong": {
-							"songId": "60ItHLz5WEA",
-							"title": "Faded - Alan Walker",
-							"duration": 212,
-							"skipDuration": 0,
-							"skipVotes": [],
-							"dislikes": -1,
-							"likes": -1,
-							"artists": [],
-							thumbnail: "/assets/images/notes-transparent.png"
-						},
-						"paused": false,
-						"__v": 0
-					});
-
-					community.push({
-						"_id": "59b5221222634afe7e8e2dbcf",
-						"name": "pu_c",
-						"displayName": "PublicCommunity",
-						"description": "Test community station. Public.",
-						"type": "community",
-						"queue": [],
-						"locked": false,
-						"privacy": "public",
-						"blacklistedGenres": [],
-						"genres": [],
-						"playlist": [],
-						"startedAt": 0,
-						"pausedAt": 0,
-						"timePaused": 0,
-						"currentSongIndex": 0,
-						userCount: 0,
-						"currentSong": {
-							"songId": "60ItHLz5WEA",
-							"title": "Faded - Alan Walker",
-							"duration": 212,
-							"skipDuration": 0,
-							"skipVotes": [],
-							"dislikes": -1,
-							"likes": -1,
-							"artists": [],
-							thumbnail: "/assets/images/notes-transparent.png"
-						},
-						"paused": false,
-						"__v": 0
-					});
-
-					if (this.isOwner("fd")) community.push({
-						"_id": "59b522222634af3e7e8e2dbcf",
-						"name": "un_c",
-						"displayName": "UnlistedCommunity",
-						"description": "Test community station. Unlisted.",
-						"type": "community",
-						"queue": [],
-						"locked": false,
-						"privacy": "unlisted",
-						"blacklistedGenres": [],
-						"genres": [],
-						"playlist": [],
-						"startedAt": 0,
-						"pausedAt": 0,
-						"timePaused": 0,
-						"currentSongIndex": 0,
-						userCount: 0,
-						"currentSong": {
-							"songId": "60ItHLz5WEA",
-							"title": "Faded - Alan Walker",
-							"duration": 212,
-							"skipDuration": 0,
-							"skipVotes": [],
-							"dislikes": -1,
-							"likes": -1,
-							"artists": [],
-							thumbnail: "/assets/images/notes-transparent.png"
-						},
-						"paused": false,
-						"__v": 0
-					});
-
-					if (this.isOwner("fd")) community.push({
-						"_id": "59b522222634afe7e8e2dbcf",
-						"name": "pr_c",
-						"displayName": "PrivateCommunity",
-						"description": "Test community station. Private.",
-						"type": "community",
-						"queue": [],
-						"locked": false,
-						"privacy": "private",
-						"blacklistedGenres": [],
-						"genres": [],
-						"playlist": [],
-						"startedAt": 0,
-						"pausedAt": 0,
-						"timePaused": 0,
-						"currentSongIndex": 0,
-						userCount: 0,
-						"currentSong": {
-							"songId": "60ItHLz5WEA",
-							"title": "Faded - Alan Walker",
-							"duration": 212,
-							"skipDuration": 0,
-							"skipVotes": [],
-							"dislikes": -1,
-							"likes": -1,
-							"artists": [],
-							thumbnail: "/assets/images/notes-transparent.png"
-						},
-						"paused": false,
-						"__v": 0
-					});
-
 					this.setState({
 						stations: {
 							official,

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

@@ -0,0 +1,164 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+const i18next = require("i18next");
+
+const t = i18next.t;
+
+export default class Player extends Component {
+	static propTypes = {
+		onRef: PropTypes.func,
+	};
+
+	static defaultProps = {
+		onRef: () => {},
+	};
+
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			player: {
+				initializing: false,
+				ready: false,
+				loading: false,
+				paused: true,
+				pausedAt: null, // Find better spot for this one
+			},
+			volume: 0,
+		};
+	}
+
+	componentDidMount() {
+		this.props.onRef(this);
+		this.initializePlayer();
+	}
+	componentWillUnmount() {
+		this.props.onRef(null);
+	}
+
+	playSong(songId, skipDuration, timePaused, startedAt) {
+		if (this.state.player.ready) {
+			let pausedAt = (this.state.player.paused) ? Date.now() : null;
+			this.setState({
+				song: {
+					songId,
+					skipDuration,
+					timePaused,
+					startedAt,
+				},
+				player: {
+					...this.state.player,
+					pausedAt,
+					loading: true,
+				},
+			});
+
+			this.player.loadVideoById(songId, this.getProperVideoTime());
+		} else return; // CALLBACK
+	}
+
+	getProperVideoTime = () => {
+		if (this.state.song) {
+			return this.getTimeElapsed() / 1000 + this.state.song.skipDuration;
+		} else return 0;
+	};
+
+	getTimeElapsed = () => {
+		if (this.state.song) {
+			// TODO Replace with Date.currently
+			let timePausedNow = 0;
+			if (this.state.player.paused) timePausedNow = Date.now() - this.state.player.pausedAt;
+			return Date.now() - this.state.song.startedAt - this.state.song.timePaused - timePausedNow;
+		} else return 0;
+	};
+
+	pause() {
+		if (this.state.player.paused) return;
+		this.setState({
+			player: {
+				...this.state.player,
+				paused: true,
+				pausedAt: Date.now(),
+			},
+		});
+		this.player.pauseVideo();
+	}
+
+	resume() {
+		if (!this.state.player.paused) return;
+		this.setState({
+			player: {
+				...this.state.player,
+				paused: false,
+			},
+		});
+		this.player.playVideo();
+	}
+
+	initializePlayerVolume() {
+		let volume = parseInt(localStorage.getItem("volume"));
+		volume = (typeof volume === "number") ? volume : 20;
+		this.player.setVolume(this.state.volume);
+		if (this.state.volume > 0) this.player.unMute();
+	}
+
+	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,
+							test: 1,
+						},
+					});
+
+					this.initializePlayerVolume();
+				},
+				"onError": function(err) {
+					console.log("iframe error", err);
+					// VOTE TO SKIP SONG
+				},
+				"onStateChange": (event) => {
+					if (event.data === YT.PlayerState.PLAYING) {
+						if (this.state.player.loading) this.setState({
+							player: {
+								...this.state.player,
+								loading: false,
+							},
+						});
+						if (this.state.player.paused) this.player.pauseVideo();
+						if (this.state.player.paused || this.state.player.loading) this.player.seekTo(this.getProperVideoTime(), true);
+					}
+
+					if (event.data === YT.PlayerState.PAUSED) {
+						if (!this.state.player.paused) {
+							this.player.seekTo(this.getProperVideoTime(), true);
+							this.player.playVideo();
+						}
+					}
+				},
+			},
+		});
+	}
+
+	render() {
+		return (
+			<div id="player"/>
+		);
+	}
+}

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

@@ -0,0 +1,74 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+
+import PropTypes from "prop-types";
+import { translate, Trans } from "react-i18next";
+
+import Player from "./Player";
+
+import { connect } from "react-redux";
+
+import io from "io";
+import config from "config";
+
+@connect(state => ({
+	user: {
+		userId: state.user.get("userId"),
+		role: state.user.get("role"),
+	},
+	loggedIn: state.user.get("loggedIn"),
+}))
+
+@translate(["station"], { wait: true })
+export default class Station extends Component {
+	static propTypes = {
+		t: PropTypes.func,
+	};
+
+	static defaultProps = {
+		t: () => {},
+	};
+
+	constructor() {
+		super();
+
+		this.state = {
+
+		};
+
+		io.getSocket(socket => {
+
+		});
+	}
+
+	isOwner = (ownerId) => {
+		if (this.props.loggedIn) {
+			if (this.props.user.role === "admin") return true;
+			if (this.props.user.userId === ownerId) return true;
+		}
+
+		return false;
+	};
+
+	changeId = () => {
+		this.player.playSong("jbZXYhjh3ms", 0, 0, Date.now());
+	};
+
+	render() {
+		const { t } = this.props;
+
+		//TODO Make this not re-render a lot
+
+		return (
+			<main id="station">
+				<h1>{ t("home:title") }</h1>
+
+				<button onClick={ this.changeId }>Change ID</button>
+				<button onClick={ () => { this.player.pause() } }>Pause</button>
+				<button onClick={ () => { this.player.resume() } }>Resume</button>
+
+				<Player onRef={ ref => (this.player = ref) }/>
+			</main>
+		);
+	}
+}