@24i/bigscreen-sdk 1.0.54-alpha.2840 → 1.0.54-alpha.2841

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.54-alpha.2840",
+    "version": "1.0.54-alpha.2841",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {

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

@@ -15,6 +15,7 @@ const SLOW_TIME = 10000;
 const FAST_TIME = 30000;
 const SAFE_END_MARGIN = 10000;
 const TO_PERCENT = 100;
+const PENDING_SEEK_THRESHOLD = 2000;
 
 type Props = {
     ui: IPlayerUIWithSeeking;
@@ -50,6 +51,8 @@ export class Seekbar extends Component<Props> implements IFocusable {
 
     seekingDisabled = false;
 
+    pendingSeekTime: number | null = null;
+
     static defaultProps = {
         className: '',
     };
@@ -95,6 +98,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
         const percentage = (TO_PERCENT * event.offsetX) / wrapWidth;
         const seekTo = Math.round((this.duration / TO_PERCENT) * percentage);
         seeking.setSeekTime(seekTo);
+        this.pendingSeekTime = seekTo;
         seeking.confirmSeek();
     };
 
@@ -107,6 +111,9 @@ export class Seekbar extends Component<Props> implements IFocusable {
     onMouseUp = () => {
         const { ui } = this.props;
         this.isMouseDownPressed = false;
+        if (ui.seeking.seekTime != null) {
+            this.pendingSeekTime = ui.seeking.seekTime;
+        }
         ui.seeking.confirmSeek();
         ui.enableHiding();
     };
@@ -169,13 +176,17 @@ export class Seekbar extends Component<Props> implements IFocusable {
         const { ui: { seeking, getPlayer } } = this.props;
         const player = getPlayer();
         if (!player.playing) player.play();
+        if (seeking.seekTime != null) {
+            this.pendingSeekTime = seeking.seekTime;
+        }
         return seeking.confirmSeek();
     };
 
     onSeekTimeUpdate = (seekTime: number) => {
-        const time = seekTime !== null ? seekTime : this.getCurrentTime();
-        this.seekTime.current!.updateTime(time);
-        this.updateSeekBar();
+        if (seekTime !== null) {
+            this.seekTime.current!.updateTime(seekTime);
+            this.updateSeekBar();
+        }
     };
 
     onStopAutomaticSeek = () => {
@@ -185,7 +196,13 @@ export class Seekbar extends Component<Props> implements IFocusable {
 
     onTimeUpdate = ({ currentTime }: ITimeUpdateEvent) => {
         const { ui } = this.props;
+        const { pendingSeekTime } = this;
         this.currentTime = currentTime;
+        const isPendingSeekReached = pendingSeekTime !== null
+            && Math.abs(currentTime - pendingSeekTime) < PENDING_SEEK_THRESHOLD;
+        if (isPendingSeekReached) {
+            this.pendingSeekTime = null;
+        }
         if (ui.seeking.seekTime === null) {
             this.seekTime.current!.updateTime(currentTime);
         }
@@ -215,10 +232,10 @@ export class Seekbar extends Component<Props> implements IFocusable {
                 programEnd,
                 start,
                 end,
-                player.currentTime,
+                this.currentTime,
             );
         }
-        return player.currentTime;
+        return this.currentTime;
     }
 
     focus() {
@@ -229,7 +246,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
         const { ui } = this.props;
         const time = ui.seeking.isSeeking()
             ? ui.seeking.seekTime!
-            : this.getCurrentTime();
+            : (this.pendingSeekTime ?? this.getCurrentTime());
         const percentTime = TO_PERCENT * (time / this.duration);
         this.seekBar.current!.style.width = `${percentTime}%`;
         this.seekPoint.current!.style.left = `${percentTime}%`;