Version 0.9.0 - Ajout du Home Menu V2

README.md

@@ -20,25 +20,6 @@
 
 ## Changelog
 
-### Subsonics - Web - 0.8.0
-- **Adds :** *Alerts, Playlist Share, Edit playlist picture | Tooltip*
-#### Details
-
-**Alerts (Done)**
-> - Popup Prefab
-> - Declencher lors de l'action
-
-**Playlist Share (Done)**
-
-> - Envoyer des playlist avec la liste des utilisateurs
-
-**Tooltip (Done)**
-
-> - Tooltip sur les bouttons
-
-<hr>
-
-
 ### Subsonics - Web - 0.9.0
 - **Adds :** *Home Menu V2 | User Experience Improvements*
 #### Details
@@ -53,6 +34,7 @@
 
 > - Fix of Tooltip which is sometimes bugged
 > - Canva of Queue List
+> - Support Live
 
 <hr>
 

data/playlist.json

@@ -154,7 +154,65 @@
         "isStream": false,
         "uri": "https://www.youtube.com/watch?v=3Ea7_6Qu2xo",
         "thumbnail": "https://img.youtube.com/vi/3Ea7_6Qu2xo/default.jpg"
+      },
+      {
+        "track": "QAAAlgIAM2xvZmkgaGlwIGhvcCByYWRpbyDtoL3ts5ogLSBiZWF0cyB0byByZWxheC9zdHVkeSB0bwAJTG9maSBHaXJsf/////////8AC2pmS2ZQZnlKUmRrAQEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9amZLZlBmeUpSZGsAB3lvdXR1YmUAAAAAAAAAAA==",
+        "title": "lofi hip hop radio 📚 - beats to relax/study to",
+        "identifier": "jfKfPfyJRdk",
+        "author": "Lofi Girl",
+        "duration": 9223372036854776000,
+        "isSeekable": false,
+        "isStream": true,
+        "uri": "https://www.youtube.com/watch?v=jfKfPfyJRdk",
+        "thumbnail": "https://img.youtube.com/vi/jfKfPfyJRdk/default.jpg"
+      }
+    ],
+    "Liste de lecture Immu": [
+      {
+        "track": "QAAAhAIAIFRoYW5jcmVkIFdhdGVyczogVGhlIE1hbiAtIEZGWElWAApGbHVmZlN0dWZmAAAAAAAENiAAC3dGV1pMLTFJWG5jAAEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9d0ZXWkwtMUlYbmMAB3lvdXR1YmUAAAAAAAAAAA==",
+        "title": "Thancred Waters: The Man - FFXIV",
+        "identifier": "wFWZL-1IXnc",
+        "author": "FluffStuff",
+        "duration": 276000,
+        "isSeekable": true,
+        "isStream": false,
+        "uri": "https://www.youtube.com/watch?v=wFWZL-1IXnc",
+        "thumbnail": "https://img.youtube.com/vi/wFWZL-1IXnc/default.jpg"
+      },
+      {
+        "track": "QAAAvwIAYkZveGVzIHBlcmZvcm1zICdEb24ndCBTdG9wIE1lIE5vdycgb24gYm9hcmQgdGhlIE9yaWVudCBFeHByZXNzIC0gRG9jdG9yIFdobzogU2VyaWVzIDggKDIwMTQpIC0gQkJDAANCQkMAAAAAAAMVEAALaC1PVFlUMDJXN0UAAQAraHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1oLU9UWVQwMlc3RQAHeW91dHViZQAAAAAAAAAA",
+        "title": "Foxes performs 'Don't Stop Me Now' on board the Orient Express - Doctor Who: Series 8 (2014) - BBC",
+        "identifier": "h-OTYT02W7E",
+        "author": "BBC",
+        "duration": 202000,
+        "isSeekable": true,
+        "isStream": false,
+        "uri": "https://www.youtube.com/watch?v=h-OTYT02W7E",
+        "thumbnail": "https://img.youtube.com/vi/h-OTYT02W7E/default.jpg"
+      },
+      {
+        "track": "QAAAjAIAKkRvY3RvciBXaG8gKDEtMTEpIHZpZDogR29uZSBpbiB0aGUgTW9ybmluZwAIc2hheWVyYTkAAAAAAAIqsAALazNWclpETVhIbUUAAQAraHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1rM1ZyWkRNWEhtRQAHeW91dHViZQAAAAAAAAAA",
+        "title": "Doctor Who (1-11) vid: Gone in the Morning",
+        "identifier": "k3VrZDMXHmE",
+        "author": "shayera9",
+        "duration": 142000,
+        "isSeekable": true,
+        "isStream": false,
+        "uri": "https://www.youtube.com/watch?v=k3VrZDMXHmE",
+        "thumbnail": "https://img.youtube.com/vi/k3VrZDMXHmE/default.jpg"
+      },
+      {
+        "track": "QAAAhwIAJjMgRG9vcnMgRG93biAtIEtyeXB0b25pdGUgKFNtYWxsVmlsbGUpAAdXRUlMSU5OAAAAAAADikAAC0VPTzRWTjFHM0dZAAEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9RU9PNFZOMUczR1kAB3lvdXR1YmUAAAAAAAAAAA==",
+        "title": "3 Doors Down - Kryptonite (SmallVille)",
+        "identifier": "EOO4VN1G3GY",
+        "author": "WEILINN",
+        "duration": 232000,
+        "isSeekable": true,
+        "isStream": false,
+        "uri": "https://www.youtube.com/watch?v=EOO4VN1G3GY",
+        "thumbnail": "https://img.youtube.com/vi/EOO4VN1G3GY/default.jpg"
       }
     ]
