Paella Player with buffered live streams

classes/Conf/class.xoctConfFormGUI.php

@@ -339,6 +339,13 @@ protected function initEventsSection(): void
         $te->setRequired(true);
         $cbs->addSubItem($te);
 
+        $cbs2 = new ilCheckboxInputGUI(
+            $this->parent_gui->txt(PluginConfig::F_LIVESTREAM_BUFFERED),
+            PluginConfig::F_LIVESTREAM_BUFFERED
+        );
+        $cbs2->setInfo($this->parent_gui->txt(PluginConfig::F_LIVESTREAM_BUFFERED . '_info'));
+        $cbs->addSubItem($cbs2);
+
         $ni = new ilNumberInputGUI(
             $this->parent_gui->txt(PluginConfig::F_START_X_MINUTES_BEFORE_LIVE),
             PluginConfig::F_START_X_MINUTES_BEFORE_LIVE

classes/Player/class.xoctPlayerGUI.php

@@ -144,6 +144,8 @@ protected function buildJSConfig(Event $event): stdClass
         $paella_config = $this->paellaConfigService->getEffectivePaellaPlayerUrl();
         $js_config->paella_config_file = $paella_config['url'];
         $js_config->paella_config_livestream_type =  PluginConfig::getConfig(PluginConfig::F_LIVESTREAM_TYPE) ?? 'hls';
+        $js_config->paella_config_livestream_buffered =
+            PluginConfig::getConfig(PluginConfig::F_LIVESTREAM_BUFFERED) ?? false;
         $js_config->paella_config_resources_path = PluginConfig::PAELLA_RESOURCES_PATH;
         $js_config->paella_config_fallback_captions = PluginConfig::getConfig(PluginConfig::F_PAELLA_FALLBACK_CAPTIONS) ?? [];
         $js_config->paella_config_fallback_langs = PluginConfig::getConfig(PluginConfig::F_PAELLA_FALLBACK_LANGS) ?? [] ;

doc/CONFIGURATION.md

@@ -51,6 +51,7 @@ The player can be configured to use streaming URLs. This requires a Wowza stream
 
 ##### Live Streams
 Allow viewing Live Streams, optionally with an on-screen chat during the event. The publication "Live Stream" has to be configured properly for the plugin to recognize live events.
+<b>NOTE:</b> If you are using livestream with buffering capabality, you would need to enable "Buffered Livestream" option, in order to apply correct theme, settings and source format into the paella player, which results in having a paella palyer with progressbar to move back and forth in time and play/pause button during your livestream videos.
 
 ##### Use self-generated streaming URLs
 If this is active, the plugin will generate streaming urls with the given 'Wowza URL', according to this pattern:
@@ -76,6 +77,7 @@ Define the basic configuration of plugin's Paella Player (config.json). You can
 an uploaded file, or a remote URL.
 
 From paella player 7, the plugin uses player themes (by default opencast theme located in ./js/opencast/src/Paella/default_theme/opencast_theme.json) for videos on demand, and a specific livestream theme (located in ./js/opencast/src/Paella/default_theme/opencast_live_theme.json), these themes can also be replaced by a remote URL.
+Based on the settings (buffered livestreams) there is another theme configuration introduced (located in ./js/opencast/src/Paella/default_theme/opencast_live_buffered_theme.json), which has the basic requirements for the paella player to show buffered livestreams.
 
 There is also the possibility to use a preview image as a fallback (located in ./templates/images/default_preview.png), in case opencast could not provide the video's default preview image somehow, this image can also be replaced by a remote URL.
 

js/opencast/src/Paella/config/config.json

@@ -497,6 +497,9 @@
       "margin": 10,
       "textColor": "white",
       "circleColor": "red"
+    },
+    "org.ilias.paella.liveStreamingButtonIndicator": {
+      "enabled": false
     }
   }
 }

js/opencast/src/Paella/default_theme/opencast_live_buffered_theme.json

