From 3a3637d3d7c94b18b15cf04df5bbe6b16b3037ae Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Sat, 15 Jun 2019 00:51:48 +0200 Subject: [PATCH] Fixed calc mixin and introduced media handlers for webpanel media plugin --- platypush/backend/http/app/routes/index.py | 3 ++- .../static/css/source/webpanel/index.scss | 2 +- .../webpanel/plugins/media/results.scss | 2 +- .../webpanel/plugins/music.mpd/index.scss | 6 +++--- .../static/js/plugins/media/handlers/file.js | 8 ++++++++ .../js/plugins/media/handlers/torrent.js | 8 ++++++++ .../js/plugins/media/handlers/youtube.js | 10 ++++++++++ .../http/static/js/plugins/media/index.js | 20 ++++++++++++++----- .../http/templates/plugins/media/index.html | 4 ++++ .../http/templates/plugins/media/item.html | 1 + 10 files changed, 53 insertions(+), 11 deletions(-) create mode 100644 platypush/backend/http/static/js/plugins/media/handlers/file.js create mode 100644 platypush/backend/http/static/js/plugins/media/handlers/torrent.js create mode 100644 platypush/backend/http/static/js/plugins/media/handlers/youtube.js diff --git a/platypush/backend/http/app/routes/index.py b/platypush/backend/http/app/routes/index.py index 475c7eb575..3fc343183c 100644 --- a/platypush/backend/http/app/routes/index.py +++ b/platypush/backend/http/app/routes/index.py @@ -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) diff --git a/platypush/backend/http/static/css/source/webpanel/index.scss b/platypush/backend/http/static/css/source/webpanel/index.scss index 4fd6eb8ce9..f4784bc297 100644 --- a/platypush/backend/http/static/css/source/webpanel/index.scss +++ b/platypush/backend/http/static/css/source/webpanel/index.scss @@ -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; diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss b/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss index 00233cf96e..981a1a742f 100644 --- a/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss +++ b/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss @@ -1,6 +1,6 @@ .media-plugin { .results { - @include calc(100% - 16rem); + @include calc(height, '100% - 16rem'); overflow: auto; .empty { diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss b/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss index c1164f90ef..58081b4f63 100644 --- a/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss +++ b/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss @@ -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'); } } diff --git a/platypush/backend/http/static/js/plugins/media/handlers/file.js b/platypush/backend/http/static/js/plugins/media/handlers/file.js new file mode 100644 index 0000000000..475f8a025d --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media/handlers/file.js @@ -0,0 +1,8 @@ +mediaHandlers.file = { + icon: 'hdd', + + matchesUrl: function(url) { + return url.startsWith('file:///') || url.startsWith('/'); + }, +}; + diff --git a/platypush/backend/http/static/js/plugins/media/handlers/torrent.js b/platypush/backend/http/static/js/plugins/media/handlers/torrent.js new file mode 100644 index 0000000000..43f9608cdd --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media/handlers/torrent.js @@ -0,0 +1,8 @@ +mediaHandlers.torrent = { + icon: 'magnet', + + matchesUrl: function(url) { + return url.startsWith('magnet:?') || url.endsWith('.torrent'); + }, +}; + diff --git a/platypush/backend/http/static/js/plugins/media/handlers/youtube.js b/platypush/backend/http/static/js/plugins/media/handlers/youtube.js new file mode 100644 index 0000000000..820b5e3578 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/media/handlers/youtube.js @@ -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/'); + }, +}; + diff --git a/platypush/backend/http/static/js/plugins/media/index.js b/platypush/backend/http/static/js/plugins/media/index.js index a850bf4271..2ba800be8a 100644 --- a/platypush/backend/http/static/js/plugins/media/index.js +++ b/platypush/backend/http/static/js/plugins/media/index.js @@ -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; }, }, diff --git a/platypush/backend/http/templates/plugins/media/index.html b/platypush/backend/http/templates/plugins/media/index.html index bb3587a6c1..a628e0bee2 100644 --- a/platypush/backend/http/templates/plugins/media/index.html +++ b/platypush/backend/http/templates/plugins/media/index.html @@ -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) %} + +{% endfor %} +