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

5G-MAG · Dec 8, 2022 · 1891623 · 1891623
2 parents f239336 + 7789997
commit 1891623
Show file tree

Hide file tree

Showing 22 changed files with 5,180 additions and 176 deletions.
diff --git a/.gitignore b/.gitignore
@@ -105,3 +105,13 @@ dist
 
 #Webstorm
 .idea
+
+# vim
+[._]*.s[a-v][a-z]
+[._]*.sw[a-p]
+[._]s[a-rt-v][a-z]
+[._]ss[a-gi-z]
+[._]sw[a-p]
+Session.vim
+Sessionx.vim
+.netrwhist
diff --git a/app.js b/app.js
@@ -3,6 +3,7 @@ const express = require('express'),
   routes = require('./app/routes'),
   cors = require('cors'),
   bodyParser = require('body-parser'),
+  sassMiddleware = require('@gompa/node-sass-middleware'),
   app = express();
 
 app.use(expressLayouts);
@@ -13,6 +14,13 @@ app.use(bodyParser.urlencoded({
     extended: true
 }));
 app.use(bodyParser.json());
+app.use(
+  sassMiddleware({
+    src: __dirname + '/app/assets',
+    dest: __dirname + '/public',
+    debug: true 
+  })
+);
 app.use(cors());
 
 app.use(express.static(__dirname + '/node_modules/bootstrap/dist'));
@@ -22,6 +30,8 @@ app.use(express.static(__dirname + '/node_modules/dashjs/dist'));
 app.use(express.static(__dirname + '/node_modules/player-chrome/dist/components'));
 app.use(express.static(__dirname + '/app/assets'));
 app.use(express.static(__dirname + '/public'));
+app.use("/fa", express.static( __dirname + '/node_modules/@fortawesome/fontawesome-free'));
+app.use("/prism", express.static( __dirname + '/node_modules/prismjs'));
 app.use(routes);
 
 const
@@ -37,4 +47,6 @@ global.modem_api = ":3010/modem-api/"
 global.mw_api = ":3020/mw-api/"
 
 app.set('port', process.env.PORT || 3000);
-app.listen(app.get('port'));
+app.listen(app.get('port'), function (payload) {
+    console.log(`Listing on port ${app.get('port')}`);
+});
diff --git a/app/assets/css/application.scss b/app/assets/css/application.scss
@@ -2,8 +2,14 @@
 @import "../../../node_modules/bootstrap/scss/variables";
 @import "../../../node_modules/bootstrap/scss/mixins";
 
+$fa-font-path: "../fa/webfonts";
+@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+
 $body-bg: #222;
 $body-color: #fff; 
+$nav-tabs-link-active-bg: $body-bg;
+$nav-tabs-link-active-color: #fff;
 
 @import "../../../node_modules/bootstrap/scss/bootstrap";
 @import "dashboard" 
diff --git a/app/assets/css/dashboard.scss b/app/assets/css/dashboard.scss
@@ -103,7 +103,7 @@
   }
 }
 
-#gw-services {
+#mw-services {
   .play-button {
     position: absolute;
     right: 8px;
@@ -121,3 +121,101 @@
   font-size: 0.7em;
   font-weight: normal;
 }
