Merge pull request #4394 from Dash-Industry-Forum/feature/mergeV4ToV5

Feature/merge v4 to v5

.gitignore

@@ -188,3 +188,7 @@ build/typings/
 
 # Vim
 .vimrc
+
+#Karma Functional tests
+test/functional-karma/coverage
+test/functional-karma/results

AUTHORS.md

@@ -48,3 +48,4 @@
 * @epiclabsDASH [Jesus Oliva, Epic Labs]
 * @adripanico [Adrian Caballero, Epic Labs]
 * @ahfarmer [Andrew Farmer, Rhombus Systems]
+* @matvp91 [Matthias Van Parijs]

README.md

@@ -184,7 +184,7 @@ When it is all done, it should look similar to this:
     * ```npm run doc```
 
 ### Troubleshooting
-* In case the build process is failing make sure to use an up-to-date node.js version. The build process was successfully tested with node.js version 14.16.1.
+* In case the build process is failing make sure to use an up-to-date node.js version. The build process was successfully tested with node.js version 20.10.0.
 
 ### License
 dash.js is released under [BSD license](https://github.com/Dash-Industry-Forum/dash.js/blob/development/LICENSE.md)

build/jsdoc/jsdoc_conf.json

@@ -12,7 +12,8 @@
         "plugins/markdown"
     ],
     "markdown": {
-        "hardwrap": true
+        "hardwrap": true,
+        "idInHeadings": true
     },
     "templates": {
         "cleverLinks": true,
@@ -21,6 +22,7 @@
         "outputSourceFiles": true,
         "outputSourcePath": true,
         "systemName": "dash.js",
+        "systemSummary": "",
         "copyright": "<h3>DASH Industry Forum</h3>",
         "footer": "",
         "navType": "horizontal",
@@ -31,11 +33,20 @@
         "highlightTutorialCode": true
     },
     "opts": {
-        "template": "../../node_modules/ink-docstrap/template",
+        "template": "../../node_modules/clean-jsdoc-theme",
         "encoding": "utf8",
         "recurse": true,
         "query": "value",
         "private": false,
-        "lenient": true
+        "lenient": true,
+        "verbose": true,
+        "destination": "docs/",
+        "theme_opts": {
+            "default_theme": "light",
+            "include_css": ["./build/style_jsdoc/jsdoc-custom.css"],
+            "favicon": "https://dashif.org/img/favicon.ico",
+            "includeFilesListInHomepage": true,
+            "homepageTitle": "dash.js API Docs"
+        }
     }
 }

build/style_jsdoc/jsdoc-custom.css

@@ -0,0 +1,18 @@
+td, th {
+    padding: 10px 10px !important;
+    word-wrap: break-word;
+    max-width: 50px;
+    white-space: inherit;
+    text-overflow: ellipsis;
+  }
+
+  /* Optional: Style the first and last columns differently */
+  td:nth-child(5), th:nth-child(5) {
+    max-width: 150px !important;
+  } 
+  td:first-child, th:first-child {
+    max-width: 100px !important;
+  } 
+.main-wrapper {
+    padding: 0 !important;
+}

contrib/akamai/controlbar/ControlBar.js

@@ -65,6 +65,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
         seekbarPlay,
         seekbarBuffer,
         muteBtn,
+        nativeTextTracks,
         volumebar,
         fullscreenBtn,
         timeDisplay,
@@ -372,7 +373,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
                 durationDisplay.onclick = seekLive;
                 durationDisplay.classList.add('live-icon');
             }
-        } else if (!isNaN(value)) {
+        } else if (!isNaN(value) && isFinite(value)) {
             durationDisplay.textContent = displayUTCTimeCodes ? self.player.formatUTC(value) : self.player.convertToTimeCode(value);
             durationDisplay.classList.remove('live-icon');
         }
@@ -595,6 +596,34 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
         }
     };
 
