Release 2.16.0

src/player/public/js/player-page-rendering.js

@@ -207,20 +207,23 @@ function isSlideActive(slide, now) {
   return true;
 }
 // Build the cache key for a template layout.
-function getTemplateLayoutCacheKey(template) {
+function getTemplateLayoutCacheKey(template, content) {
   var viewportKey = window.innerWidth + 'x' + window.innerHeight;
-  return [currentPlaylistSignature || '', template && template.id ? template.id : '', viewportKey].join('|');
+  var layouts = (template && template.regions || []).map(function (region) {
+    return content && content[region.region_key] && content[region.region_key].layout || null;
+  });
+  return [currentPlaylistSignature || '', template && template.id ? template.id : '', viewportKey, JSON.stringify(layouts)].join('|');
 }
 
 // Build or reuse layout metadata for a template.
-function getTemplateLayout(template) {
+function getTemplateLayout(template, content) {
   if (!template || !template.id) {
     return null;
   }
 
   syncRenderCacheViewport();
 
-  var cacheKey = getTemplateLayoutCacheKey(template);
+  var cacheKey = getTemplateLayoutCacheKey(template, content);
   if (Object.prototype.hasOwnProperty.call(templateLayoutCache, cacheKey)) {
     return templateLayoutCache[cacheKey];
   }
@@ -229,6 +232,7 @@ function getTemplateLayout(template) {
   var canvasSize = fitCanvasSize(templateCanvas.width, templateCanvas.height, window.innerWidth, window.innerHeight);
   var canvasScale = canvasSize.width / templateCanvas.width;
   var regions = (template.regions || []).map(function (region) {
+    region = window.pulseRegionLayout.applyLayout(region, content && content[region.region_key], templateCanvas);
     var left = (Number(region.x) / templateCanvas.width) * 100;
     var top = (Number(region.y) / templateCanvas.height) * 100;
     var width = (Number(region.width) / templateCanvas.width) * 100;
@@ -297,24 +301,24 @@ function buildBackdropStyle(backgroundColor, backgroundImagePath, backgroundGrad
 }
 
 // Build the cache key for a template render plan.
-function getTemplateRenderPlanCacheKey(template) {
-  return getTemplateLayoutCacheKey(template);
+function getTemplateRenderPlanCacheKey(template, content) {
+  return getTemplateLayoutCacheKey(template, content);
 }
 
 // Build or reuse the render plan for a template.
-function getTemplateRenderPlan(template) {
+function getTemplateRenderPlan(template, content) {
   if (!template || !template.id) {
     return null;
   }
 
   syncRenderCacheViewport();
 
-  var cacheKey = getTemplateRenderPlanCacheKey(template);
+  var cacheKey = getTemplateRenderPlanCacheKey(template, content);
   if (Object.prototype.hasOwnProperty.call(templateRenderPlanCache, cacheKey)) {
     return templateRenderPlanCache[cacheKey];
   }
 
-  var layout = getTemplateLayout(template);
+  var layout = getTemplateLayout(template, content);
   function getPlayerRegionModule(regionType) {
     return window.pulsePlayerRegionTypes && typeof window.pulsePlayerRegionTypes.get === 'function' ? window.pulsePlayerRegionTypes.get(regionType) : null;
   }
@@ -359,7 +363,7 @@ function getTemplateRenderPlan(template) {
 function renderTemplateSlideMarkup(slide) {
   const template = slide.template;
   const content = slide.content || {};
-  const plan = getTemplateRenderPlan(template);
+  const plan = getTemplateRenderPlan(template, content);
   const layout = plan ? plan.layout : null;
   const regions = layout ? layout.regions.map(function (region) {
     const regionContent = content[region.regionKey] || {};