Fixed calc mixin and introduced media handlers for webpanel media plugin

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)
 

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;

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 {

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');
         }
     }
 

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('/');
+    },
+};
+

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');
+    },
+};
+

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/');
+    },
+};
+

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 {
+            return mediaHandlers;
-                file: {},
-                torrent: {},
-                youtube: {},
-            };
         },
     },
 
@@ -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;
         },
     },

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) %}
+<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"

platypush/backend/http/templates/plugins/media/item.html

@@ -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">&nbsp; </i>
         <span v-text="item.title"></span>
     </div>
 </script>