Merge branch 'feature/rollup-support'

Author: palemieux

README.txt

@@ -101,13 +101,15 @@ at a point in time (`offset` parameter). This point in time does not have to be
 example, given an ISOBMFF sample covering the interval `[a, b[`, `generateISD(tt, offset, errorHandler)` would be called first with `offset = a`,
 then in turn with offset set to each value of `getMediaTimeEvents()` that fall in the interval `]a, b[`.
 
-* `renderHTML(isd, element, imgResolver, eheight, ewidth, displayForcedOnlyMode, errorHandler)` renders an `isd` object returned by `generateISD()`
+* `renderHTML(isd, element, imgResolver, eheight, ewidth, displayForcedOnlyMode, errorHandler, previousISDState, enableRollUp)` 
+renders an `isd` object returned by `generateISD()`
 into a newly-created `div` element that is appended to the `element`. The `element` must be attached to the DOM.
 The height and width of the child `div` element are equal to `eheight` and `ewidth` if not null, or `clientWidth` and `clientHeight` of the
 parent `element` otherwise. Images URIs specified in `smpte:background` attributes are mapped to image resource URLs by the `imgResolver`
 function. The latter takes the value of the `smpte:background` attribute URI and an `img` DOM element as input and is expected to
 set the `src` attribute of the `img` DOM element to the absolute URI of the image. `displayForcedOnlyMode` sets the (boolean) value
- of the IMSC1 displayForcedOnlyMode parameter.
+ of the IMSC1 displayForcedOnlyMode parameter. `enableRollUp` enables roll-up as specified in CEA 708. `previousISDState` maintains states across
+ calls, e.g. for roll-up processing.
 
 In each step, the caller can provide an `errorHandler` to be notified of events during processing. The `errorHandler` may define four methods:
 `info`, `warn`, `error` and `fatal`. Each is called with a string argument describing the event, and will cause processing to terminate if it

src/main/js/html.js

@@ -50,7 +50,10 @@
      * attribute and an <code>img</code> DOM element as input, and is expected to
      * set the <code>src</code> attribute of the <code>img</code> to the absolute URI of the image.
      * <pre>displayForcedOnlyMode</pre> sets the (boolean)
-     * value of the IMSC1 displayForcedOnlyMode parameter.
+     * value of the IMSC1 displayForcedOnlyMode parameter. The function returns
+     * an opaque object that should passed in <code>previousISDState</code> when this function
+     * is called for the next ISD, otherwise <code>previousISDState</code> should be set to 
+     * <code>null</code>.
      * 
      * @param {Object} isd ISD to be rendered
      * @param {Object} element Element into which the ISD is rendered
@@ -62,9 +65,21 @@
      * @param {?boolean} displayForcedOnlyMode Value of the IMSC1 displayForcedOnlyMode parameter,
      *                   or false if null         
      * @param {?module:imscUtils.ErrorHandler} errorHandler Error callback
+     * @param {Object} previousISDState State saved during processing of the previous ISD, or null if initial call
+     * @param {?boolean} enableRollUp Enables roll-up animations (see CEA 708)
+     * @return {Object} ISD state to be provided when this funtion is called for the next ISD
      */
 
-    imscHTML.render = function (isd, element, imgResolver, eheight, ewidth, displayForcedOnlyMode, errorHandler) {
+    imscHTML.render = function (    isd,
+                                    element,
+                                    imgResolver,
+                                    eheight,
+                                    ewidth,
+                                    displayForcedOnlyMode,
+                                    errorHandler,
+                                    previousISDState,
+                                    enableRollUp
+                                ) {
 
         /* maintain aspect ratio if specified */
 
@@ -107,7 +122,10 @@
             imgResolver: imgResolver,
             displayForcedOnlyMode: displayForcedOnlyMode || false,
             isd: isd,
-            errorHandler: errorHandler
+            errorHandler: errorHandler,
+            previousISDState: previousISDState,
+            enableRollUp : enableRollUp || false,
+            currentISDState: {}
         };
 
         element.appendChild(rootcontainer);
@@ -118,6 +136,8 @@
 
         }
 
