Musare/frontend/components/Station/Station.vue

<template>
	<div>
		<metadata
			v-if="exists && !loading"
			v-bind:title="`${station.displayName}`"
		/>
		<metadata v-else-if="!exists && !loading" v-bind:title="`Not found`" />

		<station-header
			v-if="exists"
			:class="{ 'header-sidebar-active': sidebarActive }"
		/>

		<div class="station-parent">
			<div v-show="loading" class="progress" />
			<div v-show="!loading && exists" class="station">
				<div v-show="noSong" class="no-song">
					<h1>No song is currently playing</h1>
					<h4
						v-if="
							station.type === 'community' &&
								station.partyMode &&
								this.loggedIn &&
								(!station.locked ||
									(station.locked &&
										this.userId === station.owner))
						"
					>
						<a
							href="#"
							class="no-song"
							@click="
								openModal({
									sector: 'station',
									modal: 'addSongToQueue'
								})
							"
							>Add a song to the queue</a
						>
					</h4>
					<h4
						v-if="
							station.type === 'community' &&
								!station.partyMode &&
								this.userId === station.owner &&
								!station.privatePlaylist
						"
					>
						<a
							href="#"
							class="no-song"
							@click="
								openModal({
									sector: 'station',
									modal: 'editStation'
								})
							"
							>Play a private playlist</a
						>
					</h4>
					<h1
						v-if="
							station.type === 'community' &&
								!station.partyMode &&
								this.userId === station.owner &&
								station.privatePlaylist
						"
					>
						Maybe you can add some songs to your selected private
						playlist and then press the skip button
					</h1>
				</div>
				<div v-show="!noSong" class="columns">
					<div
						class="column is-8-desktop is-offset-2-desktop is-12-mobile"
					>
						<div class="video-container">
							<div id="player" />
							<div
								class="player-can-not-autoplay"
								v-if="!canAutoplay"
							>
								<p>
									Please click anywhere on the screen for the
									video to start
								</p>
							</div>
						</div>
						<div
							id="preview-progress"
							class="seeker-bar-container white"
						>
							<div
								class="seeker-bar light-blue"
								style="width: 0%"
							/>
						</div>
					</div>
					<div
						class="desktop-only column is-3-desktop card playlistCard experimental"
					>
						<div v-if="station.type === 'community'" class="title">
							Queue
						</div>
						<div v-else class="title">
							Playlist
						</div>
						<article v-if="!noSong" class="media">
							<figure class="media-left">
								<p class="image is-64x64">
									<img
										:src="currentSong.thumbnail"
										onerror="this.src='/assets/notes-transparent.png'"
									/>
								</p>
							</figure>
							<div class="media-content">
								<div class="content">
									<p>
										Current Song:
										<br />
										<strong>{{ currentSong.title }}</strong>
										<br />
										<small>{{ currentSong.artists }}</small>
									</p>
								</div>
							</div>
							<div class="media-right">
								{{ utils.formatTime(currentSong.duration) }}
							</div>
						</article>
						<p v-if="noSong" class="has-text-centered">
							There is currently no song playing.
						</p>

						<article
							v-for="(song, index) in songsList"
							:key="index"
							class="media"
						>
							<div class="media-content">
								<div class="content">
									<strong class="songTitle">{{
										song.title
									}}</strong>
									<br />
									<small>{{ song.artists.join(", ") }}</small>
									<br />
									<div v-if="station.partyMode">
										<br />
										<small>
											Requested by
											<b>
												<user-id-to-username
													:userId="song.requestedBy"
													:link="true"
												/>
											</b>
										</small>
										<button
											v-if="
												isOwnerOnly() || isAdminOnly()
											"
											class="button"
											@click="
												removeFromQueue(song.songId)
											"
										>
											REMOVE
										</button>
									</div>
								</div>
							</div>
							<div class="media-right">
								{{ utils.formatTime(song.duration) }}
							</div>
						</article>
						<a
							v-if="station.type === 'community' && loggedIn"
							class="button add-to-queue"
							href="#"
							@click="
								openModal({
									sector: 'station',
									modal: 'addSongToQueue'
								})
							"
							>Add a song to the queue</a
						>
					</div>
				</div>
				<div v-show="!noSong" class="desktop-only columns is-mobile">
					<div
						class="column is-8-desktop is-offset-2-desktop is-12-mobile"
					>
						<div class="columns is-mobile">
							<div class="column is-12-desktop">
								<h4 id="time-display">
									{{ timeElapsed }} /
									{{ utils.formatTime(currentSong.duration) }}
								</h4>
								<h3>{{ currentSong.title }}</h3>
								<h4 class="thin" style="margin-left: 0">
									{{ currentSong.artists }}
								</h4>
								<div class="columns is-mobile">
									<form
										style="margin-top: 12px; margin-bottom: 0"
										action="#"
										class="column is-7-desktop is-4-mobile"
									>
										<p class="volume-slider-wrapper">
											<i
												v-if="muted"
												class="material-icons"
												@click="toggleMute()"
												>volume_mute</i
											>
											<i
												v-else
												class="material-icons"
												@click="toggleMute()"
												>volume_down</i
											>
											<input
												v-model="volumeSliderValue"
												type="range"
												min="0"
												max="10000"
												class="volumeSlider active"
												@change="changeVolume()"
												@input="changeVolume()"
											/>
											<i
												class="material-icons"
												@click="increaseVolume()"
												>volume_up</i
											>
										</p>
									</form>
									<div
										class="column is-8-mobile is-5-desktop"
									>
										<ul
											v-if="
												currentSong.likes !== -1 &&
													currentSong.dislikes !== -1
											"
											id="ratings"
										>
											<li
												id="like"
												style="margin-right: 10px"
												@click="toggleLike()"
											>
												<span class="flow-text">{{
													currentSong.likes
												}}</span>
												<i
													id="thumbs_up"
													class="material-icons grey-text"
													:class="{ liked: liked }"
													>thumb_up</i
												>
												<a
													class="absolute-a behind"
													href="#"
													@click="toggleLike()"
												/>
											</li>
											<li
												id="dislike"
												@click="toggleDislike()"
											>
												<span class="flow-text">{{
													currentSong.dislikes
												}}</span>
												<i
													id="thumbs_down"
													class="material-icons grey-text"
													:class="{
														disliked: disliked
													}"
													>thumb_down</i
												>
												<a
													class="absolute-a behind"
													href="#"
													@click="toggleDislike()"
												/>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div
								v-if="!currentSong.simpleSong"
								class="column is-3-desktop experimental"
							>
								<img
									class="image"
									:src="currentSong.thumbnail"
									alt="Song Thumbnail"
									onerror="this.src='/assets/notes-transparent.png'"
								/>
							</div>
						</div>
					</div>
				</div>
				<div v-show="!noSong" class="mobile-only">
					<div>
						<div>
							<div>
								<h3>{{ currentSong.title }}</h3>
								<h4 class="thin">
									{{ currentSong.artists }}
								</h4>
								<h5>
									{{ timeElapsed }} /
									{{ utils.formatTime(currentSong.duration) }}
								</h5>
								<div>
									<form class="columns" action="#">
										<p
											class="column is-11-mobile volume-slider-wrapper"
										>
											<i
												v-if="muted"
												class="material-icons"
												@click="toggleMute()"
												>volume_mute</i
											>
											<i
												v-else
												class="material-icons"
												@click="toggleMute()"
												>volume_down</i
											>
											<input
												v-model="volumeSliderValue"
												type="range"
												min="0"
												max="10000"
												class="active volumeSlider"
												@change="changeVolume()"
												@input="changeVolume()"
											/>
											<i
												class="material-icons"
												@click="increaseVolume()"
												>volume_up</i
											>
										</p>
									</form>
									<div>
										<ul
											v-if="
												currentSong.likes !== -1 &&
													currentSong.dislikes !== -1
											"
											id="ratings"
											style="display: inline-block"
										>
											<li
												id="dislike"
												style="display: inline-block;margin-right: 10px;"
												@click="toggleDislike()"
											>
												<span class="flow-text">{{
													currentSong.dislikes
												}}</span>
												<i
													id="thumbs_down"
													class="material-icons grey-text"
													:class="{
														disliked: disliked
													}"
													>thumb_down</i
												>
												<a
													class="absolute-a behind"
													href="#"
													@click="toggleDislike()"
												/>
											</li>
											<li
												id="like"
												style="display: inline-block"
												@click="toggleLike()"
											>
												<span class="flow-text">{{
													currentSong.likes
												}}</span>
												<i
													id="thumbs_up"
													class="material-icons grey-text"
													:class="{ liked: liked }"
													>thumb_up</i
												>
												<a
													class="absolute-a behind"
													href="#"
													@click="toggleLike()"
												/>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<song-queue v-if="modals.addSongToQueue" />
			<add-to-playlist v-if="modals.addSongToPlaylist" />
			<edit-playlist v-if="modals.editPlaylist" />
			<create-playlist v-if="modals.createPlaylist" />
			<edit-station v-if="modals.editStation" store="station" />
			<report v-if="modals.report" />

			<transition name="slide-outer">
				<div class="sidebar-container" v-if="sidebarActive">
					<transition name="slide-inner">
						<songs-list-sidebar v-if="sidebars.songslist" />
					</transition>
					<transition name="slide-inner">
						<users-sidebar v-if="sidebars.users" />
					</transition>
				</div>
			</transition>
		</div>

		<Z404 v-if="!exists"></Z404>
	</div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Toast from "toasters";

