Commit 3f0336c3 authored by Gautam Chitnis's avatar Gautam Chitnis

Fix(1/2) (playlist): Playlist render fixed

This commit fixes the previous issue of playlist not rendering successfully.
Issue with playing seleceted item and item removal still persist

Gautam C.
parent f94388bc
......@@ -11,13 +11,6 @@
<script src='src/vendors/vue/vue.js'></script>
<script src="src/vendors/plyr/plyr.js"></script>
<script src="dist/js/output_script.js"></script>
<!--<script src="src/services/command.service.js"></script>
<script src='src/components/playlist/playlist.component.js'></script>
<script src="src/services/initialize.service.js"></script>
<script src="src/components/player/plyr.methods.js"></script>
<script src='src/components/controls/sidenav.component.js'></script>
<script src='src/components/vlm/vlm.component.js'></script>
<script src='src/components/playlist/buttons.playlist.component.js'></script>-->
<script src="src/vendors/bootstrap/bootstrap.min.js"></script>
</head>
<!--
......@@ -58,14 +51,14 @@
<!-- Playlist Template -->
<script type="text/x-template" id="playlist-template">
<div>
<playlist-buttons></playlist-buttons>
<playlist-buttons></playlist-buttons>
<div class="d-flex justify-content-center">
<h1 style="color: black; padding-left: 5%;">Playlist</h1>
</div>
<div id="playlist" style="background-color: white;">
<ol type="1">
<li v-for="item in this.$parent.playlistItems">
<button v-on:click="play(item.src, item.id)" class="playlistItem">{{ item.title }}</button>
<button v-on:click="this.$parent.play(item.src, item.id)" class="playlistItem">{{ item.title }}</button>
</li>
</ol>
</div>
......
......@@ -25,7 +25,7 @@ export function plyrInit()
return true;
}
function setVideo(videoSrc, type, id)
export function setVideo(videoSrc, type, id)
{
player[0].source({
type: 'video',
......
import { bus } from '../../services/bus.service.js';
import { app } from '../../services/initialize.service.js';
import { sendCommand, jsonData } from '../../services/command.service.js';
import { sendCommand } from '../../services/command.service.js';
Vue.component('playlist', {
template: '#playlist-template',
methods: {
addItem: function(id, title, src)
{
app.playlistItems.push({ id: id, title: title, src: src });
addItem: function(id, title, src) {
this.$parent.playlistItems.push({ id: id, title: title, src: src });
},
removeItem: function(id)
{
app.playlistItems.splice({ id: id });
removeItem: function(id) {
this.$parent.playlistItems.splice({ id: id });
},
openPlaylist: function() {
document.getElementById("playlistNav").style.width = "60%";
document.getElementById("playlistNavMobile").style.width = "0%";
document.getElementById("mobilePlaylistNavButton").style.width = "0%";
},
closePlaylist: function() {
document.getElementById("playlistNav").style.width = "0%";
document.getElementById("playlistNavMobile").style.width = "10%";
document.getElementById("mobilePlaylistNavButton").style.width = "10%";
},
populatePlaylist: function(){
if(jsonData)
{
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);
}
}
else
{
console.log("well,Fuck!");
populatePlaylist: function(jData) {
for (var i = 0; i < jData[0].children[0].children.length; i++) {
this.addItem(jData[0].children[0].children[i].id, jData[0].children[0].children[i].name, jData[0].children[0].children[i].src);
}
},
refreshPlaylist: function()
{
refreshPlaylist: function() {
sendCommand(1);
}
},
created: function()
{
bus.$on('openPlaylist', function()
{
created: function() {
bus.$on('openPlaylist', function() {
this.openPlaylist();
}.bind(this));
bus.$on('closePlaylist', function()
{
bus.$on('closePlaylist', function() {
this.closePlaylist();
}.bind(this));
bus.$on('populatePlaylist', function()
{
this.populatePlaylist();
bus.$on('populatePlaylist', function(jData) {
this.populatePlaylist(jData);
}.bind(this));
bus.$on('removeItem', function(id)
{
bus.$on('removeItem', function(id) {
this.removeItem(id);
}.bind(this));
bus.$on('refreshPlaylist', function()
{
bus.$on('refreshPlaylist', function() {
this.refreshPlaylist();
}.bind(this));
......@@ -70,7 +52,7 @@ Vue.component('playlist', {
}
});
$(document).click(function(e){
$(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"){
......
......@@ -20,8 +20,8 @@ export function sendCommand(mode, params) {
url: 'requests/playlist.json',
data: params,
success: function (data, status, jqXHR) {
jsonData = data;
bus.$emit('populatePlaylist');
jsonData = JSON.parse(data);
bus.$emit('populatePlaylist',[jsonData]);
}
});
} else if(mode == 2)
......
......@@ -28,7 +28,7 @@ $(function() { // Handler for .ready() called.
});
});
function vueInit()
export function vueInit()
{
app = new Vue({
el: '#app',
......
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