+        return context.currentISDState;
+
     };
 
     function processElement(context, dom_parent, isd_element) {
@@ -263,6 +283,61 @@
 
         }
 
+        /* region processing */
+
+        if (isd_element.kind === "region") {
+
+            /* build line list */
+
+            var linelist = [];
+
+            constructLineList(proc_e, linelist);
+
+            /* perform roll up if needed */
+            
+            var wdir = isd_element.styleAttrs[imscStyles.byName.writingMode.qname];
+
+            if ((wdir === "lrtb" || wdir === "lr" || wdir === "rltb" || wdir === "rl") &&
+                context.enableRollUp && 
+                isd_element.contents.length > 0 &&
+                isd_element.styleAttrs[imscStyles.byName.displayAlign.qname] === 'after') {
+
+                /* horrible hack, perhaps default region id should be underscore everywhere? */
+
+                var rid = isd_element.id === '' ? '_' : isd_element.id;
+
+                var rb = new RegionPBuffer(rid, linelist);
+
+                context.currentISDState[rb.id] = rb;
+
+                if (context.previousISDState &&
+                    rb.id in context.previousISDState &&
+                    context.previousISDState[rb.id].plist.length > 0 &&
+                    rb.plist.length > 1 &&
+                    rb.plist[rb.plist.length - 2].text ===
+                    context.previousISDState[rb.id].plist[context.previousISDState[rb.id].plist.length - 1].text) {
+
+                    var body_elem = e.firstElementChild;
+
+                    body_elem.style.bottom = "-" + rb.plist[rb.plist.length - 1].height + "px";
+                    body_elem.style.transition = "transform 0.4s";
+                    body_elem.style.position = "relative";
+                    body_elem.style.transform = "translateY(-" + rb.plist[rb.plist.length - 1].height + "px)";
+
+                }
+
+            }
+
+        }
+    }
+
+
+    function RegionPBuffer(id, lineList) {
+
+        this.id = id;
+
+        this.plist = lineList;
+
     }
 
     function pruneEmptySpans(element) {
@@ -320,6 +395,56 @@
 
     }
 
+
+    function constructLineList(element, llist) {
+
+        if (element.childElementCount === 0 && element.localName === 'span') {
+
+            var r = element.getBoundingClientRect();
+
+            if (llist.length === 0 ||
+                (!isSameLine(r.top, r.height, llist[llist.length - 1].top, llist[llist.length - 1].height))
+                ) {
+
+                llist.push({
+                    top: r.top,
+                    height: r.height,
+                    text: element.textContent
+                });
+
+            } else {
+
+                if (r.top < llist[llist.length - 1].top) {
+                    llist[llist.length - 1].top = r.top;
+                }
+
+                if (r.height > llist[llist.length - 1].height) {
+                    llist[llist.length - 1].height = r.height;
+                }
+
+                llist[llist.length - 1].text += element.textContent;
+
+            }
+
+        } else {
+
+
+            var child = element.firstChild;
+
+            while (child) {
+
+                if (child.nodeType === Node.ELEMENT_NODE) {
+
+                    constructLineList(child, llist);
+
+                }
+
+                child = child.nextSibling;
+            }
+        }
+
+    }
+    
     function isSameLine(top1, height1, top2, height2) {
 
         return (((top1 + height1) < (top2 + height2)) && (top1 > top2)) || (((top2 + height2) <= (top1 + height1)) && (top2 >= top1));

src/main/js/isd.js

@@ -529,6 +529,12 @@
         /* assume the element is a region if it does not have a kind */
 
         this.kind = ttelem.kind || 'region';
+        
+        /* copy id */
+        
+        if (ttelem.id) {
+            this.id = ttelem.id;
+        }
 
         /* deep copy of style attributes */
         this.styleAttrs = {};