Commit e21cfe5a authored by Gautam Chitnis's avatar Gautam Chitnis

Feature (playlist): Dynamic Playlist Generation Added

This commit adds the dynamic generation of playlist based on items available in the VLC Main Interface Playlist.
Selecting items from playlist performs corresponding tasks in Main Interface.

Gautam C.
parent 44d2ec74
......@@ -82,7 +82,7 @@
<div id="playlist" style="background-color: white;">
<ol type="1">
<li v-for="item in playlist">
<button v-on:click="play(item.src)" class="playlistItem">{{ item.title }}</button>
<button v-on:click="play(item.src, item.id)" class="playlistItem">{{ item.title }}</button>
</li>
</ol>
</div>
......
function plyrInit()
{
player = plyr.setup({debug:true,showPosterOnEnd:true});
setVideo('S6IP_6HG2QE');
player = plyr.setup({debug:false,showPosterOnEnd:true});
setVideo('S6IP_6HG2QE','youtube');
player[0].on('pause', function() {
console.log("Inside Pause");
sendCommand("command=pl_pause");
sendCommand(0,"command=pl_pause");
});
player[0].on('play', function() {
console.log("Inside Play");
sendCommand("command=pl_pause");
sendCommand(0,"command=pl_pause");
});
player[0].on('volumechange', function(event) {
console.log("Inside Volume");
console.log(event.detail.plyr.getVolume());
console.log(event.detail.plyr.getVolume()*255);
var cmd = "command=volume&val="+event.detail.plyr.getVolume()*255;
sendCommand(cmd);
sendCommand(0,cmd);
});
}
function setVideo(videoSrc)
function setVideo(videoSrc, type, id)
{
sendCommand(0,"command=pl_play&id="+id);
player[0].source({
type: 'video',
title: 'Example title',
sources: [{
src: videoSrc,
type: 'youtube'
type: type
}],
poster: "assets/vlc.png"
});
......
var player;
var app;
var fileInput;
var jsonData
window.onload = function() {
plyrInit();
vueInit();
playlistInit();
}
function openNav() {
......@@ -20,13 +22,50 @@ function closeNav() {
document.getElementById("sideNav").style.width = "0";
}
function playlistInit()
{
sendCommand(1);
}
function populatePlaylist()
{
var data = JSON.parse(jsonData);
for (var i = 0; i < data.children[0].children.length; i++) {
app.addItem(data.children[0].children[i].id, data.children[0].children[i].name, data.children[0].children[i].src);
}
}
function sendCommand(mode, params) {
$.ajax({
url: 'requests/status.json',
data: params,
success: function (data, status, jqXHR) {
jsonData = data;
console.log(jsonData);
}
});
if(mode == 0)
{
$.ajax({
url: 'requests/status.json',
data: params,
success: function (data, status, jqXHR) {
jsonData = data;
}
});
} else if(mode == 1)
{
$.ajax({
url: 'requests/playlist.json',
data: params,
success: function (data, status, jqXHR) {
jsonData = data;
populatePlaylist();
}
});
} else if(mode == 2)
{
} else if(mode == 3)
{
} else if(mode == 4)
{
} else if(mode == 5)
{
}
}
\ No newline at end of file
......@@ -12,16 +12,17 @@ function vueInit()
app = new Vue({
el: '#app',
data: {
playlist:
[
{ title: 'vid 1', src: 'videos/01.mp4' },
{ title: 'vid 2', src: 'videos/02.mp4' }
]
playlist: []
},
methods: {
play: function (msg) {
setVideo(msg);
play: function (msg, id) {
setVideo(msg,'video/mp4', id);
player[0].play();
},
addItem: function(id, title, src)
{
//console.log(playlist);
this.playlist.push({ id: id, title: title, src: src });
}
}
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment