main.js

@@ -12,18 +12,19 @@ const updater = require("./updatetools")
 async function createWindow() {
     const win = new BrowserWindow({
         
-        width: 1920,
+        width: 300,
-        height: 1080,
+        height: 500,
-        minWidth: 1280,
+        minWidth: 300,
-        minHeight: 720,
+        minHeight: 500,
-        resizable: true,
+        resizable: false,
         movable: true,
         closable: true,
-        frame: true,
+        frame: false,
-        autoHideMenuBar: true,
         icon: path.join(__dirname, './src/logo.ico'),
         title: "Submanager",
         webPreferences: {
+            nodeIntegration: true,
+            contextIsolation: false,
             devTools: true
         }
 
@@ -38,16 +39,372 @@ async function createWindow() {
         log.update("Desactivation des mises a jour -> DEV MOD ENABLE")
     }
 
-    await win.loadURL("https://subsonics.raphix.fr")
+    await win.loadFile("templates/login/login.html")
 
+    var socket = null
+
+    if(process.env.DEV == "true") {
+
+        socket = io("ws://localhost:4000", {
+            autoConnect: false,
+            reconnection: false
+    
+        }); 
+
+        log.client("DEVELOPMENT MODE --- QUIT IMMEDIATELY")
+    
+    } else {
+        socket = io("ws://alpha.raphix.fr: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 {
+            const settings = require( __dirname + path.sep + "settings.json")
+            settings["token"] = null;
+            fs.writeFile(__dirname + path.sep + "settings.json", JSON.stringify(settings, null, 2), () => {})
+            win.webContents.send("connectFailed")
+
+        }
+    })
+
+    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.close()
+        socket.connect()
+    })  
+
+    
+    ipc.on("stateOfConnection", () => {
+
+        if(socket.disconnected == true) {
+            socket.connect()
+            
+        } else {
+
+            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")
+                }
+                
+            }
+        }
+
+    })
+
+    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")
+        win.restore()
+        log.client("Discord Auth : Erreur lors de la connexion vers Discord !")
+    })
+
+    socket.on("checkFailed", () => {
+        win.webContents.send("discordCheckFailed")
+        win.restore()
+        log.client("Discord Auth : Erreur lors de la vérification de Discord !")
+    })
+
+    socket.on("authOpenLink", (link) => {
+        log.client("Discord Auth : Redirection vers le service Discord !")
+        shell.openExternal(link)
+        
+    })
+
+    socket.on("successLogin", (token) => {
+
+        if(!fs.existsSync(__dirname + path.sep + "settings.json")) {
+
+            fs.writeFileSync(__dirname + path.sep + "settings.json")
+        }
+
+        const settings = require(__dirname + path.sep + "settings.json")
+        
+        settings["token"] = token
+
+            fs.writeFile(__dirname + path.sep + "settings.json", JSON.stringify(settings, null, 2), (err) => {
+
+                log.client("Saving token in settings !")
+                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 : Termine et recupere")
+        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("loop", () => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Loop Requested !")
+        socket.emit("loop", 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("moveQueue", (ev, identifier) => {
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Move queue Bot Requsted !")
+        socket.emit("moveQueue", 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("restart", () => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Restart Bot Requsted !")
+        socket.emit("restart", settings.token)
+    })
+
+    ipc.on("seek", (ev, pos) => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Seek Bot Requsted !")
+        socket.emit("seek", settings.token, pos)
+    })
+
+    ipc.on("volume", (ev, pos) => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Volume Bot Requsted !")
+        socket.emit("volume", settings.token, pos)
+    })
+
+    ipc.on("signout", () => {
+
+        if(fs.statSync(__dirname + path.sep + "settings.json")) {
+
+            const settings = require( __dirname + path.sep + "settings.json")
+            settings["token"] = null;
+            fs.writeFile(__dirname + path.sep + "settings.json", JSON.stringify(settings, null, 2), () => {})
+
+        }
+
+
+        win.loadFile("template/login/login.html")
+        socket.disconnect()
+    
+    })
+
+    
+
+    ipc.on("report", (ev, report) => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Report : Envoi d'un rapport !")
+        report["version"] = require("./package.json").version
+        socket.emit("report", settings.token, report)
+    })
+
+    socket.on("reportAns", (ans) => {
+
+        win.webContents.send("reportForm", ans)
+    })
+
+    ipc.on("forceUpdate", () => {
+
+        if(process.env.DEV != "true") {
+
+            updater.update()
+        } else {
+
+            log.update("ABORT : MODE DEV ENABLE")
+        }
+     
+    })
+
+    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()
+    })  
+
+    async function askUpdateState() {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        console.log(settings.token)
+        await socket.emit("getState", settings.token)
+    }
+
+    socket.on("disconnect", async () => {
+        await win.loadFile("templates/login/login.html")
+        await win.webContents.send("connectFailed")
+        
+    });
 
 }
 
 
 
+function sts() {
+
+    const settings = require( __dirname + path.sep + "settings.json")
+    return settings
+}
+
 app.on("open-url", (ev, url) => {
     app.quit() 
-})
+ })
 
 app.whenReady().then(() => {
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "subsonics-manager",
-  "version": "2.4.2",
+  "version": "2.3.0",
   "description": "Manager for subsonics",
   "main": "main.js",
   "scripts": {

templates/app/app.css

@@ -0,0 +1,698 @@
+.logo {
+
+    width: 20%;
+    border-radius: 100%;
+    margin-right: 5px;
+}
+
+.box {
+
+    display: flex;
+    padding: 5%;
+    color: white;
+    border-radius: 15px;
+    background-color: #36374c;
+    font-size: 12px;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 5px;
+
+
+}
+
+.titlebox {
+
+    display: flex;
+    color: white;
+    border-radius: 15px;
+    background-color: #36374c;
+    font-size: 12px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+
+.exitNotShow {
+
+    display: none;
+}
+
+.number {
+
+    
+    font-size: 11px;
+    color: black;
+    box-shadow: 1px 1px 5px white;
+    border: none;
+    border-radius: 100%;
+    text-align: center;
+    justify-content: center;
+    vertical-align: middle;
+    width: 14px;
+    height: 14px;
+    background-color: white;
+    margin: 0;
+    position: absolute; /* Position the badge within the relatively positioned button */
+    top: 0;
+    right: -2px;
+
+}
+
+.list {
+    display: inline-block;
+    position: relative;
+}
+
+.controller-box {
+
+    display: flex;
+    flex-direction: column;
+    padding: 5%;
+    color: white;
+    border-radius: 15px;
+    background-color: #36374c;
+    font-size: 12px;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 5px;
+}
+
+.searchTitle {
+    margin: 0;
+    word-break: break-all;
+}
+
+.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;
+
+}
+
+.act {
+
+    display: flex;
+    flex-direction: row;
+}
+
+.settings {
+
+    background-color: transparent;
+    color: white;
+    border: none;
+    transition: all 0.2s ease 0s;
+    height: 30px;
+    width: 30px;
+    margin-right: 5px;
+
+}
+
+.settings:hover {
+    border-radius: 100%;
+    background-color: rgb(46, 196, 255);
+    border-color: transparent;
+    color: black;
+
+}
+
+.settings:active {
+
+    background-color: transparent;
+    color: rgb(46, 196, 255);
+    border: none;
+    transition: all 0.2s ease 0s;
+   
+}
+
+.restart {
+
+    font-family: 'Open Sans', sans-serif !important; 
+    background-color: transparent;
+    border: solid;
+    border-radius: 15px;
+    padding: 2%;
+    border-color: rgb(46, 196, 255);
+    color: white;
+    transition: all 0.2s ease 0s;
+}
+
+.restart:hover {
+
+    color: black;
+    background-color: rgb(46, 196, 255);
+    box-shadow: 2px 2px 5px rgb(46, 196, 255);
+}
+
+.restart:active {
+
+    background-color: transparent;
+    color: white;
+}
+
+.bug {
+
+    font-family: 'Open Sans', sans-serif !important; 
+    background-color: transparent;
+    border: solid;
+    border-radius: 15px;
+    padding: 2%;
+    border-color: rgb(255, 46, 46);
+    color: white;
+    transition: all 0.2s ease 0s;
+}
+
+.bug:hover {
+
+   
+    background-color: rgb(255, 46, 46);
+    box-shadow: 2px 2px 5px rgb(255, 46, 46);
+}
+
+.bug:active {
+
+    background-color: transparent;
+
+}
+
+.stLine {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-align: start;
+    align-items: center;
+    margin-top: 10px;
+}
+
+
+
+.stPct {
+
+   text-align:end;
+   padding-left: 3%;
+ 
+}
+
+
+.stLine p {
+
+    margin: 0;
+    margin-right: 2%;
+}
+
+.online-light {
+
+    border-radius: 15%;
+    background-color: #7a258d;
+    padding: 2%;
+    color: white;
+    display: flex;
+    align-items: center;
+    vertical-align: center;
+    margin-left: 10px;
+    
+
+}
+
+.numtext {
+    display: inline-block;
+    padding-top: 2px !important;
+    padding-left: 1px;
+}
+
+.thumbnail {
+
+    width: 30px;
+    height: 20px;
+    margin-right: 10px;
+}
+
+.showPicture {
+
+    margin-bottom: 10px;
+    width: 140px;
+    height: 110px;
+}
+
+
+.title {
+    text-align: center;
+}
+
+.title p {
+
+    margin-bottom: 10px;
+}
+
+
+.grised {
+
+    filter : invert(50%);
+}
+
+
+.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: 2%;
+    padding-top: 10%;
+    display: flex;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 0;
+
+}
+
+.sbar {
+    width: 100%;
+    padding: 1%;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+   
+}
+
+.durationText {
+
+    margin: 0;
+    margin-left: 5px;
+}
+
+input[type=range] {
+    height: 26px;
+    -webkit-appearance: none;
+    margin: 10px 0;
+    width: 100%;
+    background-color: transparent;
+    -webkit-user-select: none;
+  }
+  input[type=range]:focus {
+    outline: none;
+  }
+  input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    transition: 0.2s;
+    box-shadow: 1px 1px 2px #000000;
+    background: #B8B8B8;
+    border-radius: 50px;
+    border: 0px solid #000000;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    box-shadow: 1px 1px 1px #000000;
+    border: 1px solid #000000;
+    height: 13px;
+    width: 13px;
+    border-radius: 50px;
+    background: #FFFFFF;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -3px;
+  }
+  input[type=range]:focus::-webkit-slider-runnable-track {
+    background: #B8B8B8;
+  }
+
+  input[type=range]:focus::-webkit-sl {
+
+
+  }
+ 
+  .patchInfo {
+
+    padding: 5%;
+    margin: 0;
+  }
+
+.secondary {
+
+    background-color: #7a258d;
+    color: white;
+    border: none;
+    border-radius: 100%;
+    font-size: 20px;
+    padding: 1%;
+    padding-right: 4.5%;
+    padding-left: 4.5%;
+    transition: all 0.2s ease 0s;
+    border: solid;
+    border-width: 5px;
+    border-color: #7a258d ;
+}
+
+.secondary:active {
+    background-color: transparent;
+  
+}
+
+.primary {
+
+    background-color: white ;
+    color: #7a258d;
+    border: none;
+    border-radius: 100%;
+    font-size: 20px;
+    padding: 1%;
+    padding-right: 2%;
+    padding-left: 2%;
+    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;
+
+}
+
+
+.infoVersion {
+
+   
+    color: rgb(255, 255, 255);
+    text-align: center;
+    font-size: 10px;
+
+}
+
+.menu {
+
+    border: none;
+    padding: 5%;
+    color: white;
+    border-radius: 15px;
+    background-color: #464862;
+    font-size: 12px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+}
+
+.favmenu {
+
+    border: none;
+    padding-top: 5%;
+    padding-bottom: 5%;
+    color: white;
+    border-radius: 15px;
+    background-color: #464862;
+    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;
+    width: 100%;
+    padding-left: 5%;
+    padding-right: 5%;
+    padding-top: 2%;
+    padding-bottom: 2%;
+    justify-content: space-between;
+    transition: 0.2s;
+    cursor: pointer;
+    -webkit-user-select: none;
+
+}
+
+.ressong {
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    margin-bottom: 5px;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: space-between;
+
+}
+
+
+
+#listDialog {
+    padding: 0 !important;
+    padding-bottom: 5% !important;
+}
+
+#listDialog .menuheader {
+    
+    padding: 5%;
+}
+
+#listContent {
+
+    padding-top: 5%;
+    padding-bottom: 5%;
+}
+
+
+.song:hover {
+
+    background-color: #7a258d ;
+   
+}
+
+
+
+.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;
+}
+
+.cp {
+
+    margin: 0;
+}
+
+.devversion {
+
+   height: 10px;
+   width: 100%;
+   background-color: rgb(99, 3, 3);
+   color: white;
+   font-size: 10px;
+   text-align: center;
+   position: absolute;
+   bottom: 0;
+   transition: 0.5s;
+  
+}
+
+.devversion:hover {
+    position: absolute;
+    content: initial;
+    height: 40px;
+}
+
+.devversion .dp {
+  
+    display: none;
+   
+}
+
+.devversion:hover .dp {
+    display: initial;
+    position: absolute;
+    text-align: center;
+    bottom: -9px;
+    right: 25%;
+}
+
+
+
+.sendChos {
+
+    width: 100%;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    border-color: #1c1c1c;
+    border-radius: 15px;
+    border-width: 2px;
+    background-color: transparent;
+    color: white;
+    padding: 2%;
+}
+
+.sendChos option {
+
+    background-color:rgb(61, 61, 61);
+
+}
+
+.sendText {
+
+    margin-top: 5px;
+    width: 100%;
+    height: 100px;
+    padding: 5%;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+.send {
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

templates/app/app.html

@@ -0,0 +1,183 @@
+<!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">
+            <img class="top-logo rounded" src="../../src/logo.png" alt="Logo">
+            <img class="top-title-image rounded" src="../../src/title.png" alt="Logo">
+        </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="controller-box">
+            <span id="music_img"><img class="showPicture" src="../common/Mediamodifier-Design.svg"></span>
+            <span id="music_title" class="title"><p>Aucun titre joué</p></span>
+            <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>
+                <button id="loop" class="third"><i class="fa fa-retweet"></i></button>
+                <button id="fav" class="third"><i class="fa fa-star"></i></button>
+                <span id="exitSpan" class="exit"></span> 
+                <button id="list" class="list third"><i class="fa fa-list-ol"><p class="number" id="listNumber"></p></i></button>
+            </div>
+            <div class="sbar">
+                <input id="duration" type="range" value="0" max="100">
+                <p id="durationText" class="durationText">0:00/0:00</p>
+            </div>
+        </div>
+        <div class="box">
+            <div>
+                <span id="logo"><img class="logo" src="../../src/logo.png"></span>
+                <span id="username"></span>
+            </div>
+            <div class="act">
+                <button id="patchnote" class="settings"><i class="fas fa-sticky-note"></i></button>
+                <button id="settings" class="settings"><i class="fas fa-gear"></i></button>
+                <button id="signout" class="signout"><i class="fas fa-sign-out"></i></button>
+            </div>
+            
+        </div>
+    </div>
+    <dialog id="favDialog" class="favmenu">
+        <div class="menuheader">
+            <p class="listHeader"><i style="margin-right: 3px" class="fa fa-star"></i> Favoris</p>
+            <div>
+                <button class="buttonClose" id="favClear"><i class="fas fa-trash"></i></button>
+                <button class="buttonClose" id="favClose"><i class="fas fa-times"></i></button>
+            </div>
+           
+            
+        </div>
+        <div id="favContent">
+        </div>
+    </dialog>
+    <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 class="searchContent" id="searchContent">
+           
+        </div>
+    </dialog>
+    <dialog id="stDialog" class="menu">
+        <div class="menuheader">
+            <p class="listHeader"><i style="margin-right: 3px" class="fa fa-gear"></i> Paramètres</p>
+            <button class="buttonClose" id="stClose"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="stLine">
+            <p>Volume</p>
+            <input type="range" id="volCursor">
+            <p class="stPct" id="volPct">0%</p>
+        </div>
+        <div class="stLine">
+            <p>Redémarrer le bot :</p>
+            <button id="restart" class="bug"><i class="fas fa-power-off"></i> Redémarrer</button>
+        </div>
+        <div class="stLine">
+            <p>Bug / Suggestion :</p>
+            <button id="bug" class="restart"><i class="fas fa-paper-plane"></i> Envoyer</button>
+        </div>
+        <div class="stLine">
+            <p>Forcer la mise à jour :</p>
+            <button id="upd" class="restart"><i class="fas fa-download"></i> Mettre à jour</button>
+        </div>
+        <div class="stLine">
+            <p>Canal de mise à jour :</p>
+            <div style="display: flex; flex-direction: row;">
+                <div style="display: flex; flex-direction: row;">
+                    <input type="radio"  id="cStable">
+                    <p style="margin-right: 20px;">Stable</p>
+                </div>
+                <div style="display: flex; flex-direction: row; ">
+                    <input type="radio" id="cDev">
+                    <p>Dev</p>
+                </div>
+            </div>
+        </div>
+        <div style="display: flex; justify-content: space-between;  margin-top: 50px;">
+            <div class="infoVersion">
+             
+                <p class="cp">Version <span id="version"></span></p>
+                <p style="margin: 0;">Réalisé par Raphix</p>
+            </div>
+            <div class="online-light">
+                <i style="margin-right: 2px;" class="fas fa-user-friends"></i>  
+                <span id="online">0</span>
+            </div>
+        </div>
+      
+    </dialog>
+    <dialog id="updDialog" class="menu">
+        <div class="menuheader">
+            <p class="listHeader"><i style="margin-right: 3px" class="fas fa-download"></i> Forcer la mise à jour</p>
+            <button class="buttonClose" id="updClose"><i class="fas fa-times"></i></button>
+        </div>
+       <div class="updContent">
+            <p style="color: yellow;"><i class="fas fa-warning"></i> Attention, forcer une mise à jour peut aider à réinstaller l'application. Avant de faire cela, demander à Raphix.</p>
+            <span id="updSpan"></span>
+  
+       </div>
+    </dialog>
+    <dialog id="patchDialog" class="menu">
+        <div class="menuheader">
+            <p class="listHeader"><i style="margin-right: 3px" class="fas fa-sticky-note"></i> Patch Note</p>
+            <button class="buttonClose" id="patchClose"><i class="fas fa-times"></i></button>
+        </div>
+        <span class="patchInfo" id="patchInfo">
+
+        </span>
+    </dialog>
+    <dialog id="sendDialog" class="menu">
+        <div class="menuheader">
+            <p class="listHeader"><i style="margin-right: 3px" class="fas fa-paper-plane"></i> Bug / Suggestion</p>
+            <button class="buttonClose" id="sendClose"><i class="fas fa-times"></i></button>
+        </div>
+        <span class="send" id="sendContent">
+            <select class="sendChos" id="sendChos">
+                <option>Bug</option>
+                <option>Suggestion</option>
+            </select>
+            <textarea class="sendText" id="sendText" placeholder="Descrpition"></textarea>
+            <span id="sendInfo" class="sendInfo"></span>
+            <button id="sendSend" class="restart"><i class="fas fa-paper-plane"></i> Envoyez</button>
+        </span>
+    </dialog>
+   
+    <span class="devversion" id="devversion"></span>
+    
+
+    <script src="../common/bundle.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>

templates/app/app.js

@@ -0,0 +1,770 @@
+const {ipcRenderer} = require("electron");
+const ipc = ipcRenderer;
+const fs = require("fs")
+const packageJson = require(__dirname.replace("templates" + require("path").sep + "app", "") + "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 listNumber = document.getElementById("listNumber")
+
+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")
+
+const durationBar = document.getElementById("duration")
+const durationText = document.getElementById("durationText")
+
+
+const stDialog = document.getElementById("stDialog")
+const settings = document.getElementById("settings")
+const stClose = document.getElementById("stClose")
+
+const patchDialog = document.getElementById("patchDialog")
+const patchnote = document.getElementById("patchnote")
+const patchClose = document.getElementById("patchClose")
+const patchInfo = document.getElementById("patchInfo")
+
+const sendDialog = document.getElementById("sendDialog")
+const send = document.getElementById("bug")
+const sendClose = document.getElementById("sendClose")
+const sendContent = document.getElementById("sendContent")
+const sendInfo = document.getElementById("sendInfo")
+const sendSend = document.getElementById("sendSend")
+const sendText = document.getElementById("sendText")
+const sendChos = document.getElementById("sendChos")
+
+
+const volCursor = document.getElementById("volCursor")
+const volPct =  document.getElementById("volPct")
+const restart = document.getElementById("restart")
+
+const updDialog = document.getElementById("updDialog")
+const upd = document.getElementById("upd")
+const updClose = document.getElementById("updClose")
+const updSpan = document.getElementById("updSpan")
+
+
+const favDialog = document.getElementById("favDialog")
+const fav = document.getElementById("fav")
+const favClose = document.getElementById("favClose")
+const favClear = document.getElementById("favClear")
+const favContent = document.getElementById("favContent")
+
+const cStable = document.getElementById("cStable")
+const cDev = document.getElementById("cDev")
+
+
+
+cDev.addEventListener("change", () => {
+
+    const settings = getSettings()
+    settings["canaldev"] = true
+    saveSettings(settings)
+    cStable.checked = false
+    cDev.checked = true
+
+
+   
+})
+
+cStable.addEventListener("change", () => {
+
+    const settings = getSettings()
+    settings["canaldev"] = false
+    saveSettings(settings)
+    cDev.checked = false
+    cStable.checked = true
+    
+    
+})
+
+
+fav.addEventListener("click", () => {
+
+    favDialog.showModal()
+
+    showFavoris()
+
+})
+
+favClear.addEventListener("click", () => {
+
+    const settings = getSettings()
+    settings.favoris = []
+    
+    saveSettings(settings)
+    showFavoris()
+})
+
+function showFavoris() {
+
+    const settings = getSettings()
+
+    var contentToPush = new Array()
+
+    for(var title of settings.favoris) {
+
+        contentToPush.push('<div class="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="listTitle">' + title.title + '</p></div> <button style="margin : 0;" id="' +  settings.favoris.indexOf(title) + '_fadd" class="buttonReduce"><i class="fa fa-plus"></i></button> <button id="' + settings.favoris.indexOf(title) + '_fdelete" class="buttonClose"><i class="fa fa-trash"></i></button> </div></div>')
+    }
+
+    if(contentToPush.join("") == "") {
+       
+
+        favContent.innerHTML = '<p class="error">Aucun morceau dans les favoris !</p>'
+    
+    } else {
+
+        favContent.innerHTML = contentToPush.join("")
+    }
+
+    for(var title of settings.favoris) {
+  
+        const titleBtn = document.getElementById(settings.favoris.indexOf(title) + "_fdelete")
+        const addBtn = document.getElementById(settings.favoris.indexOf(title) + "_fadd")
+
+        addBtn.addEventListener("click", () => {
+
+            ipc.send("addQueue", settings.favoris[addBtn.id.replace("_fadd", "")].uri)
+            favDialog.close()
+            
+        })
+        
+        titleBtn.addEventListener("click", () => {
+
+            settings.favoris.splice(titleBtn.id.replace("_fdelete", ""), 1)
+            saveSettings(settings)
+            showFavoris()
+        })
+
+    }
+}
+
+favClose.addEventListener("click", () => {
+
+    favDialog.close()
+})
+
+
+upd.addEventListener("click", () => {
+
+    updDialog.showModal()
+    updSpan.innerHTML = ""
+    setTimeout(() => {
+        updSpan.innerHTML = '<button style="margin-left: 25%;" id="updYes" class="bug"><i class="fas fa-warning"></i> Mettre à jour</button>'
+        const updYes = document.getElementById("updYes")
+        updYes.addEventListener("click", () => {
+            ipc.send("forceUpdate")
+
+        })
+    }, 2000)
+
+})
+
+updClose.addEventListener("click", () => {
+
+    updDialog.close()
+})
+
+restart.addEventListener("click", () => {
+
+    stDialog.close()
+    ipc.send("restart")
+
+})
+
+if(packageJson.dev == true) {
+
+    document.getElementById("devversion").innerHTML = "<p class='dp'>Cette version est expérimentale.<br> En cas de bug, <a style='cursor: pointer;text-decoration: underline;' id='bugD'>cliquez ici </a> </p>"
+    const sendB = document.getElementById("bugD")
+    
+    sendB.addEventListener("click", () => {
+
+       
+        sendInfo.innerHTML = ""
+        sendText.value = ""
+        sendChos.value = "Bug"
+        sendDialog.showModal()
+
+
+    })
+
+} else {
+	 document.getElementById("devversion").innerHTML = ""
+	 document.getElementById("devversion").classList.remove("devversion")
+}
+
+var durationAll = 0
+var durationProgress = 0
+var isPlaying = false
+
+
+patchnote.addEventListener("click", () => {
+
+    patchDialog.showModal()
+    const data = fs.readFileSync(__dirname + require("path").sep + "../../infoupdate.html")
+    patchInfo.innerHTML = data
+
+})
+
+patchClose.addEventListener("click", () => {
+
+    patchDialog.close()
+})
+
+settings.addEventListener("click", () => {
+
+    stDialog.showModal()
+    const Csettings = getSettings()
+
+    if(Csettings.canaldev == true) {
+
+        cStable.checked = false
+        cDev.checked = true
+
+    } else {
+
+        cDev.checked = false
+        cStable.checked = true
+
+    }
+
+})
+
+stClose.addEventListener("click", () => {
+
+    stDialog.close()
+})
+
+send.addEventListener("click", () => {
+
+    sendInfo.innerHTML = ""
+    sendText.value = ""
+    sendChos.value = "Bug"
+    sendDialog.showModal()
+
+})
+
+sendClose.addEventListener("click", () => {
+
+    sendDialog.close()
+})
+
+sendSend.addEventListener("click", () => {
+
+    sendInfo.innerHTML = ""
+
+    if(sendText.value == "") {
+
+        sendInfo.innerHTML = '<p style="text-align: center; color: red;">Le formulaire n\'a pas été rempli correctement !</p>'
+    } else {
+
+        const report = {
+            "type":sendChos.value,
+            "text": sendText.value
+            
+        }
+
+        ipc.send("report", report)
+
+    }
+
+})
+
+ipc.on("reportForm", (ev, ans) => {
+    if(ans == true) {
+        sendInfo.innerHTML = '<p style="text-align: center;">Le formulaire a été envoyé !</p>'
+
+    } else {
+
+        sendInfo.innerHTML = '<p style="text-align: center; color: red;">Erreur lors de l\'envoi du formulaire !</p>'
+    }
+
+})
+
+durationBar.value = 0
+listNumber.classList.add("exitNotShow")
+
+
+
+function setTime() {
+
+
+        durationBar.max = durationAll
+        durationProgress += 1000 
+        durationBar.value = durationProgress
+
+        
+        const maxhours = Math.floor(durationAll / 3600000);
+        const nowhours = Math.floor(durationProgress / 3600000);
+
+        
+
+        var maxmin = Math.trunc(durationAll / 60000) - (Math.floor(durationAll / 60000 / 60) * 60);
+        var maxsec = Math.floor(durationAll / 1000) - (Math.floor(durationAll / 1000 / 60) * 60);
+        var nowmin = Math.trunc(durationProgress / 60000) - (Math.floor(durationProgress / 60000 / 60) * 60);
+        var nowsec = Math.floor(durationProgress / 1000) - (Math.floor(durationProgress / 1000 / 60) * 60);
+
+        console.log(durationAll)
+        console.log(durationProgress)
+        console.log("---------------------")
+
+        var now = ""
+        var max = ""
+
+
+        if (maxmin < 10) {
+            maxmin = `0${maxmin}`;
+        }
+
+        if (nowmin < 10) {
+            nowmin = `0${nowmin}`;
+        }
+
+        if (maxsec < 10) {
+            maxsec = `0${maxsec}`;
+        }
+
+        if (nowsec < 10) {
+            nowsec = `0${nowsec}`;
+        }
+
+        if(maxhours != 0) {
+           
+            max =  maxhours + ":" + maxmin + ":" + maxsec
+        } else {
+            max =  maxmin + ":" + maxsec
+           
+        }
+
+        if(nowhours != 0) {
+           
+            now =  nowhours + ":" + nowmin + ":" + nowsec
+        } else {
+            now =  nowmin + ":" + nowsec
+           
+        }
+
+        
+
+        durationText.innerHTML = now + "/" + max
+}
+
+
+setInterval(() => {
+
+    if(isPlaying == true) {
+        setTime()
+
+    } 
+
+}, 1000)
+
+
+durationBar.addEventListener("change", () => {
+
+    ipc.send("seek", durationBar.value)
+
+})
+
+volCursor.addEventListener("change", () => {
+
+    ipc.send("volume", volCursor.value)
+
+})
+
+const loop = document.getElementById("loop")
+
+
+
+loop.addEventListener("click", () => {
+
+    ipc.send("loop")
+})
+
+
+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="ressong"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="searchTitle">' + title.title + '</p></div><button id="' + data.indexOf(title) + '_sfav" class="buttonFav"><i class="fa fa-star"></i></button> <button id="' + data.indexOf(title) + '_sadd" 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)+ "_sadd")
+             
+            const favBtn = document.getElementById(data.indexOf(title)+ "_sfav")
+            
+            titleBtn.addEventListener("click", () => {
+                searchcontent.innerHTML = ""
+                searchBar.value = ""
+                ipc.send("addQueue", data[titleBtn.id.replace("_sadd", "")].uri)
+            })
+
+            favBtn.addEventListener("click", () => {
+
+                const settings = getSettings()
+
+                if(settings.favoris == null) {
+
+                    settings["favoris"] = []
+                   
+                  
+                }
+
+                var check = false
+
+                for(var song of settings.favoris) {
+
+       
+                    if(song.uri == data[favBtn.id.replace("_sfav", "")].uri) {
+
+                        check = true
+                    }
+                }
+
+                if(check == false) {
+
+                    settings.favoris.push(data[favBtn.id.replace("_sfav", "")])
+                } else {
+
+                    console.log("ALREADY ADDED")
+                }
+
+                saveSettings(settings)
+
+                searchDialog.close()
+
+
+            })
+        }
+       
+
+    } else {
+
+        searchcontent.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'
+
+    }
+
+})
+
+const path = require("path");
+const { off } = require("process");
+const { copySync } = require("fs-extra");
+
+function getSettings() {
+
+    return require("../../settings.json")
+
+}
+
+function saveSettings(doc) {
+    
+    fs.writeFileSync(__dirname.replace("templates" + path.sep + "app", "settings.json"), JSON.stringify(doc, null, 2))
+
+}
+
+list.addEventListener("click", () => {
+
+    listDialog.showModal()
+
+})
+
+listClose.addEventListener("click", () => {
+
+    listDialog.close()
+})
+
+
+search.addEventListener("click", () => {
+
+    searchDialog.showModal()
+    searchcontent.innerHTML = ""
+    searchBar.value = ""
+
+})
+
+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) => {
+
+    isPlaying = false
+
+    console.log(data)
+    onlineNumber.innerHTML = data.onlineNumber
+
+    if(data.loop == true) {
+        loop.innerHTML = '<i class="third-join fa fa-retweet"></i>'
+
+    } else {
+
+        loop.innerHTML = '<i class="fa fa-retweet"></i>'
+    }
+
+   
+    if(data.volume) {
+        volCursor.step = 1
+        volCursor.max = 200
+        volCursor.value = Math.trunc(data.volume / 10)
+        volPct.innerHTML = Math.trunc(data.volume / 10) + "%"
+
+    } else {
+
+        volCursor.disabled = true
+        volCursor.classList.add("grised")
+        volCursor.value = 0
+        volPct.innerHTML = "0%"
+    }
+
+    if(data.isOnline == true) {
+
+        exitSpan.classList.remove("exitNotShow")
+        loop.classList.remove("exitNotShow")
+        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")
+
+        })
+
+        volCursor.disabled = false
+        volCursor.classList.remove("grised")
+
+       
+        durationBar.disabled = false
+        durationBar.classList.remove("grised")
+    } else {
+        exitSpan.classList.add("exitNotShow")
+        loop.classList.add("exitNotShow")
+        exitSpan.innerHTML = ""
+        durationBar.disabled = true
+        durationBar.classList.add("grised")
+        durationBar.value = 0
+
+        volCursor.disabled = true
+        volCursor.classList.add("grised")
+        volCursor.value = 0
+    }
+
+    
+
+    if(data.queue != null) {
+
+        var contentToPush = new Array()
+        var queueNum = 0
+
+        for(var title of data.queue) {
+            queueNum += 1
+            console.log(queueNum)
+            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) + '_lmove" class="buttonReduce"><i class="fa fa-arrow-up"></i></button> <button id="' + data.queue.indexOf(title) + '_ldelete" class="buttonClose"><i class="fa fa-trash"></i></button> </div></div>')
+        }
+
+        if(contentToPush.join("") == "") {
+           
+            listNumber.classList.add("exitNotShow")
+            listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
+        
+        } else {
+            listNumber.innerHTML = '<span class="numtext">' + queueNum + '</span>'
+            listNumber.classList.remove("exitNotShow")
+            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)+ "_ldelete")
+            const moveBtn = document.getElementById(data.queue.indexOf(title)+ "_lmove")
+            
+            titleBtn.addEventListener("click", () => {
+
+                ipc.send("deleteQueue", titleBtn.id.replace("_ldelete", ""))
+            })
+
+            moveBtn.addEventListener("click", () => {
+
+                ipc.send("moveQueue", moveBtn.id.replace("_lmove", ""))
+
+            })
+        }
+       
+
+    } else {
+
+        listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
+        listNumber.classList.add("exitNotShow")
+    }
+
+    if(data.current == null) {
+
+        musicURL.innerHTML = '<img class="showPicture" src="../common/Mediamodifier-Design.svg">'
+        musicTitle.innerHTML = "<p>Aucun titre joué</p>"
+    } else {
+        setTime()
+        musicURL.innerHTML = '<img class="showPicture" src="' + data.current.thumbnail + '">'
+        musicTitle.innerHTML = "<p>" + data.current.title + "</p>"
+    }
+
+
+    durationProgress = 0
+    durationAll = 0
+    durationBar.value = 0
+    durationText.innerHTML = "=:==/=:=="
+
+    
+   
+
+    if(data.durationAll) {
+        isPlaying = true
+        durationBar.disabled = false
+        durationBar.classList.remove("grised")
+        setTime()
+       
+        durationAll = data.durationAll
+        durationProgress = data.durationNow
+        durationBar.value = durationProgress
+
+    } else {
+
+       
+        isPlaying = false
+        durationAll = 0
+        durationProgress = 0
+        durationBar.disabled = true
+        durationBar.classList.add("grised")
+        durationBar.value = 0
+        durationText.innerHTML = "=:==/=:=="
+
+    }
+
+    
+    if(data.playing == 1) {
+        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'
+        isPlaying = true
+        setTime()
+    } else {
+
+        
+        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-play"></i>'
+        isPlaying = false
+       
+    }
+
+    if(data.current && data.playing == 0) {
+        setTime()
+
+    }
+
+    
+   
+
+})
+
+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

@@ -0,0 +1,144 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+
+
+body {
+
+    background-color: #302144 !important;
+    font-family: 'Open Sans', sans-serif !important; 
+    
+}
+
+.top-title {
+
+    display: flex;
+    font-size: medium;
+    vertical-align: center;
+    justify-content: center;
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+    width: 100%;
+    padding: 5% !important;
+    padding-bottom: 0% !important;
+    color: white;
+    margin-bottom: 5px;
+}
+
+
+.top-logo {
+
+    width: 15%;
+    margin-left: 20px;
+
+}
+
+
+
+.buttonClose {
+
+    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: 15px;
+    color: white;
+    text-decoration: none;
+    -webkit-app-region: no-drag;
+    margin: 5px;
+    outline: none;
+    
+
+}
+
+.top-title-image {
+
+    width: 80%;
+    margin-top: 6px;
+    margin-right: 20px;
+    margin-left: 4px;
+
+}
+
+.buttonClose:hover {
+
+    color: red;
+}
+
+.buttonClose:active {
+
+    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 {
+
+    display: flex;
+}
+
+.content {
+
+    padding: 5%;
+    padding-top: 0;
+
+}
+
+.buttonFav {
+
+    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: 0;
+    outline: none;
+    
+
+}
+
+.buttonFav:hover {
+
+    color: rgb(242, 255, 53);
+}
+
+.buttonFav:active {
+
+    color: rgb(255, 255, 255);
+}
+

templates/common/discord-icon-svgrepo-com.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#5865F2" fill-rule="nonzero">
+
</path>
+    </g>
+</svg>

templates/common/spinner-third-svgrepo-com.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path fill="#ffffff" d="M12.9 3.1c1.3 1.2 2.1 3 2.1 4.9 0 3.9-3.1 7-7 7s-7-3.1-7-7c0-1.9 0.8-3.7 2.1-4.9l-0.8-0.8c-1.4 1.5-2.3 3.5-2.3 5.7 0 4.4 3.6 8 8 8s8-3.6 8-8c0-2.2-0.9-4.2-2.3-5.7l-0.8 0.8z"></path>
+</svg>

updatetools.js

@@ -26,9 +26,13 @@ module.exports.checkUpdate = () => {
 
     log.update("Verification des mises a jour ... Processing !")
 
+    if(settings.canaldev == true) {
         fetch("https://git.raphix.fr/subsonics/manager/raw/branch/main/package.json").catch(err => catchError(err)).then(resp => resp.json()).then(resp => checkUpdateProcessing(resp))
 
+    } else {
 
+        fetch("https://git.raphix.fr/subsonics/manager/raw/branch/stable/package.json").catch(err => catchError(err)).then(resp => resp.json()).then(resp => checkUpdateProcessing(resp))
+    }
 
     
 }
@@ -57,8 +61,12 @@ function selfUpdate() {
     var settings = getSettings()
 
     const win = BWin.getFocusedWindow()
-    var link = "https://git.raphix.fr/subsonics/manager/archive/main.tar.gz"
+    var link = "https://git.raphix.fr/subsonics/manager/archive/stable.tar.gz"
 
+    if(settings.canaldev == true) {
+
+        link = "https://git.raphix.fr/subsonics/manager/archive/main.tar.gz"
+    }
 
     win.loadFile("templates/update/update.html")