Merge branch 'devel'

build.gradle

@@ -52,7 +52,7 @@ dependencies {
         exclude group:"org.springframework.boot", module: "spring-boot-starter-logging"
     }
     compile("org.springframework.boot:spring-boot-starter-log4j2")
-    compile("com.sedmelluq:lavaplayer:1.2.49")
+    compile("com.sedmelluq:lavaplayer:1.3.10")
     compile 'net.dv8tion:JDA:3.6.0_354'
     compile group: 'org.json', name: 'json', version: '20160810'
     compile 'org.springframework.security:spring-security-web:5.0.1.RELEASE'

src/main/java/net/Broken/Commands/YtSearch.java

@@ -31,7 +31,7 @@ public class YtSearch implements Commande {
             new MessageTimeOut(MainBot.messageTimeOut, message, event.getMessage()).start();
         }else {
             try {
-                ArrayList<SearchResult> result = youtubeT.search(args[0], 5);
+                ArrayList<SearchResult> result = youtubeT.search(args[0], 5, false);
                 for(SearchResult item : result){
                     event.getChannel().sendMessage(EmbedMessageUtils.searchResult(item)).queue();
                 }

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

@@ -0,0 +1,11 @@
+package net.Broken.RestApi.Data;
+
+public class AllMusicInfoData {
+    public CurrentMusicData currentMusic;
+    public PlaylistData playlist;
+
+    public AllMusicInfoData(CurrentMusicData currentMusic, PlaylistData playlist) {
+        this.currentMusic = currentMusic;
+        this.playlist = playlist;
+    }
+}

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

@@ -17,6 +17,7 @@ import net.Broken.audio.Youtube.SearchResult;
 import net.Broken.audio.Youtube.YoutubeTools;
 import net.dv8tion.jda.core.entities.Guild;
 import net.dv8tion.jda.core.entities.VoiceChannel;
+import org.apache.http.HttpResponse;
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -59,7 +60,6 @@ public class MusicWebAPIController {
             logger.trace("currentMusicInfo for " + guild.getName());
         }
 
-        Music musicCommande = (Music) MainBot.commandes.get("music");
 
         if(guild.getAudioManager().isConnected()){
             AudioPlayer player = AudioM.getInstance(guild).getGuildMusicManager().player;
@@ -92,7 +92,58 @@ public class MusicWebAPIController {
         return new ResponseEntity<>(new PlaylistData(list), HttpStatus.OK);
     }
 
-//    TODO change token to cookie
+
+
+
+    @RequestMapping("/getAllInfo")
+    public ResponseEntity<AllMusicInfoData> getAllInfo(@RequestParam(value = "guild") String guildId, @CookieValue("token") String token){
+        if(token != null) {
+            Guild guild = MainBot.jda.getGuildById(guildId);
+            if(guild == null ){
+
+                logger.warn("All info without guild!");
+                return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
+            }
+
+            try {
+                UserEntity user = userUtils.getUserWithApiToken(userRepository, token);
+                logger.trace("All info from USER: " + user.getName() + " GUILD: " + guild.getName());
+
+                PlaylistData list = new PlaylistData(AudioM.getInstance(guild).getGuildMusicManager().scheduler.getList());
+                CurrentMusicData musicData;
+                if(guild.getAudioManager().isConnected()){
+                    AudioPlayer player = AudioM.getInstance(guild).getGuildMusicManager().player;
+                    AudioTrack currentTrack = player.getPlayingTrack();
+                    if(currentTrack == null)
+                    {
+                        musicData = new CurrentMusicData(null,0, "STOP",false, AudioM.getInstance(guild).getGuildMusicManager().scheduler.isAutoFlow());
+                    }
+                    else{
+                        UserAudioTrackData uat = new UserAudioTrackData(AudioM.getInstance(guild).getGuildMusicManager().scheduler.getCurrentPlayingTrack());
+                        musicData = new CurrentMusicData(uat, currentTrack.getPosition(), currentTrack.getState().toString(), player.isPaused(), AudioM.getInstance(guild).getGuildMusicManager().scheduler.isAutoFlow());
+                    }
+
+                }else
+                {
+                    musicData = new CurrentMusicData(null,0, "DISCONNECTED",false, false);
+                }
+                return new ResponseEntity<>(new AllMusicInfoData(musicData, list),HttpStatus.OK);
+
+
+            } catch (UnknownTokenException e) {
+                logger.warn("All info with unknown token");
+                return new ResponseEntity<>(HttpStatus.UNAUTHORIZED);
+
+            }
+
+        }
+        else{
+            logger.warn("All Info without token!");
+            return new ResponseEntity<>(HttpStatus.UNAUTHORIZED);
+
+        }
+    }
+
     @RequestMapping(value = "/command", method = RequestMethod.POST)
     public ResponseEntity<CommandResponseData> command(@RequestBody CommandPostData data, HttpServletRequest request, @RequestParam(value = "guild") String guildId, @CookieValue("token") String token){
 
@@ -149,12 +200,12 @@ public class MusicWebAPIController {
     }
 
     @RequestMapping(value = "/search", method = RequestMethod.GET)
-    public ResponseEntity<List<SearchResult>> search(@CookieValue("token") String token, @RequestParam(value = "query") String query ){
+    public ResponseEntity<List<SearchResult>> search(@CookieValue("token") String token, @RequestParam(value = "query") String query, @RequestParam(value = "playlist") boolean playlist ){
         if(token != null) {
             try {
                 UserEntity user = userUtils.getUserWithApiToken(userRepository, token);
                 YoutubeTools youtubeTools = YoutubeTools.getInstance();
-                ArrayList<SearchResult> result = youtubeTools.search(query, 25);
+                ArrayList<SearchResult> result = youtubeTools.search(query, 25, playlist);
                 return new ResponseEntity<>(result, HttpStatus.OK);
 
             }catch (UnknownTokenException e){

src/main/java/net/Broken/audio/AudioPlayerSendHandler.java

@@ -37,7 +37,7 @@ public class AudioPlayerSendHandler implements AudioSendHandler {
             lastFrame = audioPlayer.provide();
         }
 
-        byte[] data = lastFrame != null ? lastFrame.data : null;
+        byte[] data = lastFrame != null ? lastFrame.getData() : null;
         lastFrame = null;
 
         return data;

src/main/java/net/Broken/audio/Youtube/SearchResult.java

@@ -11,6 +11,9 @@ public class SearchResult {
     public String duration;
 
     public SearchResult(com.google.api.services.youtube.model.SearchResult result, String duration){
+        if(result.getId().getVideoId() == null)
+            id = result.getId().getPlaylistId();
+        else
             id = result.getId().getVideoId();
         title = result.getSnippet().getTitle();
         description = result.getSnippet().getDescription();

src/main/java/net/Broken/audio/Youtube/YoutubeTools.java

@@ -3,10 +3,8 @@ package net.Broken.audio.Youtube;
 import com.google.api.client.http.javanet.NetHttpTransport;
 import com.google.api.client.json.jackson2.JacksonFactory;
 import com.google.api.services.youtube.YouTube;
-import com.google.api.services.youtube.model.SearchListResponse;
+import com.google.api.services.youtube.model.*;
 import com.google.api.services.youtube.model.SearchResult;
-import com.google.api.services.youtube.model.Video;
-import com.google.api.services.youtube.model.VideoListResponse;
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;
 
@@ -81,9 +79,12 @@ public class YoutubeTools {
     }
 
 
-    public ArrayList<net.Broken.audio.Youtube.SearchResult> search(String query, long max) throws IOException {
+    public ArrayList<net.Broken.audio.Youtube.SearchResult> search(String query, long max, boolean playlist) throws IOException {
         YouTube youTube = getYoutubeService();
         YouTube.Search.List searchList = youTube.search().list("snippet");
+        if(playlist)
+            searchList.setType("playlist");
+        else
             searchList.setType("video");
         searchList.setSafeSearch("none");
         searchList.setMaxResults(max);
@@ -94,11 +95,32 @@ public class YoutubeTools {
         SearchListResponse response = searchList.execute();
 
         StringBuilder idString = new StringBuilder();
+
+
+        if(playlist){
+            for(SearchResult item : response.getItems()){
+                idString.append(item.getId().getPlaylistId()).append(",");
+            }
+            HashMap<String, Playlist> playlistHashMap = new HashMap<>();
+            YouTube.Playlists.List list = youTube.playlists().list("contentDetails");
+            list.setId(idString.toString());
+            list.setKey(apiKey);
+            PlaylistListResponse playlistResponse = list.execute();
+            for( Playlist item : playlistResponse.getItems()){
+                playlistHashMap.put(item.getId(), item);
+            }
+            ArrayList<net.Broken.audio.Youtube.SearchResult> finalResult = new ArrayList<>();
+            for(SearchResult item : response.getItems()){
+                logger.trace(item.getSnippet().getTitle());
+                finalResult.add(new net.Broken.audio.Youtube.SearchResult(item, playlistHashMap.get(item.getId().getPlaylistId()).getContentDetails().getItemCount().toString()+ " Video(s)"));
+
+            }
+            return finalResult;
+        }
+        else{
             for(SearchResult item : response.getItems()){
                 idString.append(item.getId().getVideoId()).append(",");
             }
-
-
             HashMap<String, Video> videoHashMap = new HashMap<>();
             YouTube.Videos.List video = youTube.videos().list("contentDetails");
             video.setId(idString.toString());
@@ -112,12 +134,16 @@ public class YoutubeTools {
                 logger.trace(item.getSnippet().getTitle());
                 finalResult.add(new net.Broken.audio.Youtube.SearchResult(item, videoHashMap.get(item.getId().getVideoId()).getContentDetails().getDuration()));
             }
-
-
-
-
-
             return finalResult;
+        }
+
+
+
+
+
+
+
+
 
     }
 

src/main/resources/static/css/materialize.css

@@ -1,5 +1,5 @@
 /*!
- * Materialize v1.0.0-rc.2 (http://materializecss.com)
+ * Materialize v1.0.0 (http://materializecss.com)
  * Copyright 2014-2017 Materialize
  * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
  */
@@ -6551,7 +6551,7 @@ textarea.materialize-textarea + label:after, .select-wrapper + label:after {
           transform-origin: 0 0;
 }
 
-.input-field > input[type]:-webkit-autofill:not(.browser-default) + label,
+.input-field > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
 .input-field > input[type=date]:not(.browser-default) + label,
 .input-field > input[type=time]:not(.browser-default) + label {
   -webkit-transform: translateY(-14px) scale(0.8);

src/main/resources/static/js/materialize.js

@@ -1,5 +1,5 @@
 /*!
- * Materialize v1.0.0-rc.2 (http://materializecss.com)
+ * Materialize v1.0.0 (http://materializecss.com)
  * Copyright 2014-2017 Materialize
  * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
  */
@@ -1084,6 +1084,8 @@ if (typeof define === 'function' && define.amd) {
   exports.default = M;
 }
 
+M.version = '1.0.0';
+
 M.keys = {
   TAB: 9,
   ENTER: 13,
@@ -2507,7 +2509,11 @@ $jscomp.polyfill = function (e, r, p, m) {
           var $activatableElement = $(focusedElement).find('a, button').first();
 
           // Click a or button tag if exists, otherwise click li tag
-          !!$activatableElement.length ? $activatableElement[0].click() : focusedElement.click();
+          if (!!$activatableElement.length) {
+            $activatableElement[0].click();
+          } else if (!!focusedElement) {
+            focusedElement.click();
+          }
 
           // Close dropdown on ESC
         } else if (e.which === M.keys.ESC && this.isOpen) {
@@ -2687,8 +2693,7 @@ $jscomp.polyfill = function (e, r, p, m) {
 
             // onOpenEnd callback
             if (typeof _this11.options.onOpenEnd === 'function') {
-              var elem = anim.animatables[0].target;
+              _this11.options.onOpenEnd.call(_this11, _this11.el);
-              _this11.options.onOpenEnd.call(elem, _this11.el);
             }
           }
         });
@@ -2719,7 +2724,6 @@ $jscomp.polyfill = function (e, r, p, m) {
 
             // onCloseEnd callback
             if (typeof _this12.options.onCloseEnd === 'function') {
-              var elem = anim.animatables[0].target;
               _this12.options.onCloseEnd.call(_this12, _this12.el);
             }
           }
@@ -2849,7 +2853,7 @@ $jscomp.polyfill = function (e, r, p, m) {
 
   Dropdown._dropdowns = [];
 
-  window.M.Dropdown = Dropdown;
+  M.Dropdown = Dropdown;
 
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Dropdown, 'dropdown', 'M_Dropdown');
@@ -4420,7 +4424,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     return Tabs;
   }(Component);
 
-  window.M.Tabs = Tabs;
+  M.Tabs = Tabs;
 
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Tabs, 'tabs', 'M_Tabs');
@@ -6090,7 +6094,7 @@ $jscomp.polyfill = function (e, r, p, m) {
 
   Sidenav._sidenavs = [];
 
-  window.M.Sidenav = Sidenav;
+  M.Sidenav = Sidenav;
 
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Sidenav, 'sidenav', 'M_Sidenav');
@@ -11833,11 +11837,21 @@ $jscomp.polyfill = function (e, r, p, m) {
           // Add callback for centering selected option when dropdown content is scrollable
           dropdownOptions.onOpenEnd = function (el) {
             var selectedOption = $(_this71.dropdownOptions).find('.selected').first();
-            if (_this71.dropdown.isScrollable && selectedOption.length) {
+
+            if (selectedOption.length) {
+              // Focus selected option in dropdown
+              M.keyDown = true;
+              _this71.dropdown.focusedIndex = selectedOption.index();
+              _this71.dropdown._focusFocusedItem();
+              M.keyDown = false;
+
+              // Handle scrolling to selected option
+              if (_this71.dropdown.isScrollable) {
                 var scrollOffset = selectedOption[0].getBoundingClientRect().top - _this71.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
                 scrollOffset -= _this71.dropdownOptions.clientHeight / 2; // center in dropdown
                 _this71.dropdownOptions.scrollTop = scrollOffset;
               }
+            }
           };
 
           if (this.isMultiple) {

src/main/resources/static/js/music.js

@@ -1,5 +1,3 @@
-//import * as M from "./materialize";
-
 let savedPlaylist;
 let error = false;
 let state;
@@ -14,6 +12,7 @@ let btn_flush;
 let btn_add;
 let switchAutoFlow;
 let loadingFlag = true;
+let musicLoadFlag = false;
 let guild;
 let interval;
 
@@ -31,7 +30,6 @@ $(document).ready(function () {
         switchAutoFlow = $("#autoflow");
 
 
-
         M.Modal.init($('#modalAdd').get(0));
 
         $('#modal_current_info').modal();
@@ -43,7 +41,7 @@ $(document).ready(function () {
 
         modal_loading = M.Modal.init($('#modal_loading').get(0), {dismissible: false});
         modal_loading.open();
-
+        $('#tabs-swipe-demo').tabs();
 
 
         $('.dropdown-button').dropdown({
@@ -58,27 +56,29 @@ $(document).ready(function () {
         });
 
         listeners();
+        getCurentMusic();
         interval = setInterval("getCurentMusic()", 1000);
 
     }
 });
 
 function getCurentMusic() {
-    $.get("api/music/currentMusicInfo?guild=" + guild, function (data) {
+    $.get("api/music/getAllInfo?guild=" + guild, function (data) {
     }).done(function (data) {
+
         if (error) {
             error = false;
             M.Toast.dismissAll();
         }
-        state = data.state;
+        state = data.currentMusic.state;
-        switch (data.state) {
+        switch (data.currentMusic.state) {
             case "STOP":
                 disconected = false;
                 $('#modalChanels').modal('close');
                 $('#music_text').text("Connected on Vocal Channel");
 
-                if (!$('#btn_info').hasClass("indeterminate")) {
+                if (!$('#music_progress').hasClass("determinate")) {
-                    $('#btn_info').addClass("determinate").removeClass("indeterminate");
+                    $('#music_progress').addClass("determinate").removeClass("indeterminate");
                 }
                 $('#music_progress').width("0%");
                 if (Cookies.get('token') !== undefined) {
@@ -105,6 +105,10 @@ function getCurentMusic() {
                 $('#current_time').text("00:00");
                 btn_play.removeClass("amber");
                 btn_play.addClass("green");
+                if (savedPlaylist != null) {
+                    $('#playlist_list').empty();
+                    savedPlaylist = null;
+                }
 
                 break;
 
@@ -114,7 +118,7 @@ function getCurentMusic() {
                 btn_play.children().text("pause");
                 btn_play.removeClass("green");
                 btn_play.addClass("amber");
-                updateControl(data);
+                updateControl(data.currentMusic);
 
                 break;
 
@@ -125,22 +129,28 @@ function getCurentMusic() {
                 btn_play.removeClass("amber");
                 btn_play.addClass("green");
                 btn_play.addClass("green");
-                updateControl(data);
+                updateControl(data.currentMusic);
                 break;
 
             case "LOADING":
                 disconected = false;
                 $('#modalChanels').modal('close');
-                if (!$('#btn_info').hasClass("determinate")) {
+                updateControl(data.currentMusic);
-                    $('#btn_info').addClass("indeterminate").removeClass("determinate");
+                if ($('#music_progress').hasClass("determinate")) {
+                    $('#music_progress').addClass("indeterminate").removeClass("determinate");
+                }
+                if(!musicLoadFlag){
+                    clearInterval(interval);
+                    interval = setInterval("getCurentMusic()", 200);
+                    musicLoadFlag = true;
                 }
                 break;
 
             case "DISCONNECTED":
                 $('#music_text').text("Disconnected from Vocal");
 
-                if (!$('#btn_info').hasClass("indeterminate")) {
+                if (!$('#music_progress').hasClass("determinate")) {
-                    $('#btn_info').addClass("determinate").removeClass("indeterminate");
+                    $('#music_progress').addClass("determinate").removeClass("indeterminate");
                 }
                 $('#music_progress').width("0%");
 
@@ -162,22 +172,40 @@ function getCurentMusic() {
                     }
                 }
 
-                clearInterval(interval);
+                if (savedPlaylist != null) {
+                    $('#playlist_list').empty();
+                    savedPlaylist = null;
+                }
                 break;
         }
-        if (switchAutoFlow.is(':checked') != data.autoflow)
+        if (switchAutoFlow.is(':checked') !== data.currentMusic.autoflow)
-            switchAutoFlow.prop('checked', data.autoflow);
+            switchAutoFlow.prop('checked', data.currentMusic.autoflow);
-        if(data.state !== "DISCONNECTED" && data.state !== "STOP")
+        if (data.currentMusic.state !== "DISCONNECTED" && data.currentMusic.state !== "STOP"){
-            getPlayList();
+            getPlayList(data.playlist.list);
-        else{
+            if(data.currentMusic.state !== "LOADING"){
+                $(".ctl-btn").removeClass("disabled");
+                if(musicLoadFlag){
+                    clearInterval(interval);
+                    interval = setInterval("getCurentMusic()", 1000);
+                    musicLoadFlag = false;
+                }
+            }
+        }
+
+        else {
             if (loadingFlag) {
                 modal_loading.close();
                 loadingFlag = false;
             }
+            $(".ctl-btn").removeClass("disabled");
+            if(musicLoadFlag){
+                clearInterval(interval);
+                interval = setInterval("getCurentMusic()", 1000);
+                musicLoadFlag = false;
+            }
         }
 
-    })
+    }).fail(function (data) {
-        .fail(function (data) {
         if (!error) {
             error = true;
             console.error("Connection lost, I keep trying to refresh!");
@@ -192,10 +220,8 @@ function getCurentMusic() {
     })
 }
 
-function getPlayList() {
+function getPlayList(data) {
-    $.get("api/music/getPlaylist?guild=" + guild, function (data) {
+
-    }).done(function (data) {
-        data = data.list;
     if (data != null && data.length != 0) {
         var noUpdate = comparePlaylist(data, savedPlaylist);
         if (!noUpdate) {
@@ -224,8 +250,6 @@ function getPlayList() {
                     url: $(this).attr("data_url")
                 };
                 sendCommand(command, true);
-
-
             });
         }
     }
@@ -239,21 +263,7 @@ function getPlayList() {
     }
 
 
-    }).fail(function (data) {
-        if (!error) {
-            M.toast({
-                html: " <i class=\"material-icons\" style='margin-right: 10px'>warning</i> Connection Lost!",
-                classes: 'red',
-                displayLength: 99999999
-            });
-            error = true;
-        }
-        if (loadingFlag) {
-            modal_loading.close();
-            loadingFlag = false;
-        }
 
-    });
 
 }
 
@@ -302,13 +312,15 @@ function updateModal(data) {
 }
 
 function updateControl(data) {
+
+    if($('#music_text').text() !== data.info.audioTrackInfo.title){
         $('#music_text').text(data.info.audioTrackInfo.title);
-    var percent = (data.currentPos / data.info.audioTrackInfo.length) * 100;
-    if (!$('#music_progress').hasClass("indeterminate")) {
-        $('#music_progress').addClass("determinate").removeClass("indeterminate");
     }
+    var percent = (data.currentPos / data.info.audioTrackInfo.length) * 100;
+
     $('#music_progress').width(percent + "%");
 
+    if(data.state !== "LOADING"){
         if (Cookies.get('token') !== undefined) {
             enableBtn(btn_play);
             enableBtn(btn_stop);
@@ -327,6 +339,11 @@ function updateControl(data) {
             disableBtn(btn_next);
             disableBtn(btn_disconnect_music);
         }
+        if (!$('#music_progress').hasClass("determinate")) {
+            $('#music_progress').addClass("determinate").removeClass("indeterminate");
+        }
+    }
+
 
 
     $('#music_img').attr("src", "https://img.youtube.com/vi/" + data.info.audioTrackInfo.identifier + "/hqdefault.jpg");
@@ -335,12 +352,14 @@ function updateControl(data) {
     updateModal(data);
 }
 
-function sendCommand(command, stopRefresh) {
+function sendCommand(command, modal) {
-    if(stopRefresh){
     clearInterval(interval);
+    interval = null;
+    if (modal) {
         modal_loading.open();
 
     }
+    $(".ctl-btn").addClass("disabled");
 
     $.ajax({
         type: "POST",
@@ -350,9 +369,12 @@ function sendCommand(command, stopRefresh) {
         data: JSON.stringify(command),
         success: function (data) {
             loadingFlag = true;
-            if(stopRefresh)
+            getCurentMusic();
+            if(interval != null)
+                clearInterval(interval);
             interval = setInterval("getCurentMusic()", 1000);
-            if(command.command === "ADD"){
+
+            if (command.command === "ADD") {
                 M.toast({
                     html: " <i class=\"material-icons\" style='margin-right: 10px'>check_circle</i> Video added to playlist!",
                     classes: 'green',
@@ -360,6 +382,7 @@ function sendCommand(command, stopRefresh) {
                 });
             }
 
+
         }
 
     }).fail(function (data) {
@@ -370,13 +393,14 @@ function sendCommand(command, stopRefresh) {
             Cookies.remove('name');
             location.reload();
         }
-        else{
+        else {
             M.toast({
                 html: " <i class=\"material-icons\" style='margin-right: 10px'>warning</i> Command fail!",
                 classes: 'red',
                 displayLength: 99999999
             });
         }
+        $(".ctl-btn").removeClass("disabled");
     });
 }
 
@@ -397,7 +421,6 @@ function comparePlaylist(list1, list2) {
 }
 
 
-
 function search() {
     let input_search = $('#input_search');
     let list = $("#search_result");
@@ -408,22 +431,28 @@ function search() {
     load.removeClass("hide");
     load.addClass("scale-in");
 
-    $.get("/api/music/search?query=" + input_search.val(), (data) => {
+    $.get("/api/music/search?query=" + input_search.val() + "&playlist=" + $("#playlistSearch").is(':checked'), (data) => {
         list.empty();
-        data.forEach((item)=>{
+        let url;
+        if($("#playlistSearch").is(':checked')){
+            url = "https://www.youtube.com/playlist?list="
+        }
+        else
+            url = "https://youtube.com/watch?v=";
+
+        data.forEach((item) => {
 
             let html =
                 "<li class=\"collection-item avatar\">" +
-                "   <img src=\""+item["imageUrl"]+"\" alt=\"\" class=\"\">" +
+                "   <img src=\"" + item["imageUrl"] + "\" alt=\"\" class=\"\">" +
-                "   <a class=\"title truncate\" href='https://youtube.com/watch?v="+item["id"]+"' target=\"_blank\"><b>"+item["title"]+"</b></a>" +
+                "   <a class=\"title truncate\" href='" + url + item["id"] + "' target=\"_blank\"><b>" + item["title"] + "</b></a>" +
-                "   <p class='truncate grey-text text-darken-1'>"+item["channelTittle"]+ " &#9553 "+ item["publishedAt"].substr(0, item["publishedAt"].indexOf('T'))+" <br>" + ytTimeToTime(item["duration"])  +
+                "   <p class='truncate grey-text text-darken-1'>" + item["channelTittle"] + " &#9553 " + item["publishedAt"].substr(0, item["publishedAt"].indexOf('T')) + " <br>" + ytTimeToTime(item["duration"]) +
                 "   </p>" +
-                "   <a href=\"#!\" class=\"secondary-content btn waves-effect waves-light green add-btn-list scale-transition\" id='"+item["id"]+"'><i class=\"material-icons \">add_circle_outline</i></a>" +
+                "   <a href=\"#!\" class=\"secondary-content btn waves-effect waves-light green add-btn-list scale-transition\" id='" + item["id"] + "'><i class=\"material-icons \">add_circle_outline</i></a>" +
                 "   </div>" +
                 "</li>";
 
 
-
             list.append(html)
         });
 
@@ -435,17 +464,15 @@ function search() {
         list.addClass("scale-in");
         enableBtn($('#btn_search'));
         input_search.removeAttr("disabled");
-        input_search.focus();
 
-
+    }).fail((data) => {
-    }).fail( (data)=>{
+        if (data.status === 401) {
-        if(data.status === 401){
             M.toast({
                 html: " <i class=\"material-icons\" style='margin-right: 10px'>warning</i> Unauthorized, please re-login.",
                 classes: 'red',
                 displayLength: 99999999
             });
-        }else{
+        } else {
             M.toast({
                 html: " <i class=\"material-icons\" style='margin-right: 10px'>warning</i>Internal server error, please contact dev.",
                 classes: 'red',
@@ -463,9 +490,9 @@ function search() {
 }
 
 
-function addListClick(event){
+function addListClick(event) {
     let button;
-    if(event.target.nodeName === "I"){
+    if (event.target.nodeName === "I") {
         button = event.target.parentNode;
     }
     else
@@ -475,7 +502,7 @@ function addListClick(event){
     let command = {
         command: "ADD",
         url: button.id,
-        playlistLimit: $('#limit_range').val(),
+        playlistLimit: "300",
         onHead: !$('#bottom').is(':checked')
     };
     sendCommand(command, false);
@@ -485,20 +512,22 @@ function ytTimeToTime(duration) {
     let hours;
     let minutes;
     let seconds;
-    if(duration === "PT0S")
+    if (duration === "PT0S")
         return "&#x1F534 LIVE";
-    if(duration.includes("H"))
+    if(duration.endsWith("Video(s)"))
-        hours = parseInt(duration.match(/\d*H/)[0].replace("H",""), 10);
+        return duration;
+    if (duration.includes("H"))
+        hours = parseInt(duration.match(/\d*H/)[0].replace("H", ""), 10);
     else
         hours = 0;
 
-    if(duration.includes("M"))
+    if (duration.includes("M"))
-        minutes = parseInt(duration.match(/\d*M/)[0].replace("M",""), 10);
+        minutes = parseInt(duration.match(/\d*M/)[0].replace("M", ""), 10);
     else
         minutes = 0;
 
-    if(duration.includes("S"))
+    if (duration.includes("S"))
-        seconds = parseInt(duration.match(/\d*S/)[0].replace("S",""), 10);
+        seconds = parseInt(duration.match(/\d*S/)[0].replace("S", ""), 10);
     else
         seconds = 0;
 
@@ -512,8 +541,6 @@ function ytTimeToTime(duration) {
 }
 
 
-
-
 function msToTime(duration) {
     var milliseconds = parseInt((duration % 1000) / 100)
         , seconds = parseInt((duration / 1000) % 60)
@@ -542,23 +569,23 @@ function listeners() {
                 sendCommand({command: "PLAY"}, true);
                 break;
             default:
-                sendCommand({command: "PLAY"},true);
+                sendCommand({command: "PLAY"}, true);
         }
 
     });
 
     $('#btn_search').click(search);
 
-    $("form").submit(function(e) {
+    $("form").submit(function (e) {
         e.preventDefault();
         search();
     });
 
     $('#btn_next').click(function () {
-        sendCommand({command: "NEXT"},true);
+        sendCommand({command: "NEXT"}, false);
-    });
+    })
     $('#btn_stop').click(function () {
-        sendCommand({command: "STOP"}, true);
+        sendCommand({command: "STOP"}, false);
     });
 
 
@@ -572,8 +599,6 @@ function listeners() {
     });
 
 
-
-
     $('#modalChanels').change(function () {
         if ($('#btn_ok_channel').hasClass("disabled")) {
             $('#btn_ok_channel').removeClass("disabled");
@@ -584,7 +609,7 @@ function listeners() {
         var command = {
             command: "FLUSH"
         };
-        sendCommand(command, true);
+        sendCommand(command, false);
     });
 
     $('#btn_ok_channel').click(function () {

src/main/resources/templates/music.html

@@ -16,22 +16,23 @@
     <meta name="theme-color" content="#263238"/>
     <style>
         @media only screen and (max-width: 1200px) {
-            #modalAdd{
+            #modalAdd {
                 width: 95%;
             }
         }
+
         @media only screen and (min-width: 1200px) {
-            #modalAdd{
+            #modalAdd {
                 width: 80%;
             }
         }
 
-        #modalAdd{
+        #modalAdd {
             height: 85% !important;
             max-height: 100% !important;
         }
 
-        .avatar>img{
+        .avatar > img {
             position: absolute;
             width: 80px;
             height: auto;
@@ -40,7 +41,8 @@
             display: inline-block;
             vertical-align: middle;
         }
-        .collection-item.avatar{
+
+        .collection-item.avatar {
             padding-left: 105px !important;
             padding-right: 75px;
         }
@@ -49,7 +51,7 @@
 
 </head>
 
-<body class="blue-grey lighten-5" >
+<body class="blue-grey lighten-5">
 
 <!--/*@thymesVar id="guild_name" type="java.lang.String"*/-->
 <!--/*@thymesVar id="redirect_url" type="java.lang.String"*/-->
@@ -58,8 +60,9 @@
 <div class="section no-pad-bot main" id="index-banner">
     <div class="row">
         <div class="col l8 s12 m12">
-            <div class="row center" >
+            <div class="row center">
-                <img class="responsive-img z-depth-3" id="music_img" style="max-width: 30%" src="/img/disconnected.png"/>
+                <img class="responsive-img z-depth-3" id="music_img" style="max-width: 30%"
+                     src="/img/disconnected.png"/>
             </div>
             <h4 class="center" id="music_text"></h4>
             <div class="row center" style="margin-bottom: 0px">
@@ -68,22 +71,26 @@
                 </div>
             </div>
             <div class="row center">
-                <div class="col l2 offset-l3 m2 offset-m1 s2 offset-s1 left-align" style="padding: 0px" id="current_time">0:00</div>
+                <div class="col l2 offset-l3 m2 offset-m1 s2 offset-s1 left-align" style="padding: 0px"
-                <div class="col l2 offset-l2 m2 offset-m6 s2 offset-s6 right-align " style="padding: 0px" id="total_time">0:00</div>
+                     id="current_time">0:00
+                </div>
+                <div class="col l2 offset-l2 m2 offset-m6 s2 offset-s6 right-align " style="padding: 0px"
+                     id="total_time">0:00
+                </div>
             </div>
             <div class="row center">
                 <div class="col l2 offset-l3 m4 s4 center">
-                    <a class="btn-large red darken-4 z-depth-3 waves-effect waves-light" id="btn_stop">
+                    <a class="btn-large red darken-4 z-depth-3 waves-effect waves-light ctl-btn" id="btn_stop">
                         <i class="material-icons medium">stop</i>
                     </a>
                 </div>
                 <div class="col l2 m4 s4 center">
-                    <a class="btn-large green darken-4 z-depth-3 waves-effect waves-light" id="btn_play">
+                    <a class="btn-large green darken-4 z-depth-3 waves-effect waves-light ctl-btn" id="btn_play">
                         <i class="material-icons medium">play_arrow</i>
                     </a>
                 </div>
                 <div class="col l2 m4 s4 center">
-                    <a class="btn-large light-blue darken-4 z-depth-3 waves-effect waves-light" id="btn_next">
+                    <a class="btn-large light-blue darken-4 z-depth-3 waves-effect waves-light ctl-btn" id="btn_next">
                         <i class="material-icons">skip_next</i>
                     </a>
                 </div>
@@ -91,7 +98,8 @@
             <div class="row center">
 
                 <div class="col offset-l5 l2 m2 offset-m5 s2 offset-s5 center">
-                    <a class="btn black z-depth-3 waves-effect waves-light modal-trigger" href="#modal_current_info" id="btn_info">
+                    <a class="btn black z-depth-3 waves-effect waves-light modal-trigger" href="#modal_current_info"
+                       id="btn_info">
                         <i class="material-icons">info</i>
                     </a>
                 </div>
@@ -100,14 +108,14 @@
             </div>
             <div class="row center">
                 <div class="col offset-l5 l2 m4 offset-m4 s4 offset-s4 center">
-                    <a class="btn-large red accent-4 z-depth-3 waves-effect waves-light" id="btn_disconnect">
+                    <a class="btn-large red accent-4 z-depth-3 waves-effect waves-light ctl-btn" id="btn_disconnect">
                         <i class="material-icons">call_end</i>
                     </a>
                 </div>
             </div>
 
         </div>
-        <div class="col l4 m12 s12" >
+        <div class="col l4 m12 s12">
             <table>
                 <thead>
                 <tr>
@@ -115,19 +123,20 @@
                         <div class="row center valign-wrapper" style="margin: 0px">
                             <div class="col l3 m5 s5 center blue-grey-text text-darken-3"><h5><b>Playlist</b></h5></div>
                             <div class="col l3 m2 s2 center" style="padding-right: 0px; padding-left: 0px">
-                                <a class="waves-effect waves-light btn modal-trigger red darken-4" id="flush_btn"><i class="material-icons">delete_sweep</i></a>
+                                <a class="waves-effect waves-light btn modal-trigger red darken-4 ctl-btn"
+                                   id="flush_btn"><i class="material-icons">delete_sweep</i></a>
                             </div>
                             <div class="col l3 m2 s2 center" style="padding-right: 0px; padding-left: 0px">
                                 <!-- Modal Trigger -->
-                                <a class="waves-effect waves-light btn modal-trigger green darken-4" id="add_btn" href="#modalAdd"><i class="material-icons">add_circle_outline</i></a>
+                                <a class="waves-effect waves-light btn modal-trigger green darken-4" id="add_btn"
-
+                                   href="#modalAdd"><i class="material-icons">add_circle_outline</i></a>
-
                             </div>
                             <div class="col l3 m2 s2 center " style="padding-left: 0px">
                                 <div class="row switch  blue-grey-text text-darken-3" style="margin-bottom: 0px">
                                     AutoFlow
                                 </div>
-                                <div class="row switch tooltipped" data-position="bottom" data-delay="50" data-tooltip="Experimental!">
+                                <div class="row switch tooltipped ctl-btn" data-position="bottom" data-delay="50"
+                                     data-tooltip="Experimental!">
                                     <label>
                                         <input type="checkbox" id="autoflow"/>
                                         <span class="lever"></span>
@@ -143,7 +152,8 @@
                 <tbody>
                 <tr>
                     <td>
-                        <ul id="playlist_list" class="collapsible popout" data-collapsible="accordion" style="margin: 0px">
+                        <ul id="playlist_list" class="collapsible popout" data-collapsible="accordion"
+                            style="margin: 0px">
 
                         </ul>
                     </td>
@@ -158,8 +168,6 @@
     </div>
 
 
-
-
     <!-- Music  -->
     <div id="modal_current_info" class="modal bottom-sheet">
         <div class="modal-content">
@@ -183,22 +191,35 @@
         <div class="row valign-wrapper">
             <h3 class="col l12 m12 s12 center"> Add Music</h3>
         </div>
-        <div class="row" style="margin-bottom: 0px">
+        <div class="row" id="musicSearch" style="margin-bottom: 0px">
-
+            <div class="row">
                 <form class="col l12 m12 s12">
                     <div class="row" style="margin-bottom: 0">
-                    <div class="input-field col offset-l1 l9 m10 s10" style="padding-left: 0px; padding-right: 0px">
+                        <div class="input-field col offset-l1 l9 m9 s7" style="padding-left: 0px; padding-right: 0px">
                             <!--<i class="material-icons prefix">link</i>-->
                             <input id="input_search" type="text" class="validate"/>
                             <label for="input_search">Search</label>
                         </div>
-                    <div class="input-field col l2 m2 s2" style="margin-top: 22px">
+                        <div class="input-field col l1 m2 s3" style="margin-top: 22px">
-                        <button class="btn waves-effect waves-light green darken-4 white-text" id="btn_search" type="button"><i class="material-icons">search</i></button>
+                            <button class="btn waves-effect waves-light green darken-4 white-text" id="btn_search"
+                                    type="button"><i class="material-icons">search</i></button>
+                        </div>
+                        <div class="col l1 m1 s2 center" style="padding: 0; margin-top: 15px;">
+                            <div class="row switch  blue-grey-text text-darken-3" style="margin-bottom: 0px">
+                                Playlist
+                            </div>
+                            <div class="row switch">
+                                <label>
+                                    <input type="checkbox" id="playlistSearch"/>
+                                    <span class="lever"></span>
+                                </label>
+                            </div>
                         </div>
                     </div>
 
                     <div class="row">
-                    <div class="col s12 m12 l12 center scale-transition scale-out hide" id="search_load" style="margin-top: 25px">
+                        <div class="col s12 m12 l12 center scale-transition scale-out hide" id="search_load"
+                             style="margin-top: 25px">
                             <div class="preloader-wrapper big active">
                                 <div class="spinner-layer spinner-blue-only">
                                     <div class="circle-clipper left">
@@ -213,17 +234,16 @@
                                 </div>
                             </div>
                         </div>
-                    <ul class="collection col l12 m12 s12 scale-transition scale-out" id="search_result" style="padding: 0">
+                        <ul class="collection col l12 m12 s12 scale-transition scale-out" id="search_result"
+                            style="padding: 0">
 
                         </ul>
 
-
-
-
-
                     </div>
                 </form>
             </div>
+
+        </div>
     </div>
     <div class="modal-footer">
         <span style="margin-right: 10px">
@@ -234,7 +254,7 @@
         </span>
         <span style="margin-right: 10px">
             <label>
-                <input name="group1" type="radio" />
+                <input name="group1" type="radio"/>
                 <span>Top</span>
             </label>
         </span>
@@ -243,8 +263,6 @@
 </div>
 
 
-
-
 <!-- Playlist template-->
 <li id="playlist_template" style="visibility: hidden">
     <div class="collapsible-header"><i class="material-icons">drag_handle</i>@title</div>
@@ -282,14 +300,13 @@
 </div>
 
 
-
 <!--Loading Modal-->
 <div id="modal_loading" class="modal valign-wrapper">
-    <div class="modal-content" >
+    <div class="modal-content">
         <div class="row center">
             <h3 class="col l12 m12 s12 center">Please wait</h3>
         </div>
-        <div class="row center" >
+        <div class="row center">
             <div class="preloader-wrapper big active">
                 <div class="spinner-layer spinner-blue">
                     <div class="circle-clipper left">
@@ -344,7 +361,6 @@
 </div>
 
 
-
 <p id="radioTemplate" class="" style="visibility: hidden">
     <label>
         <input name="vocalRadio" class="with-gap" type="radio" value="@id" id="@id"/>
@@ -367,6 +383,5 @@
 <script th:src="@{/js/fontawesome.js}"></script>
 
 
-
 </body>
 </html>