Duration, flush on Web and some log change

Devel to Master

src/main/java/net/Broken/RestApi/MusicWebController.java

@@ -106,6 +106,15 @@ public class MusicWebController {
                 case "ADD":
                     return new WebLoadUtils(musicCommande ,data).getResponse();
 
+                case "FLUSH":
+                    try {
+                        musicCommande.getAudioManager().getMusicManager().scheduler.flush();
+                        return new ResponseEntity<>(new CommandResponseData(data.command, "Accepted"), HttpStatus.OK);
+                    } catch (NullMusicManager | NotConectedException nullMusicManager) {
+                        return new ResponseEntity<>(new CommandResponseData(data.command, "Not connected to vocal!"), HttpStatus.NOT_ACCEPTABLE);
+                    }
+
+
             }
         }
         else

src/main/resources/log4j2.xml

@@ -2,15 +2,14 @@
 <Configuration status="error" packages="com.coralogix.sdk.appenders">
     <Appenders>
         <Console name="Console" target="SYSTEM_OUT">
-            <PatternLayout pattern="[%d{HH:mm:ss.SSS}]%highlight{[%-5level]}{FATAL=red blink, ERROR=red, WARN=bright yellow , INFO=blue, DEBUG=bright black, TRACE=cyan}[%-30.30c{1.}]: %highlight{%msg%n}{FATAL=red blink, ERROR=red, WARN=bright yellow , INFO=blue, DEBUG=bright black, TRACE=cyan}" />
+            <PatternLayout pattern="[%d{HH:mm:ss.SSS}][%-5level][%-30.30c{1.}]: %msg%n" />
         </Console>
         <RollingFile name="RollingFile" fileName="./logs/curent.log"
                      filePattern="./logs/$${date:yyyy-MM}/discordBot-%d{yyyy-MM-dd-HH}-%i.log.gz">
             <PatternLayout>
-                <Pattern>[%d{yyy-MM-dd ~ HH:mm:ss.SSS}][%-5level]%-30.30c{1.}: %msg%n</Pattern>
+                <Pattern>[%d{HH:mm:ss.SSS}]%highlight{[%-5level]}{FATAL=red blink, ERROR=red, WARN=bright yellow , INFO=blue, DEBUG=bright black, TRACE=cyan}[%-30.30c{1.}]: %highlight{%msg%n}{FATAL=red blink, ERROR=red, WARN=bright yellow , INFO=blue, DEBUG=bright black, TRACE=cyan}</Pattern>
             </PatternLayout>
             <Policies>
-                <OnStartupTriggeringPolicy minSize="1B"/>
                 <TimeBasedTriggeringPolicy/>
                 <SizeBasedTriggeringPolicy size="250 MB"/>
             </Policies>

src/main/resources/static/js/init.js

@@ -65,6 +65,13 @@ $(document).ready(function() {
        }
     });
 
+    $('#flush_btn').click(function () {
+        var command = {
+            command: "FLUSH"
+        };
+        sendCommand(JSON.stringify(command));
+    });
+
     $('#btn_add_top').click(function () {
         var command = {
             command: "ADD",
@@ -74,7 +81,7 @@ $(document).ready(function() {
         };
         $('#input_link').val('');
         sendCommand(JSON.stringify(command));
-    })
+    });
     $('#btn_add_bottom').click(function () {
 
         var command = {
@@ -85,7 +92,7 @@ $(document).ready(function() {
         };
         $('#input_link').val('');
         sendCommand(JSON.stringify(command));
-    })
+    });
 
 })
 
@@ -120,8 +127,13 @@ function getCurentMusic() {
                 if ($('#add_btn').hasClass("disabled")) {
                     $('#add_btn').removeClass("disabled");
                 }
+                if ($('#flush_btn').hasClass("disabled")) {
+                    $('#flush_btn').removeClass("disabled");
+                }
 
                 $('#music_img').attr("src","/img/no_music.jpg");
+                $('#total_time').text("00:00");
+                $('#current_time').text("00:00");
 
                 break;
 
@@ -168,6 +180,9 @@ function getCurentMusic() {
                 if (!$('#add_btn').hasClass("disabled")) {
                     $('#add_btn').addClass("disabled");
                 }
+                if (!$('#flush_btn').hasClass("disabled")) {
+                    $('#flush_btn').addClass("disabled");
+                }
 
 
                 $('#music_img').attr("src","/img/disconnected.png");
@@ -252,12 +267,18 @@ function updateControl(data){
     if ($('#add_btn').hasClass("disabled")) {
         $('#add_btn').removeClass("disabled");
     }
+    if ($('#flush_btn').hasClass("disabled")) {
+        $('#flush_btn').removeClass("disabled");
+    }
 
     if ($('#btn_next').hasClass("disabled")) {
         $('#btn_next').removeClass("disabled");
     }
 
     $('#music_img').attr("src","https://img.youtube.com/vi/"+data.info.identifier+"/hqdefault.jpg");
+    console.log(data);
+    $('#total_time').text(msToTime(data.info.length));
+    $('#current_time').text(msToTime(data.currentPos));
     updateModal(data);
 }
 

src/main/resources/templates/music.html

@@ -45,11 +45,15 @@
                 <img class="responsive-img z-depth-3" id="music_img" style="max-width: 30%" src=""/>
             </div>
             <h4 class="center" id="music_text"></h4>
-            <div class="row center">
+            <div class="row center" style="margin-bottom: 0px">
                 <div class="progress col s6 offset-s3 z-depth-3">
                     <div class="determinate" id="music_progress" style="width: 0%"></div>
                 </div>
             </div>
+            <div class="row center">
+                <div class="col s2 offset-s3 left-align" style="padding: 0px" id="current_time">0:00</div>
+                <div class="col s2 offset-s2 right-align " style="padding: 0px" id="total_time">0:00</div>
+            </div>
             <div class="row center">
                 <div class="col s2 offset-s3 center">
                     <a class="btn-large blue-grey darken-4 z-depth-3 waves-effect waves-light" id="btn_stop">
@@ -82,8 +86,11 @@
                 <tr>
                     <th style="padding: 0px;">
                         <div class="row center valign-wrapper" style="margin: 0px">
-                            <div class="col s5 center"><h5>Playlist</h5></div>
+                            <div class="col s4 center"><h5>Playlist</h5></div>
-                            <div class="col s5 offset-s2 center">
+                            <div class="col s4 center">
+                                <a class="waves-effect waves-light btn modal-trigger blue-grey darken-4" id="flush_btn">Flush</a>
+                            </div>
+                            <div class="col s4 center">
                                 <!-- Modal Trigger -->
                                 <a class="waves-effect waves-light btn modal-trigger blue-grey darken-4" id="add_btn" href="#modalAdd">Add</a>