@@ -0,0 +1,83 @@
+{
+    "styleSheets": [
+        "opencast_theme.css"
+    ],
+    "configOverrides": {
+        "accessibility": {
+            "clickWithSpacebar": false
+        },
+        "progressIndicator": {
+            "showTotal": false,
+            "parentContainer": "progressIndicator",
+            "side": "left",
+            "visible": true,
+            "showHandler": true,
+            "hideHandlerOnMouseOut": false,
+            "showRemainingProgress": false,
+            "inlineMode": false
+        },
+        "videoContainer": {
+            "overPlaybackBar": false,
+            "dynamicLayout": {
+                "landscapeVerticalAlignment": "align-bottom",
+                "portraitHorizontalAlignment": "align-center"
+            }
+        },
+        "plugins": {
+            "es.upv.paella.slideMapProgressBarPlugin": {
+                "enabled": false
+            },
+            "es.upv.paella.playPauseButton": {
+                "enabled": true
+            },"es.upv.paella.customTimeProgressIndicator": {
+                "enabled": false
+            },
+            "es.upv.paella.backwardButtonPlugin": {
+                "enabled": false
+            },
+            "es.upv.paella.forwardButtonPlugin": {
+                "enabled": false
+            },
+            "es.upv.paella.playbackRateButton": {
+                "enabled": false
+            },
+            "es.upv.paella.keyboardShortcutsHelp": {
+                "enabled": false
+            },
+            "es.upv.paella.nextSlideNavigatorButton": {
+                "enabled": false
+            },
+            "es.upv.paella.prevSlideNavigatorButton": {
+                "enabled": false
+            },
+            "es.upv.paella.findCaptionsPlugin": {
+                "enabled": false
+            },
+            "es.upv.paella.liveStreamingProgressIndicator": {
+                "enabled": false
+            },
+            "org.ilias.paella.liveStreamingButtonIndicator": {
+                "enabled": true,
+                "order": 2,
+                "side": "right"
+            }
+        }
+    },
+    "icons": [
+        { "plugin": "es.upv.paella.fullscreenButton", "identifier": "fullscreenIcon", "icon": "./default_icons/fullscreen-icon.svg" },
+        { "plugin": "es.upv.paella.fullscreenButton", "identifier": "windowedIcon", "icon": "./default_icons/fullscreen-exit.svg" },
+
+        { "plugin": "es.upv.paella.volumeButtonPlugin","identifier": "volumeHighIcon", "icon": "./default_icons/volume-high.svg"},
+        { "plugin": "es.upv.paella.volumeButtonPlugin","identifier": "volumeMidIcon", "icon": "./default_icons/volume-mid.svg"},
+        { "plugin": "es.upv.paella.volumeButtonPlugin","identifier": "volumeLowIcon", "icon": "./default_icons/volume-low.svg"},
+        { "plugin": "es.upv.paella.volumeButtonPlugin","identifier": "volumeMuteIcon", "icon": "./default_icons/volume-mute.svg"},
+
+        { "plugin": "es.upv.paella.dualVideoDynamic", "identifier": "iconMaximize", "icon": "./default_icons/maximize.svg" },
+        { "plugin": "es.upv.paella.dualVideoDynamic", "identifier": "iconMimimize", "icon": "./default_icons/minimize.svg" },
+        { "plugin": "es.upv.paella.dualVideoDynamic", "identifier": "iconClose", "icon": "./default_icons/close.svg" },
+
+        { "plugin": "es.upv.paella.layoutSelector","identifier": "layoutIcon", "icon": "./default_icons/view-mode.svg"},
+
+        { "plugin": "es.upv.paella.captionsSelectorPlugin","identifier": "captionsIcon", "icon": "./default_icons/captions-icon.svg"}
+    ]
+}

js/opencast/src/Paella/default_theme/opencast_theme.css

@@ -31,10 +31,6 @@ button {
     forced-color-adjust: none;
 }
 
-.playback-bar .button-plugins .button-plugin-container div.non-interactive {
-    margin-top: -2px;
-}
-
   /* progress indicator style */
 .progress-indicator {
     height: 25px;
@@ -132,3 +128,14 @@ button {
     outline-style: solid;
     opacity: 1;
 }
+
+/* Custom ILIAS LiveStream Indicators */
+.playback-bar .button-plugins .button-plugin-container div.ilias-livestream-button {
+    display: flex !important;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+}
+.playback-bar .button-plugins .button-plugin-container div.ilias-livestream-button div i {
+    width: 12px !important;
+}