Adding basic music control
This commit is contained in:
parent
53de284036
commit
4da9d6f903
@ -0,0 +1,7 @@
|
|||||||
|
package net.Broken.RestApi.Data;
|
||||||
|
|
||||||
|
|
||||||
|
public class CommandPostData {
|
||||||
|
public String command;
|
||||||
|
public String data;
|
||||||
|
}
|
@ -0,0 +1,14 @@
|
|||||||
|
package net.Broken.RestApi.Data;
|
||||||
|
|
||||||
|
import com.fasterxml.jackson.annotation.JsonInclude;
|
||||||
|
|
||||||
|
@JsonInclude(JsonInclude.Include.NON_NULL)
|
||||||
|
public class CommandResponseData {
|
||||||
|
public String Commande;
|
||||||
|
public String Message;
|
||||||
|
|
||||||
|
public CommandResponseData(String commande, String message) {
|
||||||
|
Commande = commande;
|
||||||
|
Message = message;
|
||||||
|
}
|
||||||
|
}
|
@ -5,12 +5,21 @@ import com.sedmelluq.discord.lavaplayer.track.AudioTrack;
|
|||||||
import com.sedmelluq.discord.lavaplayer.track.AudioTrackInfo;
|
import com.sedmelluq.discord.lavaplayer.track.AudioTrackInfo;
|
||||||
import net.Broken.Commandes.Music;
|
import net.Broken.Commandes.Music;
|
||||||
import net.Broken.MainBot;
|
import net.Broken.MainBot;
|
||||||
|
import net.Broken.RestApi.Data.CommandPostData;
|
||||||
|
import net.Broken.RestApi.Data.CommandResponseData;
|
||||||
import net.Broken.RestApi.Data.CurrentMusicData;
|
import net.Broken.RestApi.Data.CurrentMusicData;
|
||||||
import net.Broken.RestApi.Data.PlaylistData;
|
import net.Broken.RestApi.Data.PlaylistData;
|
||||||
import net.Broken.audio.NotConectedException;
|
import net.Broken.audio.NotConectedException;
|
||||||
import net.Broken.audio.NullMusicManager;
|
import net.Broken.audio.NullMusicManager;
|
||||||
|
import net.dv8tion.jda.core.events.message.MessageReceivedEvent;
|
||||||
|
import org.apache.logging.log4j.LogManager;
|
||||||
|
import org.apache.logging.log4j.Logger;
|
||||||
|
import org.json.JSONObject;
|
||||||
|
import org.springframework.http.HttpStatus;
|
||||||
import org.springframework.http.ResponseEntity;
|
import org.springframework.http.ResponseEntity;
|
||||||
|
import org.springframework.web.bind.annotation.RequestBody;
|
||||||
import org.springframework.web.bind.annotation.RequestMapping;
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMethod;
|
||||||
import org.springframework.web.bind.annotation.RestController;
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
import java.util.List;
|
import java.util.List;
|
||||||
@ -18,6 +27,8 @@ import java.util.List;
|
|||||||
@RestController
|
@RestController
|
||||||
@RequestMapping("/api/music/")
|
@RequestMapping("/api/music/")
|
||||||
public class MusicWebController {
|
public class MusicWebController {
|
||||||
|
Logger logger = LogManager.getLogger();
|
||||||
|
|
||||||
@RequestMapping("/currentMusicInfo")
|
@RequestMapping("/currentMusicInfo")
|
||||||
public CurrentMusicData test(){
|
public CurrentMusicData test(){
|
||||||
Music musicCommande = (Music) MainBot.commandes.get("music");
|
Music musicCommande = (Music) MainBot.commandes.get("music");
|
||||||
@ -45,4 +56,46 @@ public class MusicWebController {
|
|||||||
return new PlaylistData(list);
|
return new PlaylistData(list);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@RequestMapping(value = "/command", method = RequestMethod.POST)
|
||||||
|
public ResponseEntity<CommandResponseData> command(@RequestBody CommandPostData data){
|
||||||
|
|
||||||
|
if(data.command != null){
|
||||||
|
logger.info("receive command: " + data.command);
|
||||||
|
Music musicCommande = (Music) MainBot.commandes.get("music");
|
||||||
|
switch (data.command){
|
||||||
|
case "PLAY":
|
||||||
|
try {
|
||||||
|
musicCommande.getAudioManager().getMusicManager().scheduler.resume();
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
case "PAUSE":
|
||||||
|
try {
|
||||||
|
musicCommande.getAudioManager().getMusicManager().scheduler.pause();
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
case "NEXT":
|
||||||
|
try {
|
||||||
|
musicCommande.getAudioManager().getMusicManager().scheduler.nextTrack();
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
case "STOP":
|
||||||
|
musicCommande.getAudioManager().stop((MessageReceivedEvent) null);
|
||||||
|
return new ResponseEntity<>(new CommandResponseData(data.command,"Accepted"), HttpStatus.OK);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
logger.info("Null");
|
||||||
|
return new ResponseEntity<>(new CommandResponseData(null, null), HttpStatus.NO_CONTENT);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -223,9 +223,10 @@ public class AudioM {
|
|||||||
|
|
||||||
|
|
||||||
public void stop (MessageReceivedEvent event) {
|
public void stop (MessageReceivedEvent event) {
|
||||||
GuildMusicManager musicManager = getGuildAudioPlayer(event.getGuild());
|
|
||||||
musicManager.scheduler.stop();
|
musicManager.scheduler.stop();
|
||||||
playedChanel = null;
|
playedChanel = null;
|
||||||
|
|
||||||
|
if (event != null) {
|
||||||
event.getGuild().getAudioManager().closeAudioConnection();
|
event.getGuild().getAudioManager().closeAudioConnection();
|
||||||
Message message = event.getTextChannel().sendMessage(EmbedMessageUtils.getMusicOk("Arret de la musique!")).complete();
|
Message message = event.getTextChannel().sendMessage(EmbedMessageUtils.getMusicOk("Arret de la musique!")).complete();
|
||||||
List<Message> messages = new ArrayList<Message>(){{
|
List<Message> messages = new ArrayList<Message>(){{
|
||||||
@ -234,6 +235,7 @@ public class AudioM {
|
|||||||
}};
|
}};
|
||||||
new MessageTimeOut(messages, MainBot.messageTimeOut).start();
|
new MessageTimeOut(messages, MainBot.messageTimeOut).start();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public void stop (GuildVoiceLeaveEvent event) {
|
public void stop (GuildVoiceLeaveEvent event) {
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
</RollingFile>
|
</RollingFile>
|
||||||
</Appenders>
|
</Appenders>
|
||||||
<Loggers>
|
<Loggers>
|
||||||
<Root level="info">
|
<Root level="debug">
|
||||||
<AppenderRef ref="RollingFile" level="info" />
|
<AppenderRef ref="RollingFile" level="info" />
|
||||||
<AppenderRef ref="Console" level="info"/>
|
<AppenderRef ref="Console" level="info"/>
|
||||||
<AppenderRef ref="RollingFile" level="info"/>
|
<AppenderRef ref="RollingFile" level="info"/>
|
||||||
|
@ -52,8 +52,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="row center">
|
<div class="row center">
|
||||||
<div class="col s2 offset-s3 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_skip">
|
<a class="btn-large blue-grey darken-4 z-depth-3 waves-effect waves-light" id="btn_stop">
|
||||||
<i class="material-icons medium">skip_previous</i>
|
<i class="material-icons medium">stop</i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col s2 center">
|
<div class="col s2 center">
|
||||||
@ -68,12 +68,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row center">
|
<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" id="btn_stop">
|
<div class="col offset-s5 s2 center">
|
||||||
<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 modal-trigger" href="#modal1" id="btn_info">
|
<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>
|
<i class="material-icons">info</i>
|
||||||
</a>
|
</a>
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
var savedPlaylist;
|
var savedPlaylist;
|
||||||
var error = false;
|
var error = false;
|
||||||
|
var state;
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
setInterval("getCurentMusic()",1000);
|
setInterval("getCurentMusic()",1000);
|
||||||
@ -13,20 +14,32 @@ $(document).ready(function() {
|
|||||||
});
|
});
|
||||||
var height = $( window ).height();
|
var height = $( window ).height();
|
||||||
|
|
||||||
|
$('#btn_play').click(function () {
|
||||||
|
switch (state){
|
||||||
|
case "PLAYING":
|
||||||
|
sendCommand("PAUSE")
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "PAUSE":
|
||||||
|
sendCommand("PLAY")
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#btn_next').click(function () {
|
||||||
|
sendCommand("NEXT");
|
||||||
|
})
|
||||||
|
$('#btn_stop').click(function () {
|
||||||
|
sendCommand("STOP");
|
||||||
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
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() {
|
function getCurentMusic() {
|
||||||
$.get("api/music/currentMusicInfo", function (data) {
|
$.get("api/music/currentMusicInfo", function (data) {
|
||||||
@ -34,6 +47,7 @@ function getCurentMusic() {
|
|||||||
|
|
||||||
// alert( "second success" );
|
// alert( "second success" );
|
||||||
// console.log(data);
|
// console.log(data);
|
||||||
|
state = data.state;
|
||||||
switch (data.state) {
|
switch (data.state) {
|
||||||
case "STOP":
|
case "STOP":
|
||||||
$('#music_text').text("No Music");
|
$('#music_text').text("No Music");
|
||||||
@ -85,12 +99,11 @@ function getCurentMusic() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function getPlayList() {
|
function getPlayList() {
|
||||||
$.get("api/music/getPlaylist", function (data) {
|
$.get("api/music/getPlaylist", function (data) {
|
||||||
}).done(function (data) {
|
}).done(function (data) {
|
||||||
data = data.list;
|
data = data.list;
|
||||||
if(data.length != 0){
|
if(data != null && data.length != 0){
|
||||||
var noUpdate = comparePlaylist(data, savedPlaylist);
|
var noUpdate = comparePlaylist(data, savedPlaylist);
|
||||||
|
|
||||||
if(!noUpdate){
|
if(!noUpdate){
|
||||||
@ -114,6 +127,9 @@ function getPlayList() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
else
|
||||||
|
$('#playlist_list').empty();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -121,22 +137,52 @@ function getPlayList() {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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 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 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendCommand(commandStr){
|
||||||
|
$.ajax({
|
||||||
|
type: "POST",
|
||||||
|
dataType: 'json',
|
||||||
|
contentType: 'application/json',
|
||||||
|
url: "/api/music/command",
|
||||||
|
data: JSON.stringify({ command: commandStr}),
|
||||||
|
success: function (data) {
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
}).fail(function (data) {
|
||||||
|
console.log(data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function comparePlaylist(list1, list2){
|
function comparePlaylist(list1, list2){
|
||||||
if(list1 == null || list2 == null){
|
if(list1 == null || list2 == null){
|
||||||
@ -160,23 +206,19 @@ function comparePlaylist(list1, list2){
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateControl(data){
|
function msToTime(duration) {
|
||||||
$('#music_text').text(data.info.title);
|
var milliseconds = parseInt((duration%1000)/100)
|
||||||
var percent = (data.currentPos / data.info.length) * 100;
|
, seconds = parseInt((duration/1000)%60)
|
||||||
// console.log(percent)
|
, minutes = parseInt((duration/(1000*60))%60)
|
||||||
if (!$('#btn_info').hasClass("indeterminate")) {
|
, hours = parseInt((duration/(1000*60*60))%24);
|
||||||
$('#btn_info').addClass("determinate").removeClass("indeterminate");
|
|
||||||
}
|
|
||||||
$('#music_progress').width(percent + "%");
|
|
||||||
|
|
||||||
|
hours = (hours < 10) ? "0" + hours : hours;
|
||||||
if ($('#btn_stop').hasClass("disabled")) {
|
minutes = (minutes < 10) ? "0" + minutes : minutes;
|
||||||
$('#btn_stop').removeClass("disabled");
|
seconds = (seconds < 10) ? "0" + seconds : seconds;
|
||||||
}
|
if(hours > 0 )
|
||||||
if ($('#btn_info').hasClass("disabled")) {
|
return hours + ":" + minutes + ":" + seconds;
|
||||||
$('#btn_info').removeClass("disabled");
|
else
|
||||||
}
|
return minutes + ":" + seconds;
|
||||||
|
|
||||||
$('#music_img').attr("src","http://img.youtube.com/vi/"+data.info.identifier+"/hqdefault.jpg");
|
|
||||||
updateModal(data);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
<nav class="blue-grey darken-4 z-depth-3" role="navigation">
|
<nav class="blue-grey darken-4 z-depth-3" role="navigation">
|
||||||
<div class="nav-wrapper container">
|
<div class="nav-wrapper container">
|
||||||
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons large">people</i></a>
|
<a id="logo-container" href="#" class="brand-logo">Discrod IMERIR Social Club</a>
|
||||||
<ul class="right hide-on-med-and-down">
|
<ul class="right hide-on-med-and-down">
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
@ -31,61 +31,88 @@
|
|||||||
<a href="#" data-target="slide-out" class="sidenav-trigger">Home</a>
|
<a href="#" data-target="slide-out" class="sidenav-trigger">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
</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>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="section no-pad-bot main" id="index-banner">
|
<div class="section no-pad-bot main" id="index-banner">
|
||||||
<div class="container">
|
<div class="row">
|
||||||
<div class="row center">
|
<div class="col s8">
|
||||||
<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"/>
|
<div class="row center" >
|
||||||
|
<img class="responsive-img z-depth-3" id="music_img" style="max-width: 30%" src=""/>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="center">Test- By test</h4>
|
<h4 class="center" id="music_text"></h4>
|
||||||
<div class="row center">
|
<div class="row center">
|
||||||
<div class="progress col s6 offset-s3 z-depth-3">
|
<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>
|
</div>
|
||||||
<div class="row center">
|
<div class="row center">
|
||||||
<div class="col s2 offset-s3 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_stop">
|
||||||
<i class="material-icons medium">skip_previous</i>
|
<i class="material-icons medium">stop</i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col s2 center">
|
<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>
|
<i class="material-icons medium">play_arrow</i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col s2 center">
|
<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>
|
<i class="material-icons">skip_next</i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row center">
|
<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">
|
<div class="col offset-s5 s2 center">
|
||||||
<i class="material-icons">stop</i>
|
<a class="btn blue-grey darken-4 z-depth-3 waves-effect waves-light modal-trigger" href="#modal1" id="btn_info">
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col s2 center">
|
|
||||||
<a class="btn blue-grey darken-4 z-depth-3 waves-effect waves-light">
|
|
||||||
<i class="material-icons">info</i>
|
<i class="material-icons">info</i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</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>
|
</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-->
|
<!-- Scripts-->
|
||||||
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||||
|
Loading…
Reference in New Issue
Block a user