Revert "Revert "fix(ADA-3337): Change tabbing order inside player"" (#1201)

Reverts #1200
This fixes https://kaltura.atlassian.net/browse/ADA-3337.

It changes the tabbing order inside the player, moving the Seekbar
between the leftControls and rightControls and the top-bar after the
bottom-bar.
To accomplish this, it is using css property order, that modifies the
visual order of the items.
It is adding a "Skip seekbar" buttons(only for keyboard navigation
users), that are moving the focus out of the seekbar. One before and one
after the seekbar, depending of the direction of entering the seekbar
using keyboard navigation.
Figma file for buttons:
https://www.figma.com/design/8yTuCnuVHLYTFp89w7z05J/%F0%9F%93%BA-Player-v7?node-id=30852-2852&t=EeFHBXo43ipJGgQz-1

Author: valentinStoicaK

src/components/bottom-bar/_bottom-bar.scss

@@ -15,6 +15,7 @@
   transition:
     #{$hover-animation-time}ms opacity ease-in-out,
     0ms padding linear #{$hover-animation-time}ms;
+  order: 3;
 
   &.hide {
     display: none;
@@ -23,7 +24,7 @@
   .controls-container {
     display: flex;
     flex-direction: row;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     justify-content: space-between;
     width: 100%;
     position: relative;
@@ -33,18 +34,32 @@
       flex-shrink: 0;
       text-align: left;
       pointer-events: none;
+      order: 1;
+      z-index: 1;
 
       .control-button-container:first-child {
         margin-left: 0px;
       }
     }
 
+    .center-controls {
+      width: 100%;
+      order: 0;
+      pointer-events: none;
+      & > * {
+        pointer-events: auto;
+      }
+    }
+
     .right-controls {
       display: flex;
       flex-wrap: nowrap;
       flex-grow: 0;
       text-align: left;
       pointer-events: none;
+      order: 2;
+      z-index: 1;
+      margin-left: auto;
 
       .control-button-container:last-child {
         margin-right: 0px;
@@ -79,28 +94,24 @@
   }
 
   &.size-ty {
-    .controls-container {
-      display: block;
-      .left-controls {
-        display: none;
-      }
-      .right-controls {
-        display: block;
-        float: right;
-      }
-    }
-    .control-button-container {
-      display: none;
-      margin: 0;
-    }
-  }
-
-  &.size-xs {
     .bottom-bar {
       .controls-container {
-        .right-controls {
+        display: block;
+        .left-controls {
           display: none;
         }
+        .center-controls {
+          width: calc(100% - 50px);
+          float: left;
+        }
+        .right-controls {
+          display: block;
+          float: right;
+        }
+      }
+      .control-button-container {
+        display: none;
+        margin: 0;
       }
     }
   }

src/components/bottom-bar/bottom-bar-utils.ts

@@ -5,7 +5,12 @@ export function filterControlsByPriority(
   currentControlWidth: number,
   lowerPriorityControls: string[][]
 ): string[] {
-  const numOfOverflowControls = Math.ceil((currentMinBreakPointWidth - currentBarWidth) / currentControlWidth) || 1;
+  // Add 20% buffer to account for spacing/margins between controls
+  const overflow = currentMinBreakPointWidth - currentBarWidth;
+  if (overflow <= 0) return [];
+
+  const adjustedOverflow = overflow * 1.2;
+  const numOfOverflowControls = Math.max(1, Math.ceil(adjustedOverflow / currentControlWidth));
   const controlsToRemove = lowerPriorityControls.flat().slice(0, numOfOverflowControls);
   const priorityPair: string[] = [...lowerPriorityControls].reverse().find(p => p.length > 1)!;
   if (controlsToRemove[controlsToRemove.length - 1] === priorityPair?.[0]) {

src/components/bottom-bar/bottom-bar.tsx

@@ -59,6 +59,7 @@ const COMPONENT_NAME = 'BottomBar';
 class BottomBar extends Component<any, any> {
   private bottomBarContainerRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
   private leftControlsRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
+  private rightControlsRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
   private presetControls: {[controlName: string]: boolean} = {};
   private resizeObserver!: ResizeObserver;
 
@@ -122,7 +123,9 @@ class BottomBar extends Component<any, any> {
   }
 
   private _getControlsWidth = (): number => {
-    return Array.from(this.bottomBarContainerRef.current!.childNodes).reduce((total, child: HTMLElement) => total + child.offsetWidth, 0);
+    const leftControlsWidth = this.leftControlsRef.current?.offsetWidth || 0;
+    const rightControlsWidth = this.rightControlsRef.current?.offsetWidth || 0;
+    return leftControlsWidth + rightControlsWidth;
   };
 
   // eslint-disable-next-line require-jsdoc
@@ -218,7 +221,6 @@ class BottomBar extends Component<any, any> {
         <div className={style.bottomBarArea}>
           <PlayerArea shouldUpdate={true} name={'BottomBar'}>
             {shouldRenderTimeDisplay && <TimeDisplayPlaybackContainer />}
-            {props.children}
           </PlayerArea>
         </div>
         <div ref={this.bottomBarContainerRef} className={style.controlsContainer}>
@@ -234,8 +236,12 @@ class BottomBar extends Component<any, any> {
                 )}
             </PlayerArea>
           </div>
-          <PlayerArea shouldUpdate={true} name={'BottomBarCenterControls'} />
-          <div className={style.rightControls}>
+          <div className={style.centerControls}>
+            <PlayerArea shouldUpdate={true} name={'BottomBarCenterControls'}>
+              {props.children}
+            </PlayerArea>
+          </div>
+          <div ref={this.rightControlsRef} className={style.rightControls}>
             <PlayerArea shouldUpdate={true} name={'BottomBarRightControls'}>
               {props.rightControls &&
                 props.rightControls.map(

src/components/icon/icon.scss

@@ -77,6 +77,10 @@
       '<path fill="#{$color}" d="M768 625.124v-354.531l-352 135.385v330.022c0 70.692-57.308 128-128 128s-128-57.308-128-128c0-70.692 57.308-128 128-128 23.314 0 45.173 6.233 64 17.124v-241.124c0-13.241 8.155-25.114 20.513-29.867l416-160c20.96-8.062 43.487 7.41 43.487 29.867v512c0 70.692-57.308 128-128 128s-128-57.308-128-128c0-70.692 57.308-128 128-128 23.314 0 45.173 6.233 64 17.124zM288 800c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64zM704 800c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z" />',
     arrowDown:
       '<path fill="#{$color}" d="M301.255 338.745c-24.994-24.994-65.516-24.994-90.51 0s-24.994 65.516 0 90.51l256 256c24.994 24.994 65.516 24.994 90.51 0l256-256c24.994-24.994 24.994-65.516 0-90.51s-65.516-24.994-90.51 0l-210.745 210.745-210.745-210.745z" />',
+    chevronLeft:
+      '<path fill="#{$color}" d="M10.4714 3.52827C10.7117 3.76859 10.7302 4.14675 10.5269 4.40827L10.4714 4.47108L6.94334 7.99967L10.4714 11.5283C10.7117 11.7686 10.7302 12.1467 10.5269 12.4083L10.4714 12.4711C10.2311 12.7114 9.85294 12.7299 9.59141 12.5265L9.52861 12.4711L5.52861 8.47108C5.28828 8.23076 5.2698 7.8526 5.47315 7.59107L5.52861 7.52827L9.52861 3.52827C9.78896 3.26792 10.2111 3.26792 10.4714 3.52827Z"/>',
+    chevronRight:
+      '<path fill="#{$color}" d="M5.52861 3.52827C5.28828 3.76859 5.2698 4.14675 5.47315 4.40827L5.52861 4.47108L9.05666 7.99967L5.52861 11.5283C5.28828 11.7686 5.2698 12.1467 5.47315 12.4083L5.52861 12.4711C5.76893 12.7114 6.14706 12.7299 6.40859 12.5265L6.47139 12.4711L10.4714 8.47108C10.7117 8.23076 10.7302 7.8526 10.5269 7.59107L10.4714 7.52827L6.47139 3.52827C6.21104 3.26792 5.78896 3.26792 5.52861 3.52827Z"/>',
     startOver:
       '<path fill="#{$color}" d="M255.271 339.053c94.182-126.513 270.298-165.203 410.222-84.418 150.758 87.040 202.411 279.813 115.371 430.571s-279.813 202.411-430.571 115.371c-61.424-35.463-107.948-89.4-134.169-153.673-7.677-18.818-29.156-27.85-47.974-20.173s-27.85 29.156-20.173 47.974c32.339 79.269 89.818 145.906 165.517 189.611 185.96 107.364 423.747 43.649 531.111-142.311s43.649-423.747-142.311-531.111c-172.433-99.554-389.428-52.014-505.682 103.69l-27.226-78.49c-6.66-19.202-27.626-29.368-46.828-22.708s-29.368 27.626-22.708 46.828l52.434 151.164c5.36 15.452 20.275 25.513 36.61 24.694l159.799-8.011c20.299-1.018 35.929-18.298 34.911-38.596s-18.298-35.929-38.596-34.911l-89.738 4.499z" />',
     seekEnd:

src/components/icon/icon.tsx

@@ -24,6 +24,8 @@ const IconType = {
   SpeedUp: 'speed-up',
   Audio: 'audio',
   ArrowDown: 'arrow-down',
+  ChevronLeft: 'chevron-left',
+  ChevronRight: 'chevron-right',
   StartOver: 'start-over',
   SeekEnd: 'seek-end',
   Rewind: 'rewind',
@@ -269,6 +271,12 @@ class Icon extends Component<any, any> {
         case IconType.ArrowDown:
           return <i className={[style.icon, style.iconArrowDown].join(' ')} />;
 
+        case IconType.ChevronLeft:
+          return <i className={[style.icon, style.iconChevronLeft].join(' ')} />;
+
+        case IconType.ChevronRight:
+          return <i className={[style.icon, style.iconChevronRight].join(' ')} />;
+
         case IconType.StartOver:
           return <i className={[style.icon, style.iconStartOver].join(' ')} />;
 

src/components/interactive-area/_interactive-area.scss

@@ -8,6 +8,7 @@
   margin: #{$gui-gutter}px;
   transition: margin #{$hover-animation-time}ms ease-in-out;
   flex: 1;
+  order: 2;
 }
 .player {
   &.size-sm {

src/components/seekbar/_seekbar.scss

@@ -146,8 +146,7 @@
   padding: 12px 0;
   cursor: pointer;
   position: relative;
-  float: left;
-  width: calc(100% - 45px);
+  width: 100%;
   margin: 1px 0;
 
   .frame-preview {
@@ -158,3 +157,58 @@
     bottom: $progress-bar-height + 12px;
   }
 }
+
+.player .seekbar-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+
+  .skip-seekbar-button {
+    position: absolute;
+    left: 0;  
+    bottom: 100%;
+    display: flex;
+    height: 36px;
+    padding: 8px;
+    align-items: center;
+    gap: 4px;
+    border: none;
+    border-radius: var(--Roundness-1, 4px);
+    background: var(--B-60, rgba(0, 0, 0, 0.60));
+    color: var(--W-100, #FFF);
+    font-family: Lato, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    white-space: nowrap;
+    z-index: 10;
+    cursor: pointer;
+    
+    // Hide button visually but keep it in the tab order
+    opacity: 0;
+    pointer-events: none;
+    
+    // Show on keyboard focus
+    &:focus {
+      opacity: 1;
+      pointer-events: auto;
+      outline: 2px solid #2684FF;
+      box-shadow: 0 0 0 2px white;
+      outline-offset: 1px;
+    }
+  }
+  
+  .skip-button-icon {
+    display: flex;
+    width: 16px;
+    height: 16px;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .seek-bar {
+    flex: 1;
+  }
+}