ovenplayer 0.10.49 → 0.10.51

package/src/js/view/components/controls/settingPanel/mainTemplate.js

@@ -1,29 +1,29 @@
-import _ from "utils/underscore";
-
-export default (uiText, data) => {
-    let elements = '<div id="'+data.id+'" class="op-setting-panel '+(data.isRoot ? 'animated fadeIn': '')+'" style="max-height: '+data.height+'px">' +
-                        '<div class="op-setting-title-container">' +
-                            '<div class="op-setting-title" tabindex="0">' +
-                                (data.isRoot ? '' : '<span class="op-setting-title-previcon">&lt;</span>') +
-                                '<span class="op-setting-title-title">'+data.title+'</span>' +
-                            '</div>'+
-                        '</div>' +
-                        '<div class="op-setting-item-container">';
-                            _.forEach(data.body, function(body){
-                                elements += settingItemTemplate(body, data.useCheck);
-                            });
-    elements+=          '</div>' +
-                    '</div>';
-    return elements;
-};
-
-
-export const settingItemTemplate = (data, useCheck) => {
-    return (
-        '<div class="op-setting-item" op-panel-type="'+data.panelType+'" op-data-value="'+data.value+'">' +
-        (useCheck?'<span class="op-setting-item-checked '+(data.isCheck?'op-show':'')+'">&#x2713;</span>':'' )+
-        '<span class="op-setting-item-title">'+data.title+'</span>' +
-        (data.hasNext?'<span class="op-setting-item-nexticon">&gt;</span><span class="op-setting-item-value">'+data.description+'</span>' : '' )+
-        '</div>'
-    );
-};
+import _ from "underscore";
+
+export default (uiText, data) => {
+    let elements = '<div id="'+data.id+'" class="op-setting-panel '+(data.isRoot ? 'animated fadeIn': '')+'" style="max-height: '+data.height+'px">' +
+                        '<div class="op-setting-title-container">' +
+                            '<div class="op-setting-title" tabindex="0">' +
+                                (data.isRoot ? '' : '<span class="op-setting-title-previcon">&lt;</span>') +
+                                '<span class="op-setting-title-title">'+data.title+'</span>' +
+                            '</div>'+
+                        '</div>' +
+                        '<div class="op-setting-item-container">';
+                            _.forEach(data.body, function(body){
+                                elements += settingItemTemplate(body, data.useCheck);
+                            });
+    elements+=          '</div>' +
+                    '</div>';
+    return elements;
+};
+
+
+export const settingItemTemplate = (data, useCheck) => {
+    return (
+        '<div class="op-setting-item" op-panel-type="'+data.panelType+'" op-data-value="'+data.value+'">' +
+        (useCheck?'<span class="op-setting-item-checked '+(data.isCheck?'op-show':'')+'">&#x2713;</span>':'' )+
+        '<span class="op-setting-item-title">'+data.title+'</span>' +
+        (data.hasNext?'<span class="op-setting-item-nexticon">&gt;</span><span class="op-setting-item-value">'+data.description+'</span>' : '' )+
+        '</div>'
+    );
+};

package/src/js/view/components/controls/settingPanel/qualityPanel.js

