@24i/bigscreen-sdk 1.0.12-alpha.2254 → 1.0.12

package/packages/player-ui/src/PlayerUI.tsx

@@ -20,6 +20,7 @@ type Props = {
     timeout?: number,
     className?: string,
     hidden?: boolean,
+    disableSeeking?: boolean,
     onClose?: () => void,
     onHide?: () => void,
     isPauseAllowed?: () => boolean,
@@ -34,7 +35,7 @@ export class PlayerUI extends Component<Props>
 
     isHidingDisabled = false;
 
-    seeking: Seeking;
+    seeking: Seeking | undefined;
 
     div = createRef<HTMLDivElement>();
 
@@ -47,6 +48,7 @@ export class PlayerUI extends Component<Props>
         timeout: 5000,
         className: '',
         hidden: false,
+        disableSeeking: false,
         onClose: noop,
         onHide: noop,
         isPauseAllowed: () => true,
@@ -56,20 +58,22 @@ export class PlayerUI extends Component<Props>
 
     constructor(props: Props) {
         super(props);
-        const { hidden, player } = this.props;
+        const { hidden, player, disableSeeking } = this.props;
         this.player = player;
-        this.seeking = new Seeking(player);
+        if (!disableSeeking) {
+            this.seeking = new Seeking(player);
+        }
         this.isHidden = hidden;
     }
 
     componentDidMount() {
         if (!this.isHidden) this.heartbeat();
-        this.seeking.subscribeEvents();
+        if (this.seeking) this.seeking.subscribeEvents();
     }
 
     componentWillUnmount() {
         this.stopHeartbeat();
-        this.seeking.unsubscribeEvents();
+        if (this.seeking) this.seeking.unsubscribeEvents();
     }
 
     onKeyDown = (event: KeyboardEvent) => {
@@ -99,7 +103,7 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyPlay = () => {
-        if (this.seeking.isSeeking()) {
+        if (this.seeking?.isSeeking()) {
             this.seeking.confirmSeek();
             if (!this.isPlaying()) this.trigger(PlayerAction.PLAY);
             return true;
@@ -115,7 +119,7 @@ export class PlayerUI extends Component<Props>
     onKeyPause = () => {
         const { isPauseAllowed } = this.props;
         if (!isPauseAllowed()) return false;
-        if (this.seeking.isAutomaticallySeeking()) {
+        if (this.seeking?.isAutomaticallySeeking()) {
             this.seeking.stopAutomaticSeek();
             if (this.isPlaying()) this.trigger(PlayerAction.PAUSE);
             return true;
@@ -131,7 +135,7 @@ export class PlayerUI extends Component<Props>
     onKeyPlayPause = () => {
         const { isPauseAllowed } = this.props;
         if (!isPauseAllowed()) return false;
-        if (this.seeking.isSeeking()) {
+        if (this.seeking?.isSeeking()) {
             this.seeking.confirmSeek();
             if (!this.isPlaying()) this.trigger(PlayerAction.PLAY);
             return true;
@@ -149,6 +153,7 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyForward = () => {
+        if (!this.seeking) return true;
         if (this.seeking.isAutomaticallySeekingBackward) this.seeking.stopAutomaticSeek();
         this.disableHiding();
         this.seeking.automaticSeekForward();
@@ -156,6 +161,7 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyRewind = () => {
+        if (!this.seeking) return true;
         if (this.seeking.isAutomaticallySeekingForward) this.seeking.stopAutomaticSeek();
         this.disableHiding();
         this.seeking.automaticSeekBackward();
@@ -167,7 +173,7 @@ export class PlayerUI extends Component<Props>
 
     setPlayer(player: PlayerBase<any>) {
         this.player = player;
-        this.seeking.setPlayer(player);
+        if (this.seeking) this.seeking.setPlayer(player);
     }
 
     trigger(action: PlayerAction, payload?: any) {

package/packages/player-ui/src/Seekbar.tsx

@@ -7,7 +7,7 @@ import { switchByKey } from '@24i/bigscreen-sdk/device/keymap';
 import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
 import { PlayerTime } from './PlayerTime';
 import { getLiveProgressBasedOnCurrentTime } from './timeUtils';
-import { PlayerUICommonProps } from './types';
+import { IPlayerUIWithSeeking, PlayerUICommonProps } from './types';
 
 const CONSECUTIVE_TIMEOUT = 500;
 const FAST_TRESHOLD = 5;
@@ -16,7 +16,9 @@ const FAST_TIME = 30000;
 const SAFE_END_MARGIN = 10000;
 const TO_PERCENT = 100;
 
-type Props = PlayerUICommonProps;
+type Props = {
+    ui: IPlayerUIWithSeeking;
+} & PlayerUICommonProps;
 
 export class Seekbar extends Component<Props> implements IFocusable {
     wrap = createRef<HTMLDivElement>();

package/packages/player-ui/src/index.ts

@@ -1,5 +1,6 @@
 export { PlayerUI } from './PlayerUI';
 export type { PlayerUIState } from './PlayerUI';
+export type { IPlayerUIWithSeeking } from './types';
 export { BackwardButton } from './BackwardButton';
 export { CurrentTime } from './CurrentTime';
 export { Duration } from './Duration';

package/packages/player-ui/src/mocks.ts

@@ -1,8 +1,8 @@
 import { PlayerBase, PlayerBaseMock } from '@24i/player-base';
 import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
-import { IPlayerUI } from './types';
+import { IPlayerUIWithSeeking } from './types';
 
-const getSeekingMock = (): jest.Mocked<IPlayerUI['seeking']> => ({
+const getSeekingMock = (): jest.Mocked<IPlayerUIWithSeeking['seeking']> => ({
     events: {} as EventsManager<{}>,
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
@@ -42,7 +42,7 @@ export const getPlayerMock = (): PlayerBase<any> => {
     return playerMock;
 };
 
-export const getUiMock = (): { ui: jest.Mocked<IPlayerUI> } => ({
+export const getUiMock = (): { ui: jest.Mocked<IPlayerUIWithSeeking> } => ({
     ui: {
         getPlayer: jest.fn((): PlayerBase<any> => getPlayerMock()),
         heartbeat: jest.fn(),

package/packages/player-ui/src/types.ts

@@ -20,7 +20,7 @@ export interface ActionsWithPayloadMap {
 }
 
 export interface IPlayerUI {
-    seeking: Seeking;
+    seeking?: Seeking;
     getPlayer: () => PlayerBase<any>,
     disableHiding: () => void,
     enableHiding: () => void,
@@ -32,6 +32,8 @@ export interface IPlayerUI {
     isPlaying: () => boolean,
 }
 
+export type IPlayerUIWithSeeking = Required<IPlayerUI>;
+
 export type PlayerUICommonProps = {
     ui: IPlayerUI,
     className?: string,