+    // Match up the current dashjs text tracks against native video element tracks by ensuring they have matching properties
+    var _matchTrackWithNativeTrack = function(track, nativeTrack) {
+        let label = track.id !== undefined ? track.id.toString() : track.lang;
+
+        return !!(
+            (track.kind === nativeTrack.kind) &&
+            (track.lang === nativeTrack.language) &&
+            (track.isTTML === nativeTrack.isTTML) &&
+            (track.isEmbedded === nativeTrack.isEmbedded) &&
+            (label === nativeTrack.label)
+        );
+    }
+
+    // Compare track information against native video element tracks to get the current track mode
+    var _getNativeVideoTrackMode = function (track) {
+        const nativeTracks = video.textTracks;
+        let trackMode;
+        for (let i = 0; i < nativeTracks.length; i++) {
+            const nativeTrack = nativeTracks[i];
+            if (_matchTrackWithNativeTrack(track, nativeTrack)) {
+                trackMode = nativeTrack.mode;
+                break;
+            }
+        };
+
+        return (trackMode === undefined) ? 'showing' : trackMode;
+    };
+
     var createCaptionSwitchMenu = function (streamId) {
         // Subtitles/Captions Menu //XXX we need to add two layers for captions & subtitles if present.
         var activeStreamInfo = player.getActiveStream().getStreamInfo();
@@ -607,15 +636,24 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
             var tracks = textTrackList[streamId] || [];
             var contentFunc = function (element, index) {
                 if (isNaN(index)) {
-                    return 'OFF';
+                    return {
+                        mode: 'showing',
+                        text: 'OFF'
+                    };
                 }
 
                 var label = getLabelForLocale(element.labels);
+                var trackText;
                 if (label) {
-                    return label + ' : ' + element.type;
+                    trackText = label + ' : ' + element.type;
+                } else {
+                    trackText = element.lang + ' : ' + element.kind;
                 }
 
-                return element.lang + ' : ' + element.kind;
+                return {
+                    mode: _getNativeVideoTrackMode(element),
+                    text: trackText
+                }
             };
             captionMenu = createMenu({ menuType: 'caption', arr: tracks }, contentFunc);
 
@@ -630,13 +668,22 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
 
     };
 
+    var _onTracksChanged = function () {
+        var activeStreamInfo = player.getActiveStream().getStreamInfo();
+        createCaptionSwitchMenu(activeStreamInfo.id);
+    }
+
     var _onTracksAdded = function (e) {
         // Subtitles/Captions Menu //XXX we need to add two layers for captions & subtitles if present.
         if (!textTrackList[e.streamId]) {
             textTrackList[e.streamId] = [];
         }
 
         textTrackList[e.streamId] = textTrackList[e.streamId].concat(e.tracks);
+
+        nativeTextTracks = video.textTracks;
+        nativeTextTracks.addEventListener('change', _onTracksChanged);
+
         createCaptionSwitchMenu(e.streamId);
     };
 
@@ -783,8 +830,15 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
             item.mediaType = mediaType;
             item.name = name;
             item.selected = false;
-            item.textContent = arr[i];
-
+            if (isObject(arr[i])) {
+                // text tracks need extra properties
+                item.mode = arr[i].mode;
+                item.textContent = arr[i].text;
+            } else {
+                // Other tracks will just have their text
+                item.textContent = arr[i];
+            }
+
             item.onmouseover = function (/*e*/) {
                 if (this.selected !== true) {
                     this.classList.add('menu-item-over');
@@ -802,7 +856,13 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
                 el = menu.querySelector('.' + mediaType + '-menu-content');
             }
 
-            el.appendChild(item);
+            if (mediaType === 'caption') {
+                if (item.mode !== 'disabled') {
+                    el.appendChild(item);
+                }
+            } else {
+                el.appendChild(item);
+            }
         }
 
         return menu;
@@ -952,6 +1012,14 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
         return !!navigator.userAgent.match(/Trident.*rv[ :]*11\./);
     };
 
+    //************************************************************************************
+    //Utilities
+    //************************************************************************************
+
+    var isObject = function (obj) {
+        return typeof obj === 'object' && !Array.isArray(obj) && obj !== null;
+    }
+
     //************************************************************************************
     // PUBLIC API
     //************************************************************************************
@@ -1035,6 +1103,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
             }
             if (menuHandlersList.caption) {
                 captionBtn.removeEventListener('click', menuHandlersList.caption);
+                nativeTextTracks.removeEventListener('change', _onTracksChanged);
             }
             if (captionMenu) {
                 this.removeMenu(captionMenu, captionBtn);