Version 1.0

.gitignore

@@ -8,6 +8,8 @@ yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
 
+*.json
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
@@ -17,6 +19,8 @@ pids
 *.seed
 *.pid.lock
 
+
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 

electron-builder.yml

@@ -0,0 +1,4 @@
+appId: fr.raphix.submanager
+publish:
+  provider: gitea
+  token: c6ba721f1224c4b0170725495030bef9045cf42e

main.js

@@ -1,12 +1,16 @@
-const {app, BrowserWindow, ipcMain, Notification, nativeImage, Tray, Menu} = require("electron")
+const {app, BrowserWindow, ipcMain, Notification, nativeImage, Tray, Menu, shell} = require("electron")
+const { autoUpdater } = require("electron-updater")
 const path = require("path")
 const fs = require("fs")
 const ipc = ipcMain
+const { io } = require("socket.io-client");
+const log = require("./sublog");
+const { platform } = require("os");
 
 
 // [Function] Main Window Function
 
-function createWindow() {
+async function createWindow() {
     const win = new BrowserWindow({
         
         width: 300,
@@ -27,15 +31,247 @@ function createWindow() {
 
     })
 
-    win.loadFile("templates/login/login.html")
+
+
+    await win.loadFile("templates/login/login.html")
+
+
+
+    const socket = io("ws://localhost:4000", {
+        autoConnect: false,
+        reconnection: false
+
+    });
+
+    socket.connect()
+
+
+    
+    socket.on("connect", () => {
+
+        log.client("Connexion au serveur ... Finish !")
+
+        if(!fs.existsSync( __dirname + path.sep + "settings.json")) {
+            win.webContents.send("connectSuccess")
+        } else {
+
+            const settings = require( __dirname + path.sep + "settings.json")
+
+            if(settings.token) {
+                log.client("Auth : Connexion avec le Token Discord !")
+                socket.emit("authByToken", settings.token)
+            } else {
+
+                win.webContents.send("connectSuccess")
+            }
+            
+        }
+        
+       
+
+    })
+
+    socket.on("authByTokenAnswer", (resp, token) => {
+
+        if(resp == true) {
+
+            win.loadFile("templates/app/app.html")
+           
+
+        } else {
+            fs.rmSync( __dirname + path.sep + "settings.json")
+            win.webContents.send("connectSuccess")
+
+        }
+    })
+
+    socket.io.on("error", () => {
+        log.client("Erreur lors de la connexion entre le serveur et le client !")
+        win.webContents.send("connectFailed")
+    })
+
+    ipc.on("retryLogin", () => {
+        log.client("Reconnexion au serveur ... Progressing !")
+        socket.connect()
+    })
+
+    ipc.on("discordlogin", () => {
+
+        
+        socket.emit("authNeedLogin")
+        log.client("Discord Auth : Demande du Token vers le serveur !")
+        win.minimize()
+        
+    })
+
+    socket.on("authFailed", () => {
+        win.webContents.send("discordFailed")
+        log.client("Discord Auth : Erreur lors de la connexion vers Discord !")
+    })
+
+    socket.on("authOpenLink", (link) => {
+        log.client("Discord Auth : Redirection vers le service Discord !")
+        shell.openExternal(link)
+        
+    })
+
+    socket.on("successLogin", () => {
+        log.client("Discord Auth : Redirection fait avec succes !")
+        win.loadFile("templates/app/app.html")
+        askUpdateState()
+        win.restore()
+    })
+
+    socket.on("updateState", (data) => {
+        
+        log.client("State : Update en cours !")
+        win.webContents.send("updateData", data)
+        
+
+    })
+
+    socket.on("actualize", (data) => {
+        
+        log.client("Actualisation : Update en cours !")
+        win.webContents.send("actualize", data)
+        
+        
+    })
+
+    socket.on("findResult", (data) => {
+
+        log.client("Recherche : Terminé et récupéré")
+        win.webContents.send("findResult", data)
+    })
+
+    ipc.on("play", () => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Play / Pause Requested !")
+        socket.emit("play", settings.token)
+
+    })
+
+    ipc.on("forward", () => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Forward Requested !")
+        socket.emit("forward", settings.token)
+
+    })
+
+    ipc.on("backward", () => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Backward Requsted !")
+        socket.emit("backward", settings.token)
+
+    })
+
+    ipc.on("exitBot", () => {
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Exit Bot Requsted !")
+        socket.emit("exit", settings.token)
+
+    })
+
+    ipc.on("deleteQueue", (ev, identifier) => {
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Delete Track queue Bot Requsted !")
+        socket.emit("deleteQueue", settings.token, identifier)
+
+    })
+
+    ipc.on("findReq", (ev, value) => {
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Find search Bot Requsted !")
+        socket.emit("find", settings.token, value)
+
+    })
+
+    ipc.on("addQueue", (ev, url) => {
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Add song Bot Requsted !")
+        socket.emit("addQueue", settings.token, url)
+
+    })
+
+    ipc.on("listClear", () => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Clear Queue Bot Requsted !")
+        socket.emit("listClear", settings.token)
+    })
+
+    ipc.on("signout", () => {
+
+        if(fs.statSync(__dirname + path.sep + "settings.json")) {
+
+            fs.rmSync(__dirname + path.sep + "settings.json")
+        }
+
+        win.loadFile("template/login/login.html")
+        socket.disconnect()
+    
+    })
+
+    socket.on("registerToken", (token) => {
+
+        const settings = {}
+        settings["token"] = token
+
+        fs.writeFileSync(  __dirname + path.sep + "settings.json", JSON.stringify(settings, null, 2))
+        log.client("Saving token in settings !")
+    })
+
+    if (process.defaultApp) {
+        if (process.argv.length >= 2) {
+          app.setAsDefaultProtocolClient('submanager', process.execPath, [path.resolve(process.argv[1])])
+        }
+      } else {
+        app.setAsDefaultProtocolClient('submanager')
+      }
 
     ipc.on("close", () => {
-
+        socket.disconnect()
         app.quit()
     })
 
