refactor: moved formatTime to utils

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/App.vue

@@ -46,12 +46,12 @@ export default {
 		submitOnEnter: (cb, event) => {
 			if (event.which === 13) cb();
 		},
-		turnOnNightmode: () => {
+		enableNightMode: () => {
 			document
 				.getElementsByTagName("body")[0]
 				.classList.add("night-mode");
 		},
-		turnOffNightmode: () => {
+		disableNightMode: () => {
 			document
 				.getElementsByTagName("body")[0]
 				.classList.remove("night-mode");
@@ -82,16 +82,16 @@ export default {
 			}
 		},
 		nightmode(nightmode) {
-			if (nightmode) this.turnOnNightmode();
-			else this.turnOffNightmode();
+			if (nightmode) this.enableNightMode();
+			else this.disableNightMode();
 		}
 	},
 	beforeMount() {
 		const nightmode =
 			false || JSON.parse(localStorage.getItem("nightmode"));
 		this.changeNightmode(nightmode);
-		if (nightmode) this.turnOnNightmode();
-		else this.turnOffNightmode();
+		if (nightmode) this.enableNightMode();
+		else this.disableNightMode();
 	},
 	mounted() {
 		document.onkeydown = ev => {

frontend/components/Sidebars/SongsList.vue

@@ -28,7 +28,7 @@
 					</div>
 				</div>
 				<div class="media-right">
-					{{ $parent.formatTime(currentSong.duration) }}
+					{{ utils.formatTime(currentSong.duration) }}
 				</div>
 			</article>
 			<p v-if="noSong" class="center">
@@ -74,7 +74,7 @@
 					</div>
 				</div>
 				<div class="media-right">
-					{{ $parent.formatTime(song.duration) }}
+					{{ utils.formatTime(song.duration) }}
 				</div>
 			</article>
 			<div
@@ -127,14 +127,16 @@
 
 <script>
 import { mapState, mapActions } from "vuex";
-
 import Toast from "toasters";
 
+import utils from "../../js/utils";
+
 import UserIdToUsername from "../UserIdToUsername.vue";
 
 export default {
 	data() {
 		return {
+			utils,
 			dismissedWarning: false
 		};
 	},

frontend/components/Station/Station.vue

@@ -133,7 +133,7 @@
 							</div>
 						</div>
 						<div class="media-right">
-							{{ formatTime(currentSong.duration) }}
+							{{ utils.formatTime(currentSong.duration) }}
 						</div>
 					</article>
 					<p v-if="noSong" class="center">
@@ -175,7 +175,7 @@
 							</div>
 						</div>
 						<div class="media-right">
-							{{ formatTime(song.duration) }}
+							{{ utils.formatTime(song.duration) }}
 						</div>
 					</article>
 					<a
@@ -200,7 +200,7 @@
 						<div class="column is-12-desktop">
 							<h4 id="time-display">
 								{{ timeElapsed }} /
-								{{ formatTime(currentSong.duration) }}
+								{{ utils.formatTime(currentSong.duration) }}
 							</h4>
 							<h3>{{ currentSong.title }}</h3>
 							<h4 class="thin" style="margin-left: 0">
@@ -323,7 +323,7 @@
 							</h4>
 							<h5>
 								{{ timeElapsed }} /
-								{{ formatTime(currentSong.duration) }}
+								{{ utils.formatTime(currentSong.duration) }}
 							</h5>
 							<div>
 								<form class="columns" action="#">
@@ -433,10 +433,12 @@ 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,
@@ -625,33 +627,6 @@ export default {
 				)}%`;
 			}
 		},
-		formatTime(originalDuration) {
-			if (originalDuration) {
-				if (originalDuration < 0) return "0:00";
-
-				let duration = originalDuration;
-				let hours = Math.floor(duration / (60 * 60));
-				duration -= hours * 60 * 60;
-				let minutes = Math.floor(duration / 60);
-				duration -= minutes * 60;
-				let seconds = Math.floor(duration);
-
-				if (hours === 0) {
-					hours = "";
-				}
-
-				if (hours > 0) {
-					if (minutes < 10) minutes = `0${minutes}`;
-				}
-
-				if (seconds < 10) {
-					seconds = `0${seconds}`;
-				}
-
-				return `${hours}${hours ? ":" : ""}${minutes}:${seconds}`;
-			}
-			return false;
-		},
 		calculateTimeElapsed() {
 			if (
 				this.playerReady &&
@@ -747,7 +722,7 @@ export default {
 			const songDuration = this.currentSong.duration;
 			if (songDuration <= duration) this.player.pauseVideo();
 			if (!this.paused && duration <= songDuration)
-				this.timeElapsed = this.formatTime(duration);
+				this.timeElapsed = utils.formatTime(duration);
 		},
 		toggleLock() {
 			window.socket.emit("stations.toggleLock", this.station._id, res => {

frontend/components/pages/Home.vue

@@ -7,7 +7,7 @@
 				<div class="group-title">
 					Stations&nbsp;
 					<a
-						v-if="$parent.loggedIn"
+						v-if="loggedIn"
 						href="#"
 						@click="
 							openModal({
@@ -154,9 +154,9 @@ export default {
 			);
 		},
 		...mapState({
-			modals: state => state.modals.modals.home,
 			loggedIn: state => state.user.auth.loggedIn,
-			userId: state => state.user.auth.userId
+			userId: state => state.user.auth.userId,
+			modals: state => state.modals.modals.home
 		})
 	},
 	mounted() {

frontend/js/utils.js

@@ -1,5 +1,5 @@
 export default {
-	guid: () =>
+	guid: () => {
 		[1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1]
 			.map(b =>
 				b
@@ -8,5 +8,33 @@ export default {
 							.substring(1)
 					: "-"
 			)
-			.join("")
+			.join("");
+	},
+	formatTime: originalDuration => {
+		if (originalDuration) {
+			if (originalDuration < 0) return "0:00";
+
+			let duration = originalDuration;
+			let hours = Math.floor(duration / (60 * 60));
+			duration -= hours * 60 * 60;
+			let minutes = Math.floor(duration / 60);
+			duration -= minutes * 60;
+			let seconds = Math.floor(duration);
+
+			if (hours === 0) {
+				hours = "";
+			}
+
+			if (hours > 0) {
+				if (minutes < 10) minutes = `0${minutes}`;
+			}
+
+			if (seconds < 10) {
+				seconds = `0${seconds}`;
+			}
+
+			return `${hours}${hours ? ":" : ""}${minutes}:${seconds}`;
+		}
+		return false;
+	}
 };