Add repeat track in dashboard

web/ipc/methods.py

@@ -20,6 +20,7 @@ async def initPlayer(player, member: Member, data: dict):
             "name": member.name
         } for member in player.channel.members ],
         "tracks": [ track.toDict() for track in player.queue._queue ],
+        "repeat_mode": player.queue.repeat.lower(),
         "current_queue_position": player.queue._position if player.is_playing else player.queue._position + 1,
         "current_position": 0 or player.position if player.is_playing else 0,
         "is_playing": player.is_playing,
@@ -147,13 +148,12 @@ async def process_methods(websocket, bot: commands.Bot, data: dict) -> None:
     if not method:
         return
 
-    guild = None
-    member = None
+    guild, member = None, None
     guild_id = data.get("guild_id", None)
     user_id = data.get("user_id", None)
     if guild_id is None:
         user = bot.get_user(user_id)
-        if not user:
+        if not user: 
             return
         
         for g in user.mutual_guilds:

web/static/js/action.js

@@ -91,6 +91,10 @@ $(document).ready(function () {
         player.seekTo($(this).val());
     })
 
+    $("#repeat-button").on('click', function () {
+        player.repeatMode();
+    })
+
     $("#shuffle-button").on('click', function () {
         player.shuffle();
     })

web/static/js/objects.js

@@ -36,6 +36,7 @@ const actions = {
         player.isDJ = data['is_dj'];
         player.is_paused = data['is_paused'];
         player.current_position = data['current_position'];
+        player.repeat = data['repeat_mode'];
         data["users"].forEach(user => {
             player.addUser(user);
         })
@@ -151,7 +152,7 @@ const actions = {
         player.showToast(data["requester_id"], `Moved ${element.title} to ${newPosition}`)
     },
 
-    shuffleTrack: function(player, data) {
+    shuffleTrack: function (player, data) {
         var tracks = data["tracks"];
         if (tracks != undefined) {
             player.queue = [];
@@ -163,6 +164,11 @@ const actions = {
             player.initSortable();
             player.showToast(data["requester_id"], "The queue is shuffled.")
         }
+    },
+
+    repeatTrack: function (player, data) {
+        player.repeat = data["repeatMode"];
+    },
     }
 
 }
@@ -188,7 +194,8 @@ class Player {
         this.date = new Date();
         this.queue = [];
         this.users = {};
-        this.searchList = []
+        this.searchList = [];
+        this.repeat = "off";
         this.currentTrack = null;
         this.current_queue_position = 0;
         this.current_position = 0;
@@ -239,7 +246,7 @@ class Player {
     }
 
     addUser(user) {
-        this.users[user['user_id']] = { "avatar_url": user["avatar_url"], "name": user["name"] };
+        this.users[user['user_id']] = { avatar_url: user["avatar_url"], name: user["name"] };
     }
 
     addTrack(tracks) {
@@ -282,6 +289,10 @@ class Player {
         }
     }
 
+    repeatMode() {
+        this.send({ "op": "repeatTrack" })
+    }
+
     send(payload) {
         var json = JSON.stringify(payload)
         this.socket.send(json);
@@ -356,7 +367,8 @@ class Player {
             $("#image").attr("src", currentTrack.imageUrl);
             $("#largeImage").attr("src", currentTrack.imageUrl);
         }
-        var play_pause_btn = $("#play-pause-button")
+        var play_pause_btn = $("#play-pause-button");
+        var repeat_btn = $("#repeat-button");
         if (this.is_paused || currentTrack == undefined) {
             play_pause_btn.removeClass('fa-pause').addClass('fa-play');
             if (this.timer.getIsRunning()) {
@@ -366,5 +378,15 @@ class Player {
             play_pause_btn.removeClass('fa-play').addClass('fa-pause');
             this.timer.start();
         }
+
+        repeat_btn.removeClass("fa-repeat-1").addClass("fa-repeat")
+        if (this.repeat == "off") {
+            console.log("running");
+            repeat_btn.css('color', '');
+        } else if (this.repeat == "track") {
+            repeat_btn.css('color', '#fff');
+        } else {
+            repeat_btn.removeClass("fa-repeat").addClass("fa-repeat-1");
+        }
     }
 }

web/templates/index.html

@@ -34,7 +34,8 @@
                 <div class="search-contrainer">
                     <div class="search-bar">
                         <i class="fa-solid fa-magnifying-glass"></i>
-                        <input id="search-input" class="search-input" placeholder="Search your input and add it to the queue."/>
+                        <input id="search-input" class="search-input"
+                            placeholder="Search your input and add it to the queue." />
                         <div id="search-loader" class="search-loader"></div>
                     </div>
                     <ul id="search-result-list" class="search-result-list">
@@ -94,6 +95,7 @@
                 </div>
 
                 <div class="right">
+                    <i id="repeat-button" class="fa-solid fa-repeat"></i>
                     <i id="shuffle-button" class="fa-solid fa-shuffle"></i>
                 </div>
             </div>