Finish read only page

src/main/java/net/Broken/RestApi/Data/PlaylistData.java

@@ -0,0 +1,18 @@
+package net.Broken.RestApi.Data;
+
+import com.sedmelluq.discord.lavaplayer.track.AudioTrackInfo;
+
+import java.util.List;
+
+public class PlaylistData {
+
+    private List<AudioTrackInfo> list;
+
+    public PlaylistData(List<AudioTrackInfo> list) {
+        this.list = list;
+    }
+
+    public List<AudioTrackInfo> getList() {
+        return list;
+    }
+}

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

@@ -2,14 +2,19 @@ package net.Broken.RestApi;
 
 import com.sedmelluq.discord.lavaplayer.player.AudioPlayer;
 import com.sedmelluq.discord.lavaplayer.track.AudioTrack;
+import com.sedmelluq.discord.lavaplayer.track.AudioTrackInfo;
 import net.Broken.Commandes.Music;
 import net.Broken.MainBot;
 import net.Broken.RestApi.Data.CurrentMusicData;
+import net.Broken.RestApi.Data.PlaylistData;
 import net.Broken.audio.NotConectedException;
 import net.Broken.audio.NullMusicManager;
+import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.util.List;
+
 @RestController
 @RequestMapping("/api/music/")
 public class MusicWebController {
@@ -28,4 +33,16 @@ public class MusicWebController {
             return new CurrentMusicData(null,0, "STOP",false);
         }
     }
+
+    @RequestMapping("/getPlaylist")
+    public PlaylistData getPlaylist(){
+        Music musicCommande = (Music) MainBot.commandes.get("music");
+        List<AudioTrackInfo> list = null;
+        try {
+            list = musicCommande.getAudioManager().getMusicManager().scheduler.getList();
+            return new PlaylistData(list);
+        } catch (NullMusicManager | NotConectedException nullMusicManager) {
+            return new PlaylistData(list);
+        }
+    }
 }

src/main/resources/log4j2.xml

@@ -25,37 +25,3 @@
     </Loggers>
 </Configuration>
 
-<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}]%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}" />
-<<<<<<< Updated upstream
-=======
-            <!--<PatternLayout pattern="[%d{HH:mm:ss.SSS}][%-5level][%-30.30c{1.}]: %msg%n" />-->
->>>>>>> Stashed changes
-        </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>
-            </PatternLayout>
-            <Policies>
-                <OnStartupTriggeringPolicy minSize="1B"/>
-                <TimeBasedTriggeringPolicy/>
-                <SizeBasedTriggeringPolicy size="250 MB"/>
-            </Policies>
-        </RollingFile>
-    </Appenders>
-    <Loggers>
-        <Root level="info">
-            <AppenderRef ref="RollingFile" level="info" />
-            <AppenderRef ref="Console" level="info"/>
-            <AppenderRef ref="RollingFile" level="info"/>
-<<<<<<< Updated upstream
-            <AppenderRef ref="RollingFile" level="info"/>
-=======
->>>>>>> Stashed changes
-        </Root>
-    </Loggers>
-</Configuration>

src/main/resources/static/css/style.css

@@ -1,22 +1,10 @@
-.main, footer {
-    padding-right: 300px;
-}
-
-.side-nav{
-    top: 10.2%;
-}
-
 .nav-wrapper{
     margin-right: 1%;
     margin-left: 1%;
     width: 100%;
 }
 