+    ipc.on("minimize", () => {
+        win.minimize()
+    })
+
+    ipc.on("askUpdateState", () => {
+
+    askUpdateState()
+    })  
+
+    function askUpdateState() {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        socket.emit("getState", settings.token)
+    }
+
+    socket.on("disconnect", async () => {
+        await win.loadFile("templates/login/login.html")
+        await win.webContents.send("connectFailed")
+        socket.connect()
+    });
+
 }
 
+
+
+function sts() {
+
+    const settings = require( __dirname + path.sep + "settings.json")
+    return settings
+}
+
+app.on("open-url", (ev, url) => {
+    app.quit() 
+ })
+
 app.whenReady().then(() => {
 
     const icon = nativeImage.createFromPath('src/logo.png')
@@ -52,9 +288,11 @@ app.whenReady().then(() => {
     //[Operation] - Check settings
 
     createWindow()
+    log.client("Starting Application")
         
     app.on('activate', () => {
 
+        autoUpdater.checkForUpdates()
         if(BrowserWindow.getAllWindows().length === 0) {
                 createWindow()   
 
@@ -68,3 +306,34 @@ app.whenReady().then(() => {
 
 })
 
+autoUpdater.on("update-available", (_event, releaseNotes, releaseName) => {
+	const dialogOpts = {
+		type: 'info',
+		buttons: ['Ok'],
+		title: 'Mise à jour de Submanager',
+		message: process.platform === 'win32' ? releaseNotes : releaseName,
+		detail: 'Cette version va être téléchargé automatiquement !'
+	}
+	dialog.showMessageBox(dialogOpts, (response) => {
+
+	});
+})
+
+autoUpdater.on("update-downloaded", (_event, releaseNotes, releaseName) => {
+	const dialogOpts = {
+		type: 'info',
+		buttons: ['Restart', 'Later'],
+        title: 'Mise à jour de Submanager',
+		message: process.platform === 'win32' ? releaseNotes : releaseName,
+		detail: 'Une nouvelle version a été téléchargé ! Redémarrer l\'application afin d\'effectuer les changements !'
+	};
+	dialog.showMessageBox(dialogOpts).then((returnValue) => {
+		if (returnValue.response === 0) autoUpdater.quitAndInstall()
+	})
+});
+
+
+
+
+
+//EXPORT COMMAND : npx electron-packager . submanager-beta-1 --platform="win32" --out="C:\Users\picot\OneDrive\Bureau\"

package.json

@@ -1,10 +1,12 @@
 {
-  "name": "manager",
+  "name": "subsonics-manager",
-  "version": "1.0",
+  "version": "DEV 1.0",
   "description": "Manager for subsonics",
   "main": "main.js",
   "scripts": {
-    "start": "electron ."
+    "start": "electron .",
+    "build": "electron-builder build --win --publish never",
+    "deploy": "electron-builder build --win --publish always"
   },
   "repository": {
     "type": "git",
@@ -15,6 +17,11 @@
   "license": "ISC",
   "dependencies": {
     "electron": "^24.1.2",
-    "nodemon": "^2.0.22"
+    "electron-updater": "^5.3.0",
+    "nodemon": "^2.0.22",
+    "socket.io-client": "^4.6.1"
+  },
+  "devDependencies": {
+    "electron-packager": "^17.1.1"
   }
 }

sublog.js

@@ -0,0 +1,76 @@
+module.exports.client = (message) => {
+
+    var date = new Date()
+
+    // [Date Format] - Format de la date
+
+    var gmonth = date.getMonth()
+    var gday = date.getDate()
+    var gHour = date.getHours()
+    var gMinute = date.getMinutes()
+    var gSecondes = date.getSeconds()
+
+
+    if(date.getMonth() + 1 <= 9) {
+        gmonth = "0" + (date.getMonth() + 1)
+    }
+
+    if(date.getDate() + 1 <= 9) {
+        gday = "0" + date.getDate()
+    }
+
+    if(date.getHours() + 1 <= 9) {
+        gHour = "0" + date.getHours()
+    }
+
+    if(date.getMinutes() + 1 <= 9) {
+        gMinute = "0" + date.getMinutes()
+    }
+
+    if(date.getSeconds() + 1 <= 9) {
+        gSecondes = "0" + date.getSeconds()
+    }
+
+    var currentDate = date.getFullYear() + "-" + gmonth + "-" + gday + "-" + gHour + "h"  + "-" + gMinute + "m" + "-" + gSecondes + "s" 
+
+    console.log("[Subsonics-Client] - " + currentDate + " - " + message)
+}
+
+module.exports.client.error = (message) => {
+
+    var date = new Date()
+
+    // [Date Format] - Format de la date
+
+    var gmonth = date.getMonth()
+    var gday = date.getDate()
+    var gHour = date.getHours()
+    var gMinute = date.getMinutes()
+    var gSecondes = date.getSeconds()
+
+
+    if(date.getMonth() + 1 <= 9) {
+        gmonth = "0" + (date.getMonth() + 1)
+    }
+
+    if(date.getDate() + 1 <= 9) {
+        gday = "0" + date.getDate()
+    }
+
+    if(date.getHours() + 1 <= 9) {
+        gHour = "0" + date.getHours()
+    }
+
+    if(date.getMinutes() + 1 <= 9) {
+        gMinute = "0" + date.getMinutes()
+    }
+
+    if(date.getSeconds() + 1 <= 9) {
+        gSecondes = "0" + date.getSeconds()
+    }
+
+    var currentDate = date.getFullYear() + "-" + gmonth + "-" + gday + "-" + gHour + "h"  + "-" + gMinute + "m" + "-" + gSecondes + "s" 
+
+    console.error("[Subsonics-Client] - [ERROR] - " + currentDate + " - " + message)
+}
+

templates/app/app.css

@@ -0,0 +1,314 @@
+.logo {
+
+    width: 15%;
+    border-radius: 100%;
+    margin-right: 5px;
+}
+
+.box {
+
+    display: flex;
+    padding: 5%;
+    color: white;
+    border-radius: 15px;
+    background-color: rgb(38, 37, 37);
+    font-size: 12px;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 5px;
+
+
+}
+
+.controller-box {
+
+    display: flex;
+    flex-direction: column;
+    padding: 5%;
+    color: white;
+    border-radius: 15px;
+    background-color: rgb(38, 37, 37);
+    font-size: 12px;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 5px;
+}
+
+
+.signout {
+
+    background-color: transparent;
+    color: red;
+    border: none;
+    transition: all 0.2s ease 0s;
+    height: 30px;
+    width: 30px;
+
+}
+
+.signout:hover {
+    border-radius: 100%;
+    background-color: red;
+    border-color: transparent;
+    color: white;
+
+}
+
+.signout:active {
+
+    background-color: transparent;
+    color: red;
+    border: none;
+    transition: all 0.2s ease 0s;
+    width: 13%;
+}
+
+.online-light {
+
+    border-radius: 15%;
+    background-color: rgb(55, 255, 37);
+    padding: 2%;
+    color: black;
+    display: flex;
+    align-items: center;
+    vertical-align: center;
+    margin-left: 10px;
+    
+
+}
+
+.thumbnail {
+
+    width: 30px;
+    height: 20px;
+    margin-right: 10px;
+}
+
+.title {
+
+    word-break: keep-all;
+
+}
+
+
+.playbar {
+
+    width: 100%;
+    border: none;
+    row-gap: 10px;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+.bbar {
+    width: 100%;
+    padding: 10%;
+    display: flex;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+
+}
+
+.secondary {
+
+    background-color: #171A21;
+    color: white;
+    border: none;
+    border-radius: 100%;
+    font-size: 30px;
+    padding: 2%;
+    padding-right: 7%;
+    padding-left: 7%;
+    transition: all 0.2s ease 0s;
+    border: solid;
+    border-width: 5px;
+    border-color: #171A21 ;
+}
+
+.secondary:active {
+    background-color: transparent;
+  
+}
+
+.primary {
+
+    background-color: white ;
+    color: #171A21;
+    border: none;
+    border-radius: 100%;
+    font-size: 35px;
+    padding: 5%;
+    padding-right: 10%;
+    padding-left: 10%;
+    transition: all 0.2s ease 0s;
+    border: solid;
+    border-width: 5px;
+    border-color: white ;
+}
+
+.primary:active {
+
+    background-color: transparent;
+    color: white;
+}
+
+.third {
+
+    color: white;
+    background-color: transparent;
+    border: none;
+    border-radius: 100%;
+    text-shadow: 1px 1px 10px white;
+    font-size: 16px;
+
+}
+
+.third-join {
+
+    color: rgb(53, 255, 35);
+    background-color: transparent;
+    border: none;
+    border-radius: 100%;
+    text-shadow: 1px 1px 10px rgb(53, 255, 35);
+    font-size: 16px;
+
+}
+
+.third-leave {
+
+    color: rgb(255, 35, 35);
+    background-color: transparent;
+    border: none;
+    border-radius: 100%;
+    text-shadow: 1px 1px 10px rgb(255, 27, 27);
+    font-size: 16px;
+    
+
+}
+
+.error {
+
+    color: rgb(255, 35, 35);
+    background-color: transparent;
+    border: none;
+    border-radius: 100%;
+    text-shadow: 1px 1px 5px rgb(255, 27, 27);
+    font-size: 12px;
+    text-align: center;
+
+}
+
+#listContent {
+
+    padding: 5%;
+}
+
+.infoVersion {
+
+    color: rgb(31, 30, 30);
+    text-align: center;
+    font-size: 13px;
+
+}
+
+.menu {
+
+    border: none;
+    padding: 5%;
+    color: white;
+    border-radius: 15px;
+    background-color: rgb(61, 61, 61);
+    font-size: 12px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+}
+
+.listTitle {
+
+    color: white;
+    margin: 0;
+    font-size: 10px;
+}
+
+.menuheader {
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+}
+
+
+
+.listHeader {
+
+    text-align: center;
+    margin: 0;
+    font-size: 16px;
+    text-shadow: 1px 1px 3px white;
+}
+
+/* width */
+::-webkit-scrollbar {
+    width: 5px;
+    margin-right: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px grey;
+    border-radius: 10px;
+  }
+  
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #171A21;
+    border-radius: 10px;
+  }
+
+
+.song {
+
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.titleSong {
+
+    width: 100%;
+
+}
+
+.finder {
+
+
+
+    margin-top: 10px;
+    width: 100%;
+    background-color: transparent;
+    transition: all 0.2s ease 0s;
+    border: solid white 1px;
+    border-radius: 15px;
+    padding: 7px;
+    color: white;
+    padding-left: 20px;
+    text-decoration: none;
+    margin-bottom: 10px;
+    
+}
+
+.finder:hover {
+
+    box-shadow: 1px 1px 5px white;
+}

templates/app/app.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Submanager - Login</title>
+    <link rel="stylesheet" href="../common/common.css">
+    <link rel="stylesheet" href="app.css">
+</head>
+<body>
+    <header>
+        <div class="top-title">
+            <h1><img class="top-logo rounded" src="../../src/logo.png" alt="Logo"> Subsonics</h1>
+        </div>
+        <button id="minimizeBtn" class="buttonReduce"><i class="fas fa-window-minimize"></i></button>
+        <button id="closeBtn" class="buttonClose"><i class="fas fa-times"></i></button>
+    </header>
+    <div class="content">
+        
+       
+       
+        <div class="box">
+            
+                <span id="music_img"><img class="thumbnail" src="../common/Mediamodifier-Design.svg"></span>
+                 <span id="music_title" class="title">Aucun titre joué</span>
+          
+            <div class="online-light"><i style="margin-right: 2px;" class="fas fa-user-friends"></i>  <span id="online">0</span></div>
+        </div>
+        <div class="controller-box">
+            <div class="playbar">
+                <button id="backward" class="secondary"><i class="fas fa-step-backward"></i></button>
+                <button id="play" class="primary"><i class="fas fa-play"></i></button>
+                <button id="forward" class="secondary"><i class="fas fa-step-forward"></i></button>
+            </div>
+            <div class="bbar">
+                <button id="search" class="third"><i class="fa fa-search"></i></button>
+                <span id="exitSpan" class="exit"></span> 
+                <button id="list" class="third"><i class="fa fa-list-ol"></i></button>
+            </div>
+        </div>
+        <div class="box">
+            <div>
+                <span id="logo"><img class="logo" src="../../src/logo.png"></span>
+                <span id="username"></span>
+            </div>
+            <button id="signout" class="signout"><i class="fas fa-sign-out"></i></button>
+        </div>
+    </div>
+    <dialog id="listDialog" class="menu">
+        <div class="menuheader">
+            <p class="listHeader"><i style="margin-right: 3px" class="fa fa-list-ol"></i> Liste de lecture</p>
+            <div>
+                <button class="buttonClose" id="listClear"><i class="fas fa-trash"></i></button>
+                <button class="buttonClose" id="listClose"><i class="fas fa-times"></i></button>
+            </div>
+           
+            
+        </div>
+        <div id="listContent">
+        </div>
+    </dialog>
+    <dialog id="searchDialog" class="menu">
+        <div class="menuheader">
+            <p class="listHeader"><i style="margin-right: 3px" class="fa fa-search"></i> Rechercher</p>
+            <button class="buttonClose" id="searchClose"><i class="fas fa-times"></i></button>
+            
+        </div>
+        <input id="searchBar" class="finder" type="text" placeholder="Nom ou lien">
+        <div id="searchContent">
+           
+        </div>
+    </dialog>
+    <div class="infoVersion">
+        <p >Submanager - Version <span id="version"></span></p>
+        <p >Fait avec 💖 par Raphix</p>
+    </div>
+    
+
+    <script src="../common/bundle.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>

templates/app/app.js

@@ -0,0 +1,243 @@
+const {ipcRenderer} = require("electron");
+const ipc = ipcRenderer;
+const fs = require("fs")
+const packageJson = require("../../package.json")
+
+const logo = document.getElementById("logo")
+const username = document.getElementById("username")
+const signout = document.getElementById("signout")
+const onlineNumber = document.getElementById("online")
+const closeBtn = document.getElementById("closeBtn");
+const minimizeBtn = document.getElementById("minimizeBtn");
+const musicTitle = document.getElementById("music_title")
+const musicURL = document.getElementById("music_img")
+const exitSpan = document.getElementById("exitSpan")
+const list = document.getElementById("list")
+const listDialog = document.getElementById("listDialog")
+const listClose = document.getElementById("listClose")
+const listClear = document.getElementById("listClear")
+const listcontent = document.getElementById("listContent")
+
+const search = document.getElementById("search")
+const searchBar = document.getElementById("searchBar")
+const searchDialog = document.getElementById("searchDialog")
+const searchClose = document.getElementById("searchClose")
+const searchcontent = document.getElementById("searchContent")
+
+listClear.addEventListener("click", () => {
+    
+    ipc.send("listClear")
+
+})
+
+searchBar.addEventListener("change", () => {
+
+    ipc.send("findReq", searchBar.value)
+
+
+})
+
+ipc.on("findResult", (ev, list) => {
+
+ 
+    if(list.tracks != null) {
+        const data = list.tracks
+     
+
+        var contentToPush = new Array()
+
+        for(var title of data) {
+            
+          
+            contentToPush.push(' <div class="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="searchTitle">' + title.title + '</p></div> <button id="' + data.indexOf(title) + '_add" class="buttonReduce"><i class="fa fa-plus"></i></button> </div>')
+        }
+
+        if(contentToPush.join("") == "") {
+
+            searchcontent.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'
+        
+        } else {
+
+            searchcontent.innerHTML = contentToPush.join("")
+        }
+
+        for(var title of data) {
+
+     
+            
+            const titleBtn = document.getElementById(data.indexOf(title)+ "_add")
+            
+            titleBtn.addEventListener("click", () => {
+                searchDialog.close()
+                searchcontent.innerHTML = ""
+                searchBar.value = ""
+                ipc.send("addQueue", data[titleBtn.id.replace("_add", "")].uri)
+            })
+        }
+       
+
+    } else {
+
+        searchcontent.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'
+
+    }
+
+})
+
+list.addEventListener("click", () => {
+
+    listDialog.showModal()
+
+})
+
+listClose.addEventListener("click", () => {
+
+    listDialog.close()
+})
+
+
+search.addEventListener("click", () => {
+
+    searchDialog.showModal()
+
+})
+
+searchClose.addEventListener("click", () => {
+
+    searchDialog.close()
+})
+
+
+
+
+const backward = document.getElementById("backward")
+const play = document.getElementById("play")
+const forward = document.getElementById("forward")
+
+ipc.send("askUpdateState")
+
+document.getElementById("version").innerHTML = packageJson.version
+
+closeBtn.addEventListener("click", () => {
+   
+    ipc.send("close");
+    
+});
+
+minimizeBtn.addEventListener("click", () => {
+
+    ipc.send("minimize")
+})
+
+play.addEventListener("click" ,() => {
+
+    ipc.send("play")
+    console.log("PLAY")
+
+})
+
+backward.addEventListener("click" ,() => {
+
+    ipc.send("backward")
+    console.log("BACKWARD")
+    
+})
+
+forward.addEventListener("click" ,() => {
+
+    ipc.send("forward")
+    console.log("FORWARD")
+    
+})
+
+ipc.on("actualize", (ev, data) => {
+    console.log(data)
+    onlineNumber.innerHTML = data.onlineNumber
+
+    if(data.playing == 1) {
+        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'
+
+    } else {
+
+        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-play"></i>'
+    }
+
+    if(data.isOnline == true) {
+
+        exitSpan.innerHTML = ' <button id="exit" class="third-leave"><i class="fa fa-phone-slash"></i></button>'
+        
+        const exit = document.getElementById("exit")
+
+        exit.addEventListener("click", () => {
+
+            ipc.send("exitBot")
+
+        })
+    } else {
+
+        exitSpan.innerHTML = ""
+    }
+
+    
+
+    if(data.queue != null) {
+
+        var contentToPush = new Array()
+
+        for(var title of data.queue) {
+            
+            console.log(data.queue.indexOf(title) + " - " + title.title)
+            contentToPush.push(' <div class="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="listTitle">' + title.title + '</p></div> <button id="' + data.queue.indexOf(title) + '_delete" class="buttonClose"><i class="fa fa-trash"></i></button> </div>')
+        }
+
+        if(contentToPush.join("") == "") {
+
+            listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
+        
+        } else {
+
+            listcontent.innerHTML = contentToPush.join("")
+        }
+
+        for(var title of data.queue) {
+
+            console.log(data.queue.indexOf(title) + " - " + title.title)
+            
+            const titleBtn = document.getElementById(data.queue.indexOf(title)+ "_delete")
+            
+            titleBtn.addEventListener("click", () => {
+
+                ipc.send("deleteQueue", titleBtn.id.replace("_delete", ""))
+            })
+        }
+       
+
+    } else {
+
+        listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
+
+    }
+
+    if(data.current == null) {
+
+        musicURL.innerHTML = '<img class="thumbnail" src="../common/Mediamodifier-Design.svg">'
+        musicTitle.innerHTML = "Aucun titre joué"
+    } else {
+
+        musicURL.innerHTML = '<img class="thumbnail" src="' + data.current.thumbnail + '">'
+        musicTitle.innerHTML = data.current.title
+    }
+})
+
+ipc.on("updateData", (ev, data) => {
+
+    
+    username.innerHTML = data.username
+    logo.innerHTML = "<img class='logo' src='https://cdn.discordapp.com/avatars/" + data.id + "/" + data.avatar + ".png'>"
+
+})
+
+signout.addEventListener("click", () => {
+    ipc.send("signout")
+
+})

templates/common/Mediamodifier-Design.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
+<desc>Created with Fabric.js 5.2.4</desc>
+<defs>
+</defs>
+<g transform="matrix(1 0 0 1 540 540)" id="62b31009-58bd-4583-b2ee-2de1a88a2294"  >
+<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke"  x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
+</g>
+<g transform="matrix(1 0 0 1 540 540)" id="35f6f108-8527-4064-90d7-62893c6938d3"  >
+</g>
+<g transform="matrix(28.93 0 0 28.84 605.98 607.54)" id="cb89d947-dfe9-4413-8d9c-111793543295"  >
+<circle style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  cx="0" cy="0" r="35" />
+</g>
+</svg>

templates/common/common.css

@@ -39,7 +39,7 @@ body {
     transition: all 0.3s ease 0s;
     font-family: 'noto Sans', sans-serif;
     font-weight: 500;
-    font-size: 30px;
+    font-size: 15px;
     color: white;
     text-decoration: none;
     -webkit-app-region: no-drag;
@@ -59,6 +59,35 @@ body {
     color: rgb(255, 255, 255);
 }
 
+.buttonReduce {
+
+    background-color: transparent;
+    border: none;
+    border-radius: 15px;
+    cursor: pointer;
+    transition: all 0.3s ease 0s;
+    font-family: 'noto Sans', sans-serif;
+    font-weight: 500;
+    font-size: 13px;
+    color: white;
+    text-decoration: none;
+    -webkit-app-region: no-drag;
+    margin: 5px;
+    outline: none;
+    
+
+}
+
+.buttonReduce:hover {
+
+    color: rgb(46, 196, 255);
+}
+
+.buttonReduce:active {
+
+    color: rgb(255, 255, 255);
+}
+
 
 header {
 

templates/login/login.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Submanager - Login</title>
-    <link rel="stylesheet" href="../common/app.css">
+    <link rel="stylesheet" href="../common/common.css">
     <link rel="stylesheet" href="login.css">
 </head>
 <body>
@@ -13,32 +13,21 @@
         <div class="top-title">
             <h1><img class="top-logo rounded" src="../../src/logo.png" alt="Logo"> Subsonics</h1>
         </div>
-        <button id="closeBtn" class="buttonClose"><i class="fas fa-times-circle"></i></button>
+        <button id="minimizeBtn" class="buttonReduce"><i class="fas fa-window-minimize"></i></button>
+        <button id="closeBtn" class="buttonClose"><i class="fas fa-times"></i></button>
     </header>
-    <!--
+    <div id="content">
         <div class="content">
             <div class="box">
                 <p>Connexion vers le serveur</p>
-            <span class="loadingSpan"><img class="loading" src="../common/spinner-third-svgrepo-com.svg"></span>
+                <span id="loadingSpan" class="loadingSpan"><img class="loading" src="../common/spinner-third-svgrepo-com.svg"></span>
                 <br>
-            <span class="infoSpan"><p>Submanager - Version : 1.0</p></span>
+                <span class="infoSpan"><p>Submanager - Version : <span id="version"></span></p></span>
                 <br>
-            <span class="actionsSpan"><button class="buttonTryAgain">Réessayer</button></span>
+                <span id="retryButtonSpan" class="actionsSpan"></span>
                 
             </div>
-   
-    </div>-->
-    <div class="content">
-        <div class="box">
-            <p>Connexion vers Discord</p>
-            <span class="loadingSpan"><img class="discord-logo" src="../common/discord-icon-svgrepo-com.svg"></span>
-            <br>
-            <span class="infoSpan"><p>Pour contrôler le bot, vérifie ton compte Discord !</p></span>
-            <br>
-            <span class="actionsSpan"><button class="buttonTryAgain">Vérifier</button></span>
-            
         </div>
-   
     </div>
 
     <script src="../common/bundle.js"></script>

templates/login/login.js

@@ -1,12 +1,67 @@
 const {ipcRenderer} = require("electron");
+const packageJson = require("../../package.json")
 const ipc = ipcRenderer;
 const fs = require("fs")
 
 
 const closeBtn = document.getElementById("closeBtn");
+const content = document.getElementById("content")
+const retryButtonSpan = document.getElementById("retryButtonSpan")
+const loadingSpan = document.getElementById("loadingSpan")
+const minimizeBtn = document.getElementById("minimizeBtn")
+
+document.getElementById("version").innerHTML = packageJson.version
+
+
+ipc.send("retryLogin")
 
 closeBtn.addEventListener("click", () => { 
    
     ipc.send("close");
    
 });
+
+minimizeBtn.addEventListener("click", () => {
+
+    ipc.send("minimize")
+})
+
+
+
+ipc.on("connectSuccess", () => {
+
+    content.innerHTML = '<div class="content"> <div class="box"> <p>Connexion vers Discord</p> <span class="loadingSpan"><img class="discord-logo" src="../common/discord-icon-svgrepo-com.svg"></span> <br> <span class="infoSpan"><p>Pour contrôler le bot, vérifie ton compte Discord !</p></span> <br> <span id="discord-span" class="actionsSpan"><button id="discord-connect" class="buttonTryAgain">Vérifier</button></span> </div> </div>'
+    const discordconnect = document.getElementById("discord-connect")
+    const discorSpan =  document.getElementById("discord-span")
+
+    discordconnect.addEventListener("click", () => {
+
+        discorSpan.innerHTML = '<img style="width: 5%; height: 5%;" class="loading" src="../common/spinner-third-svgrepo-com.svg">'
+        ipc.send("discordlogin")
+    })
+
+    ipc.on("discordFailed", () => {
+
+        discorSpan.innerHTML = '<button id="discord-connect" class="buttonTryAgain">Vérifier</button>'
+
+    })
+    
+})
+
+
+ipc.on("connectFailed", () => {
+
+    retryButtonSpan.innerHTML = '<button id="retryButton" class="buttonTryAgain">Réessayer</button>'
+    loadingSpan.innerHTML = "<p style='font-size: 16px; color: red;'>Echec de la connexion vers le serveur !</p>"
+    const retryButton = document.getElementById("retryButton")
+
+    retryButton.addEventListener("click",() => {
+        loadingSpan.innerHTML = '<img class="loading" src="../common/spinner-third-svgrepo-com.svg">'
+        retryButtonSpan.innerHTML = ""
+        ipc.send("retryLogin")
+       
+    })
+
+   
+})
+