From de0558b8a86aa599ad0605d01ffc4a09a1fbcb86 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Wed, 1 Mar 2023 22:53:27 +0100
Subject: [PATCH 01/19] Admins set to a limited duration

---
 server/modules/AuthService.js                 |  5 ++-
 server/modules/DataBase.js                    |  6 ++--
 server/modules/Middlewares.js                 |  2 +-
 server/modules/api_endpoints/ProtubeApi.js    | 32 +++----------------
 .../modules/socket_endpoints/RemoteSocket.js  | 10 +++---
 5 files changed, 16 insertions(+), 39 deletions(-)

diff --git a/server/modules/AuthService.js b/server/modules/AuthService.js
index 847de67..05e0c0a 100644
--- a/server/modules/AuthService.js
+++ b/server/modules/AuthService.js
@@ -14,7 +14,6 @@ passport.use(
       tokenURL: tokenURL,
       clientID: process.env.OAUTH_CLIENT_ID,
       clientSecret: process.env.OAUTH_CLIENT_SECRET,
-      //callbackURL: "http://localhost:3000/api/auth/example/callback"
     },
     async function (accessToken, refreshToken, profile, done) {
       let response = await fetch(
@@ -30,13 +29,13 @@ passport.use(
         await User.upsert({
           id: userData.id,
           name: userData.name,
-          admin: +userData.admin,
+          admin_until: +userData.admin_until,
           refresh_token: refreshToken,
           access_token: accessToken,
         });
         return done(null, {
           id: userData.id,
-          admin: userData.admin,
+          admin_until: userData.admin_until,
           name: userData.name,
         });
       }
diff --git a/server/modules/DataBase.js b/server/modules/DataBase.js
index c4bf435..c3c8c2e 100644
--- a/server/modules/DataBase.js
+++ b/server/modules/DataBase.js
@@ -38,11 +38,11 @@ this.sequelize
 
 class User extends Model {
   isAdmin() {
-    return this.admin;
+    return this.admin_until > getCurrentUnix();
   }
 
   hasValidRemote() {
-    return this.admin || this.valid_remote_until > getCurrentUnix();
+    return this.isAdmin() || this.valid_remote_until > getCurrentUnix();
   }
 
   setValidRemote() {
@@ -73,7 +73,7 @@ User.init(
       primaryKey: true,
     },
     name: DataTypes.TEXT,
-    admin: DataTypes.BOOLEAN,
+    admin_until: DataTypes.INTEGER,
     valid_remote_until: {
       type: DataTypes.INTEGER,
       defaultValue: 0,
diff --git a/server/modules/Middlewares.js b/server/modules/Middlewares.js
index 3e181f3..1aff37f 100644
--- a/server/modules/Middlewares.js
+++ b/server/modules/Middlewares.js
@@ -33,7 +33,7 @@ exports.socketCheckAuthenticated = (socket, next) => {
 
 exports.socketCheckAdminAuthenticated = (socket, next) => {
   if (socket.request.isAuthenticated()) {
-    if (socket.request.user.admin) return next();
+    if (socket.request.user.isAdmin()) return next();
     else return next(new Error("forbidden"));
   }
   // accept localhost connections also to be admin (local client)
diff --git a/server/modules/api_endpoints/ProtubeApi.js b/server/modules/api_endpoints/ProtubeApi.js
index 592db72..43e1944 100644
--- a/server/modules/api_endpoints/ProtubeApi.js
+++ b/server/modules/api_endpoints/ProtubeApi.js
@@ -15,46 +15,24 @@ this.protubeApi.post("/updateadmin", async function (req, res) {
     `Attempt from ${req.hostname} to update the admin status of a user`
   );
   // Check if the required data is present and parse it
-  if (!req.body?.user_id || !req.body?.admin) {
+  if (!req.body?.user_id || !req.body?.admin_until) {
     logger.apiInfo("Request had incomplete body");
     return res.send({ success: enums.FAIL, message: "Incomplete body" });
   }
   const userID = parseInt(req.body.user_id);
-  const isAdmin = parseInt(req.body.admin) === 1;
+  const adminUntil = parseInt(req.body.admin);
 
   // finding and updating the users admin status in the database
   const user = await User.findByPk(userID);
-
   if (!user) {
     logger.apiInfo("User is not found!");
     return res.send({ success: enums.FAIL, message: "User not found!" });
   }
-  user.admin = isAdmin;
-  await user.save();
-  logger.apiInfo(`User ${userID}'s new admin status: ${isAdmin}`);
-
-  if (isAdmin) return res.send({ success: enums.SUCCESS });
-
-  // disconnecting admin screen and remote sockets if present
-  const sockets = await io.of("/socket/remote/admin").fetchSockets();
-  const screenSockets = await io.of("/socket/screen/admin").fetchSockets();
-
-  for (const sock of sockets) {
-    await sock.request.user.reload();
-    if (sock.request.user.id === userID) {
-      logger.apiInfo(`Disconnected admin remote socket`);
-      sock.disconnect(true);
-    }
-  }
 
-  for (const sock of screenSockets) {
-    await sock.request.user.reload();
-    if (sock.request.user.id === userID) {
-      logger.apiInfo(`Disconnected admin screen socket`);
-      sock.disconnect(true);
-    }
-  }
+  user.admin_until = adminUntil;
+  await user.save();
 
+  logger.apiInfo(`User ${userID}'s is admin until: ${adminUntil}`);
   return res.send({ success: enums.SUCCESS });
 });
 
diff --git a/server/modules/socket_endpoints/RemoteSocket.js b/server/modules/socket_endpoints/RemoteSocket.js
index 2dca179..5da40bc 100644
--- a/server/modules/socket_endpoints/RemoteSocket.js
+++ b/server/modules/socket_endpoints/RemoteSocket.js
@@ -19,7 +19,7 @@ endpoint.on("connection", (socket) => {
       const result = await youtube.search(
         request.query,
         request.continuationToken,
-        socket.request.user.admin,
+        socket.request.user.isAdmin(),
         queueManager.getQueue()
       );
       callback(result);
@@ -33,7 +33,7 @@ endpoint.on("connection", (socket) => {
     try {
       const videos = await youtube.getVideosInPlaylist(
         playlistId,
-        socket.request.user.admin
+        socket.request.user.isAdmin()
       );
       videos.forEach((video) => (video.user = formatUser(socket)));
       callback(queueManager.addAllFair(videos));
@@ -44,7 +44,7 @@ endpoint.on("connection", (socket) => {
 
   socket.on("fetch-then-add-video", async (videoId, callback) => {
     try {
-      const video = await youtube.getVideo(videoId, socket.request.user.admin);
+      const video = await youtube.getVideo(videoId, socket.request.user.isAdmin());
       video.user = formatUser(socket);
 
       callback({ success: queueManager.addFair(video) });
@@ -62,7 +62,7 @@ endpoint.on("connection", (socket) => {
         success: queueManager.removeVideos(
           videoIDs,
           socket.request.session.passport.user.id,
-          socket.request.user.admin
+          socket.request.user.isAdmin()
         ),
       });
     } catch (e) {
@@ -82,7 +82,7 @@ function formatUser(socket) {
   return {
     name: socket.request.user.name,
     id: socket.request.user.id,
-    admin: socket.request.user.admin,
+    admin: socket.request.user.isAdmin(),
   };
 }
 

From 2e474218abe92f8e3e26da3c56a8e84bffac794b Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Thu, 9 Mar 2023 10:10:09 +0100
Subject: [PATCH 02/19] Optional overlay

---
 client/src/components/MasterControls.vue      | 22 +++++++++
 .../src/components/ScreenSettingsButton.vue   | 46 +++++++++++++++++++
 deployment.yml                                | 41 +++++++++++++++++
 enums.json                                    |  6 +++
 server/modules/ScreenSettings.js              | 34 ++++++++++++++
 .../modules/socket_endpoints/AdminRemote.js   | 14 ++++++
 .../modules/socket_endpoints/ScreenSocket.js  |  4 ++
 7 files changed, 167 insertions(+)
 create mode 100644 client/src/components/ScreenSettingsButton.vue
 create mode 100644 deployment.yml
 create mode 100644 server/modules/ScreenSettings.js

diff --git a/client/src/components/MasterControls.vue b/client/src/components/MasterControls.vue
index 8582fef..90d1d08 100644
--- a/client/src/components/MasterControls.vue
+++ b/client/src/components/MasterControls.vue
@@ -77,6 +77,7 @@
             </font-awesome-icon>
           </div>
           <!--     New code button     -->
+          <ScreenSettingsButton :screenSetting="screenSetting" @click="nextScreenSetting()"/>
           <div class="relative ml-auto">
             <div class="absolute -right-full min-w-max">
               <button
@@ -98,10 +99,12 @@ import { ref, onBeforeMount, onBeforeUnmount, defineEmits } from "vue";
 import { useRouter } from "vue-router";
 import enums from "@/js/Enums";
 import ContentField from "../layout/ContentField.vue";
+import ScreenSettingsButton from "./ScreenSettingsButton.vue";
 
 const emit = defineEmits(["display-toast"]);
 
 const user = ref({});
+const screenSetting = ref(enums.SCREEN_SETTINGS.SHOW_DEFAULT);
 const playerSettings = ref({
   volume: 75,
   playerMode: enums.MODES.IDLE,
@@ -136,6 +139,10 @@ socket.on("update-admin-panel", (newSettings) => {
   playerSettings.value = newSettings;
 });
 
+socket.on("new-screen-setting", (newSetting) => {
+  screenSetting.value = newSetting;
+});
+
 function displayToast(toast) {
   emit("display-toast", toast);
 }
@@ -187,6 +194,21 @@ async function toggleRadioProtube() {
   });
 }
 
+async function nextScreenSetting() {
+  let nextSetting = (screenSetting.value++) % 4;
+  console.log("next");
+
+  const data = await new Promise((resolve) => {
+    socket.emit("set-screen-setting", nextSetting, callback => {
+      resolve(callback);
+    });
+  });
+  displayToast({
+    status: data.status ?? enums.STATUS.SUCCESS,
+    message: data.message ?? `Successfully changed screen setting!`,
+  });
+}
+
 async function skipVideo() {
   const data = await new Promise((resolve) => {
     socket.emit("skip-video", (callback) => {
diff --git a/client/src/components/ScreenSettingsButton.vue b/client/src/components/ScreenSettingsButton.vue
new file mode 100644
index 0000000..a3dfcb2
--- /dev/null
+++ b/client/src/components/ScreenSettingsButton.vue
@@ -0,0 +1,46 @@
+<template>
+    <transition name="slide-up">
+        <button>{{ currentScreenSetting }}</button>
+    </transition>
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+import enums from "@/js/Enums";
+
+const props = defineProps({
+    screenSetting: Number,
+});
+
+const currentScreenSetting = computed(() => {
+    switch (props.screenSetting) {
+        case enums.SCREEN_SETTINGS.SHOW_DEFAULT:
+            return "Default";
+        case enums.SCREEN_SETTINGS.SHOW_QUEUE:
+            return "Queue only";
+        case enums.SCREEN_SETTINGS.SHOW_PHOTOS:
+            return "Photos only";
+        case enums.SCREEN_SETTINGS.SHOW_NOTHING:
+        default:
+            return "Nothing";
+    }
+});
+
+</script>
+
+<style>
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+</style>
\ No newline at end of file
diff --git a/deployment.yml b/deployment.yml
new file mode 100644
index 0000000..574d911
--- /dev/null
+++ b/deployment.yml
@@ -0,0 +1,41 @@
+version: "3.1"
+
+services:
+  mysql:
+    image: "mysql:8.0"
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: "thisisareallystrongpassword123"
+      MYSQL_DATABASE: "protube_production"
+      MYSQL_USER: "protube_mainuser"
+      MYSQL_PASSWORD: "hetan9t84anne"
+
+  
+  nginx-proxy:
+    image: 'jc21/nginx-proxy-manager:latest'
+    restart: always
+    ports:
+      - '80:80'
+      - '81:81'
+      - '443:443'
+    volumes:
+      - ./data:/data
+      - ./letsencrypt:/etc/letsencrypt
+
+  protube:
+    image: "hyttioaoac/protube:latest"
+    restart: "always"
+    pull_policy: "always"
+    volumes:
+      - ./protube/.env:/xxxx/.env
+      - ./protube/logs:/xxxx/logs
+  
+
+  phpmyadmin:
+    image: phpmyadmin
+    restart: always
+    ports:
+      - 8080:80
+    environment:
+      - PMA_HOST=mysql
+
diff --git a/enums.json b/enums.json
index 921ee34..61ae45e 100644
--- a/enums.json
+++ b/enums.json
@@ -16,5 +16,11 @@
   "TYPES": {
     "RADIO": 0,
     "VIDEO": 1
+  },
+  "SCREEN_SETTINGS": {
+    "SHOW_QUEUE": 0,
+    "SHOW_PHOTOS": 1,
+    "SHOW_NOTHING": 2,
+    "SHOW_DEFAULT": 3
   }
 }
diff --git a/server/modules/ScreenSettings.js b/server/modules/ScreenSettings.js
new file mode 100644
index 0000000..01ffb2f
--- /dev/null
+++ b/server/modules/ScreenSettings.js
@@ -0,0 +1,34 @@
+let screenSetting = enums.SCREEN_SETTINGS.SHOW_DEFAULT;
+
+
+exports.showOnlyQueue = () => {
+    screenSetting = enums.SCREEN_SETTINGS.SHOW_QUEUE;
+}
+
+
+exports.showOnlyPhotos = () => {
+    screenSetting = enums.SCREEN_SETTINGS.SHOW_PHOTOS;
+}
+
+
+exports.showNothing = () => {
+    screenSetting = enums.SCREEN_SETTINGS.SHOW_NOTHING;
+}
+
+
+exports.showDefault = () => {
+    screenSetting = enums.SCREEN_SETTINGS.SHOW_DEFAULT;
+}
+
+exports.getCurrentSetting = () => screenSetting;
+
+exports.newScreenSetting = (_newSetting) => {
+    let newSetting = parseInt(_newSetting);
+    if(newSetting < 0 || newSetting > 3) 
+        throw new hardError(`Invalid screen setting!`);
+    
+    
+    screenSetting = newSetting;
+
+    eventbus.emit('new-screen-setting', newSetting);
+}
\ No newline at end of file
diff --git a/server/modules/socket_endpoints/AdminRemote.js b/server/modules/socket_endpoints/AdminRemote.js
index 7f5d5bd..71306bf 100644
--- a/server/modules/socket_endpoints/AdminRemote.js
+++ b/server/modules/socket_endpoints/AdminRemote.js
@@ -13,6 +13,7 @@ const {
 const { adminResetScreenCode } = require("../ScreenCode");
 const radio = require("../RadioStations");
 const queueManager = require("../QueueManager");
+const screenSettings = require('../ScreenSettings');
 
 endpoint.use(socketCheckAdminAuthenticated);
 
@@ -93,6 +94,15 @@ endpoint.on("connection", (socket) => {
     }
   });
 
+  socket.on("set-screen-setting", (newSetting, callback) => {
+    logger.adminInfo(`${socket.id} Requested to set the screensetting to ${newSetting}`);
+    try {
+      callback({ success: screenSettings.newScreenSetting(newSetting) });
+    } catch (e) {
+      callback(e.getInfo());
+    }
+  });
+
   // change the screen's volume
   socket.on("set-new-volume", (volume, callback) => {
     logger.adminInfo(
@@ -117,6 +127,10 @@ eventBus.on("queue-update", () => {
   });
 });
 
+eventBus.on("new-screen-setting", (newSetting) => {
+  endpoint.emit("new-screen-setting", newSetting);
+});
+
 function updateAdminPanels() {
   endpoint.emit("update-admin-panel", {
     volume: getVolume(),
diff --git a/server/modules/socket_endpoints/ScreenSocket.js b/server/modules/socket_endpoints/ScreenSocket.js
index c688993..7805e15 100644
--- a/server/modules/socket_endpoints/ScreenSocket.js
+++ b/server/modules/socket_endpoints/ScreenSocket.js
@@ -65,6 +65,10 @@ eventBus.on("new-video-timestamp", (timestamp) => {
   endpoint.emit("new-video-timestamp", timestamp);
 });
 
+eventBus.on("new-screen-setting", (newSetting) => {
+  endpoint.emit("new-screen-setting", newSetting);
+});
+
 function emitNewPhoto() {
   if (newPhotoInterval === null) {
     newPhotoInterval = setInterval(emitNewPhoto, 10000);

From 5d8530871aa4e83ceb60ab4d3e8bdf7a260bebc8 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Sat, 29 Apr 2023 09:19:00 +0200
Subject: [PATCH 03/19] Optional screen overlays

---
 client/src/components/MasterControls.vue      |   5 +-
 client/src/components/PhotosOverlay.vue       |  40 +++++
 client/src/components/RadioScreen.vue         |  48 +++---
 client/src/components/ScreenQueue.vue         |  50 ++++++
 client/src/components/VideoCard.vue           |   2 +-
 client/src/views/ProtubeScreen.vue            | 158 ++++++++----------
 enums.json                                    |   3 +-
 server/modules/ScreenSettings.js              |  32 +---
 .../modules/socket_endpoints/AdminRemote.js   |   6 +-
 .../modules/socket_endpoints/ScreenSocket.js  |   7 +
 10 files changed, 206 insertions(+), 145 deletions(-)
 create mode 100644 client/src/components/PhotosOverlay.vue
 create mode 100644 client/src/components/ScreenQueue.vue

diff --git a/client/src/components/MasterControls.vue b/client/src/components/MasterControls.vue
index 90d1d08..2b8357b 100644
--- a/client/src/components/MasterControls.vue
+++ b/client/src/components/MasterControls.vue
@@ -195,11 +195,8 @@ async function toggleRadioProtube() {
 }
 
 async function nextScreenSetting() {
-  let nextSetting = (screenSetting.value++) % 4;
-  console.log("next");
-
   const data = await new Promise((resolve) => {
-    socket.emit("set-screen-setting", nextSetting, callback => {
+    socket.emit("set-screen-setting", callback => {
       resolve(callback);
     });
   });
diff --git a/client/src/components/PhotosOverlay.vue b/client/src/components/PhotosOverlay.vue
new file mode 100644
index 0000000..139d194
--- /dev/null
+++ b/client/src/components/PhotosOverlay.vue
@@ -0,0 +1,40 @@
+<template>
+    <div v-if="photo && !photo.error && photo.url !== ''">
+        <div class="flex h-screen justify-center overflow-x-hidden p-5">
+            <img
+            :src="photo.url"
+            class="dark:bg-proto_secondary_gray-dark -z-10 h-full max-w-none rounded-lg bg-white"
+            alt="Loading..." />
+        </div>
+        <div class="absolute top-0 left-0 mt-2 ml-4 rounded-lg text-lg">
+            <div
+            class="border-proto_blue dark:bg-proto_secondary_gray-dark rounded-lg border-l-4 bg-white p-1 px-4 py-2 text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
+            Album: {{ photo.album_name }}<br />
+            Taken on: {{ photo.date_taken }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import socket from "@/js/ScreenSocket";
+import { ref, onMounted } from "vue";
+
+onMounted(async () => {
+    photo.value = await new Promise((resolve) => {
+        socket.emit("get-photo", (result) => {
+            resolve(result);
+        });
+    });
+});
+
+const photo = ref({
+  url: "",
+  album_name: "",
+  date_taken: 0,
+});
+
+socket.on("photo-update", (newPhoto) => {
+  photo.value = newPhoto;
+});
+</script>
\ No newline at end of file
diff --git a/client/src/components/RadioScreen.vue b/client/src/components/RadioScreen.vue
index 760e6b2..8de1b77 100644
--- a/client/src/components/RadioScreen.vue
+++ b/client/src/components/RadioScreen.vue
@@ -1,28 +1,30 @@
 <template>
-  <div class="z-50">
-    <div class="relative overflow-hidden rounded-lg p-1 text-white">
-      <img
-        :alt="radio.o"
-        class="bg-proto_blue hover:bg-proto_blue/80 overflow-hidden truncate rounded-lg"
-        style="width: 150px"
-        :src="`https://www.nederland.fm/i/l/${radio.z}.gif`" />
-      <div
-        class="from-proto_blue absolute -top-1/2 -left-1/4 -z-10 h-52 w-52 animate-[spin_3s_linear_infinite] bg-gradient-to-r via-white to-white" />
+  <div class="absolute right-0 bottom-0 mr-6 place-items-end">
+    <div class="z-50">
+      <div class="relative overflow-hidden rounded-lg p-1 text-white">
+        <img
+          :alt="radio.o"
+          class="bg-proto_blue hover:bg-proto_blue/80 overflow-hidden truncate rounded-lg"
+          style="width: 150px"
+          :src="`https://www.nederland.fm/i/l/${radio.z}.gif`" />
+        <div
+          class="from-proto_blue absolute -top-1/2 -left-1/4 -z-10 h-52 w-52 animate-[spin_3s_linear_infinite] bg-gradient-to-r via-white to-white" />
+      </div>
+      <br />
+      <audio
+        id="radio"
+        autoplay
+        :src="radio.m"
+        frameborder="0"
+        width="400"
+        height="200"></audio>
+      <button
+        v-if="playButton"
+        class="bg-proto_blue hover:bg-proto_blue/80 my-auto mx-auto mt-5 flex rounded-md py-1 px-2 text-white shadow-md"
+        @click="playClick">
+        play audio
+      </button>
     </div>
-    <br />
-    <audio
-      id="radio"
-      autoplay
-      :src="radio.m"
-      frameborder="0"
-      width="400"
-      height="200"></audio>
-    <button
-      v-if="playButton"
-      class="bg-proto_blue hover:bg-proto_blue/80 my-auto mx-auto mt-5 flex rounded-md py-1 px-2 text-white shadow-md"
-      @click="playClick">
-      play audio
-    </button>
   </div>
 </template>
 
diff --git a/client/src/components/ScreenQueue.vue b/client/src/components/ScreenQueue.vue
new file mode 100644
index 0000000..e627d5f
--- /dev/null
+++ b/client/src/components/ScreenQueue.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="absolute bottom-0 mb-1 w-screen rounded-lg">
+        <div class="flex justify-between">
+            <div
+            class="border-proto_blue dark:bg-proto_secondary_gray-dark ml-4 mb-1 rounded-lg border-l-4 bg-white p-1 px-4 py-2 font-medium text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
+            Queue: {{ currentTimeStamp.totalDuration }}
+            </div>
+        </div>
+        <div class="mx-4 mb-1 grid grid-cols-5 gap-2 overflow-hidden">
+            <VideoCard
+            v-for="(video, index) in queueWithCurrent.slice(0, 5)"
+            :key="video.id"
+            :index="index"
+            :title="video.title"
+            :name="video.user.name"
+            :channel="video.channel"
+            :duration="video.durationFormatted"
+            :thumbnail="video.thumbnail.url"
+            :videoID="video.id"
+            :textScrolling="true"
+            :roundedCorners="true"
+            :progressBar="index === 0 ? queueProgress : 0"
+            :opacity="0.9" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import VideoCard from "@/components/VideoCard.vue";
+import { computed, defineProps } from "vue";
+
+const props = defineProps({
+  queue: Array,
+  currentTimeStamp: Object,
+  currentVideo: Object
+});
+
+// Compute the queue with the currently playing video at the front
+const queueWithCurrent = computed(() => {
+  // if currentvideo = empty -> queue is empty
+  if (Object.keys(props.currentVideo).length === 0) return [];
+  return [props.currentVideo].concat(props.queue);
+});
+
+// Returns percentage of current queue
+const queueProgress = computed(() => {
+    return (props.currentTimeStamp.timestamp / props.currentVideo.duration) * 100;
+});
+
+</script>
\ No newline at end of file
diff --git a/client/src/components/VideoCard.vue b/client/src/components/VideoCard.vue
index 86f52a5..fad3c5e 100644
--- a/client/src/components/VideoCard.vue
+++ b/client/src/components/VideoCard.vue
@@ -11,7 +11,7 @@
       `">
       <div
         :style="`width:${progressBar}%;`"
-        class="bg-proto_blue absolute bottom-0 h-2 w-0 rounded-sm opacity-60"></div>
+        class="duration-500 ease-linear bg-proto_blue absolute bottom-0 h-2 w-0 rounded-sm opacity-60"></div>
       <button
         :disabled="!clickable"
         @click="$emit('video-clicked', videoID)"
diff --git a/client/src/views/ProtubeScreen.vue b/client/src/views/ProtubeScreen.vue
index 82082ea..86dcdd8 100644
--- a/client/src/views/ProtubeScreen.vue
+++ b/client/src/views/ProtubeScreen.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="dark:bg-proto_background_gray-dark">
-    <!-- empty filler block for the grid -->
     <div class="absolute top-0 mt-2 w-full">
       <div
         v-show="screenCode !== -1"
@@ -9,7 +8,7 @@
       </div>
     </div>
 
-    <div v-show="isPlayingVideo">
+    <div v-show="displayYouTube">
       <div :id="playerID" class="min-h-screen w-full" />
     </div>
 
@@ -22,67 +21,30 @@
       </div>
     </div>
 
-    <div v-if="isPlayingVideo">
-      <div class="absolute bottom-0 mb-1 w-screen rounded-lg">
-        <div class="flex justify-between">
-          <div
-            class="border-proto_blue dark:bg-proto_secondary_gray-dark ml-4 mb-1 rounded-lg border-l-4 bg-white p-1 px-4 py-2 font-medium text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
-            Queue: {{ totalDuration }}
-          </div>
-        </div>
-        <div class="mx-4 mb-1 grid grid-cols-5 gap-2 overflow-hidden">
-          <VideoCard
-            v-for="(video, index) in queueWithCurrent.slice(0, 5)"
-            :key="video.id"
-            :index="index"
-            :title="video.title"
-            :name="video.user.name"
-            :channel="video.channel"
-            :duration="video.durationFormatted"
-            :thumbnail="video.thumbnail.url"
-            :videoID="video.id"
-            :textScrolling="true"
-            :roundedCorners="true"
-            :progressBar="index === 0 ? queueProgress : 0"
-            :opacity="0.9" />
-        </div>
-      </div>
-    </div>
-
-    <div v-if="!isPlayingVideo" class="dark:text-white">
-      <div v-if="photo && !photo.error && photo.url !== ''">
-        <div class="flex h-screen justify-center overflow-x-hidden p-5">
-          <img
-            :src="photo.url"
-            class="dark:bg-proto_secondary_gray-dark -z-10 h-full max-w-none rounded-lg bg-white"
-            alt="Loading..." />
-        </div>
-        <div class="absolute top-0 left-0 mt-2 ml-4 rounded-lg text-lg">
-          <div
-            class="border-proto_blue dark:bg-proto_secondary_gray-dark rounded-lg border-l-4 bg-white p-1 px-4 py-2 text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
-            Album: {{ photo.album_name }}<br />
-            Taken on: {{ photo.date_taken }}
-          </div>
-        </div>
-      </div>
-      <div
-        v-else-if="playerState.playerType === enums.TYPES.RADIO"
-        class="grid h-screen place-items-center">
-        <div class="text-4xl dark:text-white">
-          Nothing currently in the queue...<br />
-          Visit protu.be to add some tunes!
-        </div>
-      </div>
+    <ScreenQueue 
+      v-if="displayQueue"
+      :currentVideo="playerState.video" 
+      :queue="queue" 
+      :currentTimeStamp="currentTimeStamp"
+    />
+
+    <RadioScreen 
+      v-if="isPlayingRadio"
+      :radio="playerState.radio" 
+      :volume="volume" 
+    />
+    
+    <PhotosOverlay v-if="displayPhotos"/>
 
-      <div
-        v-if="isPlayingRadio"
-        class=""
-        :class="
-          photo && !photo.error && photo.url !== ''
-            ? 'absolute right-0 bottom-0 mr-2 place-items-end'
-            : ' grid h-screen place-items-center'
-        ">
-        <RadioScreen :radio="playerState.radio" :volume="volume" />
+    <div
+      v-if="playerState.playerType === enums.TYPES.VIDEO 
+        && !isPlayingVideo
+        && !showPhotos
+      "
+      class="grid h-screen place-items-center">
+      <div class="text-4xl dark:text-white">
+        Nothing currently in the queue...<br />
+        Visit protu.be to add some tunes!
       </div>
     </div>
   </div>
@@ -96,7 +58,6 @@
 <script setup>
 import RadioScreen from "@/components/RadioScreen";
 import ReconnectionHandler from "@/components/ReconnectionHandler";
-import VideoCard from "@/components/VideoCard.vue";
 import {
   onMounted,
   onBeforeUnmount,
@@ -108,11 +69,16 @@ import {
 import socket, { connectSocket } from "@/js/ScreenSocket";
 import YoutubePlayer from "youtube-player";
 import enums from "@/js/Enums";
+import ScreenQueue from "../components/ScreenQueue.vue";
+import PhotosOverlay from "../components/PhotosOverlay.vue";
 
 const playerID = "player-" + Math.random();
-const totalDuration = ref();
-const queueProgress = ref(0);
+const currentTimeStamp = ref({
+  timestamp: 0,
+  totalDuration: "00:00:00"
+});
 const queue = ref([]);
+const screenSetting = ref(enums.SCREEN_SETTINGS.SHOW_DEFAULT);
 let player;
 const playerState = ref({
   playerMode: enums.MODES.IDLE,
@@ -124,12 +90,6 @@ const playerState = ref({
   volume: 0,
 });
 
-const photo = ref({
-  url: "",
-  album_name: "",
-  date_taken: 0,
-});
-
 const emit = defineEmits(["youtube-media-error"]);
 const props = defineProps({
   volume: {
@@ -142,26 +102,57 @@ const props = defineProps({
   },
 });
 
-// Compute the queue with the currently playing video at the front
-const queueWithCurrent = computed(() => {
-  let currentVideo = playerState.value.video;
-  // if currentvideo = empty -> queue is empty
-  if (Object.keys(currentVideo).length === 0) return [];
-  return [currentVideo].concat(queue.value);
-});
-
 const isPlayingVideo = computed(
   () =>
     playerState.value.playerType === enums.TYPES.VIDEO &&
     playerState.value.playerMode !== enums.MODES.IDLE
 );
 
+const isVideoIdle = computed(() => {
+    return playerState.value.playerType === enums.TYPES.VIDEO &&
+    playerState.value.playerMode === enums.MODES.IDLE
+});
+
 const isPlayingRadio = computed(
   () =>
     playerState.value.playerType === enums.TYPES.RADIO &&
     playerState.value.playerMode === enums.MODES.IDLE
 );
 
+// show if playing video and when in showDefault or queue only
+const displayQueue = computed(() => {
+  return isPlayingVideo.value && (showDefault.value || showQueue.value);
+});
+
+// show photos if show photos, or default and video idle
+const displayPhotos = computed(() => {
+  // show if idle or radio and set to showDefault or showNoQueue
+  if((isVideoIdle.value || isPlayingRadio.value) && (showDefault.value || showNoQueue.value)) return true;
+  // otherwise show when showPhotos
+  return showPhotos.value;
+});
+
+// show youtube screen if playing and not showPhotos
+const displayYouTube = computed(() => {
+  return !showPhotos.value && isPlayingVideo.value;
+});
+
+const showPhotos = computed(() => {
+  return screenSetting.value === enums.SCREEN_SETTINGS.SHOW_PHOTOS;
+});
+
+const showNoQueue = computed(() => {
+  return screenSetting.value === enums.SCREEN_SETTINGS.SHOW_NOQUEUE;
+});
+
+const showQueue = computed(() => {
+  return screenSetting.value === enums.SCREEN_SETTINGS.SHOW_QUEUE;
+});
+
+const showDefault = computed(() => {
+  return screenSetting.value === enums.SCREEN_SETTINGS.SHOW_DEFAULT;
+});
+
 onBeforeMount(() => {
   connectSocket();
 });
@@ -207,9 +198,8 @@ socket.on("player-update", (newState) => {
 });
 
 socket.on("new-video-timestamp", async (newStamp) => {
-  totalDuration.value = newStamp.totalDuration;
-  queueProgress.value =
-    (newStamp.timestamp / playerState.value.video.duration) * 100;
+  currentTimeStamp.value = newStamp;
+  // keep video in sync with backend
   if (Math.abs((await player.getCurrentTime()) - newStamp.timestamp) > 5) {
     player.seekTo(newStamp.timestamp, true);
     if ((await player.getPlayerState()) === 2) player.playVideo();
@@ -220,7 +210,7 @@ socket.on("queue-update", (newQueue) => {
   queue.value = newQueue.queue;
 });
 
-socket.on("photo-update", (newPhoto) => {
-  photo.value = newPhoto;
+socket.on("new-screen-setting", (newSetting) => {
+  screenSetting.value = newSetting;
 });
 </script>
diff --git a/enums.json b/enums.json
index 61ae45e..015a6fa 100644
--- a/enums.json
+++ b/enums.json
@@ -21,6 +21,7 @@
     "SHOW_QUEUE": 0,
     "SHOW_PHOTOS": 1,
     "SHOW_NOTHING": 2,
-    "SHOW_DEFAULT": 3
+    "SHOW_DEFAULT": 3,
+    "SHOW_NOQUEUE": 4
   }
 }
diff --git a/server/modules/ScreenSettings.js b/server/modules/ScreenSettings.js
index 01ffb2f..bec90f6 100644
--- a/server/modules/ScreenSettings.js
+++ b/server/modules/ScreenSettings.js
@@ -1,34 +1,8 @@
 let screenSetting = enums.SCREEN_SETTINGS.SHOW_DEFAULT;
 
-
-exports.showOnlyQueue = () => {
-    screenSetting = enums.SCREEN_SETTINGS.SHOW_QUEUE;
-}
-
-
-exports.showOnlyPhotos = () => {
-    screenSetting = enums.SCREEN_SETTINGS.SHOW_PHOTOS;
-}
-
-
-exports.showNothing = () => {
-    screenSetting = enums.SCREEN_SETTINGS.SHOW_NOTHING;
-}
-
-
-exports.showDefault = () => {
-    screenSetting = enums.SCREEN_SETTINGS.SHOW_DEFAULT;
-}
-
 exports.getCurrentSetting = () => screenSetting;
 
-exports.newScreenSetting = (_newSetting) => {
-    let newSetting = parseInt(_newSetting);
-    if(newSetting < 0 || newSetting > 3) 
-        throw new hardError(`Invalid screen setting!`);
-    
-    
-    screenSetting = newSetting;
-
-    eventbus.emit('new-screen-setting', newSetting);
+exports.newScreenSetting = () => {
+    screenSetting = (screenSetting + 1) % Object.keys(enums.SCREEN_SETTINGS).length;
+    eventBus.emit('new-screen-setting', screenSetting);
 }
\ No newline at end of file
diff --git a/server/modules/socket_endpoints/AdminRemote.js b/server/modules/socket_endpoints/AdminRemote.js
index 71306bf..20e2b05 100644
--- a/server/modules/socket_endpoints/AdminRemote.js
+++ b/server/modules/socket_endpoints/AdminRemote.js
@@ -94,10 +94,10 @@ endpoint.on("connection", (socket) => {
     }
   });
 
-  socket.on("set-screen-setting", (newSetting, callback) => {
-    logger.adminInfo(`${socket.id} Requested to set the screensetting to ${newSetting}`);
+  socket.on("set-screen-setting", (callback) => {
+    logger.adminInfo(`${socket.id} Requested to change the screensetting`);
     try {
-      callback({ success: screenSettings.newScreenSetting(newSetting) });
+      callback({ success: screenSettings.newScreenSetting() });
     } catch (e) {
       callback(e.getInfo());
     }
diff --git a/server/modules/socket_endpoints/ScreenSocket.js b/server/modules/socket_endpoints/ScreenSocket.js
index 7805e15..3f45789 100644
--- a/server/modules/socket_endpoints/ScreenSocket.js
+++ b/server/modules/socket_endpoints/ScreenSocket.js
@@ -2,6 +2,7 @@ const fetch = require("node-fetch");
 const endpoint = io.of("/socket/screen");
 const queueManager = require("../QueueManager");
 const playbackManager = require("../PlaybackManager");
+const { getCurrentSetting } = require('../ScreenSettings');
 let newPhotoInterval = null;
 let photo = null;
 
@@ -13,6 +14,8 @@ endpoint.on("connection", (socket) => {
   if (!photo) emitNewPhoto();
   socket.emit("photo-update", photo);
 
+  socket.emit("new-screen-setting", getCurrentSetting());
+
   socket.emit("queue-update", {
     queue: queueManager.getQueue(),
     duration: queueManager.getTotalDurationFormatted(),
@@ -22,6 +25,10 @@ endpoint.on("connection", (socket) => {
     logger.screenInfo(`Disconnected socket: ${socket.id}`);
   });
 
+  socket.on("get-photo", (callback) => {
+      callback(photo);
+  });
+
   socket.emit("player-update", {
     playerType: playbackManager.getPlayerType(),
     playerMode: playbackManager.getPlayerMode(),

From 6a13f72bb914b3b887c9fe0a216f49ab8dac46be Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Sat, 29 Apr 2023 10:17:25 +0200
Subject: [PATCH 04/19] Fix ui styling

---
 client/src/components/MasterControls.vue      | 83 +++++++++----------
 .../src/components/ScreenSettingsButton.vue   | 10 ++-
 client/src/main.js                            |  6 +-
 3 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/client/src/components/MasterControls.vue b/client/src/components/MasterControls.vue
index 2b8357b..ac524cb 100644
--- a/client/src/components/MasterControls.vue
+++ b/client/src/components/MasterControls.vue
@@ -11,8 +11,8 @@
         Switch Theme
       </button>
     </div>
-    <div class="md:flex">
-      <div class="mx-auto w-full text-center lg:w-2/3">
+    <div class="lg:flex text-center">
+      <div class="mx-auto my-auto lg:w-2/3 ">
         <span
           class="w-full text-right text-lg text-gray-500 dark:text-white md:text-center">
           Volume - {{ playerSettings.volume }}
@@ -24,14 +24,32 @@
           min="0"
           max="100"
           :value="playerSettings.volume" />
-        <div class="container mt-2 flex">
-          <!--     Video/Radio toggle     -->
-          <div class="flex">
-            <div class="mr-3">
-              <span class="text-sm font-medium text-gray-900 dark:text-white">
-                ProTube
-              </span>
-            </div>
+
+        <!--   Video controls   -->
+        <div class="mx-auto">
+          <font-awesome-icon
+            @click="playPause"
+            class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+            :icon="
+              playerSettings.playerMode === enums.MODES.PLAYING
+                ? 'pause'
+                : 'play'
+            ">
+          </font-awesome-icon>
+          <font-awesome-icon
+            @click="skipVideo"
+            class="mx-2 cursor-pointer text-2xl text-gray-600 dark:text-white"
+            icon="forward">
+          </font-awesome-icon>
+        </div>
+      </div>
+      <div class="mx-auto mt-2 grid grid-cols-3 md:grid-cols-1 gap-2">
+      <!--     Video/Radio toggle     -->
+          <div class="flex mx-auto">
+            <font-awesome-icon
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-tv">
+            </font-awesome-icon>
             <button
               @click="toggleRadioProtube"
               type="button"
@@ -40,7 +58,7 @@
                   ? 'bg-proto_blue'
                   : 'bg-proto_green'
               "
-              class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              class="mx-3 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
               role="switch">
               <span
                 :class="
@@ -51,44 +69,19 @@
                 class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
               </span>
             </button>
-            <div class="ml-3">
-              <span class="text-sm font-medium text-gray-900 dark:text-white">
-                Radio
-              </span>
-            </div>
-          </div>
-          <!--   Video controls   -->
-          <div class="mx-auto">
-            <!-- TODO: Add back button in admin controls -->
-            <!--<font-awesome-icon class="cursor-pointer text-2xl mx-2 text-gray-600 dark:text-white" icon="backward" />-->
-            <font-awesome-icon
-              @click="playPause"
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
-              :icon="
-                playerSettings.playerMode === enums.MODES.PLAYING
-                  ? 'pause'
-                  : 'play'
-              ">
-            </font-awesome-icon>
-            <font-awesome-icon
-              @click="skipVideo"
-              class="mx-2 cursor-pointer text-2xl text-gray-600 dark:text-white"
-              icon="forward">
-            </font-awesome-icon>
+              <font-awesome-icon
+                class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+                icon="fa-radio">
+              </font-awesome-icon>
           </div>
           <!--     New code button     -->
           <ScreenSettingsButton :screenSetting="screenSetting" @click="nextScreenSetting()"/>
-          <div class="relative ml-auto">
-            <div class="absolute -right-full min-w-max">
-              <button
-                @click="resetScreenCode"
-                class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md duration-200 hover:-translate-x-1 hover:-translate-y-0.5 hover:opacity-80">
-                New code
-              </button>
-            </div>
-          </div>
+          <button
+            @click="resetScreenCode"
+            class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md duration-200 hover:-translate-x-1 hover:-translate-y-0.5 hover:opacity-80">
+            New code
+          </button>
         </div>
-      </div>
     </div>
   </ContentField>
 </template>
diff --git a/client/src/components/ScreenSettingsButton.vue b/client/src/components/ScreenSettingsButton.vue
index a3dfcb2..19e125a 100644
--- a/client/src/components/ScreenSettingsButton.vue
+++ b/client/src/components/ScreenSettingsButton.vue
@@ -1,6 +1,10 @@
 <template>
-    <transition name="slide-up">
-        <button>{{ currentScreenSetting }}</button>
+    <transition name="slide-up" mode="out-in" class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md hover:opacity-80">
+        <button v-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_DEFAULT" >{{ currentScreenSetting }}</button>
+        <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_NOQUEUE" >{{ currentScreenSetting }}</button>
+        <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_NOTHING" >{{ currentScreenSetting }}</button>
+        <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_PHOTOS" >{{ currentScreenSetting }}</button>
+        <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_QUEUE" >{{ currentScreenSetting }}</button>
     </transition>
 </template>
 
@@ -20,6 +24,8 @@ const currentScreenSetting = computed(() => {
             return "Queue only";
         case enums.SCREEN_SETTINGS.SHOW_PHOTOS:
             return "Photos only";
+        case enums.SCREEN_SETTINGS.SHOW_NOQUEUE:
+            return "No queue";
         case enums.SCREEN_SETTINGS.SHOW_NOTHING:
         default:
             return "Nothing";
diff --git a/client/src/main.js b/client/src/main.js
index bfbd357..a9381ec 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -23,6 +23,8 @@ import {
   faTrash,
   faQuestionCircle,
   faCaretDown,
+  faRadio,
+  faTv
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -44,7 +46,9 @@ library.add(
   faSearch,
   faTrash,
   faCaretDown,
-  faQuestionCircle
+  faQuestionCircle,
+  faRadio,
+  faTv
 );
 
 import "./assets/tailwind.css";

From 83cad2af604bc2106cf359a88c5cf42da3d1bd18 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Mon, 8 May 2023 11:51:52 +0200
Subject: [PATCH 05/19] added phpmyadmin

---
 server/docker-compose.yml | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/server/docker-compose.yml b/server/docker-compose.yml
index 24cc4be..3283b32 100644
--- a/server/docker-compose.yml
+++ b/server/docker-compose.yml
@@ -12,3 +12,14 @@ services:
       MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
     ports:
       - "${DATABASE_PORT}:3306"
+
+  phpmyadmin:
+        container_name: "${DOCKER_CONTAINER_NAME}-pma"
+        image: phpmyadmin
+        ports:
+            - '3002:80'
+        environment:
+            - 'PMA_HOST=mysql'
+            - 'PMA_USER=${DATABASE_USER}'
+            - 'PMA_PASSWORD=${DATABASE_PASSWORD}'
+            - 'PMA_PORT=3002'
\ No newline at end of file

From a7dd2b4af2ee6d1113ea47b19e54cd20b7eea005 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Mon, 8 May 2023 12:13:25 +0200
Subject: [PATCH 06/19] Componentized slider

---
 client/src/components/MasterControls.vue | 97 ++++++++++++------------
 client/src/components/ToggleSlider.vue   | 30 ++++++++
 2 files changed, 77 insertions(+), 50 deletions(-)
 create mode 100644 client/src/components/ToggleSlider.vue

diff --git a/client/src/components/MasterControls.vue b/client/src/components/MasterControls.vue
index ac524cb..234cf36 100644
--- a/client/src/components/MasterControls.vue
+++ b/client/src/components/MasterControls.vue
@@ -44,44 +44,26 @@
         </div>
       </div>
       <div class="mx-auto mt-2 grid grid-cols-3 md:grid-cols-1 gap-2">
-      <!--     Video/Radio toggle     -->
-          <div class="flex mx-auto">
+        <ToggleSlider @click="toggleRadioProtube" :isLeft="playerSettings.playerType === enums.TYPES.RADIO">
+          <template #left>
             <font-awesome-icon
               class="cursor-pointer text-2xl text-gray-600 dark:text-white"
               icon="fa-tv">
             </font-awesome-icon>
-            <button
-              @click="toggleRadioProtube"
-              type="button"
-              :class="
-                playerSettings.playerType === enums.TYPES.RADIO
-                  ? 'bg-proto_blue'
-                  : 'bg-proto_green'
-              "
-              class="mx-3 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              role="switch">
-              <span
-                :class="
-                  playerSettings.playerType === enums.TYPES.RADIO
-                    ? 'translate-x-5'
-                    : 'translate-x-0'
-                "
-                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
-              </span>
-            </button>
-              <font-awesome-icon
-                class="cursor-pointer text-2xl text-gray-600 dark:text-white"
-                icon="fa-radio">
-              </font-awesome-icon>
-          </div>
-          <!--     New code button     -->
-          <ScreenSettingsButton :screenSetting="screenSetting" @click="nextScreenSetting()"/>
-          <button
-            @click="resetScreenCode"
-            class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md duration-200 hover:-translate-x-1 hover:-translate-y-0.5 hover:opacity-80">
-            New code
-          </button>
-        </div>
+          </template>
+          <template #right>
+            <font-awesome-icon
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-radio">
+            </font-awesome-icon>
+          </template>
+        </ToggleSlider>
+        <button
+          @click="resetScreenCode"
+          class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md duration-200 hover:-translate-x-1 hover:-translate-y-0.5 hover:opacity-80">
+          New code
+        </button>
+      </div>
     </div>
   </ContentField>
 </template>
@@ -92,16 +74,19 @@ import { ref, onBeforeMount, onBeforeUnmount, defineEmits } from "vue";
 import { useRouter } from "vue-router";
 import enums from "@/js/Enums";
 import ContentField from "../layout/ContentField.vue";
-import ScreenSettingsButton from "./ScreenSettingsButton.vue";
+import ToggleSlider from "./ToggleSlider.vue";
 
 const emit = defineEmits(["display-toast"]);
 
 const user = ref({});
-const screenSetting = ref(enums.SCREEN_SETTINGS.SHOW_DEFAULT);
 const playerSettings = ref({
   volume: 75,
   playerMode: enums.MODES.IDLE,
   playerType: enums.TYPES.VIDEO,
+  screenSetting: {
+    'showQueue': true,
+    'showPhotos': true
+  }
 });
 
 const router = useRouter();
@@ -132,9 +117,9 @@ socket.on("update-admin-panel", (newSettings) => {
   playerSettings.value = newSettings;
 });
 
-socket.on("new-screen-setting", (newSetting) => {
-  screenSetting.value = newSetting;
-});
+// socket.on("new-screen-setting", (newSetting) => {
+//   screenSetting.value = newSetting;
+// });
 
 function displayToast(toast) {
   emit("display-toast", toast);
@@ -187,17 +172,29 @@ async function toggleRadioProtube() {
   });
 }
 
-async function nextScreenSetting() {
-  const data = await new Promise((resolve) => {
-    socket.emit("set-screen-setting", callback => {
-      resolve(callback);
-    });
-  });
-  displayToast({
-    status: data.status ?? enums.STATUS.SUCCESS,
-    message: data.message ?? `Successfully changed screen setting!`,
-  });
-}
+// async function togglePhotosOverlay() {
+//   const data = await new Promise((resolve) => {
+//     socket.emit("toggle-photos-visibility", callback => {
+//       resolve(callback);
+//     });
+//   });
+//   displayToast({
+//     status: data.status ?? enums.STATUS.SUCCESS,
+//     message: data.message ?? `Successfully changed the photos visibility setting!`,
+//   });
+// }
+
+// async function toggleQueueOverlay() {
+//   const data = await new Promise((resolve) => {
+//     socket.emit("toggle-queue-visibility", callback => {
+//       resolve(callback);
+//     });
+//   });
+//   displayToast({
+//     status: data.status ?? enums.STATUS.SUCCESS,
+//     message: data.message ?? `Successfully changed the queue visibility setting!`,
+//   });
+// }
 
 async function skipVideo() {
   const data = await new Promise((resolve) => {
diff --git a/client/src/components/ToggleSlider.vue b/client/src/components/ToggleSlider.vue
new file mode 100644
index 0000000..78d0233
--- /dev/null
+++ b/client/src/components/ToggleSlider.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="flex mx-auto">
+        <slot name="left">Left</slot>
+        <button
+            @click="$emit('click')"
+            type="button"
+            :class="isLeft ? 'bg-proto_blue' : 'bg-proto_green'"
+            class="mx-3 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            role="switch">
+            <span
+            :class="!isLeft ? 'translate-x-5' : 'translate-x-0'"
+            class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
+            </span>
+        </button>
+        <slot name="right">Right</slot>
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+    isLeft: {
+        type: Boolean,
+        default: true
+    }
+});
+
+defineEmits(["click"]);
+</script>
\ No newline at end of file

From 146572a12525b5a8ba4fec3220125156042f57f5 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Mon, 8 May 2023 12:33:02 +0200
Subject: [PATCH 07/19] switch to toggles

---
 client/src/components/CurrentQueue.vue        |  1 -
 client/src/components/MasterControls.vue      | 84 ++++++++++++-------
 client/src/components/PhotosOverlay.vue       |  3 +-
 client/src/main.js                            | 10 ++-
 client/src/views/ProtubeScreen.vue            | 37 ++------
 enums.json                                    |  7 --
 server/modules/ScreenSettings.js              | 26 ++++--
 .../modules/socket_endpoints/AdminRemote.js   | 19 ++++-
 .../modules/socket_endpoints/ScreenSocket.js  |  2 +-
 9 files changed, 110 insertions(+), 79 deletions(-)

diff --git a/client/src/components/CurrentQueue.vue b/client/src/components/CurrentQueue.vue
index 4d14ce2..153358a 100644
--- a/client/src/components/CurrentQueue.vue
+++ b/client/src/components/CurrentQueue.vue
@@ -128,7 +128,6 @@ const userHasItemsInQueue = computed(() => {
   const videosOfUser = queue.value.filter((video) => {
     return video.user.id === props.userID;
   });
-  console.log(videosOfUser);
   return videosOfUser.length > 0;
 });
 
diff --git a/client/src/components/MasterControls.vue b/client/src/components/MasterControls.vue
index 234cf36..375f103 100644
--- a/client/src/components/MasterControls.vue
+++ b/client/src/components/MasterControls.vue
@@ -43,7 +43,7 @@
           </font-awesome-icon>
         </div>
       </div>
-      <div class="mx-auto mt-2 grid grid-cols-3 md:grid-cols-1 gap-2">
+      <div class="mx-auto mt-2 grid grid-cols-2 lg:grid-cols-1 gap-2">
         <ToggleSlider @click="toggleRadioProtube" :isLeft="playerSettings.playerType === enums.TYPES.RADIO">
           <template #left>
             <font-awesome-icon
@@ -58,6 +58,34 @@
             </font-awesome-icon>
           </template>
         </ToggleSlider>
+        <ToggleSlider @click="togglePhotosOverlay" :isLeft="playerSettings.screenSettings.showPhotos">
+          <template #left>
+            <font-awesome-icon
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-camera">
+            </font-awesome-icon>
+          </template>
+          <template #right>
+            <font-awesome-icon
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-ban">
+            </font-awesome-icon>
+          </template>
+        </ToggleSlider>
+        <ToggleSlider @click="toggleQueueOverlay" :isLeft="playerSettings.screenSettings.showQueue">
+          <template #left>
+            <font-awesome-icon
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-rectangle-list">
+            </font-awesome-icon>
+          </template>
+          <template #right>
+            <font-awesome-icon
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-ban">
+            </font-awesome-icon>
+          </template>
+        </ToggleSlider>
         <button
           @click="resetScreenCode"
           class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md duration-200 hover:-translate-x-1 hover:-translate-y-0.5 hover:opacity-80">
@@ -83,7 +111,7 @@ const playerSettings = ref({
   volume: 75,
   playerMode: enums.MODES.IDLE,
   playerType: enums.TYPES.VIDEO,
-  screenSetting: {
+  screenSettings: {
     'showQueue': true,
     'showPhotos': true
   }
@@ -117,9 +145,9 @@ socket.on("update-admin-panel", (newSettings) => {
   playerSettings.value = newSettings;
 });
 
-// socket.on("new-screen-setting", (newSetting) => {
-//   screenSetting.value = newSetting;
-// });
+socket.on("queue-photos-visibility-changed", (newSetting) => {
+  playerSettings.value.screenSettings = newSetting;
+});
 
 function displayToast(toast) {
   emit("display-toast", toast);
@@ -172,29 +200,29 @@ async function toggleRadioProtube() {
   });
 }
 
-// async function togglePhotosOverlay() {
-//   const data = await new Promise((resolve) => {
-//     socket.emit("toggle-photos-visibility", callback => {
-//       resolve(callback);
-//     });
-//   });
-//   displayToast({
-//     status: data.status ?? enums.STATUS.SUCCESS,
-//     message: data.message ?? `Successfully changed the photos visibility setting!`,
-//   });
-// }
-
-// async function toggleQueueOverlay() {
-//   const data = await new Promise((resolve) => {
-//     socket.emit("toggle-queue-visibility", callback => {
-//       resolve(callback);
-//     });
-//   });
-//   displayToast({
-//     status: data.status ?? enums.STATUS.SUCCESS,
-//     message: data.message ?? `Successfully changed the queue visibility setting!`,
-//   });
-// }
+async function togglePhotosOverlay() {
+  const data = await new Promise((resolve) => {
+    socket.emit("toggle-photos-visibility", callback => {
+      resolve(callback);
+    });
+  });
+  displayToast({
+    status: data.status ?? enums.STATUS.SUCCESS,
+    message: data.message ?? `Successfully changed the photos visibility setting!`,
+  });
+}
+
+async function toggleQueueOverlay() {
+  const data = await new Promise((resolve) => {
+    socket.emit("toggle-queue-visibility", callback => {
+      resolve(callback);
+    });
+  });
+  displayToast({
+    status: data.status ?? enums.STATUS.SUCCESS,
+    message: data.message ?? `Successfully changed the queue visibility setting!`,
+  });
+}
 
 async function skipVideo() {
   const data = await new Promise((resolve) => {
diff --git a/client/src/components/PhotosOverlay.vue b/client/src/components/PhotosOverlay.vue
index 139d194..d076391 100644
--- a/client/src/components/PhotosOverlay.vue
+++ b/client/src/components/PhotosOverlay.vue
@@ -1,11 +1,12 @@
 <template>
-    <div v-if="photo && !photo.error && photo.url !== ''">
+    <div>
         <div class="flex h-screen justify-center overflow-x-hidden p-5">
             <img
             :src="photo.url"
             class="dark:bg-proto_secondary_gray-dark -z-10 h-full max-w-none rounded-lg bg-white"
             alt="Loading..." />
         </div>
+        kutfotos
         <div class="absolute top-0 left-0 mt-2 ml-4 rounded-lg text-lg">
             <div
             class="border-proto_blue dark:bg-proto_secondary_gray-dark rounded-lg border-l-4 bg-white p-1 px-4 py-2 text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
diff --git a/client/src/main.js b/client/src/main.js
index a9381ec..ed39c12 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -24,7 +24,10 @@ import {
   faQuestionCircle,
   faCaretDown,
   faRadio,
-  faTv
+  faTv,
+  faRectangleList,
+  faBan,
+  faCamera
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -48,7 +51,10 @@ library.add(
   faCaretDown,
   faQuestionCircle,
   faRadio,
-  faTv
+  faTv,
+  faRectangleList,
+  faBan,
+  faCamera
 );
 
 import "./assets/tailwind.css";
diff --git a/client/src/views/ProtubeScreen.vue b/client/src/views/ProtubeScreen.vue
index 86dcdd8..691a28a 100644
--- a/client/src/views/ProtubeScreen.vue
+++ b/client/src/views/ProtubeScreen.vue
@@ -8,7 +8,7 @@
       </div>
     </div>
 
-    <div v-show="displayYouTube">
+    <div v-show="isPlayingVideo && !screenSetting.showPhotos">
       <div :id="playerID" class="min-h-screen w-full" />
     </div>
 
@@ -78,7 +78,10 @@ const currentTimeStamp = ref({
   totalDuration: "00:00:00"
 });
 const queue = ref([]);
-const screenSetting = ref(enums.SCREEN_SETTINGS.SHOW_DEFAULT);
+const screenSetting = ref({
+  'showQueue': true,
+  'showPhotos': true
+});
 let player;
 const playerState = ref({
   playerMode: enums.MODES.IDLE,
@@ -121,36 +124,12 @@ const isPlayingRadio = computed(
 
 // show if playing video and when in showDefault or queue only
 const displayQueue = computed(() => {
-  return isPlayingVideo.value && (showDefault.value || showQueue.value);
+  return isPlayingVideo.value && screenSetting.value.showQueue;
 });
 
 // show photos if show photos, or default and video idle
 const displayPhotos = computed(() => {
-  // show if idle or radio and set to showDefault or showNoQueue
-  if((isVideoIdle.value || isPlayingRadio.value) && (showDefault.value || showNoQueue.value)) return true;
-  // otherwise show when showPhotos
-  return showPhotos.value;
-});
-
-// show youtube screen if playing and not showPhotos
-const displayYouTube = computed(() => {
-  return !showPhotos.value && isPlayingVideo.value;
-});
-
-const showPhotos = computed(() => {
-  return screenSetting.value === enums.SCREEN_SETTINGS.SHOW_PHOTOS;
-});
-
-const showNoQueue = computed(() => {
-  return screenSetting.value === enums.SCREEN_SETTINGS.SHOW_NOQUEUE;
-});
-
-const showQueue = computed(() => {
-  return screenSetting.value === enums.SCREEN_SETTINGS.SHOW_QUEUE;
-});
-
-const showDefault = computed(() => {
-  return screenSetting.value === enums.SCREEN_SETTINGS.SHOW_DEFAULT;
+  return (isVideoIdle.value || isPlayingRadio.value) || (isPlayingVideo.value && screenSetting.value.showPhotos);
 });
 
 onBeforeMount(() => {
@@ -210,7 +189,7 @@ socket.on("queue-update", (newQueue) => {
   queue.value = newQueue.queue;
 });
 
-socket.on("new-screen-setting", (newSetting) => {
+socket.on("queue-photos-visibility-changed", (newSetting) => {
   screenSetting.value = newSetting;
 });
 </script>
diff --git a/enums.json b/enums.json
index 015a6fa..921ee34 100644
--- a/enums.json
+++ b/enums.json
@@ -16,12 +16,5 @@
   "TYPES": {
     "RADIO": 0,
     "VIDEO": 1
-  },
-  "SCREEN_SETTINGS": {
-    "SHOW_QUEUE": 0,
-    "SHOW_PHOTOS": 1,
-    "SHOW_NOTHING": 2,
-    "SHOW_DEFAULT": 3,
-    "SHOW_NOQUEUE": 4
   }
 }
diff --git a/server/modules/ScreenSettings.js b/server/modules/ScreenSettings.js
index bec90f6..227c74f 100644
--- a/server/modules/ScreenSettings.js
+++ b/server/modules/ScreenSettings.js
@@ -1,8 +1,22 @@
-let screenSetting = enums.SCREEN_SETTINGS.SHOW_DEFAULT;
+let showQueue = true;
+let showPhotos = true;
 
-exports.getCurrentSetting = () => screenSetting;
 
-exports.newScreenSetting = () => {
-    screenSetting = (screenSetting + 1) % Object.keys(enums.SCREEN_SETTINGS).length;
-    eventBus.emit('new-screen-setting', screenSetting);
-}
\ No newline at end of file
+exports.getCurrentSetting = () => {
+    return {
+        'showQueue': showQueue,
+        'showPhotos': showPhotos
+    }
+}
+
+exports.toggleQueueVisibility = () => {
+    showQueue = !showQueue;
+    eventBus.emit('queue-photos-visibility-changed', this.getCurrentSetting());
+    return enums.SUCCESS;
+}
+
+exports.togglePhotosVisibility = () => {
+    showPhotos = !showPhotos;
+    eventBus.emit('queue-photos-visibility-changed', this.getCurrentSetting());
+    return enums.SUCCESS;
+}
diff --git a/server/modules/socket_endpoints/AdminRemote.js b/server/modules/socket_endpoints/AdminRemote.js
index 20e2b05..d1b089a 100644
--- a/server/modules/socket_endpoints/AdminRemote.js
+++ b/server/modules/socket_endpoints/AdminRemote.js
@@ -41,6 +41,7 @@ endpoint.on("connection", (socket) => {
       volume: getVolume(),
       playerMode: getPlayerMode(),
       playerType: getPlayerType(),
+      screenSettings: screenSettings.getCurrentSetting()
     });
   });
 
@@ -94,10 +95,19 @@ endpoint.on("connection", (socket) => {
     }
   });
 
-  socket.on("set-screen-setting", (callback) => {
+  socket.on("toggle-photos-visibility", (callback) => {
     logger.adminInfo(`${socket.id} Requested to change the screensetting`);
     try {
-      callback({ success: screenSettings.newScreenSetting() });
+      callback({ success: screenSettings.togglePhotosVisibility() });
+    } catch (e) {
+      callback(e.getInfo());
+    }
+  });
+
+  socket.on("toggle-queue-visibility", (callback) => {
+    logger.adminInfo(`${socket.id} Requested to change the screensetting`);
+    try {
+      callback({ success: screenSettings.toggleQueueVisibility() });
     } catch (e) {
       callback(e.getInfo());
     }
@@ -127,8 +137,8 @@ eventBus.on("queue-update", () => {
   });
 });
 
-eventBus.on("new-screen-setting", (newSetting) => {
-  endpoint.emit("new-screen-setting", newSetting);
+eventBus.on("queue-photos-visibility-changed", (newSetting) => {
+  endpoint.emit("queue-photos-visibility-changed", newSetting);
 });
 
 function updateAdminPanels() {
@@ -136,5 +146,6 @@ function updateAdminPanels() {
     volume: getVolume(),
     playerMode: getPlayerMode(),
     playerType: getPlayerType(),
+    screenSettings: screenSettings.getCurrentSetting()
   });
 }
diff --git a/server/modules/socket_endpoints/ScreenSocket.js b/server/modules/socket_endpoints/ScreenSocket.js
index 3f45789..f86298e 100644
--- a/server/modules/socket_endpoints/ScreenSocket.js
+++ b/server/modules/socket_endpoints/ScreenSocket.js
@@ -14,7 +14,7 @@ endpoint.on("connection", (socket) => {
   if (!photo) emitNewPhoto();
   socket.emit("photo-update", photo);
 
-  socket.emit("new-screen-setting", getCurrentSetting());
+  socket.emit("queue-photos-visibility-changed", getCurrentSetting());
 
   socket.emit("queue-update", {
     queue: queueManager.getQueue(),

From 586e0a2c79854d42a54383fd44affa08783b1127 Mon Sep 17 00:00:00 2001
From: Menkveld <43108191+Menkveld-24@users.noreply.github.com>
Date: Mon, 8 May 2023 12:37:29 +0200
Subject: [PATCH 08/19] Feature/tempadmin (#124)

* Fix code style issues with Prettier

* Added admin_from

* Fix code style issues with Prettier

---------

Co-authored-by: Lint Action <lint-action@samuelmeuli.com>
---
 server/modules/AuthService.js                   |  1 +
 server/modules/DataBase.js                      |  5 ++++-
 server/modules/api_endpoints/ProtubeApi.js      | 10 +++++++---
 server/modules/socket_endpoints/RemoteSocket.js |  5 ++++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/server/modules/AuthService.js b/server/modules/AuthService.js
index 05e0c0a..1f65a2f 100644
--- a/server/modules/AuthService.js
+++ b/server/modules/AuthService.js
@@ -29,6 +29,7 @@ passport.use(
         await User.upsert({
           id: userData.id,
           name: userData.name,
+          admin_from: +userData.admin_from,
           admin_until: +userData.admin_until,
           refresh_token: refreshToken,
           access_token: accessToken,
diff --git a/server/modules/DataBase.js b/server/modules/DataBase.js
index c3c8c2e..dee48fb 100644
--- a/server/modules/DataBase.js
+++ b/server/modules/DataBase.js
@@ -38,7 +38,9 @@ this.sequelize
 
 class User extends Model {
   isAdmin() {
-    return this.admin_until > getCurrentUnix();
+    return (
+      this.admin_from < getCurrentUnix() && this.admin_until > getCurrentUnix()
+    );
   }
 
   hasValidRemote() {
@@ -73,6 +75,7 @@ User.init(
       primaryKey: true,
     },
     name: DataTypes.TEXT,
+    admin_from: DataTypes.INTEGER,
     admin_until: DataTypes.INTEGER,
     valid_remote_until: {
       type: DataTypes.INTEGER,
diff --git a/server/modules/api_endpoints/ProtubeApi.js b/server/modules/api_endpoints/ProtubeApi.js
index 43e1944..cf70505 100644
--- a/server/modules/api_endpoints/ProtubeApi.js
+++ b/server/modules/api_endpoints/ProtubeApi.js
@@ -15,12 +15,13 @@ this.protubeApi.post("/updateadmin", async function (req, res) {
     `Attempt from ${req.hostname} to update the admin status of a user`
   );
   // Check if the required data is present and parse it
-  if (!req.body?.user_id || !req.body?.admin_until) {
+  if (!req.body?.user_id || !req.body?.admin_until || !req.body?.admin_from) {
     logger.apiInfo("Request had incomplete body");
     return res.send({ success: enums.FAIL, message: "Incomplete body" });
   }
   const userID = parseInt(req.body.user_id);
-  const adminUntil = parseInt(req.body.admin);
+  const adminFrom = parseInt(req.body.admin_from);
+  const adminUntil = parseInt(req.body.admin_until);
 
   // finding and updating the users admin status in the database
   const user = await User.findByPk(userID);
@@ -30,9 +31,12 @@ this.protubeApi.post("/updateadmin", async function (req, res) {
   }
 
   user.admin_until = adminUntil;
+  user.admin_from = adminFrom;
   await user.save();
 
-  logger.apiInfo(`User ${userID}'s is admin until: ${adminUntil}`);
+  logger.apiInfo(
+    `User ${userID}'s is admin from: ${adminFrom} until: ${adminUntil}`
+  );
   return res.send({ success: enums.SUCCESS });
 });
 
diff --git a/server/modules/socket_endpoints/RemoteSocket.js b/server/modules/socket_endpoints/RemoteSocket.js
index 5da40bc..d2ba8c4 100644
--- a/server/modules/socket_endpoints/RemoteSocket.js
+++ b/server/modules/socket_endpoints/RemoteSocket.js
@@ -44,7 +44,10 @@ endpoint.on("connection", (socket) => {
 
   socket.on("fetch-then-add-video", async (videoId, callback) => {
     try {
-      const video = await youtube.getVideo(videoId, socket.request.user.isAdmin());
+      const video = await youtube.getVideo(
+        videoId,
+        socket.request.user.isAdmin()
+      );
       video.user = formatUser(socket);
 
       callback({ success: queueManager.addFair(video) });

From 8d43178b387b2882ad4388b30b73f0410032cc02 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Tue, 9 May 2023 23:16:42 +0200
Subject: [PATCH 09/19] Update protube shared secret

---
 server/.env.example           | 6 ++----
 server/modules/Middlewares.js | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/server/.env.example b/server/.env.example
index c48c4ab..4c54889 100644
--- a/server/.env.example
+++ b/server/.env.example
@@ -22,10 +22,8 @@ SSL_CERT_FILE=./ssl/selfsigned.crt
 # Make sure this corresponds to the host of the web app
 CORS_ORIGIN=https://localhost:3001
 
-# API key to access the Proto website's API (make sure this is set correctly on the website instance)
-LARAVEL_API_KEY=SECRET_KEY
-# API key to allow the Proto website instance to access the ProTube API
-PROTUBE_API_SECRET=321
+# API key to allow the Proto website and ProTube to use aech others API
+PROTUBE_SHARED_SECRET=321
 # Endpoint for OAuth2 authentication/API (Should be the URL of the local Proto website instance)
 LARAVEL_ENDPOINT=http://localhost:8080
 
diff --git a/server/modules/Middlewares.js b/server/modules/Middlewares.js
index 1aff37f..27ccf0e 100644
--- a/server/modules/Middlewares.js
+++ b/server/modules/Middlewares.js
@@ -91,7 +91,7 @@ exports.screenCodeCheck = async (socket, next) => {
 };
 
 exports.checkBearerToken = (req, res, next) => {
-  if (req.token === process.env.PROTUBE_API_SECRET) return next();
+  if (req.token === process.env.PROTUBE_SHARED_SECRET) return next();
   return res.status(401).json({
     success: false,
     message: "Not Authorized for this API",

From 83950278d1db80edf944681da5ec507deec3aaf2 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Tue, 9 May 2023 23:16:53 +0200
Subject: [PATCH 10/19] Added update endpoint for laravel

---
 server/modules/api_endpoints/ProtubeApi.js | 42 ++++++++++++----------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/server/modules/api_endpoints/ProtubeApi.js b/server/modules/api_endpoints/ProtubeApi.js
index cf70505..2f4b785 100644
--- a/server/modules/api_endpoints/ProtubeApi.js
+++ b/server/modules/api_endpoints/ProtubeApi.js
@@ -10,33 +10,37 @@ this.protubeApi.use(bearerToken());
 this.protubeApi.use(checkBearerToken);
 
 // Endpoint to update the admin status of a user id
-this.protubeApi.post("/updateadmin", async function (req, res) {
+this.protubeApi.post("/updateadmin/:userID(\d+)", async function (req, res) {
+  const userID = parseInt(req.params.userID);
+  
   logger.apiInfo(
-    `Attempt from ${req.hostname} to update the admin status of a user`
+    `Attempt from ${req.hostname} to update the admin status of user ${userID}`
   );
-  // Check if the required data is present and parse it
-  if (!req.body?.user_id || !req.body?.admin_until || !req.body?.admin_from) {
-    logger.apiInfo("Request had incomplete body");
-    return res.send({ success: enums.FAIL, message: "Incomplete body" });
-  }
-  const userID = parseInt(req.body.user_id);
-  const adminFrom = parseInt(req.body.admin_from);
-  const adminUntil = parseInt(req.body.admin_until);
-
   // finding and updating the users admin status in the database
   const user = await User.findByPk(userID);
   if (!user) {
     logger.apiInfo("User is not found!");
     return res.send({ success: enums.FAIL, message: "User not found!" });
   }
-
-  user.admin_until = adminUntil;
-  user.admin_from = adminFrom;
-  await user.save();
-
-  logger.apiInfo(
-    `User ${userID}'s is admin from: ${adminFrom} until: ${adminUntil}`
-  );
+  
+  fetch(
+    `${process.env.LARAVEL_ENDPOINT}/api/protube/userdetails`,
+    {
+      headers: {
+        Authorization: "Bearer " + user.access_token,
+      },
+    }
+  ).then(async (response) => {
+    const userData = await response.json();
+    await User.upsert({
+      id: userData.id,
+      name: userData.name,
+      admin_from: +userData.admin_from,
+      admin_until: +userData.admin_until,
+      refresh_token: refreshToken,
+      access_token: accessToken,
+    });
+  });
   return res.send({ success: enums.SUCCESS });
 });
 

From 75be20f884afbc0a51eb291e6d78fbe86826c3c1 Mon Sep 17 00:00:00 2001
From: Lint Action <lint-action@samuelmeuli.com>
Date: Tue, 9 May 2023 21:17:43 +0000
Subject: [PATCH 11/19] Fix code style issues with Prettier

---
 client/src/components/MasterControls.vue      | 34 ++++++-----
 client/src/components/PhotosOverlay.vue       | 40 ++++++-------
 client/src/components/ScreenQueue.vue         | 53 +++++++++--------
 .../src/components/ScreenSettingsButton.vue   | 58 +++++++++++--------
 client/src/components/ToggleSlider.vue        | 40 ++++++-------
 client/src/components/VideoCard.vue           |  2 +-
 client/src/main.js                            |  2 +-
 client/src/views/ProtubeScreen.vue            | 43 ++++++++------
 deployment.yml                                | 11 ++--
 server/docker-compose.yml                     | 18 +++---
 server/modules/ScreenSettings.js              | 27 +++++----
 server/modules/api_endpoints/ProtubeApi.js    | 19 +++---
 .../modules/socket_endpoints/AdminRemote.js   |  6 +-
 .../modules/socket_endpoints/ScreenSocket.js  |  4 +-
 14 files changed, 187 insertions(+), 170 deletions(-)

diff --git a/client/src/components/MasterControls.vue b/client/src/components/MasterControls.vue
index 375f103..2eca030 100644
--- a/client/src/components/MasterControls.vue
+++ b/client/src/components/MasterControls.vue
@@ -11,8 +11,8 @@
         Switch Theme
       </button>
     </div>
-    <div class="lg:flex text-center">
-      <div class="mx-auto my-auto lg:w-2/3 ">
+    <div class="text-center lg:flex">
+      <div class="mx-auto my-auto lg:w-2/3">
         <span
           class="w-full text-right text-lg text-gray-500 dark:text-white md:text-center">
           Volume - {{ playerSettings.volume }}
@@ -43,8 +43,10 @@
           </font-awesome-icon>
         </div>
       </div>
-      <div class="mx-auto mt-2 grid grid-cols-2 lg:grid-cols-1 gap-2">
-        <ToggleSlider @click="toggleRadioProtube" :isLeft="playerSettings.playerType === enums.TYPES.RADIO">
+      <div class="mx-auto mt-2 grid grid-cols-2 gap-2 lg:grid-cols-1">
+        <ToggleSlider
+          @click="toggleRadioProtube"
+          :isLeft="playerSettings.playerType === enums.TYPES.RADIO">
           <template #left>
             <font-awesome-icon
               class="cursor-pointer text-2xl text-gray-600 dark:text-white"
@@ -58,7 +60,9 @@
             </font-awesome-icon>
           </template>
         </ToggleSlider>
-        <ToggleSlider @click="togglePhotosOverlay" :isLeft="playerSettings.screenSettings.showPhotos">
+        <ToggleSlider
+          @click="togglePhotosOverlay"
+          :isLeft="playerSettings.screenSettings.showPhotos">
           <template #left>
             <font-awesome-icon
               class="cursor-pointer text-2xl text-gray-600 dark:text-white"
@@ -72,7 +76,9 @@
             </font-awesome-icon>
           </template>
         </ToggleSlider>
-        <ToggleSlider @click="toggleQueueOverlay" :isLeft="playerSettings.screenSettings.showQueue">
+        <ToggleSlider
+          @click="toggleQueueOverlay"
+          :isLeft="playerSettings.screenSettings.showQueue">
           <template #left>
             <font-awesome-icon
               class="cursor-pointer text-2xl text-gray-600 dark:text-white"
@@ -112,9 +118,9 @@ const playerSettings = ref({
   playerMode: enums.MODES.IDLE,
   playerType: enums.TYPES.VIDEO,
   screenSettings: {
-    'showQueue': true,
-    'showPhotos': true
-  }
+    showQueue: true,
+    showPhotos: true,
+  },
 });
 
 const router = useRouter();
@@ -202,25 +208,27 @@ async function toggleRadioProtube() {
 
 async function togglePhotosOverlay() {
   const data = await new Promise((resolve) => {
-    socket.emit("toggle-photos-visibility", callback => {
+    socket.emit("toggle-photos-visibility", (callback) => {
       resolve(callback);
     });
   });
   displayToast({
     status: data.status ?? enums.STATUS.SUCCESS,
-    message: data.message ?? `Successfully changed the photos visibility setting!`,
+    message:
+      data.message ?? `Successfully changed the photos visibility setting!`,
   });
 }
 
 async function toggleQueueOverlay() {
   const data = await new Promise((resolve) => {
-    socket.emit("toggle-queue-visibility", callback => {
+    socket.emit("toggle-queue-visibility", (callback) => {
       resolve(callback);
     });
   });
   displayToast({
     status: data.status ?? enums.STATUS.SUCCESS,
-    message: data.message ?? `Successfully changed the queue visibility setting!`,
+    message:
+      data.message ?? `Successfully changed the queue visibility setting!`,
   });
 }
 
diff --git a/client/src/components/PhotosOverlay.vue b/client/src/components/PhotosOverlay.vue
index d076391..6d32bec 100644
--- a/client/src/components/PhotosOverlay.vue
+++ b/client/src/components/PhotosOverlay.vue
@@ -1,20 +1,20 @@
 <template>
-    <div>
-        <div class="flex h-screen justify-center overflow-x-hidden p-5">
-            <img
-            :src="photo.url"
-            class="dark:bg-proto_secondary_gray-dark -z-10 h-full max-w-none rounded-lg bg-white"
-            alt="Loading..." />
-        </div>
-        kutfotos
-        <div class="absolute top-0 left-0 mt-2 ml-4 rounded-lg text-lg">
-            <div
-            class="border-proto_blue dark:bg-proto_secondary_gray-dark rounded-lg border-l-4 bg-white p-1 px-4 py-2 text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
-            Album: {{ photo.album_name }}<br />
-            Taken on: {{ photo.date_taken }}
-            </div>
-        </div>
+  <div>
+    <div class="flex h-screen justify-center overflow-x-hidden p-5">
+      <img
+        :src="photo.url"
+        class="dark:bg-proto_secondary_gray-dark -z-10 h-full max-w-none rounded-lg bg-white"
+        alt="Loading..." />
     </div>
+    kutfotos
+    <div class="absolute top-0 left-0 mt-2 ml-4 rounded-lg text-lg">
+      <div
+        class="border-proto_blue dark:bg-proto_secondary_gray-dark rounded-lg border-l-4 bg-white p-1 px-4 py-2 text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
+        Album: {{ photo.album_name }}<br />
+        Taken on: {{ photo.date_taken }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -22,11 +22,11 @@ import socket from "@/js/ScreenSocket";
 import { ref, onMounted } from "vue";
 
 onMounted(async () => {
-    photo.value = await new Promise((resolve) => {
-        socket.emit("get-photo", (result) => {
-            resolve(result);
-        });
+  photo.value = await new Promise((resolve) => {
+    socket.emit("get-photo", (result) => {
+      resolve(result);
     });
+  });
 });
 
 const photo = ref({
@@ -38,4 +38,4 @@ const photo = ref({
 socket.on("photo-update", (newPhoto) => {
   photo.value = newPhoto;
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/client/src/components/ScreenQueue.vue b/client/src/components/ScreenQueue.vue
index e627d5f..930c204 100644
--- a/client/src/components/ScreenQueue.vue
+++ b/client/src/components/ScreenQueue.vue
@@ -1,28 +1,28 @@
 <template>
-    <div class="absolute bottom-0 mb-1 w-screen rounded-lg">
-        <div class="flex justify-between">
-            <div
-            class="border-proto_blue dark:bg-proto_secondary_gray-dark ml-4 mb-1 rounded-lg border-l-4 bg-white p-1 px-4 py-2 font-medium text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
-            Queue: {{ currentTimeStamp.totalDuration }}
-            </div>
-        </div>
-        <div class="mx-4 mb-1 grid grid-cols-5 gap-2 overflow-hidden">
-            <VideoCard
-            v-for="(video, index) in queueWithCurrent.slice(0, 5)"
-            :key="video.id"
-            :index="index"
-            :title="video.title"
-            :name="video.user.name"
-            :channel="video.channel"
-            :duration="video.durationFormatted"
-            :thumbnail="video.thumbnail.url"
-            :videoID="video.id"
-            :textScrolling="true"
-            :roundedCorners="true"
-            :progressBar="index === 0 ? queueProgress : 0"
-            :opacity="0.9" />
-        </div>
+  <div class="absolute bottom-0 mb-1 w-screen rounded-lg">
+    <div class="flex justify-between">
+      <div
+        class="border-proto_blue dark:bg-proto_secondary_gray-dark ml-4 mb-1 rounded-lg border-l-4 bg-white p-1 px-4 py-2 font-medium text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
+        Queue: {{ currentTimeStamp.totalDuration }}
+      </div>
     </div>
+    <div class="mx-4 mb-1 grid grid-cols-5 gap-2 overflow-hidden">
+      <VideoCard
+        v-for="(video, index) in queueWithCurrent.slice(0, 5)"
+        :key="video.id"
+        :index="index"
+        :title="video.title"
+        :name="video.user.name"
+        :channel="video.channel"
+        :duration="video.durationFormatted"
+        :thumbnail="video.thumbnail.url"
+        :videoID="video.id"
+        :textScrolling="true"
+        :roundedCorners="true"
+        :progressBar="index === 0 ? queueProgress : 0"
+        :opacity="0.9" />
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -32,7 +32,7 @@ import { computed, defineProps } from "vue";
 const props = defineProps({
   queue: Array,
   currentTimeStamp: Object,
-  currentVideo: Object
+  currentVideo: Object,
 });
 
 // Compute the queue with the currently playing video at the front
@@ -44,7 +44,6 @@ const queueWithCurrent = computed(() => {
 
 // Returns percentage of current queue
 const queueProgress = computed(() => {
-    return (props.currentTimeStamp.timestamp / props.currentVideo.duration) * 100;
+  return (props.currentTimeStamp.timestamp / props.currentVideo.duration) * 100;
 });
-
-</script>
\ No newline at end of file
+</script>
diff --git a/client/src/components/ScreenSettingsButton.vue b/client/src/components/ScreenSettingsButton.vue
index 19e125a..8a13e41 100644
--- a/client/src/components/ScreenSettingsButton.vue
+++ b/client/src/components/ScreenSettingsButton.vue
@@ -1,11 +1,24 @@
 <template>
-    <transition name="slide-up" mode="out-in" class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md hover:opacity-80">
-        <button v-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_DEFAULT" >{{ currentScreenSetting }}</button>
-        <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_NOQUEUE" >{{ currentScreenSetting }}</button>
-        <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_NOTHING" >{{ currentScreenSetting }}</button>
-        <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_PHOTOS" >{{ currentScreenSetting }}</button>
-        <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_QUEUE" >{{ currentScreenSetting }}</button>
-    </transition>
+  <transition
+    name="slide-up"
+    mode="out-in"
+    class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md hover:opacity-80">
+    <button v-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_DEFAULT">
+      {{ currentScreenSetting }}
+    </button>
+    <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_NOQUEUE">
+      {{ currentScreenSetting }}
+    </button>
+    <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_NOTHING">
+      {{ currentScreenSetting }}
+    </button>
+    <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_PHOTOS">
+      {{ currentScreenSetting }}
+    </button>
+    <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_QUEUE">
+      {{ currentScreenSetting }}
+    </button>
+  </transition>
 </template>
 
 <script setup>
@@ -13,25 +26,24 @@ import { defineProps, computed } from "vue";
 import enums from "@/js/Enums";
 
 const props = defineProps({
-    screenSetting: Number,
+  screenSetting: Number,
 });
 
 const currentScreenSetting = computed(() => {
-    switch (props.screenSetting) {
-        case enums.SCREEN_SETTINGS.SHOW_DEFAULT:
-            return "Default";
-        case enums.SCREEN_SETTINGS.SHOW_QUEUE:
-            return "Queue only";
-        case enums.SCREEN_SETTINGS.SHOW_PHOTOS:
-            return "Photos only";
-        case enums.SCREEN_SETTINGS.SHOW_NOQUEUE:
-            return "No queue";
-        case enums.SCREEN_SETTINGS.SHOW_NOTHING:
-        default:
-            return "Nothing";
-    }
+  switch (props.screenSetting) {
+    case enums.SCREEN_SETTINGS.SHOW_DEFAULT:
+      return "Default";
+    case enums.SCREEN_SETTINGS.SHOW_QUEUE:
+      return "Queue only";
+    case enums.SCREEN_SETTINGS.SHOW_PHOTOS:
+      return "Photos only";
+    case enums.SCREEN_SETTINGS.SHOW_NOQUEUE:
+      return "No queue";
+    case enums.SCREEN_SETTINGS.SHOW_NOTHING:
+    default:
+      return "Nothing";
+  }
 });
-
 </script>
 
 <style>
@@ -49,4 +61,4 @@ const currentScreenSetting = computed(() => {
   opacity: 0;
   transform: translateY(-30px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/components/ToggleSlider.vue b/client/src/components/ToggleSlider.vue
index 78d0233..ef62955 100644
--- a/client/src/components/ToggleSlider.vue
+++ b/client/src/components/ToggleSlider.vue
@@ -1,30 +1,30 @@
 <template>
-    <div class="flex mx-auto">
-        <slot name="left">Left</slot>
-        <button
-            @click="$emit('click')"
-            type="button"
-            :class="isLeft ? 'bg-proto_blue' : 'bg-proto_green'"
-            class="mx-3 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-            role="switch">
-            <span
-            :class="!isLeft ? 'translate-x-5' : 'translate-x-0'"
-            class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
-            </span>
-        </button>
-        <slot name="right">Right</slot>
-    </div>
+  <div class="mx-auto flex">
+    <slot name="left">Left</slot>
+    <button
+      @click="$emit('click')"
+      type="button"
+      :class="isLeft ? 'bg-proto_blue' : 'bg-proto_green'"
+      class="relative mx-3 inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+      role="switch">
+      <span
+        :class="!isLeft ? 'translate-x-5' : 'translate-x-0'"
+        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
+      </span>
+    </button>
+    <slot name="right">Right</slot>
+  </div>
 </template>
 
 <script setup>
 import { defineProps } from "vue";
 
 defineProps({
-    isLeft: {
-        type: Boolean,
-        default: true
-    }
+  isLeft: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 defineEmits(["click"]);
-</script>
\ No newline at end of file
+</script>
diff --git a/client/src/components/VideoCard.vue b/client/src/components/VideoCard.vue
index fad3c5e..64673fa 100644
--- a/client/src/components/VideoCard.vue
+++ b/client/src/components/VideoCard.vue
@@ -11,7 +11,7 @@
       `">
       <div
         :style="`width:${progressBar}%;`"
-        class="duration-500 ease-linear bg-proto_blue absolute bottom-0 h-2 w-0 rounded-sm opacity-60"></div>
+        class="bg-proto_blue absolute bottom-0 h-2 w-0 rounded-sm opacity-60 duration-500 ease-linear"></div>
       <button
         :disabled="!clickable"
         @click="$emit('video-clicked', videoID)"
diff --git a/client/src/main.js b/client/src/main.js
index ed39c12..e3dd2db 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -27,7 +27,7 @@ import {
   faTv,
   faRectangleList,
   faBan,
-  faCamera
+  faCamera,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
diff --git a/client/src/views/ProtubeScreen.vue b/client/src/views/ProtubeScreen.vue
index 691a28a..d3d5a5d 100644
--- a/client/src/views/ProtubeScreen.vue
+++ b/client/src/views/ProtubeScreen.vue
@@ -21,25 +21,24 @@
       </div>
     </div>
 
-    <ScreenQueue 
+    <ScreenQueue
       v-if="displayQueue"
-      :currentVideo="playerState.video" 
-      :queue="queue" 
-      :currentTimeStamp="currentTimeStamp"
-    />
+      :currentVideo="playerState.video"
+      :queue="queue"
+      :currentTimeStamp="currentTimeStamp" />
 
-    <RadioScreen 
+    <RadioScreen
       v-if="isPlayingRadio"
-      :radio="playerState.radio" 
-      :volume="volume" 
-    />
-    
-    <PhotosOverlay v-if="displayPhotos"/>
+      :radio="playerState.radio"
+      :volume="volume" />
+
+    <PhotosOverlay v-if="displayPhotos" />
 
     <div
-      v-if="playerState.playerType === enums.TYPES.VIDEO 
-        && !isPlayingVideo
-        && !showPhotos
+      v-if="
+        playerState.playerType === enums.TYPES.VIDEO &&
+        !isPlayingVideo &&
+        !showPhotos
       "
       class="grid h-screen place-items-center">
       <div class="text-4xl dark:text-white">
@@ -75,12 +74,12 @@ import PhotosOverlay from "../components/PhotosOverlay.vue";
 const playerID = "player-" + Math.random();
 const currentTimeStamp = ref({
   timestamp: 0,
-  totalDuration: "00:00:00"
+  totalDuration: "00:00:00",
 });
 const queue = ref([]);
 const screenSetting = ref({
-  'showQueue': true,
-  'showPhotos': true
+  showQueue: true,
+  showPhotos: true,
 });
 let player;
 const playerState = ref({
@@ -112,8 +111,10 @@ const isPlayingVideo = computed(
 );
 
 const isVideoIdle = computed(() => {
-    return playerState.value.playerType === enums.TYPES.VIDEO &&
+  return (
+    playerState.value.playerType === enums.TYPES.VIDEO &&
     playerState.value.playerMode === enums.MODES.IDLE
+  );
 });
 
 const isPlayingRadio = computed(
@@ -129,7 +130,11 @@ const displayQueue = computed(() => {
 
 // show photos if show photos, or default and video idle
 const displayPhotos = computed(() => {
-  return (isVideoIdle.value || isPlayingRadio.value) || (isPlayingVideo.value && screenSetting.value.showPhotos);
+  return (
+    isVideoIdle.value ||
+    isPlayingRadio.value ||
+    (isPlayingVideo.value && screenSetting.value.showPhotos)
+  );
 });
 
 onBeforeMount(() => {
diff --git a/deployment.yml b/deployment.yml
index 574d911..3fa09ea 100644
--- a/deployment.yml
+++ b/deployment.yml
@@ -10,14 +10,13 @@ services:
       MYSQL_USER: "protube_mainuser"
       MYSQL_PASSWORD: "hetan9t84anne"
 
-  
   nginx-proxy:
-    image: 'jc21/nginx-proxy-manager:latest'
+    image: "jc21/nginx-proxy-manager:latest"
     restart: always
     ports:
-      - '80:80'
-      - '81:81'
-      - '443:443'
+      - "80:80"
+      - "81:81"
+      - "443:443"
     volumes:
       - ./data:/data
       - ./letsencrypt:/etc/letsencrypt
@@ -29,7 +28,6 @@ services:
     volumes:
       - ./protube/.env:/xxxx/.env
       - ./protube/logs:/xxxx/logs
-  
 
   phpmyadmin:
     image: phpmyadmin
@@ -38,4 +36,3 @@ services:
       - 8080:80
     environment:
       - PMA_HOST=mysql
-
diff --git a/server/docker-compose.yml b/server/docker-compose.yml
index 3283b32..6d027f8 100644
--- a/server/docker-compose.yml
+++ b/server/docker-compose.yml
@@ -14,12 +14,12 @@ services:
       - "${DATABASE_PORT}:3306"
 
   phpmyadmin:
-        container_name: "${DOCKER_CONTAINER_NAME}-pma"
-        image: phpmyadmin
-        ports:
-            - '3002:80'
-        environment:
-            - 'PMA_HOST=mysql'
-            - 'PMA_USER=${DATABASE_USER}'
-            - 'PMA_PASSWORD=${DATABASE_PASSWORD}'
-            - 'PMA_PORT=3002'
\ No newline at end of file
+    container_name: "${DOCKER_CONTAINER_NAME}-pma"
+    image: phpmyadmin
+    ports:
+      - "3002:80"
+    environment:
+      - "PMA_HOST=mysql"
+      - "PMA_USER=${DATABASE_USER}"
+      - "PMA_PASSWORD=${DATABASE_PASSWORD}"
+      - "PMA_PORT=3002"
diff --git a/server/modules/ScreenSettings.js b/server/modules/ScreenSettings.js
index 227c74f..000e1df 100644
--- a/server/modules/ScreenSettings.js
+++ b/server/modules/ScreenSettings.js
@@ -1,22 +1,21 @@
 let showQueue = true;
 let showPhotos = true;
 
-
 exports.getCurrentSetting = () => {
-    return {
-        'showQueue': showQueue,
-        'showPhotos': showPhotos
-    }
-}
+  return {
+    showQueue: showQueue,
+    showPhotos: showPhotos,
+  };
+};
 
 exports.toggleQueueVisibility = () => {
-    showQueue = !showQueue;
-    eventBus.emit('queue-photos-visibility-changed', this.getCurrentSetting());
-    return enums.SUCCESS;
-}
+  showQueue = !showQueue;
+  eventBus.emit("queue-photos-visibility-changed", this.getCurrentSetting());
+  return enums.SUCCESS;
+};
 
 exports.togglePhotosVisibility = () => {
-    showPhotos = !showPhotos;
-    eventBus.emit('queue-photos-visibility-changed', this.getCurrentSetting());
-    return enums.SUCCESS;
-}
+  showPhotos = !showPhotos;
+  eventBus.emit("queue-photos-visibility-changed", this.getCurrentSetting());
+  return enums.SUCCESS;
+};
diff --git a/server/modules/api_endpoints/ProtubeApi.js b/server/modules/api_endpoints/ProtubeApi.js
index 2f4b785..5beed0a 100644
--- a/server/modules/api_endpoints/ProtubeApi.js
+++ b/server/modules/api_endpoints/ProtubeApi.js
@@ -10,9 +10,9 @@ this.protubeApi.use(bearerToken());
 this.protubeApi.use(checkBearerToken);
 
 // Endpoint to update the admin status of a user id
-this.protubeApi.post("/updateadmin/:userID(\d+)", async function (req, res) {
+this.protubeApi.post("/updateadmin/:userID(d+)", async function (req, res) {
   const userID = parseInt(req.params.userID);
-  
+
   logger.apiInfo(
     `Attempt from ${req.hostname} to update the admin status of user ${userID}`
   );
@@ -22,15 +22,12 @@ this.protubeApi.post("/updateadmin/:userID(\d+)", async function (req, res) {
     logger.apiInfo("User is not found!");
     return res.send({ success: enums.FAIL, message: "User not found!" });
   }
-  
-  fetch(
-    `${process.env.LARAVEL_ENDPOINT}/api/protube/userdetails`,
-    {
-      headers: {
-        Authorization: "Bearer " + user.access_token,
-      },
-    }
-  ).then(async (response) => {
+
+  fetch(`${process.env.LARAVEL_ENDPOINT}/api/protube/userdetails`, {
+    headers: {
+      Authorization: "Bearer " + user.access_token,
+    },
+  }).then(async (response) => {
     const userData = await response.json();
     await User.upsert({
       id: userData.id,
diff --git a/server/modules/socket_endpoints/AdminRemote.js b/server/modules/socket_endpoints/AdminRemote.js
index d1b089a..0e2c947 100644
--- a/server/modules/socket_endpoints/AdminRemote.js
+++ b/server/modules/socket_endpoints/AdminRemote.js
@@ -13,7 +13,7 @@ const {
 const { adminResetScreenCode } = require("../ScreenCode");
 const radio = require("../RadioStations");
 const queueManager = require("../QueueManager");
-const screenSettings = require('../ScreenSettings');
+const screenSettings = require("../ScreenSettings");
 
 endpoint.use(socketCheckAdminAuthenticated);
 
@@ -41,7 +41,7 @@ endpoint.on("connection", (socket) => {
       volume: getVolume(),
       playerMode: getPlayerMode(),
       playerType: getPlayerType(),
-      screenSettings: screenSettings.getCurrentSetting()
+      screenSettings: screenSettings.getCurrentSetting(),
     });
   });
 
@@ -146,6 +146,6 @@ function updateAdminPanels() {
     volume: getVolume(),
     playerMode: getPlayerMode(),
     playerType: getPlayerType(),
-    screenSettings: screenSettings.getCurrentSetting()
+    screenSettings: screenSettings.getCurrentSetting(),
   });
 }
diff --git a/server/modules/socket_endpoints/ScreenSocket.js b/server/modules/socket_endpoints/ScreenSocket.js
index f86298e..6e02a9e 100644
--- a/server/modules/socket_endpoints/ScreenSocket.js
+++ b/server/modules/socket_endpoints/ScreenSocket.js
@@ -2,7 +2,7 @@ const fetch = require("node-fetch");
 const endpoint = io.of("/socket/screen");
 const queueManager = require("../QueueManager");
 const playbackManager = require("../PlaybackManager");
-const { getCurrentSetting } = require('../ScreenSettings');
+const { getCurrentSetting } = require("../ScreenSettings");
 let newPhotoInterval = null;
 let photo = null;
 
@@ -26,7 +26,7 @@ endpoint.on("connection", (socket) => {
   });
 
   socket.on("get-photo", (callback) => {
-      callback(photo);
+    callback(photo);
   });
 
   socket.emit("player-update", {

From bfba9aef4c7c59d62cd59db7b13b73498bceb59b Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Wed, 10 May 2023 00:03:50 +0200
Subject: [PATCH 12/19] tempadmin api bugs

---
 server/modules/api_endpoints/ProtubeApi.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/server/modules/api_endpoints/ProtubeApi.js b/server/modules/api_endpoints/ProtubeApi.js
index 5beed0a..2a2be20 100644
--- a/server/modules/api_endpoints/ProtubeApi.js
+++ b/server/modules/api_endpoints/ProtubeApi.js
@@ -1,6 +1,7 @@
 const express = require("express");
 const bearerToken = require("express-bearer-token");
 const { checkBearerToken } = require("../Middlewares");
+const fetch = require("node-fetch");
 const { playSound } = require("../socket_endpoints/SoundBoard");
 const { User } = require("../DataBase");
 
@@ -10,7 +11,7 @@ this.protubeApi.use(bearerToken());
 this.protubeApi.use(checkBearerToken);
 
 // Endpoint to update the admin status of a user id
-this.protubeApi.post("/updateadmin/:userID(d+)", async function (req, res) {
+this.protubeApi.post("/updateadmin/:userID", async function (req, res) {
   const userID = parseInt(req.params.userID);
 
   logger.apiInfo(
@@ -22,21 +23,16 @@ this.protubeApi.post("/updateadmin/:userID(d+)", async function (req, res) {
     logger.apiInfo("User is not found!");
     return res.send({ success: enums.FAIL, message: "User not found!" });
   }
-
+  // Fetch the new userdata and update the user
   fetch(`${process.env.LARAVEL_ENDPOINT}/api/protube/userdetails`, {
     headers: {
       Authorization: "Bearer " + user.access_token,
     },
   }).then(async (response) => {
     const userData = await response.json();
-    await User.upsert({
-      id: userData.id,
-      name: userData.name,
-      admin_from: +userData.admin_from,
-      admin_until: +userData.admin_until,
-      refresh_token: refreshToken,
-      access_token: accessToken,
-    });
+    user.admin_from = +userData.admin_from;
+    user.admin_until = +userData.admin_until;
+    await user.save();
   });
   return res.send({ success: enums.SUCCESS });
 });

From 2527081c0bd9d9df3ad7786d27a38e0ec7bf8c06 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Wed, 10 May 2023 00:11:48 +0200
Subject: [PATCH 13/19] Dropping tables in production

---
 server/modules/DataBase.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/modules/DataBase.js b/server/modules/DataBase.js
index dee48fb..4455ea5 100644
--- a/server/modules/DataBase.js
+++ b/server/modules/DataBase.js
@@ -109,9 +109,9 @@ exports.Session = this.sequelize.define("sessions", {
   data: DataTypes.TEXT,
 });
 
-//syncing tables
+//syncing tables and drop them in production upon (re)start
 this.sequelize
-  .sync()
+  .sync({ force: process.env.NODE_ENV !== 'development' })
   .then(() => {
     logger.dbLog("Successfully synchronized tables!");
   })

From 74870cb61ac3d909696216c898501b6364a417fe Mon Sep 17 00:00:00 2001
From: Menkveld <43108191+Menkveld-24@users.noreply.github.com>
Date: Wed, 10 May 2023 00:22:49 +0200
Subject: [PATCH 14/19] Remove unused component

---
 .../src/components/ScreenSettingsButton.vue   | 64 -------------------
 1 file changed, 64 deletions(-)
 delete mode 100644 client/src/components/ScreenSettingsButton.vue

diff --git a/client/src/components/ScreenSettingsButton.vue b/client/src/components/ScreenSettingsButton.vue
deleted file mode 100644
index 8a13e41..0000000
--- a/client/src/components/ScreenSettingsButton.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <transition
-    name="slide-up"
-    mode="out-in"
-    class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md hover:opacity-80">
-    <button v-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_DEFAULT">
-      {{ currentScreenSetting }}
-    </button>
-    <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_NOQUEUE">
-      {{ currentScreenSetting }}
-    </button>
-    <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_NOTHING">
-      {{ currentScreenSetting }}
-    </button>
-    <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_PHOTOS">
-      {{ currentScreenSetting }}
-    </button>
-    <button v-else-if="screenSetting === enums.SCREEN_SETTINGS.SHOW_QUEUE">
-      {{ currentScreenSetting }}
-    </button>
-  </transition>
-</template>
-
-<script setup>
-import { defineProps, computed } from "vue";
-import enums from "@/js/Enums";
-
-const props = defineProps({
-  screenSetting: Number,
-});
-
-const currentScreenSetting = computed(() => {
-  switch (props.screenSetting) {
-    case enums.SCREEN_SETTINGS.SHOW_DEFAULT:
-      return "Default";
-    case enums.SCREEN_SETTINGS.SHOW_QUEUE:
-      return "Queue only";
-    case enums.SCREEN_SETTINGS.SHOW_PHOTOS:
-      return "Photos only";
-    case enums.SCREEN_SETTINGS.SHOW_NOQUEUE:
-      return "No queue";
-    case enums.SCREEN_SETTINGS.SHOW_NOTHING:
-    default:
-      return "Nothing";
-  }
-});
-</script>
-
-<style>
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.25s ease-out;
-}
-
-.slide-up-enter-from {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translateY(-30px);
-}
-</style>

From 97b0e5c1d2f1b97f51731517ac7c62661a187993 Mon Sep 17 00:00:00 2001
From: Menkveld <43108191+Menkveld-24@users.noreply.github.com>
Date: Mon, 15 May 2023 16:09:10 +0200
Subject: [PATCH 15/19] Update ProtubeScreen.vue

Fix domain in add songs card
---
 client/src/views/ProtubeScreen.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/views/ProtubeScreen.vue b/client/src/views/ProtubeScreen.vue
index d3d5a5d..ef6fa6c 100644
--- a/client/src/views/ProtubeScreen.vue
+++ b/client/src/views/ProtubeScreen.vue
@@ -17,7 +17,7 @@
       class="absolute top-0 right-0 mt-2">
       <div
         class="border-proto_blue dark:bg-proto_secondary_gray-dark mb-1 mr-4 mt-1 w-max rounded-lg border-r-4 bg-white px-4 py-2 font-medium text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
-        Want to add your own music? Visit www.protu.be!
+        Want to add your own music? Visit protu.be!
       </div>
     </div>
 

From 29b8d53143336996004af50495a4a03d56f628dc Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Mon, 22 May 2023 15:11:17 +0200
Subject: [PATCH 16/19] Nice photos fix

---
 client/src/components/PhotosOverlay.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/PhotosOverlay.vue b/client/src/components/PhotosOverlay.vue
index 6d32bec..9471fa3 100644
--- a/client/src/components/PhotosOverlay.vue
+++ b/client/src/components/PhotosOverlay.vue
@@ -6,7 +6,6 @@
         class="dark:bg-proto_secondary_gray-dark -z-10 h-full max-w-none rounded-lg bg-white"
         alt="Loading..." />
     </div>
-    kutfotos
     <div class="absolute top-0 left-0 mt-2 ml-4 rounded-lg text-lg">
       <div
         class="border-proto_blue dark:bg-proto_secondary_gray-dark rounded-lg border-l-4 bg-white p-1 px-4 py-2 text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">

From f7f93b9710b970cb5a95b04a3800bd7a550ed973 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Mon, 22 May 2023 15:42:39 +0200
Subject: [PATCH 17/19] lower default volume

---
 server/modules/PlaybackManager.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/modules/PlaybackManager.js b/server/modules/PlaybackManager.js
index 242f890..0ba4728 100644
--- a/server/modules/PlaybackManager.js
+++ b/server/modules/PlaybackManager.js
@@ -9,7 +9,7 @@ let playerType = enums.TYPES.VIDEO;
 
 let selectedRadioStation = {};
 let playbackInterval;
-let volume = 75;
+let volume = 35;
 let timestamp = 0;
 
 exports.getCurrentVideoTimestamp = () => timestamp;

From 50eee86db1d299f6204e8eb29a1d3aa67d128c86 Mon Sep 17 00:00:00 2001
From: Menkveld <menke.veerman@gmail.com>
Date: Mon, 22 May 2023 16:32:52 +0200
Subject: [PATCH 18/19] Fix toggling of screens

---
 client/src/components/MasterControls.vue      | 16 ++++++------
 client/src/views/ProtubeScreen.vue            | 26 ++++++++-----------
 .../modules/socket_endpoints/ScreenSocket.js  |  4 +--
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/client/src/components/MasterControls.vue b/client/src/components/MasterControls.vue
index 2eca030..befac4c 100644
--- a/client/src/components/MasterControls.vue
+++ b/client/src/components/MasterControls.vue
@@ -49,14 +49,14 @@
           :isLeft="playerSettings.playerType === enums.TYPES.RADIO">
           <template #left>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
-              icon="fa-tv">
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
+              icon="fa-radio">
             </font-awesome-icon>
           </template>
           <template #right>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
-              icon="fa-radio">
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
+              icon="fa-tv">
             </font-awesome-icon>
           </template>
         </ToggleSlider>
@@ -65,13 +65,13 @@
           :isLeft="playerSettings.screenSettings.showPhotos">
           <template #left>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
               icon="fa-camera">
             </font-awesome-icon>
           </template>
           <template #right>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
               icon="fa-ban">
             </font-awesome-icon>
           </template>
@@ -81,13 +81,13 @@
           :isLeft="playerSettings.screenSettings.showQueue">
           <template #left>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
               icon="fa-rectangle-list">
             </font-awesome-icon>
           </template>
           <template #right>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
               icon="fa-ban">
             </font-awesome-icon>
           </template>
diff --git a/client/src/views/ProtubeScreen.vue b/client/src/views/ProtubeScreen.vue
index ef6fa6c..1f18a45 100644
--- a/client/src/views/ProtubeScreen.vue
+++ b/client/src/views/ProtubeScreen.vue
@@ -8,7 +8,7 @@
       </div>
     </div>
 
-    <div v-show="isPlayingVideo && !screenSetting.showPhotos">
+    <div v-show="(isPlayingVideo && !screenSetting.showPhotos) || ytAutoPlayStarted === -1">
       <div :id="playerID" class="min-h-screen w-full" />
     </div>
 
@@ -38,7 +38,7 @@
       v-if="
         playerState.playerType === enums.TYPES.VIDEO &&
         !isPlayingVideo &&
-        !showPhotos
+        !displayPhotos
       "
       class="grid h-screen place-items-center">
       <div class="text-4xl dark:text-white">
@@ -76,6 +76,7 @@ const currentTimeStamp = ref({
   timestamp: 0,
   totalDuration: "00:00:00",
 });
+const ytAutoPlayStarted = ref(false);
 const queue = ref([]);
 const screenSetting = ref({
   showQueue: true,
@@ -110,13 +111,6 @@ const isPlayingVideo = computed(
     playerState.value.playerMode !== enums.MODES.IDLE
 );
 
-const isVideoIdle = computed(() => {
-  return (
-    playerState.value.playerType === enums.TYPES.VIDEO &&
-    playerState.value.playerMode === enums.MODES.IDLE
-  );
-});
-
 const isPlayingRadio = computed(
   () =>
     playerState.value.playerType === enums.TYPES.RADIO &&
@@ -128,13 +122,11 @@ const displayQueue = computed(() => {
   return isPlayingVideo.value && screenSetting.value.showQueue;
 });
 
-// show photos if show photos, or default and video idle
+// show photos if show photos, and the video is 
 const displayPhotos = computed(() => {
-  return (
-    isVideoIdle.value ||
-    isPlayingRadio.value ||
-    (isPlayingVideo.value && screenSetting.value.showPhotos)
-  );
+  if (isPlayingVideo.value && ytAutoPlayStarted.value === -1) return false;
+  
+  return screenSetting.value.showPhotos
 });
 
 onBeforeMount(() => {
@@ -157,6 +149,10 @@ onMounted(() => {
   player.on("error", (event) => {
     emit("youtube-media-error", event.data);
   });
+
+  player.on('stateChange', (newstate) => {
+    ytAutoPlayStarted.value = newstate.data;
+  });
 });
 
 watch(
diff --git a/server/modules/socket_endpoints/ScreenSocket.js b/server/modules/socket_endpoints/ScreenSocket.js
index 6e02a9e..08a02f4 100644
--- a/server/modules/socket_endpoints/ScreenSocket.js
+++ b/server/modules/socket_endpoints/ScreenSocket.js
@@ -72,8 +72,8 @@ eventBus.on("new-video-timestamp", (timestamp) => {
   endpoint.emit("new-video-timestamp", timestamp);
 });
 
-eventBus.on("new-screen-setting", (newSetting) => {
-  endpoint.emit("new-screen-setting", newSetting);
+eventBus.on("queue-photos-visibility-changed", (newSetting) => {
+  endpoint.emit("queue-photos-visibility-changed", newSetting);
 });
 
 function emitNewPhoto() {

From 341b0372c9d595163b18804810a6571ba6697380 Mon Sep 17 00:00:00 2001
From: Lint Action <lint-action@samuelmeuli.com>
Date: Mon, 22 May 2023 14:33:45 +0000
Subject: [PATCH 19/19] Fix code style issues with Prettier

---
 client/src/components/MasterControls.vue | 12 ++++++------
 client/src/views/ProtubeScreen.vue       | 14 +++++++++-----
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/src/components/MasterControls.vue b/client/src/components/MasterControls.vue
index befac4c..bba5daf 100644
--- a/client/src/components/MasterControls.vue
+++ b/client/src/components/MasterControls.vue
@@ -49,13 +49,13 @@
           :isLeft="playerSettings.playerType === enums.TYPES.RADIO">
           <template #left>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
               icon="fa-radio">
             </font-awesome-icon>
           </template>
           <template #right>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
               icon="fa-tv">
             </font-awesome-icon>
           </template>
@@ -65,13 +65,13 @@
           :isLeft="playerSettings.screenSettings.showPhotos">
           <template #left>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
               icon="fa-camera">
             </font-awesome-icon>
           </template>
           <template #right>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
               icon="fa-ban">
             </font-awesome-icon>
           </template>
@@ -81,13 +81,13 @@
           :isLeft="playerSettings.screenSettings.showQueue">
           <template #left>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
               icon="fa-rectangle-list">
             </font-awesome-icon>
           </template>
           <template #right>
             <font-awesome-icon
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white w-7"
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
               icon="fa-ban">
             </font-awesome-icon>
           </template>
diff --git a/client/src/views/ProtubeScreen.vue b/client/src/views/ProtubeScreen.vue
index 1f18a45..8abdb07 100644
--- a/client/src/views/ProtubeScreen.vue
+++ b/client/src/views/ProtubeScreen.vue
@@ -8,7 +8,11 @@
       </div>
     </div>
 
-    <div v-show="(isPlayingVideo && !screenSetting.showPhotos) || ytAutoPlayStarted === -1">
+    <div
+      v-show="
+        (isPlayingVideo && !screenSetting.showPhotos) ||
+        ytAutoPlayStarted === -1
+      ">
       <div :id="playerID" class="min-h-screen w-full" />
     </div>
 
@@ -122,11 +126,11 @@ const displayQueue = computed(() => {
   return isPlayingVideo.value && screenSetting.value.showQueue;
 });
 
-// show photos if show photos, and the video is 
+// show photos if show photos, and the video is
 const displayPhotos = computed(() => {
   if (isPlayingVideo.value && ytAutoPlayStarted.value === -1) return false;
-  
-  return screenSetting.value.showPhotos
+
+  return screenSetting.value.showPhotos;
 });
 
 onBeforeMount(() => {
@@ -150,7 +154,7 @@ onMounted(() => {
     emit("youtube-media-error", event.data);
   });
 
-  player.on('stateChange', (newstate) => {
+  player.on("stateChange", (newstate) => {
     ytAutoPlayStarted.value = newstate.data;
   });
 });