@@ -1,68 +1,68 @@
-/**
- * Created by hoho on 2018. 7. 26..
- */
-import OvenTemplate from 'view/engine/OvenTemplate';
-import PanelManager from "view/global/PanelManager";
-import LA$ from 'utils/likeA$';
-import _ from "utils/underscore";
-import {
-    CONTENT_LEVEL_CHANGED
-} from "api/constants";
-
-const QualityPanel = function ($container, api, data) {
-    const $root = LA$(api.getContainerElement());
-    let panelManager = PanelManager();
-
-    data.setFront = function(isFront){
-        if(isFront){
-            $root.find("#"+data.id).removeClass("background");
-        }else{
-            $root.find("#"+data.id).addClass("background");
-        }
-    };
-    const onRendered = function($current, template){
-
-        //This assistants UI when quality level changes. When you open setting panels.
-        api.on(CONTENT_LEVEL_CHANGED, function (data) {
-            let newQuality = data.currentQuality;
-            if(data.type === "render"){
-                _.forEach( $root.find("#"+template.data.id).find(".op-setting-item").get(), function(panel){
-                    let $panel = LA$(panel);
-                    if( $panel.find(".op-setting-item-checked").hasClass("op-show")){
-                        $panel.find(".op-setting-item-checked").removeClass("op-show");
-                    }
-                    if(!data.isAuto && newQuality === parseInt($panel.attr("op-data-value"))){
-                        $panel.find(".op-setting-item-checked").addClass("op-show");
-                    }
-                    if(data.isAuto && $panel.attr("op-data-value") === "AUTO"){
-                        $panel.find(".op-setting-item-checked").addClass("op-show");
-                    }
-                });
-            }
-        }, template);
-    };
-    const onDestroyed = function(template){
-        api.off(CONTENT_LEVEL_CHANGED, null, template);
-    };
-    const events = {
-        "click .op-setting-item": function (event, $current, template) {
-            event.preventDefault();
-            let value = LA$(event.currentTarget).attr("op-data-value");
-            if(value === "AUTO"){
-                api.setAutoQuality(true);
-            }else{
-                api.setCurrentQuality(parseInt(value));
-            }
-            panelManager.clear();
-        },
-        "click .op-setting-title" : function(event, $current, template){
-            event.preventDefault();
-            panelManager.removeLastItem();
-        }
-    };
-
-    return OvenTemplate($container, "QualityPanel", api.getConfig(), data, events, onRendered, onDestroyed );
-
-};
-
-export default QualityPanel;
+/**
+ * Created by hoho on 2018. 7. 26..
+ */
+import OvenTemplate from 'view/engine/OvenTemplate';
+import PanelManager from "view/global/PanelManager";
+import LA$ from 'utils/likeA$';
+import _ from "underscore";
+import {
+    CONTENT_LEVEL_CHANGED
+} from "api/constants";
+
+const QualityPanel = function ($container, api, data) {
+    const $root = LA$(api.getContainerElement());
+    let panelManager = PanelManager();
+
+    data.setFront = function(isFront){
+        if(isFront){
+            $root.find("#"+data.id).removeClass("background");
+        }else{
+            $root.find("#"+data.id).addClass("background");
+        }
+    };
+    const onRendered = function($current, template){
+
+        //This assistants UI when quality level changes. When you open setting panels.
+        api.on(CONTENT_LEVEL_CHANGED, function (data) {
+            let newQuality = data.currentQuality;
+            if(data.type === "render"){
+                _.forEach( $root.find("#"+template.data.id).find(".op-setting-item").get(), function(panel){
+                    let $panel = LA$(panel);
+                    if( $panel.find(".op-setting-item-checked").hasClass("op-show")){
+                        $panel.find(".op-setting-item-checked").removeClass("op-show");
+                    }
+                    if(!data.isAuto && newQuality === parseInt($panel.attr("op-data-value"))){
+                        $panel.find(".op-setting-item-checked").addClass("op-show");
+                    }
+                    if(data.isAuto && $panel.attr("op-data-value") === "AUTO"){
+                        $panel.find(".op-setting-item-checked").addClass("op-show");
+                    }
+                });
+            }
+        }, template);
+    };
+    const onDestroyed = function(template){
+        api.off(CONTENT_LEVEL_CHANGED, null, template);
+    };
+    const events = {
+        "click .op-setting-item": function (event, $current, template) {
+            event.preventDefault();
+            let value = LA$(event.currentTarget).attr("op-data-value");
+            if(value === "AUTO"){
+                api.setAutoQuality(true);
+            }else{
+                api.setCurrentQuality(parseInt(value));
+            }
+            panelManager.clear();
+        },
+        "click .op-setting-title" : function(event, $current, template){
+            event.preventDefault();
+            panelManager.removeLastItem();
+        }
+    };
+
+    return OvenTemplate($container, "QualityPanel", api.getConfig(), data, events, onRendered, onDestroyed );
+
+};
+
+export default QualityPanel;

package/src/js/view/components/controls/settingPanel/subtitleTrackPanel.js