-  }
+  },
+  "249494159629484033": {}
 }

data/radios.json

@@ -0,0 +1,13 @@
+[
+  {
+    "track": "QAAAlgIAM2xvZmkgaGlwIGhvcCByYWRpbyDtoL3ts5ogLSBiZWF0cyB0byByZWxheC9zdHVkeSB0bwAJTG9maSBHaXJsf/////////8AC2pmS2ZQZnlKUmRrAQEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9amZLZlBmeUpSZGsAB3lvdXR1YmUAAAAAAAAAAA==",
+    "title": "lofi hip hop radio 📚 - beats to relax/study to",
+    "identifier": "jfKfPfyJRdk",
+    "author": "Lofi Girl",
+    "duration": 9223372036854776000,
+    "isSeekable": false,
+    "isStream": true,
+    "uri": "https://www.youtube.com/watch?v=jfKfPfyJRdk",
+    "thumbnail": "https://img.youtube.com/vi/jfKfPfyJRdk/default.jpg"
+  }
+]

src/modules/global-variables.js

@@ -18,6 +18,7 @@ const __glob = {
     NODES:  root + path.sep + "data" + path.sep + "nodes.json",
     README: root + path.sep + "README.md",
     PLAYLIST:  root + path.sep + "data" + path.sep + "playlist.json",
+    RADIO:  root + path.sep + "data" + path.sep + "radios.json",
     LOGS: root + path.sep + "src" + path.sep + "modules" + path.sep + "logs"
 };
 

src/modules/sub-auth.js

@@ -168,6 +168,13 @@ module.exports.getUsersList = function () {
 
 }
 
