Dashboard for 4 streams

package-lock.json

@@ -9,7 +9,7 @@
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.2.13.tgz",
       "integrity": "sha1-5fHzkoxtlf2WVYw27D2dDeSm7Oo=",
       "requires": {
-        "mime-types": "2.1.18",
+        "mime-types": "~2.1.6",
         "negotiator": "0.5.3"
       }
     },
@@ -33,7 +33,7 @@
       "resolved": "https://registry.npmjs.org/async/-/async-2.0.1.tgz",
       "integrity": "sha1-twnMAoCpw28J9FNr6CPIOKkEniU=",
       "requires": {
-        "lodash": "4.17.10"
+        "lodash": "^4.8.0"
       }
     },
     "backo2": {
@@ -85,8 +85,8 @@
       "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-1.2.1.tgz",
       "integrity": "sha1-N75dNuHgZJIiHmjUdLGsWOUQy9c=",
       "requires": {
-        "bindings": "1.2.1",
+        "bindings": "1.2.x",
-        "nan": "2.10.0"
+        "nan": "^2.0.5"
       }
     },
     "callsite": {
@@ -172,7 +172,7 @@
         "cookie": "0.3.1",
         "debug": "2.3.3",
         "engine.io-parser": "1.3.2",
-        "ws": "1.1.5"
+        "ws": "~1.1.5"
       },
       "dependencies": {
         "accepts": {
@@ -180,7 +180,7 @@
           "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.3.tgz",
           "integrity": "sha1-w8p0NJOGSMPg2cHjKN1otiLChMo=",
           "requires": {
-            "mime-types": "2.1.18",
+            "mime-types": "~2.1.11",
             "negotiator": "0.6.1"
           }
         },
@@ -223,7 +223,7 @@
         "parsejson": "0.0.3",
         "parseqs": "0.0.5",
         "parseuri": "0.0.5",
-        "ws": "1.1.5",
+        "ws": "~1.1.5",
         "xmlhttprequest-ssl": "1.5.3",
         "yeast": "0.1.2"
       },