@@ -1,57 +1,57 @@
-/**
- * Created by hoho on 2018. 7. 26..
- */
-import OvenTemplate from 'view/engine/OvenTemplate';
-import PanelManager from "view/global/PanelManager";
-import LA$ from 'utils/likeA$';
-import {
-    SUBTITLE_TRACK_CHANGED
-} from "api/constants";
-import _ from "utils/underscore";
-
-const SubtitleTrackPanel = function ($container, api, data) {
-    const $root = LA$(api.getContainerElement());
-    let panelManager = PanelManager();
-
-    data.setFront = function (isFront) {
-        if (isFront) {
-            $root.find("#" + data.id).removeClass("background");
-        } else {
-            $root.find("#" + data.id).addClass("background");
-        }
-    };
-    const onRendered = function ($current, template) {
-        api.on(SUBTITLE_TRACK_CHANGED, function (data) {
-            _.forEach($root.find("#" + template.data.id).find(".op-setting-item").get(), function (panel) {
-                let $panel = LA$(panel);
-
-                if ($panel.find(".op-setting-item-checked").hasClass("op-show")) {
-                    $panel.find(".op-setting-item-checked").removeClass("op-show");
-                }
-                if (data.currentSubtitleTrack === parseInt($panel.attr("op-data-value"))) {
-                    $panel.find(".op-setting-item-checked").addClass("op-show");
-                }
-            });
-        }, template);
-    };
-    const onDestroyed = function (template) {
-        api.off(SUBTITLE_TRACK_CHANGED, null, template);
-    };
-    const events = {
-        "click .op-setting-item": function (event, $current, template) {
-            event.preventDefault();
-            let value = LA$(event.currentTarget).attr("op-data-value");
-            api.setCurrentSubtitleTrack(parseInt(value));
-            panelManager.clear();
-        },
-        "click .op-setting-title": function (event, $current, template) {
-            event.preventDefault();
-            panelManager.removeLastItem();
-        }
-    };
-
-    return OvenTemplate($container, "SubtitleTrackPanel", api.getConfig(), data, events, onRendered, onDestroyed);
-
-};
-
+/**
+ * Created by hoho on 2018. 7. 26..
+ */
+import OvenTemplate from 'view/engine/OvenTemplate';
+import PanelManager from "view/global/PanelManager";
+import LA$ from 'utils/likeA$';
+import {
+    SUBTITLE_TRACK_CHANGED
+} from "api/constants";
+import _ from "underscore";
+
+const SubtitleTrackPanel = function ($container, api, data) {
+    const $root = LA$(api.getContainerElement());
+    let panelManager = PanelManager();
+
+    data.setFront = function (isFront) {
+        if (isFront) {
+            $root.find("#" + data.id).removeClass("background");
+        } else {
+            $root.find("#" + data.id).addClass("background");
+        }
+    };
+    const onRendered = function ($current, template) {
+        api.on(SUBTITLE_TRACK_CHANGED, function (data) {
+            _.forEach($root.find("#" + template.data.id).find(".op-setting-item").get(), function (panel) {
+                let $panel = LA$(panel);
+
+                if ($panel.find(".op-setting-item-checked").hasClass("op-show")) {
+                    $panel.find(".op-setting-item-checked").removeClass("op-show");
+                }
+                if (data.currentSubtitleTrack === parseInt($panel.attr("op-data-value"))) {
+                    $panel.find(".op-setting-item-checked").addClass("op-show");
+                }
+            });
+        }, template);
+    };
+    const onDestroyed = function (template) {
+        api.off(SUBTITLE_TRACK_CHANGED, null, template);
+    };
+    const events = {
+        "click .op-setting-item": function (event, $current, template) {
+            event.preventDefault();
+            let value = LA$(event.currentTarget).attr("op-data-value");
+            api.setCurrentSubtitleTrack(parseInt(value));
+            panelManager.clear();
+        },
+        "click .op-setting-title": function (event, $current, template) {
+            event.preventDefault();
+            panelManager.removeLastItem();
+        }
+    };
+
+    return OvenTemplate($container, "SubtitleTrackPanel", api.getConfig(), data, events, onRendered, onDestroyed);
+
+};
+
 export default SubtitleTrackPanel;

package/src/js/view/components/helpers/captionViewer.js

