Implemented a basic music bot pannel

index.php

@@ -178,9 +178,11 @@
         </div>
         <div id="contextMenu" class="contextMenu"></div>
 
+        <!--
         <div style="background-color:white;">
             <div style=" color: white; mix-blend-mode: difference;">And stay alive... XXXXXXX</div>
         </div>
+        -->
 
         <div id="templates"></div>
         <div id="music-test"></div>

js/main.ts

@@ -72,72 +72,6 @@ function main() {
         }
     }
 
-    let frame = $("#tmpl_music_frame").renderTag({
-        song_name: "Hello world song and i don't really know what i should write! XXXXXXXXXXXXX"
-    }).css("align-self", "center");
-
-    /* Play/Pause logic */
-    console.log(frame.find(".button_play"));
-    frame.find(".button_play").click(handler => {
-        frame.find(".button_play").addClass("active");
-        frame.find(".button_pause").removeClass("active");
-    });
-    frame.find(".button_pause").click(handler => {
-        frame.find(".button_pause").addClass("active");
-        frame.find(".button_play").removeClass("active");
-    });
-
-    /* Required flip card javascript */
-    frame.find(".right").mouseenter(() => {
-        frame.find(".controls-overlay").addClass("flipped");
-    });
-    frame.find(".right").mouseleave(() => {
-        frame.find(".controls-overlay").removeClass("flipped");
-    });
-
-    /* Slider */
-    frame.find(".timeline .slider").on('mousedown', ev => {
-        let timeline = frame.find(".timeline");
-        let time = frame.find(".time");
-        let slider = timeline.find(".slider");
-        let slider_old = slider.attr("index");
-        if(!slider_old || slider_old.length == 0) slider_old = "0";
-
-        slider.prop("editing", true);
-
-        let move_handler = (event: MouseEvent) => {
-            let max = timeline.width();
-            let current = event.pageX - timeline.offset().left - slider.width() / 2;
-            if(current < 0) current = 0;
-            else if(current > max) current = max;
-
-            time.text(Math.ceil(current / max * 100)); //FIXME!
-            slider.attr("index", current / max * 100);
-            slider.css("margin-left", current / max * 100 + "%");
-        };
-        $(document).on('mousemove', move_handler as any);
-        $(document).one('mouseup mouseleave mousedown', event => {
-            console.log("Event (%i | %s): %o", event.button, event.type, event);
-            if(event.type == "mousedown" && event.button != 2) return;
-
-            $(document).unbind("mousemove", move_handler as any);
-            if(event.type != "mousedown") {
-                slider.prop("editing", false);
-                console.log("Done!");
-            } else { //Restore old
-                event.preventDefault();
-                time.text(slider_old); //FIXME!
-                slider.attr("index", slider_old);
-                slider.css("margin-left", slider_old + "%");
-            }
-        });
-
-        ev.preventDefault();
-        return false;
-    });
-
-    $("#music-test").replaceWith(frame);
-
     /*
     let tag = $("#tmpl_music_frame").renderTag({
         //thumbnail: "img/loading_image.svg"

js/ui/frames/SelectedItemInfo.ts

@@ -351,9 +351,34 @@ class MusicInfoManager extends ClientInfoManager {
                         if(bot.properties.player_state == 2)
                             button_play.addClass("active");
                         else if(bot.properties.player_state == 3)
-                            button_play.addClass("active");
+                            button_pause.addClass("active");
                     }
 
+                    { /* Button functions */
+                        _frame.find(".btn-forward").click(() => {
+                            this.handle.handle.serverConnection.sendCommand("musicbotplayeraction", {
+                                botid: bot.properties.client_database_id,
+                                action: 3
+                            }).then(updated => this.triggerUpdate()).catch(error => {
+                                createErrorModal("Failed to execute forward", "Failed to execute pause.<br>{}".format(error)).open();
+                                this.triggerUpdate();
+                            });
+                        });
+                        _frame.find(".btn-rewind").click(() => {
+                            this.handle.handle.serverConnection.sendCommand("musicbotplayeraction", {
+                                botid: bot.properties.client_database_id,
+                                action: 4
+                            }).then(updated => this.triggerUpdate()).catch(error => {
+                                createErrorModal("Failed to execute rewind", "Failed to execute pause.<br>{}".format(error)).open();
+                                this.triggerUpdate();
+                            });
+                        });
+                        _frame.find(".btn-settings").click(() => {
+                            createErrorModal("Not implemented", "This function is not implemented yet!").open();
+                        });
+                    }
+
+
                     /* Required flip card javascript */
                     frame.find(".right").mouseenter(() => {
                         frame.find(".controls-overlay").addClass("flipped");
@@ -397,7 +422,7 @@ class MusicInfoManager extends ClientInfoManager {
                                 let current_timestamp = info.player_replay_index + Date.now() - timestamp;
                                 this.handle.handle.serverConnection.sendCommand("musicbotplayeraction", {
                                     botid: bot.properties.client_database_id,
-                                    action: current_timestamp > target_timestamp ? 5 : 4,
+                                    action: current_timestamp > target_timestamp ? 6 : 5,
                                     units: current_timestamp < target_timestamp ? target_timestamp - current_timestamp : current_timestamp - target_timestamp
                                 }).then(() => this.triggerUpdate()).catch(error => {
                                     slider.prop("edited", false);
@@ -423,7 +448,7 @@ class MusicInfoManager extends ClientInfoManager {
 
                         let player_time = _frame.find(".player_time");
                         let update_handler = () => {
-                            let time_index = info.player_replay_index + Date.now() - timestamp;
+                            let time_index = info.player_replay_index + (bot.properties.player_state == 2 ? Date.now() - timestamp : 0);
 
                             time_bar.css("width", time_index / info.player_max_index * 100 + "%");
                             if(!slider.prop("editing") && !slider.prop("edited")) {
@@ -431,7 +456,6 @@ class MusicInfoManager extends ClientInfoManager {
                                 slider.css("margin-left", time_index / info.player_max_index * 100 + "%");
                             }
                        };
-
                         this.registerInterval(setInterval(update_handler, 1000));
                         update_handler();
                     }

js/voice/VoiceHandler.ts

@@ -178,7 +178,6 @@ class VoiceConnection {
 
 
     createSession() {
-        return;
         this._ice_use_cache = true;
 
         let config: RTCConfiguration = {};