Version 1.0.0 - Frontend

src/views/Interface.vue

@@ -2,39 +2,36 @@
     <SocketEnvironment>
         <div class="container">
             <Search class="search"/>
-            <div class="left-side">
+            <div :class="'left-side' + (globalStore.isViewShowing ? ' hide' : '')">
                 <GuildHeader class="guildheader"/>
-                <Box class="playlist">
-                    <Button @click="router.push('/servers')">Choisir un serveur</Button>
-                    <Button @click="router.push('/terms')">Terms</Button>
-                    <Button @click="router.push('/privacy')">Privacy</Button>
-                    <Button @click="IORequest('/MOD/USERS/BAN', null, '582966873201704960')">Bannir Raphixscrap_</Button>
-                    <Button @click="globalStore.toogleTheme()">Changer le thème</Button>
-                    <p>{{ guildId }}</p>
-                </Box>
+                <Dispatcher class="dispatcher"/>
                 <Account class="account"/>
             </div>
-            <div class="queue"></div>
-            <View class="view"></View>
-            <div class="player"></div>
+            <Box class="queue" padding="closed" ><Queue/></Box>
+            <View :class="'view' + (!globalStore.isViewShowing ? ' hide' : '')"></View>
+            <Player class="player"/>
         </div>
     </SocketEnvironment>
 </template>
 <script setup>
-import Box from '@/components/UI/Box.vue';
-import Button from '@/components/UI/Button.vue';
 import SocketEnvironment from '@/utils/SocketEnvironment.vue';
 import { watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useGlobalStore } from '@/stores/globalStore';
 import { useUserStore } from '@/stores/userStore';
-import { IOListener, IORequest } from '@/utils/IORequest';
+import { IORequest, IOListener } from '@/utils/IORequest';
 import { onMounted, ref } from 'vue';
 import Account from '@/components/Layout/Account.vue';
 import events from '@/utils/Events.js';
 import GuildHeader from '@/components/Layout/GuildHeader.vue';
 import Search from '@/components/Layout/Search.vue';
 import View from '@/components/Layout/View.vue';