@@ -20,46 +20,128 @@ const CaptionViewer = function($container, api, playerState){
         let isDisable = false;
         let deleteTimer = 0;
 
+        // Convert VTTCue settings to inline style string for .op-caption-cue wrapper
+        function cueToStyleStr(cue) {
+            const parts = [];
+
+            // Writing mode (vertical subtitles)
+            if (cue.vertical === 'rl') { parts.push('writing-mode:vertical-rl'); }
+            else if (cue.vertical === 'lr') { parts.push('writing-mode:vertical-lr'); }
+
+            // Width from size (0–100, default 100)
+            const size = (typeof cue.size === 'number') ? cue.size : 100;
+            parts.push('width:' + size + '%');
+
+            // Text alignment
+            let textAlign = 'center';
+            if (cue.align === 'start' || cue.align === 'left') { textAlign = 'left'; }
+            else if (cue.align === 'end' || cue.align === 'right') { textAlign = 'right'; }
+            parts.push('text-align:' + textAlign);
+
+            // Horizontal position (left + translateX)
+            // VTT spec: position:auto resolves based on align
+            //   left/start → 0%, right/end → 100%, center → 50%
+            let posLeft;
+            if (cue.position !== 'auto' && typeof cue.position === 'number') {
+                posLeft = cue.position;
+            } else {
+                posLeft = textAlign === 'left' ? 0 : textAlign === 'right' ? 100 : 50;
+            }
+            parts.push('left:' + posLeft + '%');
+            const xOff = textAlign === 'left' ? '0%' : textAlign === 'right' ? '-100%' : '-50%';
+            parts.push('transform:translateX(' + xOff + ')');
+
+            // Vertical position — must explicitly set both top and bottom to override CSS bottom:60px
+            if (cue.line !== 'auto' && typeof cue.line === 'number') {
+                if (!cue.snapToLines) {
+                    // Percentage mode: line% = top edge of cue from top of player (VTT spec)
+                    // Text grows downward from this point.
+                    parts.push('top:' + cue.line + '%');
+                    parts.push('bottom:auto');
+                } else {
+                    // Integer line number mode (e.g. line:-1)
+                    if (cue.line < 0) {
+                        parts.push('top:auto');
+                        parts.push('bottom:' + (Math.abs(cue.line + 1) * 8) + '%');
+                    } else {
+                        parts.push('top:' + (cue.line * 8) + '%');
+                        parts.push('bottom:auto');
+                    }
+                }
+            }
+
+            return parts.join(';');
+        }
+
+        function renderCues(cues) {
+            let html = '';
+            cues.forEach(function(cue) {
+                // A cue is "positioned" when line, position, or size is explicitly set
+                // (non-default values). Positioned cues skip the default padding/bottom CSS.
+                const hasLine = cue.line !== 'auto' && typeof cue.line === 'number';
+                const hasPosition = cue.position !== 'auto' && typeof cue.position === 'number';
+                const hasSize = typeof cue.size === 'number' && cue.size !== 100;
+                const isPositioned = hasLine || hasPosition || hasSize;
+                const cls = 'op-caption-cue' + (isPositioned ? ' op-caption-cue-positioned' : '');
+                html += '<div class="' + cls + '" style="' + cueToStyleStr(cue) + '">' +
+                        '<div class="op-caption-text">' + cue.text + '</div>' +
+                        '</div>';
+            });
+            $container.find(".op-caption-text-container").html(html);
+        }
+
+        function clearCues() {
+            $container.find(".op-caption-text-container").html('');
+        }
+
         api.on(CONTENT_CAPTION_CHANGED, function(index) {
             if(index > -1){
                 isDisable = false;
             }else{
-                isDisable  = true;
-                $container.find(".op-caption-text").text("");
+                isDisable = true;
+                clearCues();
             }
         }, template);
 
         api.on(CONTENT_CAPTION_CUE_CHANGED, function(data) {
-            if(!isDisable && data && data.text){
+            if(!isDisable && data && (data.text || (data.cues && data.cues.length))){
                 let hideGap = data.endTime - data.startTime;
 
                 if(deleteTimer){
                     clearTimeout(deleteTimer);
                 }
 
-                $container.find(".op-caption-text").html(data.text);
+                // Normalize: legacy data.text → single default-positioned cue
+                const cues = data.cues || [{
+                    text: data.text,
+                    line: 'auto',
+                    snapToLines: true,
+                    position: 'auto',
+                    size: 100,
+                    align: 'center',
+                    vertical: ''
+                }];
+
+                renderCues(cues);
 
                 if(hideGap){
                     deleteTimer = setTimeout(function(){
-                        $container.find(".op-caption-text").text("");
-                    },hideGap * 1000);
+                        clearCues();
+                    }, hideGap * 1000);
                 }
-
             }
-
         }, template);
-
-
     };
+
     const onDestroyed = function(template){
-        $container.find(".op-caption-text").text("");
+        $container.find(".op-caption-text-container").html('');
         api.off(CONTENT_CAPTION_CHANGED, null, template);
         api.off(CONTENT_CAPTION_CUE_CHANGED, null, template);
     };
-    const events = {
-    };
 
-    return OvenTemplate($container, "CaptionViewer", api.getConfig(), playerState, events, onRendered, onDestroyed );
+    const events = {};
+
+    return OvenTemplate($container, "CaptionViewer", api.getConfig(), playerState, events, onRendered, onDestroyed);
 };
 
-export default CaptionViewer;
+export default CaptionViewer;

