forked from platypush/platypush
Fixed calc mixin and introduced media handlers for webpanel media plugin
This commit is contained in:
parent
fc5ea429d2
commit
3a3637d3d7
10 changed files with 53 additions and 11 deletions
|
@ -2,7 +2,7 @@ import os
|
|||
|
||||
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, \
|
||||
get_websocket_port
|
||||
|
||||
|
@ -58,6 +58,7 @@ def index():
|
|||
scripts=enabled_scripts, styles=enabled_styles,
|
||||
utils=HttpUtils, token=Config.get('token'),
|
||||
websocket_port=get_websocket_port(),
|
||||
template_folder=template_folder, static_folder=static_folder,
|
||||
plugins=Config.get_plugins(), backends=Config.get_backends(),
|
||||
has_ssl=http_conf.get('ssl_cert') is not None)
|
||||
|
||||
|
|
|
@ -29,7 +29,7 @@ body {
|
|||
overflow: hidden;
|
||||
|
||||
// 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 {
|
||||
height: inherit;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.media-plugin {
|
||||
.results {
|
||||
@include calc(100% - 16rem);
|
||||
@include calc(height, '100% - 16rem');
|
||||
overflow: auto;
|
||||
|
||||
.empty {
|
||||
|
|
|
@ -61,7 +61,7 @@
|
|||
flex-direction: row;
|
||||
flex: 0 1 auto;
|
||||
order: 0;
|
||||
@include calc(height, 100% - 10.1rem);
|
||||
@include calc(height, '100% - 10.1rem');
|
||||
}
|
||||
|
||||
.browser {
|
||||
|
@ -109,7 +109,7 @@
|
|||
.playlist {
|
||||
.results {
|
||||
position: relative; // For the dropdown menu
|
||||
@include calc(height, 100% - 5.1rem);
|
||||
@include calc(height, '100% - 5.1rem');
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
@ -353,7 +353,7 @@
|
|||
}
|
||||
|
||||
.results {
|
||||
@include calc(height, 100% - 4.7rem);
|
||||
@include calc(height, '100% - 4.7rem');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
mediaHandlers.file = {
|
||||
icon: 'hdd',
|
||||
|
||||
matchesUrl: function(url) {
|
||||
return url.startsWith('file:///') || url.startsWith('/');
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
mediaHandlers.torrent = {
|
||||
icon: 'magnet',
|
||||
|
||||
matchesUrl: function(url) {
|
||||
return url.startsWith('magnet:?') || url.endsWith('.torrent');
|
||||
},
|
||||
};
|
||||
|
|
@ -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/');
|
||||
},
|
||||
};
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
// Will be filled by dynamically loading handler scripts
|
||||
var mediaHandlers = {};
|
||||
|
||||
Vue.component('media', {
|
||||
template: '#tmpl-media',
|
||||
props: ['config','player'],
|
||||
|
@ -14,11 +17,7 @@ Vue.component('media', {
|
|||
|
||||
computed: {
|
||||
types: function() {
|
||||
return {
|
||||
file: {},
|
||||
torrent: {},
|
||||
youtube: {},
|
||||
};
|
||||
return mediaHandlers;
|
||||
},
|
||||
},
|
||||
|
||||
|
@ -32,6 +31,17 @@ Vue.component('media', {
|
|||
|
||||
onResultsReady: function(results) {
|
||||
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;
|
||||
},
|
||||
},
|
||||
|
|
|
@ -3,6 +3,10 @@
|
|||
{% include 'plugins/media/results.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">
|
||||
<div class="plugin media-plugin">
|
||||
<media-search :bus="bus"
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
<script type="text/x-template" id="tmpl-media-item">
|
||||
<div class="media-item">
|
||||
<i :class="'fa fa-' + item.handler.icon" v-if="item.handler.length"> </i>
|
||||
<span v-text="item.title"></span>
|
||||
</div>
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue