Commit 394a08b6 authored by Gautam Chitnis's avatar Gautam Chitnis

Refactor (playlist): Converting playlist code to Vue Component

This commit converts the existing playlist code into Vue Component.
The Component needs more polishing but takes care of the basics.
All important functions have been precisely divided and referred to as needed into smaller blocks.

Gautam C.
parent 697639aa
......@@ -12,12 +12,12 @@
<script src='src/vendors/vue/vue.js'></script>
<script src="src/vendors/plyr/plyr.js"></script>
<script src="src/services/command.js"></script>
<script src="src/services/initialize.js"></script>
<script src="src/utils/data-vars.js"></script>
<script src='src/components/playlist/playlist.component.js'></script>
<script src="src/services/initialize.js"></script>
<script src="src/components/player/plyr.methods.js"></script>
<script src='src/components/controls/menu.component.js'></script>
<script src='src/components/vlm/vlm.component.js'></script>
<script src='src/components/playlist/playlist.component.js'></script>
<script src='src/components/playlist/buttons.playlist.component.js'></script>
<script src="src/vendors/bootstrap/bootstrap.min.js"></script>
</head>
......@@ -34,14 +34,14 @@
</head>
-->
<body>
<script type="text/javascript">
$('#buttonOpen').click(function(){
browse_target = 'default';
browse();
$('#window_browse').dialog('open');
return false;
});
</script>
<script type="text/javascript">
$('#buttonOpen').click(function(){
browse_target = 'default';
browse();
$('#window_browse').dialog('open');
return false;
});
</script>
<div id="sideNav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Menu</span></a>
<a href="#">Open File</a>
......@@ -61,38 +61,14 @@
<video></video>
</div>
<script type="text/javascript">
</script>
<div id="playlistNav" class="playlistNav">
<div id="app" class="container">
<div class="playlistIcons">
<div class="row">
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-random"></i></button>
<button type="button" class="btn-circle col-xs" onclick="toggleRepeat()"><i class="glyphicon glyphicon-repeat"></i></button>
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-play-circle"></i></button>
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn-circle col-xs" onclick="removeCurrent()"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="">
<div class="">
<h1 style="color: black; padding-left: 5%;">Playlist</h1>
</div>
</div>
</div>
<!--<app></app>
<script type="text/x-template" id="app-template">
<div>
<h1>{{ msg }}</h1>
</div>
</script>-->
<playlist ref="plist">
Please register or sign in to reply
</playlist>
<div id="playlist" style="background-color: white;">
<ol type="1">
<li v-for="item in playlist">
<li v-for="item in playlistItems">
<button v-on:click="play(item.src, item.id)" class="playlistItem">{{ item.title }}</button>
</li>
</ol>
......@@ -100,14 +76,13 @@
</div>
</div>
<div id="playlistNavMobile" class="playlistNavMobile" onclick="openPlaylist()">
P<br>l<br>a<br>y<br>l<br>i<br>s<br>t
<div id="playlistNavMobile" class="playlistNavMobile" onclick="app.$refs.plist.openPlaylist()">
Please register or sign in to reply
Playlist
</div>
<!-- Modal -->
<div id="vlmModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
......@@ -127,6 +102,24 @@
</div>
</div>
</div>
</body>
<!-- Templates -->
Please register or sign in to reply
<script type="text/x-template" id="playlist-template">
<div>
<div class="playlistIcons">
<div class="row">
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-random"></i></button>
<button type="button" class="btn-circle col-xs" onclick="toggleRepeat()"><i class="glyphicon glyphicon-repeat"></i></button>
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-play-circle"></i></button>
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn-circle col-xs" onclick="removeCurrent()"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</div>
<div class="d-flex justify-content-center">
<h1 style="color: black; padding-left: 5%;">Playlist</h1>
Please register or sign in to reply
</div>
</div>
</script>
</html>
......@@ -16,14 +16,13 @@ function plyrInit()
});
player[0].on('loadstart', function(event) {
sendCommand(0,"command=pl_play&id="+id);
});
return true;
}
function setVideo(videoSrc, type, id)
{
{
player[0].source({
type: 'video',
title: '',
......
......@@ -6,6 +6,6 @@ function toggleRepeat()
function removeCurrent()
{
sendCommand(0,"command=pl_delete&id="+data.children[0].children[0].id);
app.removeItem(data.children[0].children[0].id);
playlistInit();
app.$refs.plist.removeItem(data.children[0].children[0].id);
app.$refs.plist.refreshPlaylist();
}
\ No newline at end of file
function vueInit()
{
/*Vue.component('app', {
template: '#app-template',
data: function () {
return {
msg: 'Welcome to Vue.js World!'
}
}
});*/
app = new Vue({
el: '#app',
data: {
playlist: []
Vue.component('playlist', {
template: '#playlist-template',
methods: {
addItem: function(id, title, src)
{
app.playlistItems.push({ id: id, title: title, src: src });
},
removeItem: function(id)
{
app.playlistItems.splice({ id: id });
},
methods: {
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 });
},
removeItem: function(id)
{
this.playlist.splice({ id: id });
openPlaylist: function() {
document.getElementById("playlistNav").style.width = "60%";
document.getElementById("playlistNavMobile").style.width = "0%";
},
closePlaylist: function() {
document.getElementById("playlistNav").style.width = "0%";
document.getElementById("playlistNavMobile").style.width = "10%";
},
populatePlaylist: function(){
data = JSON.parse(jsonData);
for (var i = 0; i < data.children[0].children.length; i++) {
this.addItem(data.children[0].children[i].id, data.children[0].children[i].name, data.children[0].children[i].src);
}
},
refreshPlaylist: function()
{
sendCommand(1);
}
});
}
function openPlaylist() {
document.getElementById("playlistNav").style.width = "60%";
document.getElementById("playlistNavMobile").style.width = "0%";
}
function closePlaylist() {
document.getElementById("playlistNav").style.width = "0%";
document.getElementById("playlistNavMobile").style.width = "10%";
}
function playlistInit()
{
sendCommand(1);
}
function populatePlaylist()
{
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);
},
created: function()
{
this.refreshPlaylist();
}
}
});
$(document).click(function(e){
var container = $("#playlistNav");
var container = $("#playlistNav");
if($(window).width() <= 480 && !container.is(e.target) && container.has(e.target).length === 0 && container.css("width") != "0px"){
closePlaylist();
}
if($(window).width() <= 480 && !container.is(e.target) && container.has(e.target).length === 0 && container.css("width") != "0px"){
app.$refs.plist.closePlaylist();
Please register or sign in to reply
}
});
\ No newline at end of file
var player;
var app;
var jsonData;
var xmlData;
var data;
$(function() { // Handler for .ready() called.
plyrInit();
vueInit();
playlistInit();
$(document).click(function(e){
var container = $("#playlistNav");
if($(window).width() <= 480 && !container.is(e.target) && container.has(e.target).length === 0 && container.css("width") != "0px"){
closePlaylist();
}
});
});
\ No newline at end of file
......@@ -15,7 +15,7 @@ function sendCommand(mode, params) {
data: params,
success: function (data, status, jqXHR) {
jsonData = data;
populatePlaylist();
app.$refs.plist.populatePlaylist();
Please register or sign in to reply
}
});
} else if(mode == 2)
......
......@@ -3,9 +3,25 @@ var app;
var jsonData;
var xmlData;
var data;
var playlist;
$(function() { // Handler for .ready() called.
plyrInit();
vueInit();
playlistInit();
});
\ No newline at end of file
plyrInit();
vueInit();
});
function vueInit()
{
app = new Vue({
el: '#app',
data: {
playlistItems: []
},
methods: {
play: function (msg, id) {
setVideo(msg,'video/mp4', id);
player[0].play();
}
}
});
}
\ No newline at end of file
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