+module.exports.getSimpleUser = function (token) {
+
+    var user = users.get(token)
+
+    return ({"username": user.user.username, "global_name":user.user.global_name, "avatar": user.user.avatar, "id": user.user.id})
+}
+
 
 module.exports.getUser = function (token) {
     return users.get(token)

src/modules/sub-radio.js

@@ -0,0 +1,64 @@
+const { __glob } = require("../modules/global-variables");
+const { LogType } = require("./sub-log");
+var { List } = require("./sub-list")
+const discord = require("./discord-bot")
+const subplayer = require("./sub-player")
+const fs = require("fs");
+const { type } = require("os");
+var radios = []
+const plog = new LogType("Radio-Manager")
+
+check()
+
+
+module.exports.get = function () {
+
+    check()
+    return radios
+
+}
+
+module.exports.add = function (data) {
+    
+    var radios_data = JSON.parse(fs.readFileSync(__glob.RADIO))
+            
+    radios_data.push(data)
+    fs.writeFileSync(__glob.RADIO, JSON.stringify(radios_data, null, 2))
+    
+    return radios
+
+}
+
+module.exports.remove = function(data) {
+
+            var radios_data = JSON.parse(fs.readFileSync(__glob.RADIO))
+
+            var radIndex = -1
+
+            for(var radio of radios_data) {
+
+                if(data.uri == radio.uri) {
+
+                    radIndex = radios_data.indexOf(radio)
+
+                }
+
+            }
+            
+
+            radios_data.splice(radIndex, 1)
+            
+            fs.writeFileSync(__glob.RADIO, JSON.stringify(radios_data, null, 2))
+}
+
+
+function check() {
+
+    if(fs.existsSync(__glob.RADIO)) {
+
+        radios = JSON.parse(fs.readFileSync(__glob.RADIO))
+    } else {
+
+        fs.writeFileSync(__glob.RADIO, JSON.stringify(radios, null, 2))
+    }
+}

src/modules/sub-web.js

@@ -6,6 +6,7 @@ const auth = require("./sub-auth");
 const cook = require("cookie")
 const wlog = new LogType("Web")
 const subplayer = require('./sub-player');
+const subradio = require("./sub-radio.js")
 const { List } = require("./sub-list")
 const subplaylist = require("./sub-playlist")
 const nodesfinder = require("./nodes-finder")
@@ -141,6 +142,9 @@ function IOConnection(io) {
 
     const alog = log.getInstance("Authentification")
 
+    const usersOnline = new Array()
+    
+
     process.on("UPDATE_NODES", () => {
 
         if(io) {
@@ -152,6 +156,16 @@ function IOConnection(io) {
     
    
     
+    })
+
+    process.on("UPDATE_RADIO", () => {
+
+        if(io) {
+
+            const radioList = subradio.get()
+            io.sockets.emit("ALWAYS/ALL_RADIO", radioList)
+        }    
+
     })
 
     process.on("MUSIC_UPDATE_STATE", () => {
@@ -164,14 +178,37 @@ function IOConnection(io) {
 
     io.on("connection", (socket) => {
         
+            var ucookies = socket.handshake.headers.cookie
+            ucookies = cook.parse(ucookies)
+
+            if(ucookies.token) {
+
+                var utoken = ucookies.token
+                const online_users_data = auth.getSimpleUser(utoken)
+                usersOnline.push(online_users_data)
+            }
+
+            io.sockets.emit("ALWAYS/ALL_CONNECTED_USER", usersOnline)
+
         wlog.log("[SOCKET] - Nouvelle session : " + socket.id)
 
+        
+
         socket.on("disconnect", () => {
            
             wlog.log("[SOCKET] - Fin de session : " + socket.id)
+            if(ucookies.token) {
+
+                var utoken = ucookies.token
+                const online_users_data = auth.getSimpleUser(utoken)
+                usersOnline.splice(usersOnline.indexOf(online_users_data), 1)
+            }
+
+            io.sockets.emit("ALWAYS/ALL_CONNECTED_USER", usersOnline)
             
         })
 
+
         // SPECIAL
 
         socket.on("GET/DISCORD_LOGIN_LINK", () => {
@@ -394,6 +431,20 @@ function IOConnection(io) {
 
         })
 
+        GetRequest(io, socket, "ALL_CONNECTED_USER", () => {
+
+            
+            io.sockets.emit("ALWAYS/ALL_CONNECTED_USER", usersOnline)
+
+        })
+
+        GetRequest(io, socket, "ALL_RADIO", () => {
+
+            const radioList = subradio.get()
+            io.sockets.emit("ALWAYS/ALL_RADIO", radioList)
+
+        })
+
 
 
 
@@ -421,7 +472,61 @@ function IOConnection(io) {
                 }
 
             } else {
-                io.emit("ANSWER/SEND/USERS/ADD", {"error":"TOKEN_NOT_FINDED"})
+                io.emit("ANSWER/SEND/NODES/ADD", {"error":"TOKEN_NOT_FINDED"})
+
+            }
+         
+           
+
+        })
+
+        socket.on("SEND/RADIO/ADD", async (data) => {
+
+
+            var cookies = socket.handshake.headers.cookie
+
+            if(cookies) {
+
+                cookies = cook.parse(cookies)
+                var token = cookies.token
+
+                const user = auth.getUser(token)
+    
+
+                if(user.admin == true) {
+                    
+                    const music_data = await (await subplayer.search(data)).results.tracks[0]
+
+                    var radioContains = null
+                    
+                    for(var title of subradio.get()) {
+
+                        if(title.uri == music_data.uri) {
+
+                            radioContains = true
+                        }
+                    }
+                    
+
+                    if(!radioContains) {
+
+                        subradio.add(music_data)
+                        console.log("[Radio] - ADD : " + data)
+
+                    } else {
+
+                        subradio.remove(music_data)
+                        console.log("[Radio] - REMOVE : " + data)
+
+                    }
+
+                    
+                    socket.emit("ANSWER/SEND/RADIO/ADD", "OK")
+                    process.emit("UPDATE_RADIO")
+                }
+
+            } else {
+                io.emit("ANSWER/SEND/RADIO/ADD", {"error":"TOKEN_NOT_FINDED"})
 
             }
          

src/web/public/javascript/__index_script.js

@@ -59,8 +59,16 @@ var playlistValue = null
 var deleteJustBefore = null
 var currentSong = null
 
+var isAdmin = false
 var playlistAvailable = null
 
+
+
+
+
+
+
+
 restartBtn.addEventListener("click", () => {
 
     get("RESTART")
@@ -95,6 +103,7 @@ document.onmousemove = function(e)
   showToolTip("admin", "Donner les permissions Administrateur", e)
   showToolTip("takeCurrent", "Ajouter le titre à une playlist", e)
   showToolTip("volbtn", "Volume", e)
+  showToolTip("radio_add", "Ajouter par l'URL", e)
 };
 
 function showToolTip(id, text, e) {
@@ -118,11 +127,138 @@ function showToolTip(id, text, e) {
 
 homeBtn.addEventListener("click", () => {
 
+    loadHome()
+
+})
+
+
+
+
+function loadHome() {
+
     mainView.innerHTML = WelcomeContent
     wasOnPlaylist = false
    
+
+    get("ALL_CONNECTED_USER")
+
+
+    get("ALL_RADIO")
+
+   
+    
+}
+
+socket.on("ALWAYS/ALL_CONNECTED_USER", (resp) => {
+
+    const website_list = document.getElementById("website_list")
+    const userToPush = new Array()
+
+    userToPush.push("<p style='font-family: Gunship, sans-serif;'><i class='fa fa-users'></i> Personnes en ligne</p>")
+
+    for(var user of resp ) {
+
+        userToPush.push(`<div id='${resp.indexOf(user)}' style='padding-bottom: 1%; padding-top: 1%;' class="set_user_info"><img style='margin-right: 3%;' src="https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}"><div style="display: flex; flex-direction: column; justify-content: center;"><p class="INDEX_gbname">${user.global_name}</p><p class="INDEX_usrname">${user.username}</p></div></div>`)
+
+    }
+
+    website_list.innerHTML = userToPush.join("")
 })
 
+socket.on("ALWAYS/ALL_RADIO", (resp) => {
+
+    const radio_list = document.getElementById("radio_list")
+    const radioToPush = new Array()
+
+    radioToPush.push("<p style='font-family: Gunship, sans-serif;'><i class='fa fa-radio'></i> Radio</p>")
+    radioToPush.push(`
+    <dialog class="report_dialog" id="radio_dialog">
+            <div class="rlineclose">
+                <p class="rtitle"><i class="fa fa-radio"></i> Ajout d'une radio</p>
+                <button id="radio_close" class="report_close"><i class="fa-solid fa-xmark"></i></button>
+            </div>
+            <p id='radio_info' style='text-align: center; color: red;'></p>
+
+            <div class="rcontent">
+                <p class="runder">URL</p>
+                <input type='text' id="radio_host">
+                <button id="radio_send" class="rsend"><i class="fa-solid fa-plus"></i> Ajouter</button>
+            </div>
+    </dialog>
+`)
+
+   
+
+    for(var title of resp ) {
+
+        var thumbnail = title.thumbnail
+        if(!thumbnail) {
+   
+           thumbnail = "/images/black-image.svg"
+                           
+         }
+
+        radioToPush.push(`<div class="search_song"> <img style='width: 60px;height: 45px; margin-right: 10px;' src="${thumbnail}"><div class="search_titleSong"> <p class="search_title">${title.title}</p></div> <p>${title.author}</p><button id='${resp.indexOf(title)}_radio_pplay' class='primary'><i class='fa fa-play'></i></button></div>`)
+
+    }
+
+    if(isAdmin) {
+
+        radioToPush.push(`
+        <div id="radio_add" class="playlist_div"><i style='margin-right: 10px;' class='fa fa-plus'></i> Ajouter une radio</div>`)
+    }
+
+    radio_list.innerHTML = radioToPush.join("")
+
+
+    const radio_dialog = document.getElementById("radio_dialog")
+    const radio_close = document.getElementById("radio_close")
+    const radio_send = document.getElementById("radio_send")
+    const radio_add = document.getElementById("radio_add")
+    const radio_info = document.getElementById("radio_info")
+    const radio_host = document.getElementById("radio_host")
+
+    radio_add.addEventListener("click", () => {
+        radio_info.innerHTML = ""
+        radio_host.value = ""
+        radio_dialog.showModal()
+    })
+
+    radio_close.addEventListener("click", () => {
+        radio_info.innerHTML = ""
+        radio_dialog.close()
+    })
+
+    radio_send.addEventListener("click", () => {
+        if(radio_host.value != '') {
+
+            send("RADIO/ADD", radio_host.value)
+            radio_dialog.close()
+        } else {
+           
+            radio_info.innerHTML = "Remplissez une URL !"
+        }
+   
+    })
+
+
+    for(var title of resp ) {
+
+        var playBtn = document.getElementById(resp.indexOf(title) +'_radio_pplay')
+     
+        playBtn.addEventListener("click", () => {
+            send("ADD_SONG_NOW", resp[playBtn.id.replace("_radio_pplay", "")])
+
+        })
+    }
+
+
+
+    
+})
+
+loadHome()
+
 function delPlayList(key) {
 
     send("DELETE_PLAYLIST", key)
@@ -329,12 +465,20 @@ function loadPlaylist(key, value) {
             if(!thumbnail) {
 
                 thumbnail = "/images/black-image.svg"
+                        
+            }
+
+            if(title.duration == 9223372036854776000) {
+
+                PFormatduration = "<i style='color: red;' class='fa-solid fa-circle'></i> LIVE"
             }
 
         playlist_songs.push('<div class="search_song"> <img class="search_thumbnail" src="' + thumbnail + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author + '</p><p>' + PFormatduration + '</p> <div class="search_buttons"><button id="' + value.indexOf(title) +  '_padd" class="search_add"><i class="fa fa-plus"></i></button><button id="' + value.indexOf(title) +  '_pplay" class="search_lmore"><i class="fa fa-play"></i></button><button id="' + value.indexOf(title) +  '_pdelete" style="font-size: 20px;" class="list_delete"><i class="fa fa-trash"></i></button></div></div>')
 
     }
 
+
+
     playlistToPush.push(`<div class="INDEX_userPopup invisible" id="playlist_popup"></div>`)
     playlistToPush.push('<div class="apPres"><div class="apTitle"><img class="apTile" src="/images/playlist-tile.svg"><p class="apName">' + key + '</p></div><div class="apButtons"><button onclick="playPlayList(\''+ key +'\')" id="'+ key +'_playlistplay" class="primary"><i class="fas fa-play"></i><button onclick="sendPlayList(\''+ key +'\')" id="sendplaylist" class="list_upSong"><i class="fas fa-paper-plane"></i></button></button><button onclick="delPlayList(\''+ key +'\')" id="playlistdelete" class="list_delete"><i class="fas fa-trash"></i></button></div></div><hr>' + playlist_songs.join(""))
     
@@ -440,7 +584,14 @@ searchBtn.addEventListener("click", () => {
                         thumbnail = "/images/black-image.svg"
                     }
 
+                    
                     PFormatduration = pmax
+
+                    if(title.duration == 9223372036854776000) {
+
+                        PFormatduration = "<i style='color: red;' class='fa-solid fa-circle'></i> LIVE"
+                    }
+
                     contentToPush.push(' <div class="search_song"> <img class="search_thumbnail" src="' + thumbnail + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author + '</p><p>' + PFormatduration + '</p> <div class="search_buttons"><button id="' + data.indexOf(title) +  '_ladd" class="search_add"><i class="fa fa-plus"></i></button> <div class="searchMoreDiv"><button id="' + data.indexOf(title) + '_lmore" class="search_lmore"><i class="fa-solid fa-ellipsis"></i></button></div><div class="searchPopup" id="' + data.indexOf(title) + '_popup"><div id="' + data.indexOf(title) + '_playNow" class="INDEX_line"><i class="fa-solid fa-play"></i> Lire maintenant</div><div id="' + data.indexOf(title) +'_goPlaylist" class="INDEX_line"><i class="fa-regular fa-square-plus"></i> Ajouter à une playlist</div><div id="' + data.indexOf(title) +'_copy" class="INDEX_line"><i class="fa-regular fa-copy"></i> Copier le lien</div></div></div><dialog id="' +  data.indexOf(title) + 'playlistManager" class="report_dialog"><div class="rlineclose"><p class="rtitle"><i class="fa fa-square-plus"></i> Ajouter à une playlist</p><button id="' +  data.indexOf(title) + 'playlistManager_close" class="report_close"><i class="fa-solid fa-xmark"></i></button></div><div class="apContent"><img id="' +  data.indexOf(title) + 'playlist_add_img" class="ppTile" src="/images/playlist-tile.svg"><p style="padding: 1%;" id="' +  data.indexOf(title) + 'playlist_add_music"></p><p>Selectionner la playlist</p><select style=" color: white; background-color: transparent; border: solid 2px #2c3df4;padding: 1%; border-radius: 12px;" id="' +  data.indexOf(title) + 'playlistSelection"></select><button id="' +  data.indexOf(title) + 'playlistAddSong" class="rsend"><i class="fa fa-plus"></i> Ajouter</button></div></dialog></div>')
                 }
         
@@ -582,6 +733,12 @@ searchBtn.addEventListener("click", () => {
             
                         PFormatduration = pmax
 
+                        if(title.milis_length == 9223372036854776000) {
+
+                            PFormatduration = "<i style='color: red;' class='fa-solid fa-circle'></i> LIVE"
+                        }
+            
+            
                     playlist_songs.push('<div class="search_song"> <img class="search_thumbnail" src="' + title.thumbnail_url + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author.name + '</p><p>' + PFormatduration + '</p> <div class="search_buttons"><button id="' + results.videos.indexOf(title) +  '_padd" class="search_add"><i class="fa fa-plus"></i></button><button id="' + results.videos.indexOf(title) +  '_pplay" class="search_lmore"><i class="fa fa-play"></i></button></div></div>')
             
                 }
@@ -833,6 +990,7 @@ userInfo.then(user => {
     if(user.admin == true) {
 
         settingsBtn.style.display = "flex"
+        isAdmin = true
     }
 
     userInfoDiv.innerHTML = "<div class='INDEX_userInfo_name'><p class='INDEX_gbname'>" + user.user.global_name + "</p><p class='INDEX_usrname'>" + user.user.username + "</p></div><div class='INDEX_picture'><img src='https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar + "'>" + betastar + "</div>"
@@ -1018,6 +1176,23 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
 
     }
 
+    if(data.durationAll == 9223372036854776000) {
+
+        isPlaying = false
+        durationAll = 0
+        durationProgress = 0
+        durationBar.disabled = true
+        durationBar.classList.add("grised")
+        durationBar.style.display = "none"
+        durationBar.value = 0
+        durationTextAct.innerHTML = ""
+        durationTextTotal.innerHTML = "<i style='color: red;' class='fa-solid fa-circle'></i> LIVE"
+
+    } else {
+
+        durationBar.style.display = "unset"
+    }
+
 
 
     if(data.queue != null) {
@@ -1158,3 +1333,4 @@ function setTime() {
 }
 
 
+

src/web/public/stylesheets/style.css

@@ -1182,3 +1182,38 @@ p {
   text-align: center;
   opacity: 0.8;
 }
+
+.home_view {
+
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.home_other {
+
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+  margin-left: 0.5%;
+  padding: 1%;
+}
+
+.home_changelog {
+
+  width: 70%;
+  overflow-y: auto;
+  padding: 1%;
+}
+
+.home_radio {
+
+
+  height: 50%;
+}
+
+.home_online {
+
+  height: 50%;
+}
+

src/web/templates/index.ejs

@@ -62,11 +62,19 @@
                 </dialog>
             </div> 
             <div style="color: white" id="mainView" class="INDEX_search">
-                <div style="color: white">
+                <div class="home_view">
-                    
+                    <div class="home_changelog">
                         <%- welcome %>
+                    </div>
+                    <div class="home_other">
+                        <div id="website_list" class="home_online">
                      
                         </div>
+                        <div id="radio_list" class="home_radio">
+                            <p style='font-family: Gunship, sans-serif;'>Radio</p>
+                        </div>
+                    </div>
+                </div>
             </div>
 
         </div>