fix(FEC-12519): Side panels should be overlaid the entire player when…

… player size is "SMALL" (smaller then 480px) (#738) solves FEC-12519
kaltura · Mar 16, 2023 · 9728af9 · 9728af9
1 parent 10ddcc8
commit 9728af9
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git a/src/components/player-area/player-areas-utils.js b/src/components/player-area/player-areas-utils.js
@@ -1,4 +1,5 @@
 import {SidePanelModes, SidePanelOrientation, SidePanelPositions} from '../../reducers/shell';
+import {PLAYER_BREAK_POINTS} from 'components/shell/shell';
 
 /**
  * Calculate dimensions of video based on vertical side panels
@@ -23,6 +24,11 @@ function calculateVerticalDimensions(options) {
 
   let videoWidth = playerWidth - verticalPanelCount * verticalPanelWidth;
 
+  if (playerWidth < PLAYER_BREAK_POINTS.SMALL) {
+    videoWidth = playerWidth;
+    verticalPanelWidth = playerWidth;
+  }
+
   return {verticalPanelWidth, videoWidth, verticalPanelCount};
 }
 
@@ -49,6 +55,11 @@ function calculateHorizontalDimensions(options) {
 
   let videoHeight = playerHeight - horizontalPanelCount * horizontalPanelHeight;
 
+  if (playerClientRect.width < PLAYER_BREAK_POINTS.SMALL) {
+    videoHeight = playerHeight;
+    horizontalPanelHeight = playerHeight;
+  }
+
   return {horizontalPanelHeight, videoHeight, horizontalPanelCount};
 }
 
@@ -67,23 +78,25 @@ export function calculateVideoContainerStyles(options) {
   const rightSidePanelMode = allowSidePanels ? sidePanelsModes[SidePanelPositions.RIGHT] : SidePanelModes.HIDDEN;
   const topSidePanelMode = allowSidePanels ? sidePanelsModes[SidePanelPositions.TOP] : SidePanelModes.HIDDEN;
   const bottomSidePanelMode = allowSidePanels ? sidePanelsModes[SidePanelPositions.BOTTOM] : SidePanelModes.HIDDEN;
+  const {playerClientRect} = options;
+  if (playerClientRect.width > PLAYER_BREAK_POINTS.SMALL) {
+    if (leftSidePanelMode === SidePanelModes.ALONGSIDE || rightSidePanelMode === SidePanelModes.ALONGSIDE) {
+      const {verticalPanelWidth, videoWidth} = calculateVerticalDimensions({...options, isVideo: true});
+
+      result['left'] = leftSidePanelMode === SidePanelModes.ALONGSIDE ? verticalPanelWidth : 0;
+      result['right'] = rightSidePanelMode === SidePanelModes.ALONGSIDE ? verticalPanelWidth : 0;
+      result['width'] = videoWidth;
+      result['position'] = 'absolute';
+    }
 
-  if (leftSidePanelMode === SidePanelModes.ALONGSIDE || rightSidePanelMode === SidePanelModes.ALONGSIDE) {
-    const {verticalPanelWidth, videoWidth} = calculateVerticalDimensions({...options, isVideo: true});
-
-    result['left'] = leftSidePanelMode === SidePanelModes.ALONGSIDE ? verticalPanelWidth : 0;
-    result['right'] = rightSidePanelMode === SidePanelModes.ALONGSIDE ? verticalPanelWidth : 0;
-    result['width'] = videoWidth;
-    result['position'] = 'absolute';
-  }
-
-  if (topSidePanelMode === SidePanelModes.ALONGSIDE || bottomSidePanelMode === SidePanelModes.ALONGSIDE) {
-    const {horizontalPanelHeight, videoHeight} = calculateHorizontalDimensions({...options, isVideo: true});
+    if (topSidePanelMode === SidePanelModes.ALONGSIDE || bottomSidePanelMode === SidePanelModes.ALONGSIDE) {
+      const {horizontalPanelHeight, videoHeight} = calculateHorizontalDimensions({...options, isVideo: true});
 
-    result['top'] = topSidePanelMode === SidePanelModes.ALONGSIDE ? horizontalPanelHeight : 0;
-    result['bottom'] = bottomSidePanelMode === SidePanelModes.ALONGSIDE ? horizontalPanelHeight : 0;
-    result['height'] = videoHeight;
-    result['position'] = 'absolute';
+      result['top'] = topSidePanelMode === SidePanelModes.ALONGSIDE ? horizontalPanelHeight : 0;
+      result['bottom'] = bottomSidePanelMode === SidePanelModes.ALONGSIDE ? horizontalPanelHeight : 0;
+      result['height'] = videoHeight;
+      result['position'] = 'absolute';
+    }
   }
   return result;
 }
@@ -104,30 +117,32 @@ export function calculateGuiContainerStyles(options) {
   const topSidePanelMode = allowSidePanels ? sidePanelsModes[SidePanelPositions.TOP] : SidePanelModes.HIDDEN;
   const bottomSidePanelMode = allowSidePanels ? sidePanelsModes[SidePanelPositions.BOTTOM] : SidePanelModes.HIDDEN;
 
-  if (leftSidePanelMode !== SidePanelModes.HIDDEN || rightSidePanelMode !== SidePanelModes.HIDDEN) {
-    const {verticalPanelWidth} = calculateVerticalDimensions(options);
+  if (playerClientRect.width > PLAYER_BREAK_POINTS.SMALL) {
+    if (leftSidePanelMode !== SidePanelModes.HIDDEN || rightSidePanelMode !== SidePanelModes.HIDDEN) {
+      const {verticalPanelWidth} = calculateVerticalDimensions(options);
 
-    if (leftSidePanelMode !== SidePanelModes.HIDDEN) {
-      areaStyle['left'] = verticalPanelWidth;
-    }
-    if (rightSidePanelMode !== SidePanelModes.HIDDEN) {
-      areaStyle['right'] = verticalPanelWidth;
+      if (leftSidePanelMode !== SidePanelModes.HIDDEN) {
+        areaStyle['left'] = verticalPanelWidth;
+      }
+      if (rightSidePanelMode !== SidePanelModes.HIDDEN) {
+        areaStyle['right'] = verticalPanelWidth;
+      }
     }
-  }
 
-  if (topSidePanelMode !== SidePanelModes.HIDDEN || bottomSidePanelMode !== SidePanelModes.HIDDEN) {
-    const {horizontalPanelHeight} = calculateHorizontalDimensions(options);
+    if (topSidePanelMode !== SidePanelModes.HIDDEN || bottomSidePanelMode !== SidePanelModes.HIDDEN) {
+      const {horizontalPanelHeight} = calculateHorizontalDimensions(options);
 
-    if (topSidePanelMode !== SidePanelModes.HIDDEN) {
-      areaStyle['top'] = horizontalPanelHeight;
-    }
-    if (bottomSidePanelMode !== SidePanelModes.HIDDEN) {
-      areaStyle['bottom'] = horizontalPanelHeight;
+      if (topSidePanelMode !== SidePanelModes.HIDDEN) {
+        areaStyle['top'] = horizontalPanelHeight;
+      }
+      if (bottomSidePanelMode !== SidePanelModes.HIDDEN) {
+        areaStyle['bottom'] = horizontalPanelHeight;
+      }
     }
-  }
 
-  areaWidth = areaWidth - areaStyle['right'] - areaStyle['left'];
-  areaHeight = areaHeight - areaStyle['top'] - areaStyle['bottom'];
+    areaWidth = areaWidth - areaStyle['right'] - areaStyle['left'];
+    areaHeight = areaHeight - areaStyle['top'] - areaStyle['bottom'];
+  }
 
   const left = playerClientRect.left + (leftSidePanelMode !== SidePanelModes.HIDDEN ? areaStyle['left'] : 0);
   const top = playerClientRect.top + (topSidePanelMode !== SidePanelModes.HIDDEN ? areaStyle['top'] : 0);

diff --git a/src/components/shell/shell.js b/src/components/shell/shell.js
@@ -54,7 +54,7 @@ const PLAYER_SIZE: {[size: string]: string} = {
   EXTRA_LARGE: 'extralarge'
 };
 
-const PLAYER_BREAK_POINTS: {[size: string]: number} = {
+export const PLAYER_BREAK_POINTS: {[size: string]: number} = {
   TINY: 280,
   EXTRA_SMALL: 380,
   SMALL: 480,

diff --git a/src/components/top-bar/_top-bar.scss b/src/components/top-bar/_top-bar.scss
@@ -12,7 +12,6 @@
   width: 100%;
   top: 0;
   left: 0;
-  z-index: 1;
   pointer-events: auto;
   .top-bar-area {
     position: absolute;