+import Dispatcher from '@/components/Widget/Dispatcher.vue';
+import Queue from '@/components/Layout/Queue.vue';
+import { loadLogic, updateChannel} from '@/utils/Logic';
+import Player from '@/components/Layout/Player.vue';
+import Box from '@/components/UI/Box.vue';
+import { socket } from '@/socket';
 
 const props = defineProps({
     guildId: {
@@ -44,6 +41,8 @@ const props = defineProps({
 });
 
 
+loadLogic()
+
 const guildId = props.guildId;
 if (!guildId) {
     globalStore.setLastGuild(null);
@@ -61,11 +60,17 @@ watch(() => globalStore.isLoading, (value, oldValue) => {
 })
 
 onMounted(() => {
+    globalStore.actualPlaylistId = null;
     if(!globalStore.isLoading) {
         loadInteface();
     } 
+    IOListener("/CHANNEL/UPDATE", () => {
+        updateChannel()
+    })
 });
 
+
+
 events.on("UPDATE", () => {
     checkGuildAvailability();
 });
@@ -88,6 +93,7 @@ function checkGuildAvailability() {
             if(response === true) {
                 console.log("Successfully joined guild:", guildId);
                 events.emit("GUILD_JOINED");
+                updateChannel();
             } else {
                 console.error("Failed to join guild:", response);
                 globalStore.setLastGuild(null);
@@ -107,14 +113,17 @@ function checkGuildAvailability() {
 @media screen and (max-width: 768px), screen and (max-height: 607px) {
     .container {
         display: flex;
-        gap: 15px;
+        justify-content: space-between;
         flex-direction: column;
+        padding: 0 !important;
     }
   
     .left-side {
         display: flex;
         flex-direction: column;
+        flex: 1;
         gap: 15px;
+        padding: 15px !important;
     }
 
     .guildheader {
@@ -125,8 +134,34 @@ function checkGuildAvailability() {
         order: 1;
     }
 
-    .playlist {
+    .dispatcher {
         order: 2;
+        flex: 1;
+    }
+
+    .hide {
+
+        display: none !important;
+    }
+
+    .view {
+        flex: 1;
+        margin: 15px;
+        animation: unfold 0.5s ease-in-out;
+    }
+
+    .account {
+        display: none;
+    }
+
+
+    .search {
+        margin: 15px;
+        margin-bottom: 0;
+    }
+
+    .queue {
+        display: none;
     }
 
 }
@@ -157,9 +192,13 @@ function checkGuildAvailability() {
         height: 100%;
     }
 
-    .playlist {
+    .dispatcher {
         flex: 1;
     }
+
+    .placeHolderView {
+        display: none;
+    }
       
 }
 
@@ -185,24 +224,30 @@ function checkGuildAvailability() {
         height: 100%;
     }
 
-    .playlist {
+    .dispatcher {
         flex: 1;
     }
-        
+
+    .placeHolderView {
+        display: none;
+    }
+
+    
+    .queue {
+        display: flex;
+    }
+
 }
 
-
-
 .container {
     padding: 15px;
-    width: 100%;
+    width: 100vw;
 }
 
-.queue, .view, .player {
-    background-color: var(--secondary);
-    border-radius: 10px;
-}
 
+.view {
+    display: flex;
+}
 
 
 </style>

src/views/Login.vue

@@ -24,7 +24,7 @@ import Error from '@/components/UI/Error.vue';
 import Info from '@/components/UI/Info.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useLoginStore } from '@/stores/loginStore';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted } from 'vue';
 import { socket } from '@/socket.js';
 import { useGlobalStore } from '@/stores/globalStore';
 import Success from '@/components/UI/Success.vue';
@@ -133,6 +133,9 @@ socket.on("connect_error", (error) => {
     
 }); 
 
+onMounted(() => {
+    document.title = "Connexion - Subsonics";
+});
 
 
 </script>

src/views/PageError.vue

@@ -20,6 +20,7 @@ import DefaultSplash from '@/components/UI/DefaultSplash.vue';
 import Button from '@/components/UI/Button.vue'
 import Box from '@/components/UI/Box.vue';
 import { socket } from '@/socket';
+import { onMounted } from 'vue';
 
 defineProps({
     message: {
@@ -32,6 +33,9 @@ if(socket.connected) {
     socket.disconnect();
 }   
 
+onMounted(() => {
+    document.title = "Erreur - Subsonics";
+});
 
 </script>
 <style scoped>

src/views/Privacy.vue

@@ -3,6 +3,11 @@ import ReturnHomeButton from '@/components/Widget/ReturnHomeButton.vue';
 import DefaultSplash from '@/components/UI/DefaultSplash.vue';
 import Box from '@/components/UI/Box.vue';
 import Button from '@/components/UI/Button.vue';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+    document.title = "Politique de confidentialité - Subsonics";
+});
 </script>
 
 <template>

src/views/Servers.vue

@@ -7,12 +7,17 @@ import { useGlobalStore } from '@/stores/globalStore';
 import { useUserStore } from '@/stores/userStore';
 import Button from '@/components/UI/Button.vue';
 import ReturnHomeButton from '@/components/Widget/ReturnHomeButton.vue';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import ServerListItem from '@/components/Widget/Server/ServerListItem.vue';
 import Info from '@/components/UI/Info.vue';
 import Account from '@/components/Layout/Account.vue';
 
 const globalStore = useGlobalStore();
+
+onMounted(() => {
+    document.title = "Mes Serveurs - Subsonics";
+});
+
 const userStore = useUserStore();
 console.log("Last route:", globalStore.lastRoute);    
 const router = useRouter();
@@ -37,6 +42,7 @@ function inviteSubsonics() {
     window.open(botInviteUrl.value, '_blank', `popup,width=600,height=600,left=${(window.innerWidth - 600) / 2},top=${(window.innerHeight - 600) / 2}`);
 }
 
+
 // Vérifier RaphX pourquoi ca plante !
 
 </script>

src/views/Terms.vue

@@ -3,6 +3,11 @@ import ReturnHomeButton from '@/components/Widget/ReturnHomeButton.vue';
 import DefaultSplash from '@/components/UI/DefaultSplash.vue';
 import Box from '@/components/UI/Box.vue';
 import Button from '@/components/UI/Button.vue';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+    document.title = "Conditions d'utilisation - Subsonics";
+});
 </script>
 
 <template>