Add session timer functionality

src/components/ChatList.vue

@@ -220,17 +220,12 @@ const addChannel = () => {
 
 async function channelSelect(channelId: string) {
   logger.info(`Do action for channel '${channelId}'`);
-
   const channel = await pool.getChannel(channelId);
 
   if (!channel) return;
   if (channel.ChannelType == "Voice") {
     await voice.connectToChannel(channelId);
   }
-
-
-
-
   /*const channel = servers.getDetailsOfChannel(channelId);
 
   if (!channel) return;
@@ -240,8 +235,8 @@ async function channelSelect(channelId: string) {
   }*/
 }
 
-function channelDelete(channelId: string) {
-  servers.deleteChannel(channelId);
+async function channelDelete(channelId: string) {
+  await servers.deleteChannel(channelId);
 }
 
 

src/components/UserBar.vue

@@ -49,6 +49,7 @@
           </TooltipProvider>
           <span class="font-semibold">{{ voice.activeChannel?.Name }}</span>
         </div>
+        <span v-if="voice.isConnected" class="text-timer text-[#a2a6a8]">{{ sessionTimerStore.sessionTimer }}</span>
         <span class="text-xs text-lime-400 mt-1" v-if="voice.isConnected">Connected</span>
         <span class="text-xs text-orange-400 mt-1" v-if="voice.isBeginConnect">Connecting...</span>
       </div>
@@ -65,10 +66,12 @@ import { useMe } from "@/store/meStore";
 import { useSystemStore } from "@/store/systemStore";
 import ArgonAvatar from "./ArgonAvatar.vue";
 import { useVoice } from "@/store/voiceStore";
+import { useSessionTimer } from '@/store/sessionTimer'
 
 const me = useMe();
 const sys = useSystemStore();
 const voice = useVoice();
+const sessionTimerStore = useSessionTimer()
 </script>
 
 <style scoped>

src/store/sessionTimer.ts

@@ -0,0 +1,52 @@
+import { defineStore } from "pinia";
+import { interval, Subscription } from "rxjs";
+import { ref } from "vue";
+
+export const useSessionTimer = defineStore("sessionTimer", () => {
+  const sessionStartDate = ref<Date>(new Date());
+  const sessionTimer = ref<string>('00:00:00');
+  const subscription = ref<Subscription | null>(null);
+
+  const pad = (num: number): string => num.toString().padStart(2, '0');
+
+  function updateSessionTimer(): void {
+    const now = new Date();
+    if (!(sessionStartDate.value instanceof Date) || Number.isNaN(sessionStartDate.value.getTime())) {
+      stopTimer();
+      return;
+    }
+    const milliseconds = now.getTime() - sessionStartDate.value.getTime();
+    const seconds = Math.floor(milliseconds / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if(days < 1) {
+      sessionTimer.value = `${pad(hours % 24)}:${pad(minutes % 60)}:${pad(seconds % 60)}`;
+    } else {
+      sessionTimer.value = `${days}:${pad(hours % 24)}:${pad(minutes % 60)}:${pad(seconds % 60)}`;
+    }
+  }
+
+  function startTimer(): void {
+    stopTimer();
+    subscription.value = interval(1000)
+      .subscribe(updateSessionTimer);
+  }
+
+  function stopTimer() {
+    sessionTimer.value = '00:00:00';
+    sessionStartDate.value = new Date();
+
+    if(subscription.value) {
+      subscription.value.unsubscribe();
+      subscription.value = null;
+    }
+  }
+
+  return {
+    sessionTimer,
+    startTimer,
+    stopTimer
+  };
+});

src/store/voiceStore.ts

@@ -17,12 +17,14 @@ import { useApi } from "./apiStore";
 import { delay, Subscription, timer } from "rxjs";
 import { useConfig } from "./remoteConfig";
 import { useSystemStore } from "./systemStore";
+import { useSessionTimer } from './sessionTimer'
 
 export const useVoice = defineStore("voice", () => {
   const pool = usePoolStore();
   const api = useApi();
   const cfg = useConfig();
   const sys = useSystemStore();
+  const sessionTimerStore = useSessionTimer();
 
   const currentState = ref("NONE" as "NONE" | "BEGIN_CONNECT" | "CONNECTED");
 
@@ -58,6 +60,7 @@ export const useVoice = defineStore("voice", () => {
   });
 
   async function connectToChannel(channelId: string) {
+    sessionTimerStore.stopTimer()
     pool.selectedChannel = channelId;
     activeChannel.value = (await pool.getChannel(channelId))!;
     currentState.value = "BEGIN_CONNECT";
@@ -131,6 +134,7 @@ export const useVoice = defineStore("voice", () => {
     }
 
     currentState.value = "CONNECTED";
+    sessionTimerStore.startTimer()
     logger.success("Connected to channel");
   }
 
@@ -157,6 +161,7 @@ export const useVoice = defineStore("voice", () => {
         connectedRoom.room = null;
         pool.selectedChannel = null;
         activeChannel.value = null;
+        sessionTimerStore.stopTimer()
       } else {
         logger.error("No active channel connection");
       }

tailwind.config.js

@@ -90,6 +90,9 @@ module.exports = {
         "collapsible-down": "collapsible-down 0.2s ease-in-out",
         "collapsible-up": "collapsible-up 0.2s ease-in-out",
       },
+      fontSize: {
+        'timer': ['12px', '15px'],
+      }
     },
   },
   plugins: [animate],