Debug frontend

nginx.conf

@@ -79,11 +79,11 @@ http {
 
 
         location / {
-            index index.html;
-            root /var/www/html;
-            try_files $uri $uri/ /index.html;
-            #proxy_set_header "Host" "127.0.0.1:8080";
-            #proxy_pass http://frontend:8080;
+            #index index.html;
+            #root /var/www/html;
+            #try_files $uri $uri/ /index.html;
+            proxy_set_header "Host" "127.0.0.1:8080";
+            proxy_pass http://frontend:8080;
         }
 
         location /api/public {

src/Api.ts

@@ -57,10 +57,10 @@ export class Api {
     return (await this.axios.get(`/test`))?.data;
   }
   async getRole() {
-    return (await this.axios.get(`/user/role`))?.data;
+    return (await this.axios.get(`/me/role`))?.data;
   }
   async getCurrentlyPlaying() {
-    return (await this.axios.get(`/user/currentlyPlaying`))?.data;
+    return (await this.axios.get(`/me/currentlyPlaying`))?.data;
   }
 
   async getUserInfo(userId: string) {

src/components/DarkmodeToggle.vue

@@ -11,7 +11,10 @@
 import { ref, watch } from 'vue';
 import { themeConfig } from '@/main';
 
-const sliderState = ref(themeConfig.getTheme() === 'dark');
+let currentTheme;
+currentTheme = themeConfig.getTheme() === 'dark'
+
+const sliderState = ref(currentTheme);
 
 watch(sliderState, (state) => {
   themeConfig.setTheme(state ? 'dark' : 'light');

src/components/PromiseResolver.vue

@@ -8,18 +8,26 @@
       :data="getter(data)"
       :update="update"
     />
-    <slot v-if="error" name="error">
+    <slot
+      v-if="error"
+      name="error"
+      :error="error"
+      :update="update"
+    >
       <div class="alert alert-danger">
         {{ error.message || 'Oops! Something went wrong :/' }}
       </div>
     </slot>
-    <slot v-else-if="loading && showThrobber" name="loading">
-      <div class="overlay">
-        <div class="wrapper">
-          <ThrobberLoading />
+    <transition name="fade">
+      <slot v-if="loading && showThrobber" name="loading">
+        <div class="overlay">
+          <div class="wrapper">
+            <div class="background bg-darkmode-dark bg-light" />
+            <ThrobberLoading class="position-relative" />
+          </div>
         </div>
-      </div>
-    </slot>
+      </slot>
+    </transition>
   </div>
 </template>
 
@@ -57,6 +65,7 @@ const update = async (promise: Promise | unknown) => {
     data.value = await (promise.isPromiseList
       ? Promise.all(promise.promises)
       : promise);
+    error.value = null;
   } catch (e) {
     error.value = e;
   } finally {
@@ -83,8 +92,6 @@ watch(() => props.promise, (to) => {
     width: 100%;
     height: 100%;
     min-height: 5rem;
-    background-color: #fffd;
-    z-index: 9000;
     .wrapper {
       position: sticky;
       display: flex;
@@ -93,6 +100,14 @@ watch(() => props.promise, (to) => {
       top: 0;
       height: 100%;
       max-height: 100vh;
+      .background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        opacity: 0.9;
+      }
     }
   }
 }

src/components/TrackProgressBar.vue

@@ -30,13 +30,17 @@ onBeforeUnmount(() => {
         class="progress-bar"
         role="progressbar"
         :style="{
-          width: `${ estimatedProgress / duration * 100 }%`
+          width: `${ Math.min(estimatedProgress / duration, 1) * 100 }%`
         }"
       />
     </div>
     <div class="row my-2">
       <div class="col">
-        <TimeFormatter :seconds="estimatedProgress / 1000"/>
+        <TimeFormatter
+          :seconds="
+            Math.min(estimatedProgress, duration) / 1000
+          "
+        />
       </div>
       <div class="col-auto">
         <TimeFormatter :seconds="duration / 1000"/>

src/main.scss

@@ -11,3 +11,16 @@ html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.fade-enter-active, .fade-leave-active {
+  transition-property: opacity;
+  transition-duration: .25s;
+}
+
+.fade-enter-active {
+  transition-delay: .25s;
+}
+
+.fade-enter, .fade-leave-active {
+  opacity: 0
+}

src/router/index.ts

@@ -23,7 +23,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "me" */ "../views/MePage.vue"),
     meta: {
-      requireAuth: false,
+      requireAuth: true,
     },
   },
   {

src/views/MePage.vue

@@ -1,37 +1,85 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import PromiseResolver from "@/components/PromiseResolver.vue";
+import CurrentlyPlayingCompact from "@/components/CurrentlyPlayingCompact.vue";
+import { onBeforeUnmount, ref } from "vue";
+import { useApi } from "@/Api";
+
+const api = useApi();
+
+const userInfo = ref(api?.getCurrentlyPlaying());
+
+let refreshUserInfo = setInterval(() => {
+  userInfo.value = api?.getCurrentlyPlaying();
+}, 10000);
+
+onBeforeUnmount(() => {
+  clearInterval(refreshUserInfo);
+});
+</script>
 
 <template>
   <div>
     <h1>Me</h1>
+    <h2>Currently Listening to</h2>
+    <PromiseResolver
+      :promise="userInfo"
+      v-slot="{ data: { currentlyPlaying } }"
+    >
+      <CurrentlyPlayingCompact v-if="currentlyPlaying?.item" :currentlyPlaying="currentlyPlaying" />
+      <div v-else class="alert alert-info">
+        You are not listening to music.
+      </div>
+    </PromiseResolver>
+    <h2>Session</h2>
     <PromiseResolver
       :promise="$api.getSession()"
-      v-slot="slot"
     >
-      <div class="card">
-        <div class="card-header">
-          Your session
-        </div>
-        <div class="card-body">
-          <p>
-            {{ slot }}
-          </p>
-          <b>Clients</b>
+      <template #default="{ data: { session }, update }">
+        <div class="card">
+          <div class="card-header">
+            Your session
+          </div>
+          <div class="card-body">
+            <b>Host</b>
+            <div>
+              {{ session.host?.spotify.userId }}
+            </div>
+            <b>Clients</b>
+            <div>
+              <div v-for="client in session.clients" :key="client">
+                {{ client.displayName }}
+              </div>
+            </div>
+          </div>
+          <div class="card-footer">
+            <button
+              class="btn btn-danger mx-1"
+              @click="$api.leaveSession().then(() => update($api.getSession()))"
+            >
+              leave Session
+            </button>
+            <button
+              class="btn btn-danger mx-1"
+              @click="$api.deleteSession().then(() => update($api.getSession()))"
+            >
+              delete Session
+            </button>
+          </div>
         </div>
-        <div class="card-footer">
-          <button
-            class="btn btn-danger mx-1"
-            @click="$api.leaveSession().then(() => update($api.getSession()))"
-          >
-            leave Session
-          </button>
+      </template>
+      <template #error="{ error, update }">
+        <div v-if="error.response.status === 404">
+          <div class="alert alert-info">
+            You are not part of a session.
+          </div>
           <button
-            class="btn btn-danger mx-1"
-            @click="$api.deleteSession().then(() => update($api.getSession()))"
+            @click="$api.createSession().then(() => update($api.getSession()))"
+            class="btn btn-success"
           >
-            delete Session
+            Create Session
           </button>
         </div>
-      </div>
+      </template>
     </PromiseResolver>
   </div>
 </template>