Commit 9eacd4cc authored by Gautam Chitnis's avatar Gautam Chitnis

Feature (File Modal): Added the vue component with functionality for file modal

This commit adds a new feature to select files to be added to the playlist from server file system.
Functionality can be used by selecting open file option from left menu or 'plus' icon above playlist on right.
All respective views and interfaces are affected by this function.
Relevant changes have been made project wide for this functionality.

Gautam C.
parent c06a1a0e
......@@ -6,10 +6,14 @@
<meta name="viewport" content="initial-scale=1">
<title>VLC media player - Web Interface</title>
<link rel="stylesheet" href="src/vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<!--<link rel="stylesheet" href="dist/css/vendor/jstree-theme.css">-->
<link rel="stylesheet" href="dist/css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='src/vendors/vue/vue.js'></script>
<script src="src/vendors/plyr/plyr.js"></script>
<script src="src/vendors/jstree/jstree.min.js"></script>
<script src="dist/js/output_script.js"></script>
<script src="src/vendors/bootstrap/bootstrap.min.js"></script>
</head>
......@@ -39,6 +43,9 @@
<div id="vlmModal" class="modal fade" role="dialog">
<vlm-modal></vlm-modal>
</div>
<div id="fileModal" class="modal fade" role="dialog">
<file-modal></file-modal>
</div>
</div>
<div id="videoPlayer" class="">
......@@ -76,7 +83,7 @@
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-random"></i></button>
<button type="button" class="btn-circle col-xs" id="repeatButton"><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" data-toggle="modal" data-target="#fileModal" onclick=""><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn-circle col-xs" id="removeButton"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</div>
......@@ -88,7 +95,7 @@
<div>
<div id="sideNav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" id="closeNavButton">Menu</span></a>
<a href="#">Open File</a>
<a href="#" data-toggle="modal" data-target="#fileModal" onclick="">Open File</a>
<!--<input type="file" id="videoInput"/>-->
<a href="#">Local Network</a>
<a href="#">Podcast</a>
......@@ -125,4 +132,23 @@
</div>
</div>
</script>
<!-- file modal Template -->
<script type="text/x-template" id="file-modal-template">
<div>
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Select your file</h4>
</div>
<div class="modal-body" id="file-tree">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</script>
</html>
import { notifyBus } from '../../services/bus.service.js';
import { sendCommand } from '../../services/command.service.js';
import { video_types, audio_types, playlist_types } from '../../services/initialize.service.js';
Vue.component('file-modal', {
template: '#file-modal-template',
methods: {
populateTree: function () {
$("#file-tree").jstree({
"core": {
"mulitple": false,
"animation": 100,
"check_callback" : true,
"html_titles" : true,
"load_open" : true,
"themes": {
"variant": "medium",
"dots": false
},
data: {
url: function(node) {
if ( node.id == '#' ){
return "requests/browse.json?dir=/";
} else {
return "requests/browse.json?dir=/"+ node.data.path;
}
},
dataType : 'json',
dataFilter: function(rawData) {
let data = JSON.parse(rawData);
let result = data.element.map(d => {
let res = {
text: d.name,
data: {
path: d.path,
uri: d.uri,
type: d.type
},
type: d.type,
children: true
};
if(d.type == "file")
{
res.children = false;
}
return res;
});
return JSON.stringify(result);
}
}
},
"types" : {
"#" : {
"valid_children" : ["root"]
},
"root" : {
"icon" : "/static/3.3.4/assets/images/tree_icon.png",
"valid_children" : ["default"]
},
"default" : {
"valid_children" : ["default","file"]
},
"file" : {
"icon" : "glyphicon glyphicon-file",
}
},
"plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort", "types" ]
});
$('#file-tree').on('select_node.jstree', function (e, data) {
node = data.instance.get_node(data.selected[0]);
ext = (node.data.uri).substr(node.data.uri.lastIndexOf('.')+1).toLowerCase();
if( node.data.type == "file" &&( $.inArray(ext, video_types) != -1||$.inArray(ext, audio_types) != -1|| $.inArray(ext, playlist_types) != -1) ){
notifyBus('addItem', [1,"",node.data.uri,node.data.uri]);
}
}).jstree();
}
},
mounted: function()
{
this.populateTree();
}
});
......@@ -4,7 +4,7 @@ export let player;
export function plyrInit()
{
player = plyr.setup({debug:false,showPosterOnEnd:true});
player = plyr.setup({showPosterOnEnd:true});
setVideo('S6IP_6HG2QE','youtube');
player[0].on('pause', function() {
sendCommand(0,"command=pl_pause");
......@@ -19,9 +19,9 @@ export function plyrInit()
sendCommand(0,cmd);
});
player[0].on('loadstart', function(event) {
sendCommand(0,"command=pl_play&id="+id);
});
/*player[0].on('loadstart', function(event) {
//console.log(event.detail.plyr.getMedia());
});*/
return true;
}
......@@ -42,4 +42,5 @@ export function playItem(src, id)
{
setVideo(src,'video/mp4', id);
player[0].play();
sendCommand(0,"command=pl_play&id="+id);
}
\ No newline at end of file
......@@ -7,8 +7,17 @@ let playlistData;
Vue.component('playlist', {
template: '#playlist-template',
methods: {
addItem: function(id, title, src) {
this.$parent.playlistItems.push({ id: id, title: title, src: src });
addItem: function(mode, id, title, src) {
if(mode == 0)
{
this.$parent.playlistItems.push({ id: id, title: title, src: src });
}
else if(mode == 1)
{
sendCommand(0,"command=in_enqueue&input="+src);
this.clearPlaylist();
bus.$emit('refreshPlaylist');
}
},
removeItem: function(id) {
this.$parent.playlistItems.splice({ id: id });
......@@ -30,13 +39,16 @@ Vue.component('playlist', {
if(playlistData)
{
for (var i = 0; i < playlistData[0].children[0].children.length; i++) {
this.addItem(playlistData[0].children[0].children[i].id, playlistData[0].children[0].children[i].name, playlistData[0].children[0].children[i].src);
this.addItem(0,playlistData[0].children[0].children[i].id, playlistData[0].children[0].children[i].name, playlistData[0].children[0].children[i].uri);
Please register or sign in to reply
}
}
},
refreshPlaylist: function() {
sendCommand(1);
},
clearPlaylist: function() {
this.$parent.playlistItems = [];
},
play: function (src, id) {
playItem(src,id);
}
......@@ -54,6 +66,10 @@ Vue.component('playlist', {
this.populatePlaylist(jData);
}.bind(this));
bus.$on('addItem', function(params) {
this.addItem(params[0], params[1], params[2], params[3]);
}.bind(this));
bus.$on('removeItem', function(id) {
this.removeItem(id);
}.bind(this));
......
export let bus = new Vue();
export function notifyBus(param)
export function notifyBus(command, params)
{
bus.$emit(param);
bus.$emit(command, params);
}
\ No newline at end of file
......@@ -3,9 +3,26 @@ import { notifyBus } from './bus.service.js';
export let app;
export let video_types = [
"asf", "avi", "bik", "bin", "divx", "drc", "dv", "f4v", "flv", "gxf", "iso",
"m1v", "m2v", "m2t", "m2ts", "m4v", "mkv", "mov",
"mp2", "mp4", "mpeg", "mpeg1",
"mpeg2", "mpeg4", "mpg", "mts", "mtv", "mxf", "mxg", "nuv",
"ogg", "ogm", "ogv", "ogx", "ps",
"rec", "rm", "rmvb", "rpl", "thp", "ts", "txd", "vob", "wmv", "xesc" ];
export let audio_types = [
"3ga", "a52", "aac", "ac3", "ape", "awb", "dts", "flac", "it",
"m4a", "m4p", "mka", "mlp", "mod", "mp1", "mp2", "mp3",
"oga", "ogg", "oma", "s3m", "spx", "thd", "tta",
"wav", "wma", "wv", "xm"
];
export let playlist_types = [
"asx", "b4s", "cue", "ifo", "m3u", "m3u8", "pls", "ram", "rar",
"sdp", "vlc", "xspf", "zip", "conf"
];
$(function() { // Handler for .ready() called.
plyrInit();
//bus = new Vue();
plyrInit();;
vueInit();
$('#openNavButton').on('click',function (e){
......@@ -26,11 +43,9 @@ $(function() { // Handler for .ready() called.
$('#mobilePlaylistNavButton').on('click',function (e){
notifyBus("openPlaylist");
});
$('#plItem').on('click',function (e){
//notifyBus("");
//console.log(item.src, item.id);
console.log(e);
});
/*$('#playlist').on('click',function (e){
});*/
});
function vueInit()
......
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