import StationHeader from "./StationHeader.vue";

import UserIdToUsername from "../UserIdToUsername.vue";
import Z404 from "../404.vue";

import io from "../../io";
import keyboardShortcuts from "../../keyboardShortcuts";
import utils from "../../js/utils";

export default {
	data() {
		return {
			utils,
			title: "Station",
			loading: true,
			ready: false,
			exists: true,
			playerReady: false,
			player: undefined,
			timePaused: 0,
			muted: false,
			timeElapsed: "0:00",
			liked: false,
			disliked: false,
			timeBeforePause: 0,
			skipVotes: 0,
			automaticallyRequestedSongId: null,
			systemDifference: 0,
			attemptsToPlayVideo: 0,
			canAutoplay: true,
			lastTimeRequestedIfCanAutoplay: 0,
			seeking: false,
			playbackRate: 1,
			volumeSliderValue: 0
		};
	},
	computed: {
		...mapState("modals", {
			modals: state => state.modals.station
		}),
		...mapState("sidebars", {
			sidebars: state => state.sidebars.station
		}),
		...mapState("station", {
			station: state => state.station,
			currentSong: state => state.currentSong,
			songsList: state => state.songsList,
			paused: state => state.paused,
			noSong: state => state.noSong,
			privatePlaylistQueueSelected: state =>
				state.privatePlaylistQueueSelected
		}),
		...mapState({
			loggedIn: state => state.user.auth.loggedIn,
			userId: state => state.user.auth.userId,
			role: state => state.user.auth.role
		}),
		sidebarActive() {
			return Object.values(this.sidebars).indexOf(true) !== -1;
		}
	},
	methods: {
		isOwnerOnly() {
			return this.loggedIn && this.userId === this.station.owner;
		},
		isAdminOnly() {
			return this.loggedIn && this.role === "admin";
		},
		isOwnerOrAdmin() {
			return this.isOwnerOnly() || this.isAdminOnly();
		},
		removeFromQueue(songId) {
			window.socket.emit(
				"stations.removeFromQueue",
				this.station._id,
				songId,
				res => {
					if (res.status === "success") {
						new Toast({
							content:
								"Successfully removed song from the queue.",
							timeout: 4000
						});
					} else new Toast({ content: res.message, timeout: 8000 });
				}
			);
		},
		youtubeReady() {
			if (!this.player) {
				this.player = new window.YT.Player("player", {
					height: 270,
					width: 480,
					videoId: this.currentSong.songId,
					startSeconds:
						this.getTimeElapsed() / 1000 +
						this.currentSong.skipDuration,
					playerVars: {
						controls: 0,
						iv_load_policy: 3,
						rel: 0,
						showinfo: 0
					},
					events: {
						onReady: () => {
							this.playerReady = true;
							let volume = parseInt(
								localStorage.getItem("volume")
							);

							volume = typeof volume === "number" ? volume : 20;

							this.player.setVolume(volume);

							if (volume > 0) {
								this.player.unMute();
							}

							if (this.muted) this.player.mute();

							this.playVideo();
						},
						onError: err => {
							console.log("iframe error", err);
							this.voteSkipStation();
						},
						onStateChange: event => {
							if (
								event.data === window.YT.PlayerState.PLAYING &&
								this.videoLoading === true
							) {
								this.videoLoading = false;
								this.player.seekTo(
									this.getTimeElapsed() / 1000 +
										this.currentSong.skipDuration,
									true
								);
								if (this.paused) this.player.pauseVideo();
							} else if (
								event.data === window.YT.PlayerState.PLAYING &&
								this.paused
							) {
								this.player.seekTo(
									this.timeBeforePause / 1000,
									true
								);
								this.player.pauseVideo();
							} else if (
								event.data === window.YT.PlayerState.PLAYING &&
								this.seeking === true
							) {
								this.seeking = false;
							}
							if (
								event.data === window.YT.PlayerState.PAUSED &&
								!this.paused &&
								!this.noSong &&
								this.player.getDuration() / 1000 <
									this.currentSong.duration
							) {
								this.player.seekTo(
									this.getTimeElapsed() / 1000 +
										this.currentSong.skipDuration,
									true
								);
								this.player.playVideo();
							}
						}
					}
				});
			}
		},
		getTimeElapsed() {
			if (this.currentSong) {
				let { timePaused } = this;
				if (this.paused) timePaused += Date.currently() - this.pausedAt;
				return Date.currently() - this.startedAt - timePaused;
			}
			return 0;
		},
		playVideo() {
			if (this.playerReady) {
				this.videoLoading = true;
				this.player.loadVideoById(
					this.currentSong.songId,
					this.getTimeElapsed() / 1000 + this.currentSong.skipDuration
				);

				if (window.stationInterval !== 0)
					clearInterval(window.stationInterval);
				window.stationInterval = setInterval(() => {
					this.resizeSeekerbar();
					this.calculateTimeElapsed();
				}, 150);
			}
		},
		resizeSeekerbar() {
			if (!this.paused) {
				document.getElementsByClassName(
					"seeker-bar"
				)[0].style.width = `${parseFloat(
					(this.getTimeElapsed() / 1000 / this.currentSong.duration) *
						100
				)}%`;
			}
		},
		calculateTimeElapsed() {
			if (
				this.playerReady &&
				this.currentSong &&
				this.player.getPlayerState() === -1
			) {
				if (this.attemptsToPlayVideo >= 5) {
					if (
						Date.now() - this.lastTimeRequestedIfCanAutoplay >
						2000
					) {
						this.lastTimeRequestedIfCanAutoplay = Date.now();
						window.canAutoplay.video().then(({ result }) => {
							if (result) {
								this.attemptsToPlayVideo = 0;
								this.canAutoplay = true;
							} else {
								this.canAutoplay = false;
							}
						});
					}
				} else {
					this.player.playVideo();
					this.attemptsToPlayVideo += 1;
				}
			}

			if (!this.paused) {
				const timeElapsed = this.getTimeElapsed();
				const currentPlayerTime = this.player.getCurrentTime() * 1000;

				const difference = timeElapsed - currentPlayerTime;
				// console.log(difference);

				let playbackRate = 1;

				if (difference < -2000) {
					if (!this.seeking) {
						this.seeking = true;
						this.player.seekTo(
							this.getTimeElapsed() / 1000 +
								this.currentSong.skipDuration
						);
					}
				} else if (difference < -200) {
					// console.log("Difference0.8");
					playbackRate = 0.8;
				} else if (difference < -50) {
					// console.log("Difference0.9");
					playbackRate = 0.9;
				} else if (difference < -25) {
					// console.log("Difference0.99");
					playbackRate = 0.95;
				} else if (difference > 2000) {
					if (!this.seeking) {
						this.seeking = true;
						this.player.seekTo(
							this.getTimeElapsed() / 1000 +
								this.currentSong.skipDuration
						);
					}
				} else if (difference > 200) {
					// console.log("Difference1.2");
					playbackRate = 1.2;
				} else if (difference > 50) {
					// console.log("Difference1.1");
					playbackRate = 1.1;
				} else if (difference > 25) {
					// console.log("Difference1.01");
					playbackRate = 1.05;
				} else if (this.player.getPlaybackRate !== 1.0) {
					// console.log("NDifference1.0");
					this.player.setPlaybackRate(1.0);
				}

				if (this.playbackRate !== playbackRate) {
					this.player.setPlaybackRate(playbackRate);
					this.playbackRate = playbackRate;
				}
			}

			/* if (this.currentTime !== undefined && this.paused) {
				this.timePaused += Date.currently() - this.currentTime;
				this.currentTime = undefined;
			} */

			let { timePaused } = this;
			if (this.paused) timePaused += Date.currently() - this.pausedAt;

			const duration =
				(Date.currently() - this.startedAt - timePaused) / 1000;

			const songDuration = this.currentSong.duration;
			if (songDuration <= duration) this.player.pauseVideo();
			if (!this.paused && duration <= songDuration)
				this.timeElapsed = utils.formatTime(duration);
		},
		toggleLock() {
			window.socket.emit("stations.toggleLock", this.station._id, res => {
				if (res.status === "success") {
					new Toast({
						content: "Successfully toggled the queue lock.",
						timeout: 4000
					});
				} else new Toast({ content: res.message, timeout: 8000 });
			});
		},
		changeVolume() {
			const volume = this.volumeSliderValue;
			localStorage.setItem("volume", volume / 100);
			if (this.playerReady) {
				this.player.setVolume(volume / 100);
				if (volume > 0) {
					this.player.unMute();
					localStorage.setItem("muted", false);
					this.muted = false;
				}
			}
		},
		resumeLocalStation() {
			this.updatePaused(false);
			if (!this.noSong) {
				if (this.playerReady) {
					this.player.seekTo(
						this.getTimeElapsed() / 1000 +
							this.currentSong.skipDuration
					);
					this.player.playVideo();
				}
			}
		},
		pauseLocalStation() {
			this.updatePaused(true);
			if (!this.noSong) {
				this.timeBeforePause = this.getTimeElapsed();
				if (this.playerReady) this.player.pauseVideo();
			}
		},
		skipStation() {
			this.socket.emit("stations.forceSkip", this.station._id, data => {
				if (data.status !== "success")
					new Toast({
						content: `Error: ${data.message}`,
						timeout: 8000
					});
				else
					new Toast({
						content:
							"Successfully skipped the station's current song.",
						timeout: 4000
					});
			});
		},
		voteSkipStation() {
			this.socket.emit("stations.voteSkip", this.station._id, data => {
				if (data.status !== "success")
					new Toast({
						content: `Error: ${data.message}`,
						timeout: 8000
					});
				else
					new Toast({
						content: "Successfully voted to skip the current song.",
						timeout: 4000
					});
			});
		},
		resumeStation() {
			this.socket.emit("stations.resume", this.station._id, data => {
				if (data.status !== "success")
					new Toast({
						content: `Error: ${data.message}`,
						timeout: 8000
					});
				else
					new Toast({
						content: "Successfully resumed the station.",
						timeout: 4000
					});
			});
		},
		pauseStation() {
			this.socket.emit("stations.pause", this.station._id, data => {
				if (data.status !== "success")
					new Toast({
						content: `Error: ${data.message}`,
						timeout: 8000
					});
				else
					new Toast({
						content: "Successfully paused the station.",
						timeout: 4000
					});
			});
		},
		toggleMute() {
			if (this.playerReady) {
				const previousVolume = parseFloat(
					localStorage.getItem("volume")
				);
				const volume =
					this.player.getVolume() * 100 <= 0 ? previousVolume : 0;
				this.muted = !this.muted;
				localStorage.setItem("muted", this.muted);
				this.volumeSliderValue = volume * 100;
				this.player.setVolume(volume);
				if (!this.muted) localStorage.setItem("volume", volume);
			}
		},
		increaseVolume() {
			if (this.playerReady) {
				const previousVolume = parseInt(localStorage.getItem("volume"));
				let volume = previousVolume + 5;
				if (previousVolume === 0) {
					this.muted = false;
					localStorage.setItem("muted", false);
				}
				if (volume > 100) volume = 100;
				this.volumeSliderValue = volume * 100;
				this.player.setVolume(volume);
				localStorage.setItem("volume", volume);
			}
		},
		toggleLike() {
			if (this.liked)
				this.socket.emit(
					"songs.unlike",
					this.currentSong.songId,
					data => {
						if (data.status !== "success")
							new Toast({
								content: `Error: ${data.message}`,
								timeout: 8000
							});
					}
				);
			else
				this.socket.emit(
					"songs.like",
					this.currentSong.songId,
					data => {
						if (data.status !== "success")
							new Toast({
								content: `Error: ${data.message}`,
								timeout: 8000
							});
					}
				);
		},
		toggleDislike() {
			if (this.disliked)
				return this.socket.emit(
					"songs.undislike",
					this.currentSong.songId,
					data => {
						if (data.status !== "success")
							new Toast({
								content: `Error: ${data.message}`,
								timeout: 8000
							});
					}
				);

			return this.socket.emit(
				"songs.dislike",
				this.currentSong.songId,
				data => {
					if (data.status !== "success")
						new Toast({
							content: `Error: ${data.message}`,
							timeout: 8000
						});
				}
			);
		},
		addFirstPrivatePlaylistSongToQueue() {
			let isInQueue = false;
			if (
				this.station.type === "community" &&
				this.station.partyMode === true
			) {
				this.songsList.forEach(queueSong => {
					if (queueSong.requestedBy === this.userId) isInQueue = true;
				});
				if (!isInQueue && this.privatePlaylistQueueSelected) {
					this.socket.emit(
						"playlists.getFirstSong",
						this.privatePlaylistQueueSelected,
						data => {
							if (data.status === "success") {
								if (data.song) {
									if (data.song.duration < 15 * 60) {
										this.automaticallyRequestedSongId =
											data.song.songId;
										this.socket.emit(
											"stations.addToQueue",
											this.station._id,
											data.song.songId,
											data2 => {
												if (
													data2.status === "success"
												) {
													this.socket.emit(
														"playlists.moveSongToBottom",
														this
															.privatePlaylistQueueSelected,
														data.song.songId,
														data3 => {
															if (
																data3.status ===
																"success"
															) {
															} // eslint-disable-line
														}
													);
												}
											}
										);
									} else {
										new Toast({
											content: `Top song in playlist was too long to be added.`,
											timeout: 3000
										});
										this.socket.emit(
											"playlists.moveSongToBottom",
											this.privatePlaylistQueueSelected,
											data.song.songId,
											data3 => {
												if (
													data3.status === "success"
												) {
													setTimeout(() => {
														this.addFirstPrivatePlaylistSongToQueue();
													}, 3000);
												}
											}
										);
									}
								} else {
									new Toast({
										content: `Selected playlist has no songs.`,
										timeout: 4000
									});
								}
							}
						}
					);
				}
			}
		},
		join() {
			this.socket.emit("stations.join", this.stationName, res => {
				if (res.status === "success") {
					this.loading = false;

					const {
						_id,
						displayName,
						description,
						privacy,
						locked,
						partyMode,
						owner,
						privatePlaylist,
						type
					} = res.data;

					this.joinStation({
						_id,
						name: this.stationName,
						displayName,
						description,
						privacy,
						locked,
						partyMode,
						owner,
						privatePlaylist,
						type
					});
					const currentSong = res.data.currentSong
						? res.data.currentSong
						: {};
					if (currentSong.artists)
						currentSong.artists = currentSong.artists.join(", ");
					this.updateCurrentSong(currentSong);
					this.startedAt = res.data.startedAt;
					this.updatePaused(res.data.paused);
					this.timePaused = res.data.timePaused;
					this.updateUserCount(res.data.userCount);
					this.updateUsers(res.data.users);
					this.pausedAt = res.data.pausedAt;
					if (res.data.currentSong) {
						this.updateNoSong(false);
						this.youtubeReady();
						this.playVideo();
						this.socket.emit(
							"songs.getOwnSongRatings",
							res.data.currentSong.songId,
							data => {
								if (this.currentSong.songId === data.songId) {
									this.liked = data.liked;
									this.disliked = data.disliked;
								}
							}
						);
					} else {
						if (this.playerReady) this.player.pauseVideo();
						this.updateNoSong(true);
					}

					if (type === "community" && partyMode === true) {
						this.socket.emit("stations.getQueue", _id, res => {
							if (res.status === "success") {
								this.updateSongsList(res.queue);
							}
						});
					}

					if (this.isOwnerOrAdmin()) {
						keyboardShortcuts.registerShortcut(
							"station.pauseResume",
							{
								keyCode: 32,
								shift: false,
								ctrl: true,
								handler: () => {
									if (this.paused) this.resumeStation();
									else this.pauseStation();
								}
							}
						);

						keyboardShortcuts.registerShortcut(
							"station.skipStation",
							{
								keyCode: 39,
								shift: false,
								ctrl: true,
								handler: () => {
									this.skipStation();
								}
							}
						);
					}

					keyboardShortcuts.registerShortcut(
						"station.lowerVolumeLarge",
						{
							keyCode: 40,
							shift: false,
							ctrl: true,
							handler: () => {
								this.volumeSliderValue -= 1000;
								this.changeVolume();
							}
						}
					);

					keyboardShortcuts.registerShortcut(
						"station.lowerVolumeSmall",
						{
							keyCode: 40,
							shift: true,
							ctrl: true,
							handler: () => {
								this.volumeSliderValue -= 100;
								this.changeVolume();
							}
						}
					);

					keyboardShortcuts.registerShortcut(
						"station.increaseVolumeLarge",
						{
							keyCode: 38,
							shift: false,
							ctrl: true,
							handler: () => {
								this.volumeSliderValue += 1000;
								this.changeVolume();
							}
						}
					);

					keyboardShortcuts.registerShortcut(
						"station.increaseVolumeSmall",
						{
							keyCode: 38,
							shift: true,
							ctrl: true,
							handler: () => {
								this.volumeSliderValue += 100;
								this.changeVolume();
							}
						}
					);

					// UNIX client time before ping
					const beforePing = Date.now();
					this.socket.emit("apis.ping", pong => {
						// UNIX client time after ping
						const afterPing = Date.now();
						// Average time in MS it took between the server responding and the client receiving
						const connectionLatency = (afterPing - beforePing) / 2;
						console.log(connectionLatency, beforePing - afterPing);
						// UNIX server time
						const serverDate = pong.date;
						// Difference between the server UNIX time and the client UNIX time after ping, with the connectionLatency added to the server UNIX time
						const difference =
							serverDate + connectionLatency - afterPing;
						console.log("Difference: ", difference);
						if (difference > 3000 || difference < -3000) {
							console.log(
								"System time difference is bigger than 3 seconds."
							);
						}
						this.systemDifference = difference;
					});
				} else {
					this.loading = false;
					this.exists = false;
				}
			});
		},
		...mapActions("sidebars", ["toggleSidebar"]),
		...mapActions("modals", ["openModal"]),
		...mapActions("station", [
			"joinStation",
			"updateUserCount",
			"updateUsers",
			"updateCurrentSong",
			"updatePreviousSong",
			"updateSongsList",
			"updatePaused",
			"updateNoSong"
		])
	},
	mounted() {
		Date.currently = () => {
			return new Date().getTime() + this.systemDifference;
		};

		this.stationName = this.$route.params.id;

		window.stationInterval = 0;

		io.getSocket(socket => {
			this.socket = socket;

			io.removeAllListeners();
			if (this.socket.connected) this.join();
			io.onConnect(this.join);
			this.socket.emit("stations.existsByName", this.stationName, res => {
				if (res.status === "failure" || !res.exists) {
					this.loading = false;
					this.exists = false;
				}
			});
			this.socket.on("event:songs.next", data => {
				const previousSong = this.currentSong.songId
					? this.currentSong
					: null;
				this.updatePreviousSong(previousSong);
				this.updateCurrentSong(
					data.currentSong ? data.currentSong : {}
				);
				this.startedAt = data.startedAt;
				this.updatePaused(data.paused);
				this.timePaused = data.timePaused;
				if (data.currentSong) {
					this.updateNoSong(false);
					if (this.currentSong.artists)
						this.currentSong.artists = this.currentSong.artists.join(
							", "
						);
					if (!this.playerReady) this.youtubeReady();
					else this.playVideo();
					this.socket.emit(
						"songs.getOwnSongRatings",
						data.currentSong.songId,
						song => {
							if (this.currentSong.songId === song.songId) {
								this.liked = song.liked;
								this.disliked = song.disliked;
							}
						}
					);
				} else {
					if (this.playerReady) this.player.pauseVideo();
					this.updateNoSong(true);
				}

				let isInQueue = false;
				this.songsList.forEach(queueSong => {
					if (queueSong.requestedBy === this.userId) isInQueue = true;
				});
				if (
					!isInQueue &&
					this.privatePlaylistQueueSelected &&
					(this.automaticallyRequestedSongId !==
						this.currentSong.songId ||
						!this.currentSong.songId)
				) {
					this.addFirstPrivatePlaylistSongToQueue();
				}
			});

			this.socket.on("event:stations.pause", data => {
				this.pausedAt = data.pausedAt;
				this.pauseLocalStation();
			});

			this.socket.on("event:stations.resume", data => {
				this.timePaused = data.timePaused;
				this.resumeLocalStation();
			});

			this.socket.on("event:stations.remove", () => {
				window.location.href = "/";
				return true;
			});

			this.socket.on("event:song.like", data => {
				if (!this.noSong) {
					if (data.songId === this.currentSong.songId) {
						this.currentSong.dislikes = data.dislikes;
						this.currentSong.likes = data.likes;
					}
				}
			});

			this.socket.on("event:song.dislike", data => {
				if (!this.noSong) {
					if (data.songId === this.currentSong.songId) {
						this.currentSong.dislikes = data.dislikes;
						this.currentSong.likes = data.likes;
					}
				}
			});

			this.socket.on("event:song.unlike", data => {
				if (!this.noSong) {
					if (data.songId === this.currentSong.songId) {
						this.currentSong.dislikes = data.dislikes;
						this.currentSong.likes = data.likes;
					}
				}
			});

			this.socket.on("event:song.undislike", data => {
				if (!this.noSong) {
					if (data.songId === this.currentSong.songId) {
						this.currentSong.dislikes = data.dislikes;
						this.currentSong.likes = data.likes;
					}
				}
			});

			this.socket.on("event:song.newRatings", data => {
				if (!this.noSong) {
					if (data.songId === this.currentSong.songId) {
						this.liked = data.liked;
						this.disliked = data.disliked;
					}
				}
			});

			this.socket.on("event:queue.update", queue => {
				if (this.station.type === "community")
					this.updateSongsList(queue);
			});

			this.socket.on("event:song.voteSkipSong", () => {
				if (this.currentSong) this.currentSong.skipVotes += 1;
			});

			this.socket.on("event:privatePlaylist.selected", playlistId => {
				if (this.station.type === "community") {
					this.station.privatePlaylist = playlistId;
				}
			});

			this.socket.on("event:partyMode.updated", partyMode => {
				if (this.station.type === "community") {
					this.station.partyMode = partyMode;
				}
			});

			this.socket.on("event:newOfficialPlaylist", playlist => {
				if (this.station.type === "official") {
					this.updateSongsList(playlist);
				}
			});

			this.socket.on("event:users.updated", users => {
				this.updateUsers(users);
			});

			this.socket.on("event:userCount.updated", userCount => {
				this.updateUserCount(userCount);
			});

			this.socket.on("event:queueLockToggled", locked => {
				this.station.locked = locked;
			});
		});

		if (JSON.parse(localStorage.getItem("muted"))) {
			this.muted = true;
			this.player.setVolume(0);
			this.volumeSliderValue = 0 * 100;
		} else {
			let volume = parseFloat(localStorage.getItem("volume"));
			volume =
				typeof volume === "number" && !Number.isNaN(volume)
					? volume
					: 20;
			localStorage.setItem("volume", volume);
			this.volumeSliderValue = volume * 100;
		}
	},
	beforeDestroy() {
		const shortcutNames = [
			"station.pauseResume",
			"station.skipStation",
			"station.lowerVolumeLarge",
			"station.lowerVolumeSmall",
			"station.increaseVolumeLarge",
			"station.increaseVolumeSmall"
		];

		shortcutNames.forEach(shortcutName => {
			keyboardShortcuts.unregisterShortcut(shortcutName);
		});
	},
	components: {
		StationHeader,
		SongQueue: () => import("../Modals/AddSongToQueue.vue"),
		AddToPlaylist: () => import("../Modals/AddSongToPlaylist.vue"),
		EditPlaylist: () => import("../Modals/Playlists/Edit.vue"),
		CreatePlaylist: () => import("../Modals/Playlists/Create.vue"),
		EditStation: () => import("../Modals/EditStation.vue"),
		Report: () => import("../Modals/Report.vue"),
		SongsListSidebar: () => import("../Sidebars/SongsList.vue"),
		UsersSidebar: () => import("../Sidebars/UsersList.vue"),
		UserIdToUsername,
		Z404
	}
};
</script>

