ovenplayer 0.10.50 → 0.10.52

package/src/js/api/provider/html5/providers/Hls.js

@@ -16,7 +16,11 @@ import {
     PLAYER_NOT_ACCEPTABLE_ERROR,
     CONTENT_LEVEL_CHANGED,
     AUDIO_TRACK_CHANGED,
-    SUBTITLE_TRACK_CHANGED
+    SUBTITLE_TRACK_CHANGED,
+    CONTENT_CAPTION_CHANGED,
+    CONTENT_CAPTION_CUE_CHANGED,
+    CONTENT_TIME,
+    CONTENT_SEEKED
 } from "api/constants";
 
 import sizeHumanizer from "utils/sizeHumanizer";
@@ -36,11 +40,17 @@ const HlsProvider = function (element, playerConfig, adTagUrl) {
     let loadRetryer = null;
     let isManifestLoaded = false;
     let firstLoaded = false;
+    let subtitleCuesMap = {};   // { [trackId: number]: VTTCue[] }
+    let activeSubtitleTrackId = -1;
+    let _lastActiveCue = null;
+    let _subtitleDebugTimer = 0;
+    const SUBTITLE_CUES_MAX = 200; // sliding window limit per track (live stream guard)
 
     try {
 
         let hlsConfig = {
-            debug: false
+            debug: false,
+            renderTextTracksNatively: false // Disable native TextTrack rendering so subtitles are drawn via DOM
         };
 
         let hlsConfigFromPlayerConfig = playerConfig.getConfig().hlsConfig;
@@ -105,13 +115,21 @@ const HlsProvider = function (element, playerConfig, adTagUrl) {
 
                     let qualityLevel = hls.levels[i];
 
-                    spec.qualityLevels.push({
+                    let label = qualityLevel.width + "x" + qualityLevel.height + ", " + sizeHumanizer(qualityLevel.bitrate, true, "bps");
+                    let level = {
                         bitrate: qualityLevel.bitrate,
                         height: qualityLevel.height,
                         width: qualityLevel.width,
                         index: i,
-                        label: qualityLevel.width + "x" + qualityLevel.height + ", " + sizeHumanizer(qualityLevel.bitrate, true, "bps")
-                    });
+                        label: label
+                    };
+
+                    if (qualityLevel.codecSet) {
+                        level.codecs = qualityLevel.codecSet;
+                        level.label = label + " (" + qualityLevel.codecSet + ")";
+                    }
+
+                    spec.qualityLevels.push(level);
                 }
 
                 spec.currentQuality = hls.firstLevel;
@@ -182,10 +200,104 @@ const HlsProvider = function (element, playerConfig, adTagUrl) {
             });
 
             hls.on(Hls.Events.SUBTITLE_TRACK_SWITCH, function (event, data) {
+                activeSubtitleTrackId = data.id;
                 spec.currentSubtitleTrack = data.id;
+                _lastActiveCue = null; // reset so the new track's cue fires immediately
+                // Discard cues from tracks no longer in use to free memory
+                var keepId = data.id;
+                Object.keys(subtitleCuesMap).forEach(function (key) {
+                    if (Number(key) !== keepId) {
+                        delete subtitleCuesMap[key];
+                    }
+                });
                 that.trigger(SUBTITLE_TRACK_CHANGED, {
                     currentSubtitleTrack: spec.currentSubtitleTrack
                 });
+                // Enable or clear the DOM caption viewer based on track selection
+                that.trigger(CONTENT_CAPTION_CHANGED, data.id >= 0 ? 0 : -1);
+            });
+
+            hls.on(Hls.Events.CUES_PARSED, function (event, data) {
+                // Use the numeric index from hls.subtitleTrack as the key,
+                // because data.track can be a string like "default" while
+                // hls.subtitleTrack is always the numeric index (e.g. 0).
+                var trackId = hls ? hls.subtitleTrack : data.track;
+                if (!subtitleCuesMap[trackId]) {
+                    subtitleCuesMap[trackId] = [];
+                }
+                data.cues.forEach(function (cue) {
+                    var exists = subtitleCuesMap[trackId].some(function (c) {
+                        return c.startTime === cue.startTime && c.text === cue.text;
+                    });
+                    if (!exists) {
+                        subtitleCuesMap[trackId].push(cue);
+                    }
+                });
+                // Sliding window: drop oldest cues beyond limit to prevent
+                // unbounded growth during long live streams.
+                if (subtitleCuesMap[trackId].length > SUBTITLE_CUES_MAX) {
+                    subtitleCuesMap[trackId].splice(0,
+                        subtitleCuesMap[trackId].length - SUBTITLE_CUES_MAX);
+                }
+            });
+
+            // Reset on seek so that:
+            // (a) the same cue re-fires after seeking back into its range, and
+            // (b) deleteTimer is recalculated from the new position.
+            that.on(CONTENT_SEEKED, function () {
+                _lastActiveCue = null;
+            });
+
+            that.on(CONTENT_TIME, function (data) {
+                // Read the active track directly from hls.js (more reliable than event-based tracking)
+                var currentTrackId = hls ? hls.subtitleTrack : -1;
+                
+                if (currentTrackId < 0) {
+                    return;
+                }
+
+                var cues = subtitleCuesMap[currentTrackId] || [];
+                
+                if (!cues.length) { return; }
+                // Use raw video element time to match against hls.js cue timestamps.
+                // data.position may be offset by sectionStart, causing a mismatch.
+                var position = element.currentTime;
+
+                // Collect ALL cues active at this position (handles simultaneous & overlapping cues)
+                var activeCueObjects = [];
+                var maxEndTime = 0;
+                for (var i = 0; i < cues.length; i++) {
+                    if (position >= cues[i].startTime && position < cues[i].endTime) {
+                        activeCueObjects.push({
+                            text: cues[i].text,
+                            line: cues[i].line,
+                            snapToLines: cues[i].snapToLines,
+                            position: cues[i].position,
+                            size: cues[i].size,
+                            align: cues[i].align,
+                            vertical: cues[i].vertical
+                        });
+                        if (cues[i].endTime > maxEndTime) {
+                            maxEndTime = cues[i].endTime;
+                        }
+                    }
+                }
+
+                if (activeCueObjects.length === 0) {
+                    _lastActiveCue = null;
+                    return;
+                }
+
+                var combinedText = activeCueObjects.map(function(c) { return c.text; }).join('\n');
+                if (_lastActiveCue !== combinedText) {
+                    _lastActiveCue = combinedText;
+                    that.trigger(CONTENT_CAPTION_CUE_CHANGED, {
+                        text: combinedText,
+                        cues: activeCueObjects,
+                        startTime: position,
+                        endTime: maxEndTime
+                    });
+                }
             });
 
             hls.on(Hls.Events.LEVEL_UPDATED, function (event, data) {
@@ -305,6 +417,10 @@ const HlsProvider = function (element, playerConfig, adTagUrl) {
                 hls.stopLoad();
             }
 
+            subtitleCuesMap = {};
+            activeSubtitleTrackId = -1;
+            _lastActiveCue = null;
+
             superStop_func();
         };
 

package/src/js/api/provider/html5/providers/WebRTC.js

@@ -201,6 +201,7 @@ const WebRTC = function (element, playerConfig, adTagUrl) {
                 that.once(ERROR, function () {
 
                     connected = false;
+                    destroyWebRtcLoader();
                 });
 
                 connectionCheckTimer = setTimeout(function () {
@@ -281,7 +282,7 @@ const WebRTC = function (element, playerConfig, adTagUrl) {
 
     that.play = () => {
 
-        if (!webrtcLoader || (timeoutMaxRetry > 0 && !connected)) {
+        if (!webrtcLoader) {
             loadWebRTCLoader();
         }
 

package/src/js/api/provider/html5/providers/WebRTCLoader.js

@@ -1,4 +1,4 @@
-import _ from "utils/underscore";
+import _ from "underscore";
 import { analUserAgent } from "utils/browser";
 import {
     ERRORS,

package/src/js/api/provider/utils.js

@@ -1,69 +1,69 @@
-/**
- * Created by hoho on 2018. 11. 12..
- */
-import { ERROR, STATE_ERROR } from "api/constants";
-import _ from "utils/underscore";
-
-export const extractVideoElement = function (elementOrMse) {
-    if (_.isElement(elementOrMse)) {
-        return elementOrMse;
-    }
-    if (elementOrMse.getVideoElement) {
-        return elementOrMse.getVideoElement();
-    } else if (elementOrMse.media) {
-        return elementOrMse.media;
-    }
-    return null;
-};
-
-export const separateLive = function (mse) {
-    //ToDo : You consider hlsjs. But not now because we don't support hlsjs.
-
-    if (mse && mse.isDynamic) {
-        return mse.isDynamic();
-    } else {
-        return false;
-    }
-};
-
-export const errorTrigger = function (error, provider) {
-    if (provider) {
-        provider.setState(STATE_ERROR);
-        provider.pause();
-        provider.trigger(ERROR, error);
-    }
-
-};
-
-export const pickCurrentSource = (sources, playerConfig) => {
-
-    let sourceIndex = 0;
-
-    if (sources) {
-
-        if (playerConfig.getSourceIndex() === -1) {
-
-            for (var i = 0; i < sources.length; i++) {
-                if (sources[i].default) {
-                    sourceIndex = i;
-                    break;
-                }
-            }
-        } else {
-
-            sourceIndex = playerConfig.getSourceIndex();
-        }
-
-    }
-
-    return sourceIndex;
-}
-
-export function getSeekableStartEnd(mediaElement) {
-    let start = mediaElement.seekable.start(0);
-    let end = mediaElement.seekable.end(mediaElement.seekable.length - 1);
-    return {
-        start: start,
-        end: end
-    };
-}
+/**
+ * Created by hoho on 2018. 11. 12..
+ */
+import { ERROR, STATE_ERROR } from "api/constants";
+import _ from "underscore";
+
+export const extractVideoElement = function (elementOrMse) {
+    if (_.isElement(elementOrMse)) {
+        return elementOrMse;
+    }
+    if (elementOrMse.getVideoElement) {
+        return elementOrMse.getVideoElement();
+    } else if (elementOrMse.media) {
+        return elementOrMse.media;
+    }
+    return null;
+};
+
+export const separateLive = function (mse) {
+    //ToDo : You consider hlsjs. But not now because we don't support hlsjs.
+
+    if (mse && mse.isDynamic) {
+        return mse.isDynamic();
+    } else {
+        return false;
+    }
+};
+
+export const errorTrigger = function (error, provider) {
+    if (provider) {
+        provider.setState(STATE_ERROR);
+        provider.pause();
+        provider.trigger(ERROR, error);
+    }
+
+};
+
+export const pickCurrentSource = (sources, playerConfig) => {
+
+    let sourceIndex = 0;
+
+    if (sources) {
+
+        if (playerConfig.getSourceIndex() === -1) {
+
+            for (var i = 0; i < sources.length; i++) {
+                if (sources[i].default) {
+                    sourceIndex = i;
+                    break;
+                }
+            }
+        } else {
+
+            sourceIndex = playerConfig.getSourceIndex();
+        }
+
+    }
+
+    return sourceIndex;
+}
+
+export function getSeekableStartEnd(mediaElement) {
+    let start = mediaElement.seekable.start(0);
+    let end = mediaElement.seekable.end(mediaElement.seekable.length - 1);
+    return {
+        start: start,
+        end: end
+    };
+}

package/src/js/ovenplayer.sdk.js

@@ -1,143 +1,143 @@
-import API from 'api/Api';
-import {isWebRTC, checkAndGetContainerElement} from 'utils/validator';
-import _ from "utils/underscore";
-
-/**
- * Main OvenPlayerSDK object
- */
-function ovenPlayerFactory() {
-
-    const OvenPlayerSDK = {};
-
-    const playerList = OvenPlayerSDK.playerList = [];
-
-    /**
-     * Create player instance and return it.
-     *
-     * @param      {string | dom element} container  Id of container element or container element
-     * @param      {object} options  The options
-     */
-    OvenPlayerSDK.create = function (container, options) {
-
-        if (!window.OvenPlayerConsole || Object.keys(window.OvenPlayerConsole).length === 0) {
-            window.OvenPlayerConsole = {};
-            OvenPlayerConsole['log'] = function () {
-            };
-        }
-
-        let containerElement = checkAndGetContainerElement(container);
-
-        const playerInstance = API(containerElement);
-        playerInstance.init(options);
-
-        playerList.push(playerInstance);
-
-        return playerInstance;
-    };
-
-    /**
-     * Gets the player instance list.
-     *
-     * @return     {array}  The player list.
-     */
-    OvenPlayerSDK.getPlayerList = function () {
-
-        return playerList;
-    };
-
-    /**
-     * Gets the player instance by container id.
-     *
-     * @param      {string}  containerId  The container identifier
-     * @return     {obeject | null}  The player instance.
-     */
-    OvenPlayerSDK.getPlayerByContainerId = function (containerId) {
-
-        for (let i = 0; i < playerList.length; i++) {
-
-            if (playerList[i].getContainerId() === containerId) {
-
-                return playerList[i];
-            }
-        }
-
-        return null;
-    };
-
-    /**
-     * Gets the player instance by index.
-     *
-     * @param      {number}  index   The index
-     * @return     {object | null}  The player instance.
-     */
-    OvenPlayerSDK.getPlayerByIndex = function (index) {
-
-        const playerInstance = playerList[index];
-
-        if (playerInstance) {
-
-            return playerInstance;
-        } else {
-
-            return null;
-        }
-    };
-
-    /**
-     * Remove the player instance by playerInstance.
-     *
-     * @param      {playerInstance}  playerInstance
-     * @return     {null}
-     */
-    OvenPlayerSDK.removePlayer = function (playerInstance) {
-
-        for (let i = 0; i < playerList.length; i++) {
-
-            if (playerList[i] === playerInstance) {
-                playerList.splice(i, 1);
-            }
-        }
-    };
-
-    /**
-     * Generate webrtc source for player source type.
-     *
-     * @param      {Object | Array}  source   webrtc source
-     * @return     {Array}  Player source Object.
-     */
-    OvenPlayerSDK.generateWebrtcUrls = function (sources) {
-        return (_.isArray(sources) ? sources : [sources]).map(function (source, index) {
-            if (source.host && isWebRTC(source.host) && source.application && source.stream) {
-                return {
-                    file: source.host + "/" + source.application + "/" + source.stream,
-                    type: "webrtc",
-                    label: source.label ? source.label : "webrtc-" + (index + 1)
-                };
-            }
-        });
-    };
-
-    /**
-     * Whether show the player core log or not.
-     *
-     * @param      {boolean}  boolean   run debug mode or not.
-     * @return     {boolean}  run debug mode or not.
-     */
-    OvenPlayerSDK.debug = function (isDebugMode) {
-
-        if (isDebugMode) {
-            window.OvenPlayerConsole = {log: window['console']['log']};
-        } else {
-            window.OvenPlayerConsole = {
-                log: function () {
-                }
-            };
-        }
-        return isDebugMode;
-    };
-
-    return OvenPlayerSDK;
-}
-
-
-export default ovenPlayerFactory();
+import API from 'api/Api';
+import {isWebRTC, checkAndGetContainerElement} from 'utils/validator';
+import _ from "underscore";
+
+/**
+ * Main OvenPlayerSDK object
+ */
+function ovenPlayerFactory() {
+
+    const OvenPlayerSDK = {};
+
+    const playerList = OvenPlayerSDK.playerList = [];
+
+    /**
+     * Create player instance and return it.
+     *
+     * @param      {string | dom element} container  Id of container element or container element
+     * @param      {object} options  The options
+     */
+    OvenPlayerSDK.create = function (container, options) {
+
+        if (!window.OvenPlayerConsole || Object.keys(window.OvenPlayerConsole).length === 0) {
+            window.OvenPlayerConsole = {};
+            OvenPlayerConsole['log'] = function () {
+            };
+        }
+
+        let containerElement = checkAndGetContainerElement(container);
+
+        const playerInstance = API(containerElement);
+        playerInstance.init(options);
+
+        playerList.push(playerInstance);
+
+        return playerInstance;
+    };
+
+    /**
+     * Gets the player instance list.
+     *
+     * @return     {array}  The player list.
+     */
+    OvenPlayerSDK.getPlayerList = function () {
+
+        return playerList;
+    };
+
+    /**
+     * Gets the player instance by container id.
+     *
+     * @param      {string}  containerId  The container identifier
+     * @return     {obeject | null}  The player instance.
+     */
+    OvenPlayerSDK.getPlayerByContainerId = function (containerId) {
+
+        for (let i = 0; i < playerList.length; i++) {
+
+            if (playerList[i].getContainerId() === containerId) {
+
+                return playerList[i];
+            }
+        }
+
+        return null;
+    };
+
+    /**
+     * Gets the player instance by index.
+     *
+     * @param      {number}  index   The index
+     * @return     {object | null}  The player instance.
+     */
+    OvenPlayerSDK.getPlayerByIndex = function (index) {
+
+        const playerInstance = playerList[index];
+
+        if (playerInstance) {
+
+            return playerInstance;
+        } else {
+
+            return null;
+        }
+    };
+
+    /**
+     * Remove the player instance by playerInstance.
+     *
+     * @param      {playerInstance}  playerInstance
+     * @return     {null}
+     */
+    OvenPlayerSDK.removePlayer = function (playerInstance) {
+
+        for (let i = 0; i < playerList.length; i++) {
+
+            if (playerList[i] === playerInstance) {
+                playerList.splice(i, 1);
+            }
+        }
+    };
+
+    /**
+     * Generate webrtc source for player source type.
+     *
+     * @param      {Object | Array}  source   webrtc source
+     * @return     {Array}  Player source Object.
+     */
+    OvenPlayerSDK.generateWebrtcUrls = function (sources) {
+        return (_.isArray(sources) ? sources : [sources]).map(function (source, index) {
+            if (source.host && isWebRTC(source.host) && source.application && source.stream) {
+                return {
+                    file: source.host + "/" + source.application + "/" + source.stream,
+                    type: "webrtc",
+                    label: source.label ? source.label : "webrtc-" + (index + 1)
+                };
+            }
+        });
+    };
+
+    /**
+     * Whether show the player core log or not.
+     *
+     * @param      {boolean}  boolean   run debug mode or not.
+     * @return     {boolean}  run debug mode or not.
+     */
+    OvenPlayerSDK.debug = function (isDebugMode) {
+
+        if (isDebugMode) {
+            window.OvenPlayerConsole = {log: window['console']['log']};
+        } else {
+            window.OvenPlayerConsole = {
+                log: function () {
+                }
+            };
+        }
+        return isDebugMode;
+    };
+
+    return OvenPlayerSDK;
+}
+
+
+export default ovenPlayerFactory();