package/src/js/view/components/helpers/captionViewerTemplate.js

@@ -5,8 +5,7 @@ export default (uiText) => {
     return (
         `<div class="op-caption-viewer">` +
         `    <div class="op-caption-text-container">` +
-        `        <pre class="op-caption-text"></pre>` +
-        `      </div>` +
+        `    </div>` +
         `</div>`
     );
 };

package/src/js/view/components/helpers/waterMark.js

@@ -1,69 +1,69 @@
-/**
- * Created by Sangwon Oh on 2020. 11. 10..
- */
-import OvenTemplate from 'view/engine/OvenTemplate';
-import _ from 'utils/underscore';
-import {
-    STATE_IDLE,
-    STATE_PLAYING,
-    STATE_COMPLETE,
-    STATE_PAUSED
-} from "api/constants";
-
-const WaterMark = function($container, api, playerState){
-
-    let waterMark = null;
-    let textElem = null;
-    const defaultPosition = 'top-right';
-    const defaultX = '2.8125%';
-    const defaultY = '5%';
-    const defaultWidth = 'auto';
-    const defaultHeight = 'auto';
-    const defaultOpacity = 0.7;
-
-    const onRendered = function($current, template){
-
-        waterMark = $current.find('.op-watermark');
-        textElem = $current.find('.op-watermark-text');
-
-        let waterMarkOption = api.getConfig().waterMark;
-
-        let position = waterMarkOption.position || defaultPosition;
-
-        let y = waterMarkOption.y || defaultY;
-        let x = waterMarkOption.x || defaultX;
-
-        waterMark.css(position.split('-')[0], y);
-        waterMark.css(position.split('-')[1], x);
-
-        let width = waterMarkOption.width || defaultWidth;
-        let height = waterMarkOption.height || defaultHeight;
-
-        waterMark.css('width', width);
-        waterMark.css('height', height);
-
-        let opacity = waterMarkOption.opacity || defaultOpacity;
-        waterMark.css('opacity', opacity);
-
-        if (waterMarkOption.text) {
-
-            if (waterMarkOption.font) {
-
-                _.each(waterMarkOption.font, function (value, key) {
-                    textElem.css(key, value);
-                })
-            }
-        }
-
-    };
-    const onDestroyed = function(){
-        //Do nothing!
-    };
-    const events = {
-
-    };
-
-    return OvenTemplate($container, "WaterMark", api.getConfig(), playerState, events, onRendered, onDestroyed );
-};
-
-export default WaterMark;
+/**
+ * Created by Sangwon Oh on 2020. 11. 10..
+ */
+import OvenTemplate from 'view/engine/OvenTemplate';
+import _ from 'underscore';
+import {
+    STATE_IDLE,
+    STATE_PLAYING,
+    STATE_COMPLETE,
+    STATE_PAUSED
+} from "api/constants";
+
+const WaterMark = function($container, api, playerState){
+
+    let waterMark = null;
+    let textElem = null;
+    const defaultPosition = 'top-right';
+    const defaultX = '2.8125%';
+    const defaultY = '5%';
+    const defaultWidth = 'auto';
+    const defaultHeight = 'auto';
+    const defaultOpacity = 0.7;
+
+    const onRendered = function($current, template){
+
+        waterMark = $current.find('.op-watermark');
+        textElem = $current.find('.op-watermark-text');
+
+        let waterMarkOption = api.getConfig().waterMark;
+
+        let position = waterMarkOption.position || defaultPosition;
+
+        let y = waterMarkOption.y || defaultY;
+        let x = waterMarkOption.x || defaultX;
+
+        waterMark.css(position.split('-')[0], y);
+        waterMark.css(position.split('-')[1], x);
+
+        let width = waterMarkOption.width || defaultWidth;
+        let height = waterMarkOption.height || defaultHeight;
+
+        waterMark.css('width', width);
+        waterMark.css('height', height);
+
+        let opacity = waterMarkOption.opacity || defaultOpacity;
+        waterMark.css('opacity', opacity);
+
+        if (waterMarkOption.text) {
+
+            if (waterMarkOption.font) {
+
+                _.each(waterMarkOption.font, function (value, key) {
+                    textElem.css(key, value);
+                })
+            }
+        }
+
+    };
+    const onDestroyed = function(){
+        //Do nothing!
+    };
+    const events = {
+
+    };
+
+    return OvenTemplate($container, "WaterMark", api.getConfig(), playerState, events, onRendered, onDestroyed );
+};
+
+export default WaterMark;