-@media only screen and (max-width : 992px) {
-    .main, footer {
-        padding-right: 0;
-    }
-    .side-nav{
-        top: 0%;
-    }
+
+.collapsible-body{
+    padding: 0px;
 }

src/main/resources/static/img/.directory

@@ -0,0 +1,6 @@
+[Dolphin]
+Timestamp=2017,12,24,15,16,6
+Version=4
+
+[Settings]
+HiddenFilesShown=true

src/main/resources/static/index.html

@@ -31,62 +31,93 @@
                 <a href="#" data-target="slide-out" class="sidenav-trigger">Home</a>
             </li>
             <li>
-                <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">ac_unit</i></a>
+                <a href="#" data-activates="slide-out" class="button-collapse-1">Playlist</a>
             </li>
         </ul>
-        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
+        <a href="#" data-activates="nav-mobile" class="button-collapse-1 button-collapse"><i class="material-icons">menu</i></a>
     </div>
 </nav>
 
 <div class="section no-pad-bot main" id="index-banner">
-    <div class="container">
+    <div class="row">
+        <div class="col s8">
             <div class="row center" >
-            <img class="responsive-img z-depth-3" style="max-width: 30%" src="https://s3-storage.textopus.nl/wp-content/uploads/2014/06/21163734/The-Test-Fun-for-Friends-iPhone-iPad.png"/>
+                <img class="responsive-img z-depth-3" id="music_img" style="max-width: 30%" src=""/>
             </div>
-        <h4 class="center">Test- By test</h4>
+            <h4 class="center" id="music_text"></h4>
             <div class="row center">
                 <div class="progress col s6 offset-s3 z-depth-3">
-                <div class="determinate" style="width: 70%"></div>
+                    <div class="determinate" id="music_progress" style="width: 0%"></div>
                 </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">
+                    <a class="btn-large blue-grey darken-4 z-depth-3 waves-effect waves-light" id="btn_skip">
                         <i class="material-icons medium">skip_previous</i>
                     </a>
                 </div>
                 <div class="col s2 center">
-                <a class="btn-large blue-grey darken-4 z-depth-3 waves-effect waves-light">
+                    <a class="btn-large blue-grey darken-4 z-depth-3 waves-effect waves-light" id="btn_play">
                         <i class="material-icons medium">play_arrow</i>
                     </a>
                 </div>
                 <div class="col s2 center">
-                <a class="btn-large blue-grey darken-4 z-depth-3 waves-effect waves-light" >
+                    <a class="btn-large blue-grey darken-4 z-depth-3 waves-effect waves-light" id="btn_next">
                         <i class="material-icons">skip_next</i>
                     </a>
                 </div>
             </div>
             <div class="row center">
                 <div class="col s2 center offset-s4">
-                <a class="btn blue-grey darken-4 z-depth-3 waves-effect waves-light">
+                    <a class="btn blue-grey darken-4 z-depth-3 waves-effect waves-light" id="btn_stop">
                         <i class="material-icons">stop</i>
                     </a>
                 </div>
                 <div class="col s2 center">
-                <a class="btn blue-grey darken-4 z-depth-3 waves-effect waves-light">
+                    <a class="btn blue-grey darken-4 z-depth-3 waves-effect waves-light modal-trigger" href="#modal1" id="btn_info">
                         <i class="material-icons">info</i>
                     </a>
                 </div>
             </div>
-
         </div>
-    <ul id="slide-out" class="side-nav fixed z-depth-3">
+        <div class="col s4" >
+            <ul id="playlist_list" class="collapsible popout" data-collapsible="accordion" style="margin: 0px">
 
             </ul>
+        </div>
 
 
     </div>
 
+    <!-- Playlist -->
+
+
+    <!-- Modal Structure -->
+    <div id="modal1" class="modal bottom-sheet">
+        <div class="modal-content">
+            <ul class="collection">
+                <li class="collection-item " id="modal_title"></li>
+                <li class="collection-item " id="modal_author"></li>
+                <li class="collection-item " id="modal_lenght"></li>
+                <li class="collection-item " id="modal_url"></li>
+            </ul>
+        </div>
+
+    </div>
+
+
+</div>
+<li id="playlist_template" style="visibility: hidden">
+    <div class="collapsible-header"><i class="material-icons">drag_handle</i>@title</div>
+    <div class="collapsible-body">
+        <ul class="collection">
+            <li class="collection-item">Author: @author</li>
+            <li class="collection-item">Duration: @lenght</li>
+            <li class="collection-item">URL: <a>@url</a></li>
+        </ul>
+    </div>
+</li>
+
 <!--  Scripts-->
 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="js/materialize.js"></script>

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

@@ -1,7 +1,182 @@
-$('.button-collapse').sideNav({
-    menuWidth: 300, // Default is 300
+var savedPlaylist;
+var error = false;
+
+$(document).ready(function() {
+    setInterval("getCurentMusic()",1000);
+    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
+    $('.modal').modal();
+    $('.button-collapse-1').sideNav({
+        menuWidth: 400, // Default is 300
         edge: 'right', // Choose the horizontal origin
-    closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
+        closeOnClick: false, // Closes side-nav on <a> clicks, useful for Angular/Meteor
         draggable: true // Choose whether you can drag to open on touch screens,
+    });
+    var height = $( window ).height();
+
+})
+
+
+function updateModal(data){
+    $('#modal_title').text("Title: "+ data.info.title);
+    $('#modal_author').text("Author: "+ data.info.author);
+    $('#modal_lenght').text("Duration: "+ msToTime(data.info.length));
+    $('#modal_url').text("URL: "+ data.info.uri);
+
+
+
+}
+
+
+
+function getCurentMusic() {
+    $.get("api/music/currentMusicInfo", function (data) {
+    }).done(function (data) {
+
+        // alert( "second success" );
+        // console.log(data);
+        switch (data.state) {
+            case "STOP":
+                $('#music_text').text("No Music");
+
+                if (!$('#btn_info').hasClass("indeterminate")) {
+                    $('#btn_info').addClass("determinate").removeClass("indeterminate");
+                }
+                $('#music_progress').width("0%");
+
+                $('#btn_play').children().text("play_arrow");
+                if (!$('#btn_stop').hasClass("disabled")) {
+                    $('#btn_stop').addClass("disabled");
+                }
+                if (!$('#btn_info').hasClass("disabled")) {
+                    $('#btn_info').addClass("disabled");
+                }
+
+                $('#music_img').attr("src","/img/no_music.jpg");
+
+                break;
+
+            case "PLAYING":
+                $('#btn_play').children().text("pause");
+                updateControl(data);
+
+                break;
+
+            case "PAUSE":
+                $('#btn_play').children().text("play_arrow");
+                updateControl(data);
+
+
+                break;
+
+            case "LOADING":
+                if (!$('#btn_info').hasClass("determinate")) {
+                    $('#btn_info').addClass("indeterminate").removeClass("determinate");
+                }
+                break;
+        }
+        getPlayList();
+    })
+    .fail(function (data) {
+        if(!error){
+            alert("error");
+            error = true;
+        }
+
+    })
+}
+
+
+function getPlayList() {
+    $.get("api/music/getPlaylist", function (data) {
+    }).done(function (data) {
+        data = data.list;
+        if(data.length != 0){
+            var noUpdate = comparePlaylist(data, savedPlaylist);
+
+            if(!noUpdate){
+                savedPlaylist = data;
+                $('#playlist_list').empty();
+
+                data.forEach(function(element){
+                    var template = $('#playlist_template').clone();
+                    template.removeAttr("id");
+                    template.removeAttr("style");
+                    var content = template.html();
+                    console.log(content);
+                    content = content.replace("@title", element.title);
+                    content = content.replace("@author", element.author);
+                    content = content.replace("@lenght", msToTime(element.length));
+                    content = content.replace("@url", element.uri)
+                    template.html(content);
+
+                    $('#playlist_list').append(template);
+
+                });
+            }
+        }
+
+
+
+    });
+
+}
+
+
+function msToTime(duration) {
+    var milliseconds = parseInt((duration%1000)/100)
+        , seconds = parseInt((duration/1000)%60)
+        , minutes = parseInt((duration/(1000*60))%60)
+        , hours = parseInt((duration/(1000*60*60))%24);
+
+    hours = (hours < 10) ? "0" + hours : hours;
+    minutes = (minutes < 10) ? "0" + minutes : minutes;
+    seconds = (seconds < 10) ? "0" + seconds : seconds;
+    if(hours > 0 )
+        return hours + ":" + minutes + ":" + seconds;
+    else
+        return minutes + ":" + seconds;
+}
+
+
+function comparePlaylist(list1, list2){
+    if(list1 == null || list2 == null){
+        console.log(list1);
+        console.log(list2);
+        console.log("False From null")
+        return false;
+    }
+
+    if(list1.length != list2.length){
+        console.log("False from length");
+        return false;
+    }
+
+
+    for(var i = 0; i++; i < list1.length){
+        if(list1[i].uri != list2[i].uri)
+            console.log("false from compare")
+            return false
+    }
+    return true;
+}
+
+function updateControl(data){
+    $('#music_text').text(data.info.title);
+    var percent = (data.currentPos / data.info.length) * 100;
+    // console.log(percent)
+    if (!$('#btn_info').hasClass("indeterminate")) {
+        $('#btn_info').addClass("determinate").removeClass("indeterminate");
+    }
+    $('#music_progress').width(percent + "%");
+
+
+    if ($('#btn_stop').hasClass("disabled")) {
+        $('#btn_stop').removeClass("disabled");
+    }
+    if ($('#btn_info').hasClass("disabled")) {
+        $('#btn_info').removeClass("disabled");
+    }
+
+    $('#music_img').attr("src","http://img.youtube.com/vi/"+data.info.identifier+"/hqdefault.jpg");
+    updateModal(data);
 }
-  );

src/main/resources/static/templates/music_item_playlist.html

@@ -0,0 +1,10 @@
+<li>
+    <div class="collapsible-header"><i class="material-icons">drag_handle</i><h6 class="truncate">@title</h6></div>
+    <div class="collapsible-body">
+        <ul class="collection">
+            <li class="collection-item">Author: @author</li>
+            <li class="collection-item">Duration: @lenght</li>
+            <li class="collection-item">URL: <a>@url</a></li>
+        </ul>
+    </div>
+</li>