Merge branch 'development' of https://github.com/5G-MAG/rt-wui into main

� Conflicts:
�	README.md

.gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+#Webstorm
+.idea

README.md

@@ -1,50 +1,10 @@
-# Installation guide
-Installation of 5G-MAG Reference Tools *Webinterface* consists of 4 Steps:
-1. Install dependencies
-2. Building the *Webinterface*
-3. Post installation configuration
-4. Run the *Webinterface*
+# rt-wui
 
-> The build was tested and verified on Ubuntu 20.04 LTS (64 bit).
+The 5G-MAG Reference Tools Webinterface (rt-wui) provides an optional graphical webinterface with a control display for
+each 5G-MAG Reference Tools process (MBMS Modem, MBMS Middleware, Application). Its main purpose is to collect and
+display useful information from the MBMS Modem, MBMS Middleware and Application Process. It also enables use cases where
+the 5G-MAG Reference Tools can be used for simple measurements (e.g., mobile measurements) or as a standalone device (
+e.g., set-top box, mobile phone/tablet showcase).
 
-## Step 1: Install dependencies
-For the webinterface an additional package to the dependencies in *MBMS Modem* (see [here](https://github.com/5G-MAG/rt-mbms-modem#readme)) has to be installed for building:
-````
-sudo apt update
-sudo apt install npm nginx
-````
-
-## Step 2: Building the *Webinterface*
-### 2.1 Getting the source code
-````
-cd ~
-git clone https://github.com/5G-MAG/rt-wui
-````
-
-### 2.2 Installing
-````
-cd rt-wui
-npm install 
-````
-
-## Step 3: Post installation configuration
-As a last step you have to enable the nginx site, to allow requests to the 5G-MAG Reference Tools Webinterface over http.
-
-### 3.1 Creating a symbolic link
-Change to the sites-enabled directory and create a symbolic link from the rt-wui file in sites-available. After that, delete the default sym link:
-
-````
-cd /etc/nginx/sites-enabled
-sudo ln -s ../sites-available/5gmag-rt-wui 5gmag-rt-wui
-sudo rm default
-````
-
-### 3.2 Restart and enable autostart for nginx
-After creating the symbolic links, nginx has to be restarted. To always have the Webinterface available at startup, you can enable autostart via systemctl:
-````
-sudo systemctl restart nginx.service
-sudo systemctl enable nginx.service
-````
-
-## Step 4: Run the *Webinterface*
-After installing, make sure to follow the instructions in the *Documentation and Architecture* repository to [run the *5G-MAG Reference Tools Webinterface*](https://github.com/5G-MAG/Documentation-and-Architecture/wiki/Webinterface#Run-the-Webinterface).
+**A detailed overview and the installation instructions can be found in
+our [Wiki](https://github.com/5G-MAG/Documentation-and-Architecture/wiki/Webinterface).**

app/assets/js/application.js

@@ -24,6 +24,11 @@ function playDash(manifest_url)
   video.muted = true;
   video.dash = dashjs.MediaPlayer().create();
   video.dash.initialize(video, manifest_url, true);
+  video.dash.updateSettings({
+    debug: {
+      logLevel: 4
+    }
+  })
 }
 
 function stop()
@@ -59,9 +64,6 @@ $(function() {
   let manifest = vi.data("manifest");
   let mp = vi.data("player");
   let tmgi = vi.data("tmgi");
-  if (tmgi) {
-    autodetectFormat(tmgi);
-  }
 
   if (manifest && mp) {
     $("#src-url").val(manifest);
@@ -75,6 +77,10 @@ $(function() {
     }
   }
 
+  if (tmgi) {
+    autodetectFormat(tmgi);
+  }
+
   $("#play-btn").click( function() {
     stop();
     let player = $("#player-select").val();

app/assets/js/middleware.js

@@ -1,31 +1,41 @@
 function human_file_size(size) {
-    var i = Math.floor( Math.log(size) / Math.log(1024) );
-    return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+  var i = Math.floor(Math.log(size) / Math.log(1024));
+  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
 };
 
-function poll(){
+function poll() {
   $.get("/api/mw/files")
-    .done( function(data, textStatus, xhr){
+    .done(function (data, textStatus, xhr) {
       $("#middleware-running").show();
       $("#middleware-not-running").hide();
       let files = JSON.parse(data);
       files.sort((a, b) => (a.age > b.age) ? 1 : -1)
       let tb = $("#mw-files-tbody");
       tb.empty();
       let total_size = 0;
-      for(let file of files) {
+      let dashManifestUrl = null;
+      let hlsManifestUrl = null;
+      for (let file of files) {
         let row = $("<tr>");
         row.append($("<td>").text(file.age));
         row.append($("<td>").text(file.tmgi));
-        row.append($("<td>").html("<a target='_blank' href='/f/" + file.tmgi + "/" + file.location + "'>" + file.location + "</a>"));
+        let requiredSlash = file.location.charAt(0) === '/' ? '' : '/';
+        let url = '/f/' + file.tmgi + requiredSlash + file.location;
+        row.append($("<td>").html("<a target='_blank' href=" + url + ">" + file.location + "</a>"));
         row.append($("<td>").text(human_file_size(file.content_length)));
         row.append($("<td>").text(file.access_count));
-        tb.append(row);  
+        tb.append(row);
         total_size += file.content_length;
+
+        if (file.location && file.location.indexOf(".mpd") !== -1) {
+          dashManifestUrl = url;
+        } else if (file.location && file.location.indexOf("index.m3u8") !== -1) {
+          hlsManifestUrl = url;
+        }
       }
       $("#total-cache-size").text(human_file_size(total_size) + " total");
 
-      $.get("/api/mw/services", function(data){
+      $.get("/api/mw/services", function (data) {
         if (window.mw_services && window.mw_services == data) {
           return;
         }
@@ -34,7 +44,7 @@ function poll(){
         console.log(services);
         let cont = $("#mw-services");
         cont.empty();
-        for(let service of services) {
+        for (let service of services) {
           console.log(service);
           let row = $("<div class='row m-3'>");
           let col = $("<div class='col-lg-12'>");
@@ -49,15 +59,21 @@ function poll(){
           p = $("<p class='mb-0'>").html("Stream multicast: <strong>" + service.stream_mcast + "</strong>");
           box.append(p);
           let url = "";
-          if (service.stream_type=="FLUTE/UDP") {
-            url = "/application?s="+service.stream_tmgi;
+          if (service.stream_type == "FLUTE/UDP") {
+            url = "/application?s=" + service.stream_tmgi;
+            if (dashManifestUrl) {
+              url += "&m=" + dashManifestUrl + "&p=dash";
+            }
+            else if (hlsManifestUrl) {
+              url += "&m=" + hlsManifestUrl + "&p=hls";
+            }
             let stmgi = parseInt(service.stream_tmgi, 16);
             p = $("<p class='mb-0'>").html("Stream TMGI: <strong>0x" + stmgi.toString(16) + "</strong>");
             box.append(p);
           } else {
-            url = "udp://@"+service.stream_mcast;
+            url = "udp://@" + service.stream_mcast;
           }
-          let pa = $("<a href='"+url+"'>");
+          let pa = $("<a href='" + url + "'>");
           let pb = $("<button class='bg-dark play-button'>").html("▷");
           pa.append(pb);
           box.append(pa);
@@ -69,13 +85,13 @@ function poll(){
         }
       });
     })
-    .fail( function(data, textStatus, xhr){
+    .fail(function (data, textStatus, xhr) {
       $("#middleware-running").hide();
       $("#middleware-not-running").show();
     });
 }
 
-$(function() {
+$(function () {
   $("#middleware-running").hide();
   window.selected_mch = 0;
   setInterval(poll, 300);

package.json

@@ -1,14 +1,14 @@
 {
   "name": "rt-wui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Shared web interface for the 5G-MAG processes: modem and middleware",
   "main": "app.js",
   "dependencies": {
     "@popperjs/core": "^2.9.2",
     "bootstrap": "^4.6.0",
     "co": "^4.6.0",
     "cors": "^2.8.5",
-    "dashjs": "^4.0.1",
+    "dashjs": "^4.4.0",
     "ejs": "^3.1.6",
     "express": "^4.17.1",
     "express-ejs-layouts": "^2.5.0",