From 09c5016b69cd8eaf2d69a9b2a5839646ce8a4aa1 Mon Sep 17 00:00:00 2001 From: dsilhavy Date: Wed, 27 Jul 2022 16:38:53 +0200 Subject: [PATCH] Add popup to low latency testplayer and fix catchup mechanism "enabled" checkbox --- samples/low-latency/testplayer/main.css | 5 + samples/low-latency/testplayer/main.js | 37 +- .../low-latency/testplayer/testplayer.html | 318 +++++++++--------- 3 files changed, 191 insertions(+), 169 deletions(-) diff --git a/samples/low-latency/testplayer/main.css b/samples/low-latency/testplayer/main.css index 9591c50015..4a69dd0e7b 100644 --- a/samples/low-latency/testplayer/main.css +++ b/samples/low-latency/testplayer/main.css @@ -43,4 +43,9 @@ video { .dash-video-player { background: #000000; +} + +.btn-success:hover { + background-color: #007bff !important; + border-color: #007bff !important; } \ No newline at end of file diff --git a/samples/low-latency/testplayer/main.js b/samples/low-latency/testplayer/main.js index 1da2d3f11e..badedbd45e 100644 --- a/samples/low-latency/testplayer/main.js +++ b/samples/low-latency/testplayer/main.js @@ -31,6 +31,7 @@ App.prototype._setDomElements = function () { this.domElements.settings.targetLatency = document.getElementById('target-latency'); this.domElements.settings.maxDrift = document.getElementById('max-drift'); this.domElements.settings.catchupPlaybackRate = document.getElementById('catchup-playback-rate'); + this.domElements.settings.catchupEnabled = document.getElementById('live-catchup-enabled'); this.domElements.settings.abrAdditionalInsufficientBufferRule = document.getElementById('abr-additional-insufficient') this.domElements.settings.abrAdditionalDroppedFramesRule = document.getElementById('abr-additional-dropped'); this.domElements.settings.abrAdditionalAbandonRequestRule = document.getElementById('abr-additional-abandon'); @@ -88,6 +89,7 @@ App.prototype._applyParameters = function () { liveDelay: settings.targetLatency }, liveCatchup: { + enabled: settings.catchupEnabled, maxDrift: settings.maxDrift, playbackRate: settings.catchupPlaybackRate, mode: settings.catchupMechanism @@ -116,7 +118,21 @@ App.prototype._exportSettings = function () { url += '&' + key + '=' + value } - this.domElements.settings.exportSettingsUrl.value = encodeURI(url); + url = encodeURI(url); + const element = document.createElement('textarea'); + element.value = url; + document.body.appendChild(element); + element.select(); + document.execCommand('copy'); + document.body.removeChild(element); + + Swal.fire({ + position: 'top-end', + icon: 'success', + title: 'Settings URL copied to clipboard', + showConfirmButton: false, + timer: 1500 + }) } App.prototype._adjustSettingsByUrlParameters = function () { @@ -145,6 +161,9 @@ App.prototype._adjustSettingsByUrlParameters = function () { if (params.abrAdditionalDroppedFramesRule !== undefined) { this.domElements.settings.abrAdditionalDroppedFramesRule.checked = params.abrAdditionalDroppedFramesRule === 'true'; } + if (params.catchupEnabled !== undefined) { + this.domElements.settings.catchupEnabled.checked = params.catchupEnabled === 'true'; + } if (params.abrGeneral !== undefined) { document.getElementById(params.abrGeneral).checked = true; } @@ -166,6 +185,7 @@ App.prototype._getCurrentSettings = function () { var abrAdditionalDroppedFramesRule = this.domElements.settings.abrAdditionalDroppedFramesRule.checked; var abrAdditionalAbandonRequestRule = this.domElements.settings.abrAdditionalAbandonRequestRule.checked; var abrAdditionalSwitchHistoryRule = this.domElements.settings.abrAdditionalSwitchHistoryRule.checked; + var catchupEnabled = this.domElements.settings.catchupEnabled.checked; var abrGeneral = document.querySelector('input[name="abr-general"]:checked').value; var catchupMechanism = document.querySelector('input[name="catchup"]:checked').value; var throughputCalculation = document.querySelector('input[name="throughput-calc"]:checked').value; @@ -180,6 +200,7 @@ App.prototype._getCurrentSettings = function () { abrAdditionalAbandonRequestRule, abrAdditionalSwitchHistoryRule, catchupMechanism, + catchupEnabled, throughputCalculation } } @@ -354,6 +375,13 @@ App.prototype._registerEventHandler = function () { document.getElementById('apply-settings-button').addEventListener('click', function () { self._applyParameters(); + Swal.fire({ + position: 'top-end', + icon: 'success', + title: 'Settings applied', + showConfirmButton: false, + timer: 1500 + }) }) document.getElementById('load-button').addEventListener('click', function () { @@ -366,6 +394,13 @@ App.prototype._registerEventHandler = function () { document.getElementById('chart-settings-button').addEventListener('click', function () { self._adjustChartSettings(); + Swal.fire({ + position: 'top-end', + icon: 'success', + title: 'Settings applied', + showConfirmButton: false, + timer: 1500 + }) }) } diff --git a/samples/low-latency/testplayer/testplayer.html b/samples/low-latency/testplayer/testplayer.html index 2c3d0e73cd..e71a7200c8 100644 --- a/samples/low-latency/testplayer/testplayer.html +++ b/samples/low-latency/testplayer/testplayer.html @@ -14,6 +14,7 @@ + @@ -50,183 +51,164 @@

Live low-latency playback

-
-
-
-

Settings

-
-
-
-
General
-
- Target latency (sec) - -
-
- Max drift (sec) - -
-
- Catch-up playback rate - -
-
-
-
ABR - General
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
ABR - Additional
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
Catchup mechanism
-
- - -
-
- - -
-
- - -
-
Throughput calculation
-
- - -
-
- - -
-
- - -
-
+
+

Settings

+
+
+
+
General
+
+ Target latency (sec) +
-
-
- -
+
+ Max drift (sec) +
-
-
-

Export settings

-
-

Click on "Generate settings URL" and copy/paste the URL below to automatically - adjust the settings.

-
- Settings Url - -
- -
+
+ Catch-up playback rate + +
+
+
+
ABR - General
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
ABR - Additional
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
Catchup mechanism
+
+ + +
+
+ + +
+
+ + +
+
Throughput calculation
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
-
-
-
+
Manifest URL