@@ -289,30 +289,30 @@
       "resolved": "https://registry.npmjs.org/express/-/express-4.12.4.tgz",
       "integrity": "sha1-j+wlECVbxrLlgQfEgjnA+jB8GqI=",
       "requires": {
-        "accepts": "1.2.13",
+        "accepts": "~1.2.7",
         "content-disposition": "0.5.0",
-        "content-type": "1.0.4",
+        "content-type": "~1.0.1",
         "cookie": "0.1.2",
         "cookie-signature": "1.0.6",
-        "debug": "2.2.0",
+        "debug": "~2.2.0",
-        "depd": "1.0.1",
+        "depd": "~1.0.1",
         "escape-html": "1.0.1",
-        "etag": "1.6.0",
+        "etag": "~1.6.0",
         "finalhandler": "0.3.6",
         "fresh": "0.2.4",
         "merge-descriptors": "1.0.0",
-        "methods": "1.1.2",
+        "methods": "~1.1.1",
-        "on-finished": "2.2.1",
+        "on-finished": "~2.2.1",
-        "parseurl": "1.3.2",
+        "parseurl": "~1.3.0",
         "path-to-regexp": "0.1.3",
-        "proxy-addr": "1.0.10",
+        "proxy-addr": "~1.0.8",
         "qs": "2.4.2",
-        "range-parser": "1.0.3",
+        "range-parser": "~1.0.2",
         "send": "0.12.3",
-        "serve-static": "1.9.3",
+        "serve-static": "~1.9.3",
-        "type-is": "1.6.16",
+        "type-is": "~1.6.2",
         "utils-merge": "1.0.0",
-        "vary": "1.0.1"
+        "vary": "~1.0.0"
       }
     },
     "extend": {
@@ -325,9 +325,9 @@
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.3.6.tgz",
       "integrity": "sha1-2vnEFhsbBuABRmsUEd/baXO+E4s=",
       "requires": {
-        "debug": "2.2.0",
+        "debug": "~2.2.0",
         "escape-html": "1.0.1",
-        "on-finished": "2.2.1"
+        "on-finished": "~2.2.1"
       }
     },
     "forwarded": {
@@ -385,38 +385,43 @@
     },
     "kurento-client": {
       "version": "github:Kurento/kurento-client-js#efb160e85a4b1f376307fe1979c9fbcb5f978393",
+      "from": "kurento-client@github:Kurento/kurento-client-js#efb160e85a4b1f376307fe1979c9fbcb5f978393",
       "requires": {
-        "async": "2.0.1",
+        "async": "~2.0.1",
         "error-tojson": "0.0.1",
-        "es6-promise": "4.2.4",
+        "es6-promise": "^4.0.5",
-        "extend": "3.0.1",
+        "extend": "^3.0.0",
-        "inherits": "2.0.3",
+        "inherits": "~2.0.3",
         "kurento-client-core": "github:Kurento/kurento-client-core-js#2160f8e6938f138b52b72a5c5c354d1e5fce1ca0",
         "kurento-client-elements": "github:Kurento/kurento-client-elements-js#cbd1ff67fbf0faddc9f6f266bb33e449bc9e1f81",
         "kurento-client-filters": "github:Kurento/kurento-client-filters-js#51308da53e432a2db9559dcdb308d87951417bf0",
         "kurento-jsonrpc": "github:Kurento/kurento-jsonrpc-js#7d07108feb18dae90b4d08567afd28db0b2138a6",
-        "minimist": "1.2.0",
+        "minimist": "^1.2.0",
         "promise": "7.1.1",
         "promisecallback": "0.0.4",
         "reconnect-ws": "github:KurentoForks/reconnect-ws#f287385d75861654528c352e60221f95c9209f8a"
       }
     },
     "kurento-client-core": {
-      "version": "github:Kurento/kurento-client-core-js#2160f8e6938f138b52b72a5c5c354d1e5fce1ca0"
+      "version": "github:Kurento/kurento-client-core-js#2160f8e6938f138b52b72a5c5c354d1e5fce1ca0",
+      "from": "kurento-client-core@github:Kurento/kurento-client-core-js#2160f8e6938f138b52b72a5c5c354d1e5fce1ca0"
     },
     "kurento-client-elements": {
-      "version": "github:Kurento/kurento-client-elements-js#cbd1ff67fbf0faddc9f6f266bb33e449bc9e1f81"
+      "version": "github:Kurento/kurento-client-elements-js#cbd1ff67fbf0faddc9f6f266bb33e449bc9e1f81",
+      "from": "kurento-client-elements@github:Kurento/kurento-client-elements-js#cbd1ff67fbf0faddc9f6f266bb33e449bc9e1f81"
     },
     "kurento-client-filters": {
-      "version": "github:Kurento/kurento-client-filters-js#51308da53e432a2db9559dcdb308d87951417bf0"
+      "version": "github:Kurento/kurento-client-filters-js#51308da53e432a2db9559dcdb308d87951417bf0",
+      "from": "kurento-client-filters@github:Kurento/kurento-client-filters-js#51308da53e432a2db9559dcdb308d87951417bf0"
     },
     "kurento-jsonrpc": {
       "version": "github:Kurento/kurento-jsonrpc-js#7d07108feb18dae90b4d08567afd28db0b2138a6",
+      "from": "kurento-jsonrpc@github:Kurento/kurento-jsonrpc-js#7d07108feb18dae90b4d08567afd28db0b2138a6",
       "requires": {
-        "bufferutil": "1.2.1",
+        "bufferutil": "1.2.x",
-        "inherits": "2.0.3",
+        "inherits": "^2.0.1",
-        "utf-8-validate": "1.2.2",
+        "utf-8-validate": "1.2.x",
-        "ws": "1.1.5"
+        "ws": "^1.1.1"
       }
     },
     "lodash": {
@@ -454,7 +459,7 @@
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
       "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
       "requires": {
-        "mime-db": "1.33.0"
+        "mime-db": "~1.33.0"
       }
     },
     "minimist": {
@@ -505,7 +510,7 @@
       "resolved": "https://registry.npmjs.org/parsejson/-/parsejson-0.0.3.tgz",
       "integrity": "sha1-q343WfIJ7OmUN5c/fQ8fZK4OZKs=",
       "requires": {
-        "better-assert": "1.0.2"
+        "better-assert": "~1.0.0"
       }
     },
     "parseqs": {
@@ -513,7 +518,7 @@
       "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
       "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=",
       "requires": {
-        "better-assert": "1.0.2"
+        "better-assert": "~1.0.0"
       }
     },
     "parseuri": {
@@ -521,7 +526,7 @@
       "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz",
       "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=",
       "requires": {
-        "better-assert": "1.0.2"
+        "better-assert": "~1.0.0"
       }
     },
     "parseurl": {
@@ -539,7 +544,7 @@
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz",
       "integrity": "sha1-SJZUxpJha4qlWwck+oCbt9tJxb8=",
       "requires": {
-        "asap": "2.0.6"
+        "asap": "~2.0.3"
       }
     },
     "promisecallback": {
@@ -552,7 +557,7 @@
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-1.0.10.tgz",
       "integrity": "sha1-DUCoL4Afw1VWfS7LZe/j8HfxIcU=",
       "requires": {
-        "forwarded": "0.1.2",
+        "forwarded": "~0.1.0",
         "ipaddr.js": "1.0.5"
       }
     },
