Merge pull request #134 from aullman/fixed-ratio-elements

Allow some elements to have a fixedRatio and others not
aullman · Oct 18, 2023 · 8258c12 · 8258c12
2 parents 146c189 + 4cee54a
commit 8258c12
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@ const options = {
     maxRatio: 3/2,             // The narrowest ratio that will be used (default 2x3)
     minRatio: 9/16,            // The widest ratio that will be used (default 16x9)
     fixedRatio: false,         // If this is true then the aspect ratio of the video is maintained and minRatio and maxRatio are ignored (default false)
+    fixedRatioClass: "OT_fixedRatio" // The class to add to elements that should respect their native aspect ratio
     scaleLastRow: true,        // If there are less elements on the last row then we can scale them up to take up more space
     alignItems: 'center',      // Can be 'start', 'center' or 'end'. Determines where to place items when on a row or column that is not full
     bigClass: "OT_big",        // The class to add to elements that should be sized bigger
@@ -68,9 +69,10 @@ const layout = initLayoutContainer({
 });
 const { boxes } = layout.getLayout([
     {
-        width: 640,     // The native width of this element (eg. subscriber.videoWidth())
-        height: 480,    // The native height of this element (eg. subscriber.videoHeight())
-        big: false      // Whether to treat this element as a bigger element
+        width: 640,       // The native width of this element (eg. subscriber.videoWidth())
+        height: 480,      // The native height of this element (eg. subscriber.videoHeight())
+        big: false        // Whether to treat this element as a bigger element
+        fixedRatio: false // Whether this element should respect it's native aspect ratio 
     }
 ]);
 ```

diff --git a/index.html b/index.html
@@ -90,7 +90,7 @@
     <body>
         <div id="layout"></div>
         <div id="description">Click the Add/Remove buttons to add and remove video windows. Go ahead and resize the window and see it lay out automatically!<br>
-            Double-click on elements to make them bigger or smaller</div>
+            Double-click on elements to make them bigger or smaller. Alt+click on elements to make them fixed ratio.</div>
         <div id="buttons">
           <div id="advanced">
             <label>maxRatio</label><input id="maxRatio" type="text" name="maxRatio" value="3/2">
@@ -186,6 +186,17 @@
             }
             layout();
           });
+          el.addEventListener('click', function (event) {
+            // If you alt click on them then make them fixed ratio
+            if (event.altKey) {
+              if (el.classList.contains('OT_fixedRatio')) {
+                el.classList.remove('OT_fixedRatio');
+              } else {
+                el.classList.add('OT_fixedRatio');
+              }
+              layout();
+            }
+          });
           layoutEl.appendChild(el);
           layout();
         }

diff --git a/opentok-layout.js b/opentok-layout.js
@@ -183,17 +183,20 @@ var getLayout = function (opts, elements) {
             // This is a new row
             row = {
                 ratios: [],
+                elements: [],
                 width: 0,
                 height: 0
             };
             rows.push(row);
         }
         var ratio = ratios[i];
+        var element = elements[i];
+        row.elements.push(element);
         row.ratios.push(ratio);
         var targetWidth = dimensions.targetWidth;
         var targetHeight = dimensions.targetHeight;
         // If we're using a fixedRatio then we need to set the correct ratio for this element
-        if (fixedRatio) {
+        if (fixedRatio || element.fixedRatio) {
             targetWidth = targetHeight / ratio;
         }
         row.width += targetWidth;
@@ -267,10 +270,11 @@ var getLayout = function (opts, elements) {
         var targetHeight = void 0;
         for (var j = 0; j < row.ratios.length; j += 1) {
             var ratio = row.ratios[j];
+            var element = row.elements[j];
             var targetWidth = dimensions.targetWidth;
             targetHeight = row.height;
             // If we're using a fixedRatio then we need to set the correct ratio for this element
-            if (fixedRatio) {
+            if (fixedRatio || element.fixedRatio) {
                 targetWidth = Math.floor(targetHeight / ratio);
             }
             else if ((targetHeight / targetWidth)
@@ -698,7 +702,7 @@ exports["default"] = (function (container, opts) {
         var widthStr = width(elem);
         return widthStr ? parseInt(widthStr, 10) : 0;
     };
-    var _a = opts.animate, animate = _a === void 0 ? false : _a, _b = opts.bigClass, bigClass = _b === void 0 ? 'OT_big' : _b, _c = opts.ignoreClass, ignoreClass = _c === void 0 ? 'OT_ignore' : _c;
+    var _a = opts.animate, animate = _a === void 0 ? false : _a, _b = opts.bigClass, bigClass = _b === void 0 ? 'OT_big' : _b, _c = opts.ignoreClass, ignoreClass = _c === void 0 ? 'OT_ignore' : _c, _d = opts.fixedRatioClass, fixedRatioClass = _d === void 0 ? 'OT_fixedRatio' : _d;
     if (css(container, 'display') === 'none') {
         return;
     }
@@ -715,7 +719,7 @@ exports["default"] = (function (container, opts) {
         - getCSSNumber(container, 'border-right');
     var children = Array.prototype.filter.call(container.querySelectorAll("#".concat(id, ">*:not(.").concat(ignoreClass, ")")), filterDisplayNone);
     var elements = children.map(function (element) {
-        return __assign(__assign({}, getChildDims(element)), { big: element.classList.contains(bigClass) });
+        return __assign(__assign({}, getChildDims(element)), { big: element.classList.contains(bigClass), fixedRatio: element.classList.contains(fixedRatioClass) });
     });
     var layout = (0, getLayout_1["default"])(opts, elements);
     layout.boxes.forEach(function (box, idx) {