<style lang="scss">
@import "styles/global.scss";

.station-parent {
	display: flex;
	flex: 1;
	overflow-x: hidden;
}

.night-mode {
	.nav,
	.control-sidebar {
		background-color: #222;
	}
}

.player-can-not-autoplay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(3, 169, 244, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;

	p {
		color: $white;
		font-size: 26px;
		text-align: center;
	}
}

// Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
.slide-outer-enter {
	margin-right: -300px;
}

// Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
.slide-outer-enter-active {
	transition: all 0.3s linear;
}

// Only available in versions 2.1.8+. Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes.
.slide-outer-enter-to {
	margin-right: 0;
}

// Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
.slide-outer-leave {
	margin-right: 0;
}

// Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
.slide-outer-leave-active {
	transition: all 0.3s linear;
}

// Only available in versions 2.1.8+. Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave is removed), removed when the transition/animation finishes.
.slide-outer-leave-to {
	margin-right: -300px;
}

// Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
.slide-inner-enter {
	transform: translateX(300px);
}

// Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
.slide-inner-enter-active {
	transition: all 0.3s linear;
	z-index: 5;
}

// Only available in versions 2.1.8+. Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes.
.slide-inner-enter-to {
	transform: translateX(0px);
}

// Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
.slide-inner-leave {
	transform: translateX(0px);
}

// Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
.slide-inner-leave-active {
	transition: all 0.3s linear;
	z-index: 0;
}

// Only available in versions 2.1.8+. Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave is removed), removed when the transition/animation finishes.
.slide-inner-leave-to {
	transform: translateX(300px);
}

.sidebar-container {
	width: 300px;
	max-width: 300px;
	// background-color: blue;
	position: relative;
}

.sidebar {
	position: absolute;
	// z-index: 1;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	background-color: $white;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
		0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.no-song {
	color: $primary-color;
	text-align: center;
}

.volumeSlider {
	padding: 0 15px;
	background: transparent;
}

.volume-slider-wrapper {
	margin-top: 0;
	position: relative;
	display: flex;
	align-items: center;
	.material-icons {
		user-select: none;
	}
}

.material-icons {
	cursor: pointer;
}

.stationDisplayName {
	color: $white !important;
}

.add-to-playlist {
	display: flex;
	align-items: center;
	justify-content: center;
}

// .slideout {
// 	top: 50px;
// 	height: 100%;
// 	position: fixed;
// 	right: 0;
// 	width: 350px;
// 	background-color: $white;
// 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
// 		0 2px 10px 0 rgba(0, 0, 0, 0.12);
// 	.slideout-header {
// 		text-align: center;
// 		background-color: rgb(3, 169, 244) !important;
// 		margin: 0;
// 		padding-top: 5px;
// 		padding-bottom: 7px;
// 		color: $white;
// 	}

// 	.slideout-content {
// 		height: 100%;
// 	}
// }

.modal-large {
	width: 75%;
}

.station {
	padding-top: 0.5vw;
	transition: all 0.1s;
	margin: 0 auto;
	flex: 0.9;

	@media only screen and (min-width: 993px) {
		flex: 0.7;
	}

	@media only screen and (min-width: 601px) {
		flex: 0.85;
	}

	@media (min-width: 999px) {
		.mobile-only {
			display: none;
		}
		.desktop-only {
			display: block;
		}
	}
	@media (max-width: 998px) {
		.mobile-only {
			display: block;
		}
		.desktop-only {
			display: none;
			visibility: hidden;
		}
	}

	.mobile-only {
		text-align: center;
	}

	.playlistCard {
		margin: 10px;
		position: relative;
		padding-bottom: calc(31.25% + 7px);
		height: 0;
		overflow-y: scroll;

		.title {
			background-color: rgb(3, 169, 244);
			text-align: center;
			padding: 10px;
			color: $white;
			font-weight: 600;
		}

		.media {
			padding: 0 25px;
		}

		.media-content .content {
			min-height: 64px;
			max-height: 64px;
			display: flex;
			align-items: center;
		}

		.content p strong {
			word-break: break-word;
		}

		.content p small {
			word-break: break-word;
		}

		.add-to-queue {
			width: 100%;
			margin-top: 25px;
			height: 40px;
			border-radius: 0;
			background: rgb(3, 169, 244);
			color: $white !important;
			border: 0;
			&:active,
			&:focus {
				border: 0;
			}
		}

		.add-to-queue:focus {
			background: $primary-color;
		}

		.media-right {
			line-height: 64px;
		}

		.songTitle {
			word-wrap: break-word;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			line-height: 20px;
			max-height: 40px;
			width: 100%;
		}
	}

	input[type="range"] {
		-webkit-appearance: none;
		width: 100%;
		margin: 7.3px 0;
	}

	input[type="range"]:focus {
		outline: none;
	}

	input[type="range"]::-webkit-slider-runnable-track {
		width: 100%;
		height: 5.2px;
		cursor: pointer;
		box-shadow: 0;
		background: $light-grey-2;
		border-radius: 0;
		border: 0;
	}

	input[type="range"]::-webkit-slider-thumb {
		box-shadow: 0;
		border: 0;
		height: 19px;
		width: 19px;
		border-radius: 15px;
		background: $primary-color;
		cursor: pointer;
		-webkit-appearance: none;
		margin-top: -6.5px;
	}

	input[type="range"]::-moz-range-track {
		width: 100%;
		height: 5.2px;
		cursor: pointer;
		box-shadow: 0;
		background: $light-grey-2;
		border-radius: 0;
		border: 0;
	}

	input[type="range"]::-moz-range-thumb {
		box-shadow: 0;
		border: 0;
		height: 19px;
		width: 19px;
		border-radius: 15px;
		background: $primary-color;
		cursor: pointer;
		-webkit-appearance: none;
		margin-top: -6.5px;
	}

	input[type="range"]::-ms-track {
		width: 100%;
		height: 5.2px;
		cursor: pointer;
		box-shadow: 0;
		background: $light-grey-2;
		border-radius: 1.3px;
	}

	input[type="range"]::-ms-fill-lower {
		background: $light-grey-2;
		border: 0;
		border-radius: 0;
		box-shadow: 0;
	}

	input[type="range"]::-ms-fill-upper {
		background: $light-grey-2;
		border: 0;
		border-radius: 0;
		box-shadow: 0;
	}

	input[type="range"]::-ms-thumb {
		box-shadow: 0;
		border: 0;
		height: 15px;
		width: 15px;
		border-radius: 15px;
		background: $primary-color;
		cursor: pointer;
		-webkit-appearance: none;
		margin-top: 1.5px;
	}

	.video-container {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;

		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	.video-col {
		padding-right: 0.75rem;
		padding-left: 0.75rem;
	}
}

.room-title {
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-size: 2.1em;
}

#ratings {
	display: flex;
	justify-content: flex-end;

	span {
		font-size: 1.68rem;
	}

	i {
		color: #9e9e9e !important;
		cursor: pointer;
		transition: 0.1s color;
	}
}

#time-display {
	margin-top: 30px;
	float: right;
}