@@ -568,15 +573,17 @@
     },
     "reconnect-core": {
       "version": "github:KurentoForks/reconnect-core#921d43e91578abb2fb2613f585c010c1939cf734",
+      "from": "reconnect-core@github:KurentoForks/reconnect-core#921d43e91578abb2fb2613f585c010c1939cf734",
       "requires": {
-        "backoff": "2.3.0"
+        "backoff": "~2.3.0"
       }
     },
     "reconnect-ws": {
       "version": "github:KurentoForks/reconnect-ws#f287385d75861654528c352e60221f95c9209f8a",
+      "from": "reconnect-ws@github:KurentoForks/reconnect-ws#f287385d75861654528c352e60221f95c9209f8a",
       "requires": {
         "reconnect-core": "github:KurentoForks/reconnect-core#921d43e91578abb2fb2613f585c010c1939cf734",
-        "websocket-stream": "0.5.1"
+        "websocket-stream": "~0.5.1"
       }
     },
     "send": {
@@ -584,16 +591,16 @@
       "resolved": "https://registry.npmjs.org/send/-/send-0.12.3.tgz",
       "integrity": "sha1-zRLcWP3iHk+RkCs5sv2gWnptm9w=",
       "requires": {
-        "debug": "2.2.0",
+        "debug": "~2.2.0",
-        "depd": "1.0.1",
+        "depd": "~1.0.1",
         "destroy": "1.0.3",
         "escape-html": "1.0.1",
-        "etag": "1.6.0",
+        "etag": "~1.6.0",
         "fresh": "0.2.4",
         "mime": "1.3.4",
         "ms": "0.7.1",
-        "on-finished": "2.2.1",
+        "on-finished": "~2.2.1",
-        "range-parser": "1.0.3"
+        "range-parser": "~1.0.2"
       }
     },
     "serve-static": {
@@ -602,7 +609,7 @@
       "integrity": "sha1-X42gcyOtOF/z3FQfGnkXsuQ261c=",
       "requires": {
         "escape-html": "1.0.1",
-        "parseurl": "1.3.2",
+        "parseurl": "~1.3.0",
         "send": "0.12.3",
         "utils-merge": "1.0.0"
       }
@@ -613,7 +620,7 @@
       "integrity": "sha1-L37O3DORvy1cc+KR/iM+bjTU3QA=",
       "requires": {
         "debug": "2.3.3",
-        "engine.io": "1.8.5",
+        "engine.io": "~1.8.4",
         "has-binary": "0.1.7",
         "object-assign": "4.1.0",
         "socket.io-adapter": "0.5.0",
@@ -669,7 +676,7 @@
         "component-bind": "1.0.0",
         "component-emitter": "1.2.1",
         "debug": "2.3.3",
-        "engine.io-client": "1.8.5",
+        "engine.io-client": "~1.8.4",
         "has-binary": "0.1.7",
         "indexof": "0.0.1",
         "object-component": "0.0.3",
@@ -730,7 +737,7 @@
       "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
       "requires": {
         "media-typer": "0.3.0",
-        "mime-types": "2.1.18"
+        "mime-types": "~2.1.18"
       }
     },
     "ultron": {
@@ -743,8 +750,8 @@
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-1.2.2.tgz",
       "integrity": "sha1-i7hxpHQeCFxwSHynrNvX1tNgKes=",
       "requires": {
-        "bindings": "1.2.1",
+        "bindings": "~1.2.1",
-        "nan": "2.4.0"
+        "nan": "~2.4.0"
       },
       "dependencies": {
         "nan": {
@@ -770,8 +777,8 @@
       "integrity": "sha1-YizR8FZvuEzgpNb4VFJvPcTXDkg=",
       "requires": {
         "isbuffer": "0.0.0",
-        "through": "2.3.8",
+        "through": "~2.3.4",
-        "ws": "0.4.32"
+        "ws": "~0.4.30"
       },
       "dependencies": {
         "nan": {
@@ -784,10 +791,10 @@
           "resolved": "https://registry.npmjs.org/ws/-/ws-0.4.32.tgz",
           "integrity": "sha1-eHphVEFPPJntg8V3IVOyD+sM7DI=",
           "requires": {
-            "commander": "2.1.0",
+            "commander": "~2.1.0",
-            "nan": "1.0.0",
+            "nan": "~1.0.0",
-            "options": "0.0.6",
+            "options": ">=0.0.5",
-            "tinycolor": "0.0.1"
+            "tinycolor": "0.x"
           }
         }
       }
@@ -797,8 +804,8 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.5.tgz",
       "integrity": "sha512-o3KqipXNUdS7wpQzBHSe180lBGO60SoK0yVo3CYJgb2MkobuWuBX6dhkYP5ORCLd55y+SaflMOV5fqAB53ux4w==",
       "requires": {
-        "options": "0.0.6",
+        "options": ">=0.0.5",
-        "ultron": "1.0.2"
+        "ultron": "1.0.x"
       }
     },
     "wtf-8": {

static/css/dashboard.css

@@ -0,0 +1,2 @@
+.dashboard{min-height:100vh;min-width:100%}.dashboard--elem{position:relative;border:1px dashed gainsboro;width:50%;float:left;height:50vh;background-image:url('../img/dragdrop.png');background-repeat:no-repeat;background-position:center center;background-size:100px 100px}.dashboard--elem.small{display:none}.dashboard--elem.small--panel{display:none}.dashboard--elem.fullscreen{display:block !important;height:100vh !important;width:100% !important}.dashboard--elem--panel{z-index:999;position:absolute;left:15px;top:15px;background-color:black;border-radius:15px;color:white;text-align:center;padding:10px}.dashboard--elem--panel span{cursor:pointer;margin-left:10px}.dashboard--elem--panel span:first-child{margin-left:0}
+/*# sourceMappingURL=dashboard.css.map */

static/css/dashboard.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dashboard.less"],"names":[],"mappings":"AAEA,WACI,iBACA,cAAA,CACA,iBACI,kBACA,4BACA,UACA,WACA,YACA,4CACA,4BACA,kCACA,2BAAA,CAEA,uBACI,YAAA,CACA,8BACI,YAAA,CAIR,4BACI,yBACA,wBACA,qBAAA,CAGJ,wBACI,YACA,kBACA,UACA,SACA,uBACA,mBACA,YACA,kBACA,YAAA,CATJ,6BAcQ,eACA,gBAAA,CAJA,yCACI,aAAA,CAAA","file":"to.css"}

static/css/dashboard.less

@@ -0,0 +1,49 @@
+//autoprefixer: true, sourceMap: true, compress: true
+
+.dashboard {
+    min-height: 100vh;
+    min-width: 100%;
+    &--elem{
+        position: relative;
+        border: 1px dashed gainsboro;
+        width: 50%;
+        float: left;
+        height: 50vh;
+        background-image: url('../img/dragdrop.png');
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100px 100px;
+        
+        &.small {
+            display: none;
+            &--panel{
+                display: none;
+            }
+        }
+        
+        &.fullscreen {
+            display: block!important;
+            height: 100vh!important;
+            width: 100%!important;
+        }
+        
+        &--panel{
+            z-index: 999;
+            position: absolute;
+            left: 15px;
+            top: 15px;
+            background-color: black;
+            border-radius: 15px;
+            color:white;
+            text-align: center;
+            padding: 10px;
+            span{
+                &:first-child{
+                    margin-left: 0px;
+                }
+                cursor: pointer;
+                margin-left: 10px;
+            }
+        }
+    }
+}

static/dashboard.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="cache-control" content="no-cache">
+    <meta http-equiv="pragma" content="no-cache">
+    <meta http-equiv="expires" content="0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+
+    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/dashboard.css">
+    <script src="js/dashboard.js"></script>
+</head>
+<body>
+    <div class="dashboard">
+        <div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
+        <div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
+        <div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
+        <div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
+    </div>
+</body>
+</html>

static/js/dashboard.js

@@ -0,0 +1,81 @@
+$( document ).ready(() => {
+
+  var counter = 0;
+
+  function generatePanel(i) {
+    return '<div class="dashboard--elem--panel">' +
+        '<span id="full' + i + '"><i class="glyphicon glyphicon-fullscreen"></i></span> ' +
+        '<span id="reload' + i +'"><i class="glyphicon glyphicon-repeat"></i></span>' +
+        '<span id="close' + i + '"><i class="glyphicon glyphicon-remove"></i></span> ' +
+        '</div>';
+  }
+
+  // add event listeners
+  function bindEvents(id) {
+    $( '#close' + id)[0].addEventListener('click', streamClose);
+    $( '#reload' + id)[0].addEventListener('click', streamReload);
+    $( '#full' + id)[0].addEventListener('click', streamFull);
+  }
+
+  // close frame with stream
+  function streamClose(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    $(this)[0].removeEventListener('click', streamClose);
+    let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
+    parent.empty();
+    if(parent.hasClass('fullscreen')){
+      parent.removeClass('fullscreen');
+      $('.dashboard--elem').removeClass('hide');
+    }
+  }
+
+  // reload stream
+  function streamReload(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    let elem = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
+    let idStr = $(this).attr('id');
+    let id = parseInt(idStr.match(/(\d+)$/)[0]);
+    let html = elem.html();
+    elem.empty();
+    elem.html(html);
+
+    bindEvents(id);
+  }
+
+  function streamFull(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
+    if(parent.hasClass('fullscreen')){
+      parent.removeClass('fullscreen');
+      $('.dashboard--elem').removeClass('hide');
+    } else {
+      $('.dashboard--elem').addClass('hide');
+      parent.addClass('fullscreen');
+    }
+  }
+
+
+  $('.dashboard--elem').on('drop', function (e) {
+    console.log('drop');
+    e.preventDefault();
+    let target = e.target;
+    let url = e.originalEvent.dataTransfer.getData('URL');
+
+    if(!url || url.indexOf('https://gto.to/?r=') === -1){
+      return false;
+    }
+    $(target).empty();
+    let panel = generatePanel(counter);
+    $( this ).append( panel + '<iframe src="' + url + '" width="100%" height="100%" align="center">\n' +
+        '    Iframe is not supported\n' +
+        ' </iframe>' );
+
+    bindEvents(counter);
+    counter++;
+    return false;
+  });
+
+});