+
+
+// Middleware - Service Announcement
+
+.btn-right {
+  position: absolute;
+  right: 15px;
+  display: inline-block;
+  top: 7px;
+}
+.mw-sa-table {
+  width: 100%;
+
+  td.caret-cell {
+    min-width: 30px;
+    text-align: center;
+    font-size: 20px;
+    vertical-align: middle;
+  }
+
+  .prewrap {
+    white-space: pre-wrap;
+  }
+
+  .sa-item-row {
+    cursor: pointer;
+  }
+
+  .sa-item-content-row {
+    display: none;
+  }
+
+  .sa-item-content-cell {
+    white-space: pre-wrap;
+    font-family: Courier, monospace;
+    background: #333;
+  }
+}
+
+.video-container {
+  .video-overlay {
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    #data-source-info {
+      margin-left: 10px;
+      font-size: 30px;
+      font-weight: bold;
+      text-shadow: 0px 0px 2px #000;
+      color: #fff;
+    }
+  }
+}
+
+.service-titles {
+  display: inline-block;
+  height: 50px;
+  line-height: 44px;
+  .service-title {
+    display: inline-block;
+    .service-title-lang {
+      font-size: 12px;
+      font-weight: 200;
+    }
+    &:not(:last-child):after {
+      margin-left: .5em;
+      margin-right: .5em;
+      content: "•";
+      font-weight: 200;
+    }
+  }
+}
+
+.ser-play-link { 
+  position: absolute;
+  right: 30px;
+  display: inline-block;
+  button {
+    width: 50px;
+    height: 50px;
+    color: white;
+  }
+}
+.service-play-cell {
+  vertical-align: middle !important;
+  text-align: center;
+  a {
+    button {
+      width: 50px;
+      height: 50px;
+      color: white;
+    }
+  }
+}
diff --git a/app/assets/js/.application.js.swp b/app/assets/js/.application.js.swp
diff --git a/app/assets/js/application.js b/app/assets/js/application.js
@@ -1,9 +1,28 @@
-function playHls(manifest_url)
-{
+class hls_fragment_loader extends Hls.DefaultConfig.loader {
+  constructor(config) {
+    super(config);
+    var load = this.load.bind(this);
+    this.load = function (context, config, callbacks) {
+      var onSuccess = callbacks.onSuccess;
+      callbacks.onSuccess = function (response, stats, context, networkDetails) {
+        let origin = networkDetails.getResponseHeader("RT-MBMS-MW-File-Origin");
+        $('#data-source-info').html(origin);
+        onSuccess(response, stats, context);
+      };
+      load(context, config, callbacks);
+    };
+  }
+}
+
+function playHls(manifest_url) {
   if (Hls.isSupported()) {
     let video = document.getElementById('video');
     video.muted = true;
-    video.hls = new Hls();
+    video.hls = new Hls({
+      fLoader: hls_fragment_loader,
+      lowLatencyMode: false,
+      fragLoadingRetryDelay: 50
+    });
     video.hls.attachMedia(video);
     video.hls.on(Hls.Events.MEDIA_ATTACHED, function () {
       console.log('video and hls.js are now bound together !');
@@ -18,56 +37,43 @@ function playHls(manifest_url)
   }
 }
 
-function playDash(manifest_url)
-{
+function playDash(manifest_url) {
   let video = document.getElementById('video');
-  video.muted = true;
-  video.dash = dashjs.MediaPlayer().create();
-  video.dash.initialize(video, manifest_url, true);
-  video.dash.updateSettings({
-    debug: {
-      logLevel: 4
-    }
-  })
+  if (!video.dash) {
+    video.muted = true;
+    video.dash = dashjs.MediaPlayer().create();
+    video.dash.initialize(video, null, true);
+    video.dash.updateSettings({
+      debug: {
+        logLevel: 4
+      },
+      streaming: {
+        delay: {
+          liveDelayFragmentCount: 4
+        },
+        retryIntervals: {
+          MediaSegment: 2000
+        }
+      }
+    })
+  }
+  video.dash.attachSource(manifest_url);
 }
 
-function stop()
-{
+function stop() {
   var video = document.getElementById('video');
   video.pause();
   if (video.hls) video.hls.detachMedia(video);
 }
 
-function autodetectFormat(tmgi)
-{
-  let uri = "/f/" + tmgi;
-  let index = uri + "/index.m3u8";
-  $.get(index)
-    .done( function(data, textStatus, xhr){
-      $("#src-url").val(index);
-      $("#player-select").val("hls");
-      playHls(index);
-    })
-    .fail( function(data, textStatus, xhr){
-      index = uri + "/index.mpd";
-      $.get(index)
-        .done( function(data, textStatus, xhr){
-          $("#src-url").val(index);
-          $("#player-select").val("dash");
-          playDash(index);
-        })
-    });
-}
-
-$(function() {
+$(function () {
   let vi = $("#video-info");
   let manifest = vi.data("manifest");
   let mp = vi.data("player");
-  let tmgi = vi.data("tmgi");
 
   if (manifest && mp) {
     $("#src-url").val(manifest);
-    $("#player-select").val(mp);
+    $("#player-select").val(mp.toLowerCase());
     // autoplay
     if (mp == "hls") {
       playHls(manifest);
@@ -77,11 +83,7 @@ $(function() {
     }
   }
 
-  if (tmgi) {
-    autodetectFormat(tmgi);
-  }
-
-  $("#play-btn").click( function() {
+  $("#play-btn").click(function () {
     stop();
     let player = $("#player-select").val();
     if (player == "hls") {