#thumbs_up:hover,
#thumbs_up.liked {
	color: $green !important;
}

#thumbs_down:hover,
#thumbs_down.disliked {
	color: $red !important;
}

#song-thumbnail {
	max-width: 100%;
	width: 85%;
}

.seeker-bar-container {
	position: relative;
	height: 7px;
	display: block;
	width: 100%;
	overflow: hidden;
}

.seeker-bar {
	top: 0;
	left: 0;
	bottom: 0;
	position: absolute;
}

ul {
	list-style: none;
	margin: 0;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	line-height: 1.1;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	font-weight: inherit;
}

h1 {
	font-size: 4.2rem;
	line-height: 110%;
	margin: 2.1rem 0 1.68rem 0;
}

h2 {
	font-size: 3.56rem;
	line-height: 110%;
	margin: 1.78rem 0 1.424rem 0;
}

h3 {
	font-size: 2.92rem;
	line-height: 110%;
	margin: 1.46rem 0 1.168rem 0;
}

h4 {
	font-size: 2.28rem;
	line-height: 110%;
	margin: 1.14rem 0 0.912rem 0;
}

h5 {
	font-size: 1.64rem;
	line-height: 110%;
	margin: 0.82rem 0 0.656rem 0;
}

h6 {
	font-size: 1rem;
	line-height: 110%;
	margin: 0.5rem 0 0.4rem 0;
}

.thin {
	font-weight: 200;
}

.light-blue {
	background-color: $primary-color !important;
}

.white {
	background-color: $white !important;
}

.btn-search {
	font-size: 14px;
}

.menu {
	padding: 0 10px;
}

.menu-list li a:hover {
	color: #000 !important;
}

.menu-list li {
	display: flex;
	justify-content: space-between;
}

.menu-list a {
	/*padding: 0 10px !important;*/
}

.menu-list a:hover {
	background-color: transparent;
}

.icons-group {
	display: flex;
}

#like,
#dislike {
	position: relative;
}

.behind {
	z-index: -1;
}

.behind:focus {
	z-index: 0;
}

.progress {
	width: 50px;
	animation: rotate 0.8s infinite linear;
	border: 8px solid $primary-color;
	border-right-color: transparent;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.experimental {
	display: none !important;
}
</style>