Merge branch 'master' into ADA-1065-Bofa-Groupe-Connect-Ensure-dialog…

…s-use-proper-structure

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 0.79.5 (2024-07-11)
+
+
+### Bug Fixes
+
+* **FEC-14034:** Player v7 | Safari | Opening the CC menu cause size a… ([#905](https://github.com/kaltura/playkit-js-ui/issues/905)) ([be28ea2](https://github.com/kaltura/playkit-js-ui/commit/be28ea2)), closes [#871](https://github.com/kaltura/playkit-js-ui/issues/871)
+
+
+
+### 0.79.4 (2024-07-04)
+
+
+### Bug Fixes
+
+* **FEC-14023:** add strictPosition property to tooltip ([#901](https://github.com/kaltura/playkit-js-ui/issues/901)) ([7a9a78f](https://github.com/kaltura/playkit-js-ui/commit/7a9a78f))
+
+
+
+### 0.79.3 (2024-06-30)
+
+
+### Bug Fixes
+
+* **FEC-13506_REG:** fix PR [#871](https://github.com/kaltura/playkit-js-ui/issues/871) regression ([#895](https://github.com/kaltura/playkit-js-ui/issues/895)) ([97b1aa4](https://github.com/kaltura/playkit-js-ui/commit/97b1aa4))
+
+
+
 ### 0.79.2 (2024-06-02)
 
 

karma.conf.js

@@ -33,6 +33,10 @@ module.exports = function (config) {
       ChromeHeadlessWithFlags: {
         base: 'ChromeHeadless',
         flags: ['--no-sandbox', '--autoplay-policy=no-user-gesture-required', '--mute-audio', '--max-web-media-player-count=1000']
+      },
+      ChromeWithFlags: {
+        base: 'Chrome',
+        flags: ['--no-sandbox', '--autoplay-policy=no-user-gesture-required', '--mute-audio', '--max-web-media-player-count=1000']
       }
     },
     browsers: ['ChromeHeadlessWithFlags'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/playkit-js-ui",
-  "version": "0.79.2",
+  "version": "0.79.5",
   "description": "",
   "keywords": [
     "kaltura",
@@ -41,7 +41,7 @@
     "prettier": "prettier --write .",
     "test": "karma start karma.conf.js",
     "test:debug": "DEBUG_UNIT_TESTS=1 karma start karma.conf.js --auto-watch --no-single-run --browsers Chrome",
-    "test:watch": "karma start karma.conf.js --auto-watch --no-single-run",
+    "test:watch": "karma start karma.conf.js --auto-watch --no-single-run --browsers ChromeWithFlags",
     "clean": "rimraf ./dist",
     "prebuild": "npm run clean",
     "precommit": "npm run build:prod && npm run type-check && npm run lint:fix",

src/components/advanced-audio-desc/advanced-audio-desc.tsx

@@ -9,6 +9,9 @@ import {connect} from 'react-redux';
 import {ButtonControl} from '../button-control';
 import {bindActions} from '../../utils';
 import {actions} from '../../reducers/settings';
+import {IconComponent, registerToBottomBar} from '../bottom-bar';
+import {redux} from '../../index';
+import {withPlayer} from '../player';
 
 const COMPONENT_NAME = 'AdvancedAudioDesc';
 
@@ -29,12 +32,38 @@ const mapStateToProps = state => ({
  * @extends {Component}
  */
 @connect(mapStateToProps, bindActions(actions))
+@withPlayer
 @withEventDispatcher(COMPONENT_NAME)
 @withText({AdvancedAudioDescText: 'settings.advancedAudioDescription'})
-class AdvancedAudioDesc extends Component<any, any> {
+class AdvancedAudioDesc extends Component<any, any> implements IconComponent {
   constructor(props: any) {
     super();
     this.state = {toggle: false};
+    registerToBottomBar(COMPONENT_NAME, props.player, () => this.registerComponent());
+  }
+
+  registerComponent(): any {
+    return {
+      ariaLabel: () => this.getComponentText(),
+      displayName: COMPONENT_NAME,
+      order: 5,
+      svgIcon: () => this.getSvgIcon(),
+      onClick: () => this.onClick(),
+      component: () => {
+        return getComponent({...this.props, classNames: [style.upperBarIcon]});
+      },
+      shouldHandleOnClick: false
+    };
+  }
+
+  getComponentText = (): any => {
+    return this.props.AdvancedAudioDescText;
+  }
+
+  getSvgIcon = (): any => {
+    return {
+      type: redux.useStore().getState().settings.advancedAudioDesc ? IconType.AdvancedAudioDescriptionActive : IconType.AdvancedAudioDescription
+    };
   }
 
   /**
@@ -69,7 +98,7 @@ class AdvancedAudioDesc extends Component<any, any> {
    */
   render({AdvancedAudioDescText, innerRef}: any): VNode<any> | undefined {
     return !this._shouldRender() ? undefined : (
-      <ButtonControl name={COMPONENT_NAME} className={style.noIdleControl}>
+      <ButtonControl name={COMPONENT_NAME} className={[style.noIdleControl, this.props.classNames ? this.props.classNames.join(' ') : ''].join(' ')}>
         <Tooltip label={AdvancedAudioDescText}>
           <Button tabIndex="0" aria-label={AdvancedAudioDescText} className={`${style.controlButton}`} ref={innerRef} onClick={this.onClick}>
             <Icon type={this.state.toggle ? IconType.AdvancedAudioDescriptionActive : IconType.AdvancedAudioDescription} />
@@ -80,5 +109,9 @@ class AdvancedAudioDesc extends Component<any, any> {
   }
 }
 
+const getComponent = (props: any): VNode => {
+  return <AdvancedAudioDesc {...props} />;
+}
+
 AdvancedAudioDesc.displayName = COMPONENT_NAME;
 export {AdvancedAudioDesc};

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

@@ -1,5 +1,5 @@
 .player .bottom-bar {
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
   color: #fff;
   height: auto;
   width: 100%;
@@ -49,6 +49,15 @@
   .bottom-bar-area {
     position: relative;
     pointer-events: none;
+
+    .time-display {
+      padding: 0;
+      position: absolute;
+      bottom: 20px;
+      font-size: 12px;
+      line-height: normal;
+      font-weight: 400;
+    }
   }
 
   .control-button-container {
@@ -66,16 +75,10 @@
       margin: 0;
     }
   }
-  &.size-xs {
-    .left-controls {
-      .control-button-container {
-        display: none;
-      }
-    }
-  }
+
   &.size-xs,
   &.size-sm {
-    .control-button-container {
+    .control-button-container:not(.upper-bar-icon) {
       margin: 0 3px;
     }
   }

src/components/bottom-bar/bottom-bar-registry-manager.ts

@@ -0,0 +1,42 @@
+export interface IconComponent {
+  registerComponent(): any;
+  getSvgIcon(): any;
+  getComponentText(): any;
+}
+
+export class BottomBarRegistryManager {
+  private _registry: Map<string, any>;
+
+  constructor() {
+    this._registry = new Map();
+  }
+
+  public register(componentName: string, componentIcon: any): void {
+    if (!this.getComponentItem(componentName)) {
+      this._registry.set(componentName, componentIcon);
+    }
+  }
+
+  public unregister(componentName: string): void {
+    if (this.getComponentItem(componentName)) {
+      this._registry.delete(componentName);
+    }
+  }
+
+  public getComponentItem(componentName: string): any {
+    return this._registry.get(componentName);
+  }
+
+  public clear(): void {
+    this._registry.clear();
+  }
+}
+
+export const bottomBarRegistryManager: string = 'bottomBarRegistryManager';
+
+export const registerToBottomBar = (componentName: string, player: any, getIconDtoCallback: () => any): void => {
+  const bottomBarRegistry = (player?.getService(bottomBarRegistryManager) as BottomBarRegistryManager) || undefined;
+  if (bottomBarRegistry && !bottomBarRegistry.getComponentItem(componentName)) {
+    bottomBarRegistry.register(componentName, getIconDtoCallback());
+  }
+};

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

@@ -2,24 +2,30 @@ import style from '../../styles/style.scss';
 import {h, Component, createRef, RefObject} from 'preact';
 import {bindActions} from '../../utils/bind-actions';
 import {actions} from '../../reducers/shell';
+import {actions as bottomBarActions} from '../../reducers/bottom-bar';
 import {connect} from 'react-redux';
 import {PlayerArea} from '../../components/player-area';
-import {PLAYER_BREAK_POINTS} from '../../components';
+import {PLAYER_BREAK_POINTS, TimeDisplayPlaybackContainer} from '../../components';
 import {withEventManager} from '../../event';
 import {withPlayer} from '../player';
 import {calculateControlsSize, filterControlsByPriority} from './bettom-bar-utils';
+import {BottomBarRegistryManager, bottomBarRegistryManager} from './bottom-bar-registry-manager';
+
 
 const LOWER_PRIORITY_CONTROLS: string[][] = [
-  ['AdvancedAudioDesc'],
+  ['PictureInPicture'],
   ['VrStereo'],
-  ['Rewind', 'Forward'],
+  ['TimeDisplayPlaybackContainer'],
+  ['AdvancedAudioDesc'],
   ['ClosedCaptions'],
-  ['PictureInPicture'],
+  ['CaptionsControl'],
   ['Cast']
 ];
 const CRL_WIDTH = 32;
 const CRL_MARGIN = 12;
 
+const TIME_DISPLAY_COMP: string = 'TimeDisplayPlaybackContainer';
+
 /**
  * mapping state to props
  * @param {*} state - redux store state
@@ -45,7 +51,7 @@ const COMPONENT_NAME = 'BottomBar';
  */
 @withPlayer
 @withEventManager
-@connect(mapStateToProps, bindActions(actions))
+@connect(mapStateToProps, bindActions({...actions, ...bottomBarActions}))
 class BottomBar extends Component<any, any> {
   bottomBarContainerRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
   presetControls: {[controlName: string]: boolean} = {};
@@ -63,6 +69,7 @@ class BottomBar extends Component<any, any> {
       .map(control => control.displayName)
       .forEach(controlName => (this.presetControls[controlName] = true));
     this.state = {fitInControls: this.presetControls, activeControls: this.presetControls};
+    props.player.registerService(bottomBarRegistryManager, new BottomBarRegistryManager());
   }
 
   /**
@@ -108,9 +115,11 @@ class BottomBar extends Component<any, any> {
       const controlsToRemove = filterControlsByPriority(currentMinBreakPointWidth, currentBarWidth, currentControlWidth, lowerPriorityControls);
       const removedControls = {};
       controlsToRemove.forEach(control => (removedControls[control] = false));
+      this.props.updateControlsToMove(controlsToRemove);
       this.setState({fitInControls: {...this.presetControls, ...removedControls}});
     } else {
       this.setState({fitInControls: {...this.presetControls}});
+      this.props.updateControlsToMove([]);
     }
   }
 
@@ -127,10 +136,12 @@ class BottomBar extends Component<any, any> {
       styleClass.push(style.hide);
     }
 
+    const shouldRenderTimeDisplay: boolean = this.presetControls[TIME_DISPLAY_COMP] && !this.state.fitInControls[TIME_DISPLAY_COMP];
     return (
       <div className={styleClass.join(' ')}>
         <div className={style.bottomBarArea}>
           <PlayerArea shouldUpdate={true} name={'BottomBar'}>
+            {shouldRenderTimeDisplay && <TimeDisplayPlaybackContainer/>}
             {props.children}
           </PlayerArea>
         </div>

src/components/bottom-bar/index.ts

@@ -1 +1,2 @@
 export {BottomBar} from './bottom-bar';
+export * from './bottom-bar-registry-manager';