@24i/bigscreen-sdk 1.0.6-alpha.2147 → 1.0.7-alpha.2158

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.6-alpha.2147",
+    "version": "1.0.7-alpha.2158",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -38,7 +38,7 @@
     "homepage": "https://github.com/24i/smartapps-bigscreen-sdk#readme",
     "dependencies": {
         "@24i/player-base": "6.10.0",
-        "@24i/smartapps-datalayer": "3.0.2",
+        "@24i/smartapps-datalayer": "3.0.3",
         "@sentry/browser": "^7.12.1",
         "@types/prop-types": "^15.7.5",
         "@types/scheduler": "^0.16.2",

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

@@ -89,6 +89,7 @@ export class PlayerUI extends Component<Props>
     onKeyPlay = () => {
         if (this.seeking.isSeeking()) {
             this.seeking.confirmSeek();
+            if (!this.isPlaying()) this.trigger(PlayerAction.PLAY);
             return true;
         }
         if (!this.isPlaying()) {
@@ -102,6 +103,7 @@ export class PlayerUI extends Component<Props>
     onKeyPause = () => {
         if (this.seeking.isAutomaticallySeeking()) {
             this.seeking.stopAutomaticSeek();
+            if (this.isPlaying()) this.trigger(PlayerAction.PAUSE);
             return true;
         }
         if (this.isPlaying()) {
@@ -113,6 +115,11 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyPlayPause = () => {
+        if (this.seeking.isSeeking()) {
+            this.seeking.confirmSeek();
+            if (!this.isPlaying()) this.trigger(PlayerAction.PLAY);
+            return true;
+        }
         this.show();
         if (this.isPlaying()) this.trigger(PlayerAction.PAUSE);
         else this.trigger(PlayerAction.PLAY);
@@ -149,9 +156,9 @@ export class PlayerUI extends Component<Props>
         return false;
     };
 
-    getPlayer() {
+    getPlayer = () => {
         return this.player!;
-    }
+    };
 
     setPlayer(player: PlayerBase<any>) {
         this.player = player;

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

@@ -12,6 +12,7 @@ const CONSECUTIVE_TIMEOUT = 500;
 const FAST_TRESHOLD = 5;
 const SLOW_TIME = 10000;
 const FAST_TIME = 20000;
+const SAFE_END_MARGIN = 10000;
 const TO_PERCENT = 100;
 
 type Props = PlayerUICommonProps;
@@ -86,11 +87,23 @@ export class Seekbar extends Component<Props> implements IFocusable {
 
     onRight = () => {
         const { ui } = this.props;
+        const { seekTime } = ui.seeking;
+        if (seekTime == null && this.currentTime + SLOW_TIME >= this.duration) return true;
         this.rightConsecutives += 1;
         if (ui.seeking.isAutomaticallySeeking()) {
             ui.seeking.stopAutomaticSeek();
         }
-        ui.seeking.seekForward(this.rightConsecutives >= FAST_TRESHOLD ? FAST_TIME : SLOW_TIME);
+        const isFastSeeking = this.rightConsecutives >= FAST_TRESHOLD;
+        if (
+            (seekTime != null &&
+              (seekTime + SLOW_TIME >= this.duration - SAFE_END_MARGIN
+              || (isFastSeeking && seekTime + FAST_TIME >= this.duration - SAFE_END_MARGIN)))
+            || (seekTime == null && this.currentTime >= this.duration - SAFE_END_MARGIN)
+        ) {
+            ui.seeking.setSeekTime(this.duration - SAFE_END_MARGIN);
+        } else {
+            ui.seeking.seekForward(isFastSeeking ? FAST_TIME : SLOW_TIME);
+        }
         this.rightConsecutiveTimeout.set(() => {
             this.rightConsecutives = 0;
         }, CONSECUTIVE_TIMEOUT);
@@ -98,8 +111,10 @@ export class Seekbar extends Component<Props> implements IFocusable {
     };
 
     onEnter = () => {
-        const { ui } = this.props;
-        return ui.seeking.confirmSeek();
+        const { ui: { seeking, getPlayer } } = this.props;
+        const player = getPlayer();
+        if (!player.playing) player.play();
+        return seeking.confirmSeek();
     };
 
     onSeekTimeUpdate = (seekTime: number) => {

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

@@ -110,6 +110,11 @@ export class Seeking implements IEvents<SeekingEventsMap> {
         this.triggerEvent('seektimeupdate', this.seekTime!);
     };
 
+    setSeekTime = (seekTime: number) => {
+        this.seekTime = seekTime;
+        this.triggerEvent('seektimeupdate', this.seekTime!);
+    };
+
     confirmSeek() {
         if (!this.player) return false;
         this.stopAutomaticSeek();

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

@@ -26,9 +26,17 @@ const getSeekingMock = (): jest.Mocked<IPlayerUI['seeking']> => ({
     unsubscribeEvents: jest.fn(),
     setPlayer: jest.fn(),
     nullSeekTime: jest.fn(),
+    setSeekTime: jest.fn(),
 });
 
-export const getPlayerMock = (): PlayerBase<any> => new PlayerBaseMock();
+const PLAYER_MOCK_DURATION = 60000;
+
+export const getPlayerMock = (): PlayerBase<any> =>{
+    const playerMock =  new PlayerBaseMock();
+    jest.spyOn(playerMock, 'duration', 'get').mockReturnValue(PLAYER_MOCK_DURATION);
+
+    return playerMock;
+};
 
 export const getUiMock = (): { ui: jest.Mocked<IPlayerUI> } => ({
     ui: {

package/packages/utils/src/elementUtils.ts

@@ -44,7 +44,7 @@ export const isElementWrappedBy = (
     let wrapperElement: HTMLElement | null = null;
     let condition: ((currentWrapper: HTMLElement) => boolean) | null = null;
     if (typeof wrapperElementOrReferenceOrCondition === 'function') {
-        condition = wrapperElementOrReferenceOrCondition;
+        condition = wrapperElementOrReferenceOrCondition as (currentWrapper: HTMLElement) => boolean;
     } else {
         wrapperElement = unwrapReference(wrapperElementOrReferenceOrCondition);
         if (!wrapperElement) return false;