Fixed calc mixin and introduced media handlers for webpanel media plugin

This commit is contained in:
Fabio Manganiello 2019-06-15 00:51:48 +02:00
parent fc5ea429d2
commit 3a3637d3d7
10 changed files with 53 additions and 11 deletions

View file

@ -2,7 +2,7 @@ import os
from flask import Blueprint, request, render_template from flask import Blueprint, request, render_template
from platypush.backend.http.app import template_folder from platypush.backend.http.app import template_folder, static_folder
from platypush.backend.http.app.utils import authenticate, authentication_ok, \ from platypush.backend.http.app.utils import authenticate, authentication_ok, \
get_websocket_port get_websocket_port
@ -58,6 +58,7 @@ def index():
scripts=enabled_scripts, styles=enabled_styles, scripts=enabled_scripts, styles=enabled_styles,
utils=HttpUtils, token=Config.get('token'), utils=HttpUtils, token=Config.get('token'),
websocket_port=get_websocket_port(), websocket_port=get_websocket_port(),
template_folder=template_folder, static_folder=static_folder,
plugins=Config.get_plugins(), backends=Config.get_backends(), plugins=Config.get_plugins(), backends=Config.get_backends(),
has_ssl=http_conf.get('ssl_cert') is not None) has_ssl=http_conf.get('ssl_cert') is not None)

View file

@ -29,7 +29,7 @@ body {
overflow: hidden; overflow: hidden;
// nav height hardcoded, calc won't support either CSS4 nor SASS vars // nav height hardcoded, calc won't support either CSS4 nor SASS vars
@include (height, 100vh - 4.8rem); @include calc(height, '100vh - 4.8rem');
.plugins-container { .plugins-container {
height: inherit; height: inherit;

View file

@ -1,6 +1,6 @@
.media-plugin { .media-plugin {
.results { .results {
@include calc(100% - 16rem); @include calc(height, '100% - 16rem');
overflow: auto; overflow: auto;
.empty { .empty {

View file

@ -61,7 +61,7 @@
flex-direction: row; flex-direction: row;
flex: 0 1 auto; flex: 0 1 auto;
order: 0; order: 0;
@include calc(height, 100% - 10.1rem); @include calc(height, '100% - 10.1rem');
} }
.browser { .browser {
@ -109,7 +109,7 @@
.playlist { .playlist {
.results { .results {
position: relative; // For the dropdown menu position: relative; // For the dropdown menu
@include calc(height, 100% - 5.1rem); @include calc(height, '100% - 5.1rem');
overflow: auto; overflow: auto;
} }
@ -353,7 +353,7 @@
} }
.results { .results {
@include calc(height, 100% - 4.7rem); @include calc(height, '100% - 4.7rem');
} }
} }

View file

@ -0,0 +1,8 @@
mediaHandlers.file = {
icon: 'hdd',
matchesUrl: function(url) {
return url.startsWith('file:///') || url.startsWith('/');
},
};

View file

@ -0,0 +1,8 @@
mediaHandlers.torrent = {
icon: 'magnet',
matchesUrl: function(url) {
return url.startsWith('magnet:?') || url.endsWith('.torrent');
},
};

View file

@ -0,0 +1,10 @@
mediaHandlers.youtube = {
icon: 'youtube',
matchesUrl: function(url) {
return url.startsWith('https://youtube.com/watch?v=') ||
url.startsWith('https://www.youtube.com/watch?v=') ||
url.startsWith('https://youtu.be/');
},
};

View file

@ -1,3 +1,6 @@
// Will be filled by dynamically loading handler scripts
var mediaHandlers = {};
Vue.component('media', { Vue.component('media', {
template: '#tmpl-media', template: '#tmpl-media',
props: ['config','player'], props: ['config','player'],
@ -14,11 +17,7 @@ Vue.component('media', {
computed: { computed: {
types: function() { types: function() {
return { return mediaHandlers;
file: {},
torrent: {},
youtube: {},
};
}, },
}, },
@ -32,6 +31,17 @@ Vue.component('media', {
onResultsReady: function(results) { onResultsReady: function(results) {
this.loading.results = false; this.loading.results = false;
for (var i=0; i < results.length; i++) {
results[i].handler = {};
for (const hndl of Object.values(mediaHandlers)) {
if (hndl.matchesUrl(results[i].url)) {
results[i].handler = hndl;
}
}
}
this.results = results; this.results = results;
}, },
}, },

View file

@ -3,6 +3,10 @@
{% include 'plugins/media/results.html' %} {% include 'plugins/media/results.html' %}
{% include 'plugins/media/item.html' %} {% include 'plugins/media/item.html' %}
{% for script in utils.search_directory(static_folder + '/js/plugins/media/handlers', 'js', recursive=True) %}
<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/media/handlers/' + script) }}"></script>
{% endfor %}
<script type="text/x-template" id="tmpl-media"> <script type="text/x-template" id="tmpl-media">
<div class="plugin media-plugin"> <div class="plugin media-plugin">
<media-search :bus="bus" <media-search :bus="bus"

View file

@ -2,6 +2,7 @@
<script type="text/x-template" id="tmpl-media-item"> <script type="text/x-template" id="tmpl-media-item">
<div class="media-item"> <div class="media-item">
<i :class="'fa fa-' + item.handler.icon" v-if="item.handler.length">&nbsp; </i>
<span v-text="item.title"></span> <span v-text="item.title"></span>
</div> </div>
</script> </script>