@applicaster/zapp-react-native-utils 13.0.0-alpha.2635505531 → 13.0.0-alpha.3334148221
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/appUtils/keyCodes/keysByPlatform.js +0 -3
- package/appUtils/playerManager/index.ts +6 -2
- package/appUtils/playerManager/player.ts +5 -13
- package/appUtils/playerManager/playerNative.ts +1 -2
- package/appUtils/playerManager/usePlayerControllerSetup.tsx +3 -17
- package/package.json +2 -2
- package/reactHooks/player/__tests__/useAutoSeek.test.tsx +1 -8
- package/reactHooks/player/const.ts +1 -1
- package/reactHooks/player/useAutoSeek.tsx +10 -29
- package/reactHooks/player/useSeek.tsx +52 -3
- package/reactHooks/player/useTapSeek.tsx +7 -34
- package/appUtils/playerManager/DelayedSeekPlayerWrapper.tsx +0 -180
- package/reactHooks/player/TVSeekControlller/ISeekController.ts +0 -7
- package/reactHooks/player/TVSeekControlller/LongPressSeekController.ts +0 -124
- package/reactHooks/player/TVSeekControlller/TVSeekController.ts +0 -152
- package/reactHooks/player/TVSeekControlller/TapSeekController.ts +0 -73
|
@@ -77,9 +77,6 @@ const web = {
|
|
|
77
77
|
Exit: { code: "Exit", keyCode: null },
|
|
78
78
|
Escape: { code: "Escape", keyCode: 27 },
|
|
79
79
|
EscapeDevice: { code: "Escape", keyCode: 27 },
|
|
80
|
-
Z: { code: "KeyZ", keyCode: 90 },
|
|
81
|
-
X: { code: "KeyX", keyCode: 88 },
|
|
82
|
-
C: { code: "KeyC", keyCode: 67 },
|
|
83
80
|
};
|
|
84
81
|
|
|
85
82
|
const android_tv = {
|
|
@@ -169,8 +169,12 @@ export class PlayerManager {
|
|
|
169
169
|
this.addPlayer(id, playerController);
|
|
170
170
|
|
|
171
171
|
if (playerController.playerRole === PlayerRole.Primary) {
|
|
172
|
-
if (
|
|
173
|
-
RNPlayerManager
|
|
172
|
+
if (RNPlayerManager) {
|
|
173
|
+
Object.keys(RNPlayerManager).forEach((pluginId) => {
|
|
174
|
+
if (pluginId !== playerController.playerPluginId) {
|
|
175
|
+
RNPlayerManager[pluginId]?.stopBackgroundPlayback?.();
|
|
176
|
+
}
|
|
177
|
+
});
|
|
174
178
|
}
|
|
175
179
|
|
|
176
180
|
playerController.addListener({
|
|
@@ -91,8 +91,6 @@ export class Player {
|
|
|
91
91
|
this.onVideoProgress = this.onVideoProgress.bind(this);
|
|
92
92
|
this.onVideoLoad = this.onVideoLoad.bind(this);
|
|
93
93
|
this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
|
|
94
|
-
this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
|
|
95
|
-
|
|
96
94
|
this.entryObservable = null;
|
|
97
95
|
}
|
|
98
96
|
|
|
@@ -323,7 +321,7 @@ export class Player {
|
|
|
323
321
|
* You should use dispatchPlayerEvent at PlayerContainer or call playerManager.invokeHandler directly
|
|
324
322
|
* This allows you to use one method for everything.
|
|
325
323
|
*/
|
|
326
|
-
|
|
324
|
+
onSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
|
|
327
325
|
const { isLive, seekableDuration, currentTime, duration, seekTime } = event;
|
|
328
326
|
|
|
329
327
|
this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
|
|
@@ -338,11 +336,10 @@ export class Player {
|
|
|
338
336
|
});
|
|
339
337
|
};
|
|
340
338
|
|
|
341
|
-
|
|
339
|
+
onSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
|
|
342
340
|
const { isLive, seekableDuration, currentTime, duration } = event;
|
|
343
341
|
|
|
344
342
|
this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
|
|
345
|
-
|
|
346
343
|
this.playerState.seekPosition = null;
|
|
347
344
|
|
|
348
345
|
if (!isLive) {
|
|
@@ -353,7 +350,7 @@ export class Player {
|
|
|
353
350
|
callbackName: SharedPlayerCallBacksKeys.OnPlayerSeekComplete,
|
|
354
351
|
event,
|
|
355
352
|
});
|
|
356
|
-
}
|
|
353
|
+
};
|
|
357
354
|
|
|
358
355
|
onVideoEnd = (event) => {
|
|
359
356
|
this.invokeListenersUpdate({
|
|
@@ -656,8 +653,8 @@ export class Player {
|
|
|
656
653
|
};
|
|
657
654
|
|
|
658
655
|
public getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => ({
|
|
659
|
-
onPlayerSeekStart: this.
|
|
660
|
-
onPlayerSeekComplete: this.
|
|
656
|
+
onPlayerSeekStart: this.onSeekStart,
|
|
657
|
+
onPlayerSeekComplete: this.onSeekComplete,
|
|
661
658
|
onVideoEnd: this.onVideoEnd,
|
|
662
659
|
onError: this.onError,
|
|
663
660
|
onVideoError: this.onVideoError,
|
|
@@ -736,10 +733,5 @@ export class Player {
|
|
|
736
733
|
|
|
737
734
|
public supportsNativeControls = (): boolean => false;
|
|
738
735
|
public supportNativeCast = (): boolean => false;
|
|
739
|
-
|
|
740
|
-
public isInDelayedSeek = (): boolean => false;
|
|
741
|
-
public enterDelayedSeek() {}
|
|
742
|
-
|
|
743
|
-
public exitDelayedSeek() {}
|
|
744
736
|
public destroy = () => {};
|
|
745
737
|
}
|
|
@@ -222,10 +222,9 @@ export class PlayerNative extends Player {
|
|
|
222
222
|
|
|
223
223
|
onVideoLoad = (event) => {
|
|
224
224
|
if (this.startPosition) {
|
|
225
|
+
super.onVideoLoad({ ...event, ignoreContinueWatching: true });
|
|
225
226
|
this.seekTo(this.startPosition);
|
|
226
227
|
this.startPosition = null;
|
|
227
|
-
|
|
228
|
-
super.onVideoLoad({ ...event, ignoreContinueWatching: true });
|
|
229
228
|
} else {
|
|
230
229
|
super.onVideoLoad(event);
|
|
231
230
|
}
|
|
@@ -5,8 +5,6 @@ import { playerManager } from "./index";
|
|
|
5
5
|
import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
|
|
6
6
|
import { PlayerRole } from "./conts";
|
|
7
7
|
import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
|
|
8
|
-
import { isTV } from "../../reactUtils";
|
|
9
|
-
import { DelayedSeekPlayerWrapper } from "./DelayedSeekPlayerWrapper";
|
|
10
8
|
|
|
11
9
|
// TODO: Rename to ControllerType
|
|
12
10
|
export const usePlayerControllerSetup = ({
|
|
@@ -41,7 +39,7 @@ export const usePlayerControllerSetup = ({
|
|
|
41
39
|
? { supports_native_controls: true, ...config }
|
|
42
40
|
: config;
|
|
43
41
|
|
|
44
|
-
const
|
|
42
|
+
const newPlayerController = new ControllerType({
|
|
45
43
|
player: ref,
|
|
46
44
|
listener: props as any,
|
|
47
45
|
config: newConfig,
|
|
@@ -49,21 +47,9 @@ export const usePlayerControllerSetup = ({
|
|
|
49
47
|
entry,
|
|
50
48
|
playerPluginId: pluginId,
|
|
51
49
|
playerRole: PlayerRole.Primary,
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
if (isTV()) {
|
|
55
|
-
const wrappedPlayerController = new ControllerType({
|
|
56
|
-
...combinedProps,
|
|
57
|
-
playerRole: PlayerRole.Unspecified,
|
|
58
|
-
playerId: playerId + "." + "wrapped",
|
|
59
|
-
});
|
|
50
|
+
});
|
|
60
51
|
|
|
61
|
-
|
|
62
|
-
new DelayedSeekPlayerWrapper(combinedProps, wrappedPlayerController)
|
|
63
|
-
);
|
|
64
|
-
} else {
|
|
65
|
-
setPlayerController(new ControllerType(combinedProps));
|
|
66
|
-
}
|
|
52
|
+
setPlayerController(newPlayerController);
|
|
67
53
|
}, [playerId, entry?.id]);
|
|
68
54
|
|
|
69
55
|
React.useEffect(() => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-utils",
|
|
3
|
-
"version": "13.0.0-alpha.
|
|
3
|
+
"version": "13.0.0-alpha.3334148221",
|
|
4
4
|
"description": "Applicaster Zapp React Native utilities package",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"homepage": "https://github.com/applicaster/quickbrick#readme",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@applicaster/applicaster-types": "13.0.0-alpha.
|
|
31
|
+
"@applicaster/applicaster-types": "13.0.0-alpha.3334148221",
|
|
32
32
|
"buffer": "^5.2.1",
|
|
33
33
|
"camelize": "^1.0.0",
|
|
34
34
|
"create-react-context": "^0.2.3",
|
|
@@ -9,18 +9,11 @@ jest.useFakeTimers();
|
|
|
9
9
|
|
|
10
10
|
const rewind = jest.fn();
|
|
11
11
|
const forward = jest.fn();
|
|
12
|
-
const exitDelayedSeek = jest.fn();
|
|
13
|
-
const enterDelayedSeek = jest.fn();
|
|
14
12
|
|
|
15
13
|
jest
|
|
16
14
|
.spyOn(playerManager, "getInstanceController")
|
|
17
15
|
// @ts-ignore
|
|
18
|
-
.mockImplementation(() => ({
|
|
19
|
-
rewind,
|
|
20
|
-
forward,
|
|
21
|
-
exitDelayedSeek,
|
|
22
|
-
enterDelayedSeek,
|
|
23
|
-
}));
|
|
16
|
+
.mockImplementation(() => ({ rewind, forward }));
|
|
24
17
|
|
|
25
18
|
describe("useAutoSeek", () => {
|
|
26
19
|
beforeEach(() => {
|
|
@@ -13,24 +13,20 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
|
|
|
13
13
|
const [isRunning, setIsRunning] = useState<boolean>(false);
|
|
14
14
|
const [direction, setDirection] = useState<Nullable<SEEK_TYPE>>(null);
|
|
15
15
|
const [multiplier, setMultiplier] = useState(1);
|
|
16
|
-
|
|
17
16
|
const intervalTimer = React.useRef(null);
|
|
18
17
|
const prevRunning = usePrevious(isRunning);
|
|
19
18
|
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
intervalTimer.current = setInterval(() => {
|
|
19
|
+
const clearIntervalTimer = () => {
|
|
20
|
+
try {
|
|
21
|
+
clearInterval(intervalTimer.current);
|
|
22
|
+
} catch (err) {
|
|
26
23
|
intervalTimer.current = null;
|
|
27
|
-
|
|
28
|
-
}, ON_HOLD_INTERVAL);
|
|
24
|
+
}
|
|
29
25
|
};
|
|
30
26
|
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
intervalTimer.current =
|
|
27
|
+
const setIntervalTimer = (cb) => {
|
|
28
|
+
clearIntervalTimer();
|
|
29
|
+
intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
|
|
34
30
|
};
|
|
35
31
|
|
|
36
32
|
const resetState = () => {
|
|
@@ -41,21 +37,6 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
|
|
|
41
37
|
};
|
|
42
38
|
|
|
43
39
|
useEffect(() => {
|
|
44
|
-
const player = playerManager.getInstanceController();
|
|
45
|
-
if (!player) return;
|
|
46
|
-
|
|
47
|
-
if (isRunning) {
|
|
48
|
-
player?.enterDelayedSeek();
|
|
49
|
-
} else if (!isRunning) {
|
|
50
|
-
player.exitDelayedSeek();
|
|
51
|
-
}
|
|
52
|
-
}, [isRunning]);
|
|
53
|
-
|
|
54
|
-
useEffect(() => {
|
|
55
|
-
if (!isRunning) {
|
|
56
|
-
return;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
40
|
const player = playerManager.getInstanceController();
|
|
60
41
|
|
|
61
42
|
if (!player) return;
|
|
@@ -64,7 +45,7 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
|
|
|
64
45
|
player[direction](Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
|
|
65
46
|
resetHUDTimer();
|
|
66
47
|
}
|
|
67
|
-
}, [multiplier, direction
|
|
48
|
+
}, [multiplier, direction]);
|
|
68
49
|
|
|
69
50
|
useEffect(() => {
|
|
70
51
|
if (isRunning && isRunning !== prevRunning) {
|
|
@@ -96,7 +77,7 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
|
|
|
96
77
|
setDirection(eventType);
|
|
97
78
|
setIsRunning(true);
|
|
98
79
|
},
|
|
99
|
-
[isRunning
|
|
80
|
+
[isRunning]
|
|
100
81
|
);
|
|
101
82
|
|
|
102
83
|
return React.useMemo(
|
|
@@ -1,9 +1,58 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { SEEK_TYPE } from "./const";
|
|
3
|
+
import { useTapSeek } from "./useTapSeek";
|
|
4
|
+
import { useAutoSeek } from "./useAutoSeek";
|
|
2
5
|
import { noop } from "../../functionUtils";
|
|
3
|
-
import { TVSeekController } from "./TVSeekControlller/TVSeekController";
|
|
4
6
|
|
|
5
7
|
export const useSeek = (resetHUDTimer = noop) => {
|
|
6
|
-
|
|
8
|
+
const handlePressEvent = useTapSeek();
|
|
9
|
+
const { autoSeekStart, autoSeekStop } = useAutoSeek(resetHUDTimer);
|
|
10
|
+
|
|
11
|
+
const onForwardPress = () => {
|
|
12
|
+
handlePressEvent(SEEK_TYPE.FORWARD);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const onRewindPress = () => {
|
|
16
|
+
handlePressEvent(SEEK_TYPE.REWIND);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const onForwardPressIn = () => {
|
|
20
|
+
autoSeekStart(SEEK_TYPE.FORWARD);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const onForwardPressOut = () => {
|
|
24
|
+
autoSeekStop();
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const onRewindPressIn = () => {
|
|
28
|
+
autoSeekStart(SEEK_TYPE.REWIND);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const onRewindLongPress = () => {
|
|
32
|
+
autoSeekStart(SEEK_TYPE.REWIND);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const onForwardLongPress = () => {
|
|
36
|
+
autoSeekStart(SEEK_TYPE.FORWARD);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const onRewindPressOut = () => {
|
|
40
|
+
autoSeekStop();
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
return React.useMemo(
|
|
44
|
+
() => ({
|
|
45
|
+
onForwardPress,
|
|
46
|
+
onRewindPress,
|
|
47
|
+
onForwardPressIn,
|
|
48
|
+
onForwardPressOut,
|
|
49
|
+
onRewindPressIn,
|
|
50
|
+
onRewindPressOut,
|
|
51
|
+
onRewindLongPress,
|
|
52
|
+
onForwardLongPress,
|
|
53
|
+
}),
|
|
54
|
+
[handlePressEvent, autoSeekStart]
|
|
55
|
+
);
|
|
7
56
|
};
|
|
8
57
|
|
|
9
58
|
export const withUseSeek = (Component) =>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useCallback, useRef
|
|
1
|
+
import { useCallback, useRef } from "react";
|
|
2
2
|
import * as R from "ramda";
|
|
3
3
|
import {
|
|
4
4
|
MAX_SEEK_TIME,
|
|
@@ -10,11 +10,13 @@ import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
|
|
|
10
10
|
|
|
11
11
|
type SeekType = SEEK_TYPE | null;
|
|
12
12
|
|
|
13
|
-
const getSkipTime = (multiplier) =>
|
|
14
|
-
R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier);
|
|
13
|
+
const getSkipTime = (multiplier) => {
|
|
14
|
+
const skipTime = R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier);
|
|
15
|
+
|
|
16
|
+
return skipTime;
|
|
17
|
+
};
|
|
15
18
|
|
|
16
19
|
export const useTapSeek = () => {
|
|
17
|
-
const [resumeTimer, setResumeTimer] = useState<NodeJS.Timeout>(null);
|
|
18
20
|
const onPressMultiplier = useRef(1);
|
|
19
21
|
const lastPressTime = useRef(0);
|
|
20
22
|
const currentOnPressEventType = useRef<SeekType>(null);
|
|
@@ -44,41 +46,12 @@ export const useTapSeek = () => {
|
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
const seekTime = getSkipTime(onPressMultiplier.current);
|
|
47
|
-
|
|
48
49
|
player[eventType](seekTime);
|
|
49
50
|
|
|
50
|
-
if (resumeTimer) {
|
|
51
|
-
clearTimeout(resumeTimer);
|
|
52
|
-
|
|
53
|
-
const timer = setTimeout(() => {
|
|
54
|
-
player.exitDelayedSeek();
|
|
55
|
-
setResumeTimer(null);
|
|
56
|
-
}, 2000);
|
|
57
|
-
|
|
58
|
-
setResumeTimer(timer);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
const clicksBeforePause = 3;
|
|
62
|
-
|
|
63
|
-
// Only pause player if user starts to seek on large increments
|
|
64
|
-
if (onPressMultiplier.current > clicksBeforePause) {
|
|
65
|
-
if (!player.isPaused()) {
|
|
66
|
-
player.enterDelayedSeek();
|
|
67
|
-
|
|
68
|
-
const timer = setTimeout(() => {
|
|
69
|
-
player.exitDelayedSeek();
|
|
70
|
-
setResumeTimer(null);
|
|
71
|
-
}, 2000);
|
|
72
|
-
|
|
73
|
-
clearTimeout(resumeTimer);
|
|
74
|
-
setResumeTimer(timer);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
51
|
lastPressTime.current = now;
|
|
79
52
|
currentOnPressEventType.current = eventType;
|
|
80
53
|
},
|
|
81
|
-
[resetMultiplier
|
|
54
|
+
[resetMultiplier]
|
|
82
55
|
);
|
|
83
56
|
|
|
84
57
|
return handlePressEvent;
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
import { Player } from "./player";
|
|
2
|
-
import { BehaviorSubject } from "rxjs";
|
|
3
|
-
|
|
4
|
-
export class DelayedSeekPlayerWrapper extends Player {
|
|
5
|
-
private wrappedPlayer: Player;
|
|
6
|
-
private delayedSeekPosition: number;
|
|
7
|
-
private wasPlaying: boolean;
|
|
8
|
-
|
|
9
|
-
constructor(props, player: Player) {
|
|
10
|
-
super(props);
|
|
11
|
-
this.wrappedPlayer = player;
|
|
12
|
-
this.delayedSeekPosition = null;
|
|
13
|
-
|
|
14
|
-
this.wrappedPlayer.addListener({
|
|
15
|
-
id: "Master-Wrapper-Listener",
|
|
16
|
-
listener: this,
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
getOverlayObservable = () => {
|
|
23
|
-
return this.wrappedPlayer.getOverlayObservable();
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
getEntryObservable = (): BehaviorSubject<ZappEntry | null> => {
|
|
27
|
-
return this.wrappedPlayer.getEntryObservable();
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
getEntry = (): ZappEntry | null => this.wrappedPlayer.getEntry();
|
|
31
|
-
|
|
32
|
-
getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => {
|
|
33
|
-
return this.wrappedPlayer.getListener();
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
togglePlayPause = () => {
|
|
37
|
-
this.wrappedPlayer.togglePlayPause();
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
selectTrack = (_track) => this.wrappedPlayer.selectTrack(_track);
|
|
41
|
-
|
|
42
|
-
// Implement all default methods by delegating them to wrapped player
|
|
43
|
-
public seekTo = (position: number) => {
|
|
44
|
-
this.wrappedPlayer.seekTo(position);
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
public isPlaying = () => {
|
|
48
|
-
return this.wrappedPlayer.isPlaying();
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
public isPaused = () => {
|
|
52
|
-
return this.wrappedPlayer.isPaused();
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
public play = () => {
|
|
56
|
-
this.wrappedPlayer.play();
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
public pause = () => {
|
|
60
|
-
this.wrappedPlayer.pause();
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
getState = () => {
|
|
64
|
-
const currentState = this.wrappedPlayer.getState();
|
|
65
|
-
|
|
66
|
-
if (this.delayedSeekPosition === null) {
|
|
67
|
-
return currentState;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
return {
|
|
71
|
-
...currentState,
|
|
72
|
-
contentPosition: this.delayedSeekPosition,
|
|
73
|
-
isPaused: false,
|
|
74
|
-
seekPosition: this.delayedSeekPosition,
|
|
75
|
-
};
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
forward = (deltaTime: number) => {
|
|
79
|
-
if (this.delayedSeekPosition !== null) {
|
|
80
|
-
this.delayedSeekPosition += deltaTime;
|
|
81
|
-
this.playerState.seekPosition = this.delayedSeekPosition;
|
|
82
|
-
|
|
83
|
-
this.onVideoProgress({
|
|
84
|
-
currentTime: this.playerState.seekPosition,
|
|
85
|
-
duration: this.getDuration(),
|
|
86
|
-
seekableDuration: this.playerState.seekableDuration,
|
|
87
|
-
isLive: this.playerState.isLive,
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
// this.scheduleResumePlayback(DELAYED_SEEK_DELAY, this.delayedSeekPosition);
|
|
91
|
-
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
if (this.playerState.seekPosition == null) {
|
|
96
|
-
this.playerState.seekPosition = this.playerState.contentPosition;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
this.playerState.seekPosition += deltaTime;
|
|
100
|
-
|
|
101
|
-
this.wrappedPlayer.forward(deltaTime);
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
rewind = (deltaTime: number) => {
|
|
105
|
-
if (this.delayedSeekPosition !== null) {
|
|
106
|
-
this.delayedSeekPosition -= deltaTime;
|
|
107
|
-
|
|
108
|
-
if (this.delayedSeekPosition < 0) {
|
|
109
|
-
this.delayedSeekPosition = 0;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
this.playerState.seekPosition = this.delayedSeekPosition;
|
|
113
|
-
|
|
114
|
-
this.onVideoProgress({
|
|
115
|
-
currentTime: this.playerState.seekPosition,
|
|
116
|
-
duration: this.getDuration(),
|
|
117
|
-
seekableDuration: this.playerState.seekableDuration,
|
|
118
|
-
isLive: this.playerState.isLive,
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
// this.scheduleResumePlayback(DELAYED_SEEK_DELAY, this.delayedSeekPosition);
|
|
122
|
-
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
if (this.playerState.seekPosition == null) {
|
|
127
|
-
this.playerState.seekPosition = this.playerState.contentPosition;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
this.playerState.seekPosition -= deltaTime;
|
|
131
|
-
this.wrappedPlayer.rewind(deltaTime);
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
public getConfig = () => this.wrappedPlayer.getConfig();
|
|
135
|
-
|
|
136
|
-
// TODO: replace with enum of supported orientations
|
|
137
|
-
isFullScreenSupported(): boolean {
|
|
138
|
-
return this.wrappedPlayer.isFullScreenSupported();
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
public supportsNativeControls = (): boolean =>
|
|
142
|
-
this.wrappedPlayer.supportsNativeControls();
|
|
143
|
-
|
|
144
|
-
public supportNativeCast = (): boolean =>
|
|
145
|
-
this.wrappedPlayer.supportNativeCast();
|
|
146
|
-
|
|
147
|
-
public isInDelayedSeek = () => this.delayedSeekPosition !== null;
|
|
148
|
-
|
|
149
|
-
public enterDelayedSeek() {
|
|
150
|
-
if (this.delayedSeekPosition !== null) {
|
|
151
|
-
return;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
if (this.playerState.seekPosition === null) {
|
|
155
|
-
this.playerState.seekPosition = this.playerState.contentPosition;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
this.delayedSeekPosition = this.playerState.seekPosition;
|
|
159
|
-
|
|
160
|
-
if (!this.isPaused()) {
|
|
161
|
-
this.wasPlaying = true;
|
|
162
|
-
this.wrappedPlayer.pause();
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
public exitDelayedSeek() {
|
|
167
|
-
if (this.delayedSeekPosition === null) {
|
|
168
|
-
return;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
this.wrappedPlayer.seekTo(this.delayedSeekPosition);
|
|
172
|
-
|
|
173
|
-
if (this.wasPlaying) {
|
|
174
|
-
this.wasPlaying = false;
|
|
175
|
-
this.wrappedPlayer.play();
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
this.delayedSeekPosition = null;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
// LongPressSeekController.ts
|
|
2
|
-
import { ISeekController } from "./ISeekController";
|
|
3
|
-
import { SEEK_TYPE } from "../const";
|
|
4
|
-
import {
|
|
5
|
-
log_debug,
|
|
6
|
-
log_error,
|
|
7
|
-
log_verbose,
|
|
8
|
-
TVSeekController,
|
|
9
|
-
} from "./TVSeekController";
|
|
10
|
-
import { timer, interval, Subscription } from "rxjs";
|
|
11
|
-
import { switchMap, tap } from "rxjs/operators";
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Example interface for the configuration needed for long-press seeking.
|
|
15
|
-
*/
|
|
16
|
-
interface LongPressConfig {
|
|
17
|
-
LONG_PRESS_THRESHOLD: number; // ms
|
|
18
|
-
TIMER_INTERVAL_MS: number; // ms
|
|
19
|
-
SKIP_INCREMENT_STEP: number; // seconds
|
|
20
|
-
MAX_SKIP_PER_TICK: number; // seconds
|
|
21
|
-
INITIAL_SKIP_AMOUNT: number; // e.g., 10s to start
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export class LongPressSeekController implements ISeekController {
|
|
25
|
-
private pressStartTime = 0;
|
|
26
|
-
private isLongPressActive = false;
|
|
27
|
-
private currentSkipAmount = 0;
|
|
28
|
-
private subscription: Subscription | null = null;
|
|
29
|
-
|
|
30
|
-
constructor(
|
|
31
|
-
private parent: TVSeekController,
|
|
32
|
-
private config: LongPressConfig
|
|
33
|
-
) {}
|
|
34
|
-
|
|
35
|
-
onPressStart(seekType: SEEK_TYPE) {
|
|
36
|
-
this.cleanUpSubscription();
|
|
37
|
-
|
|
38
|
-
log_debug(
|
|
39
|
-
`LongPressSeekController: start long press seek type:${seekType}.`
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
this.parent.currentSeekType = seekType;
|
|
43
|
-
this.parent.pausePlayer();
|
|
44
|
-
|
|
45
|
-
this.pressStartTime = Date.now();
|
|
46
|
-
this.isLongPressActive = true;
|
|
47
|
-
this.currentSkipAmount = this.config.INITIAL_SKIP_AMOUNT;
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* We wait LONG_PRESS_THRESHOLD ms to confirm it's a long press.
|
|
51
|
-
* If it still active, we switch to an interval that emits every TIMER_INTERVAL_MS.
|
|
52
|
-
*/
|
|
53
|
-
const threshold$ = timer(this.config.LONG_PRESS_THRESHOLD).pipe(
|
|
54
|
-
tap(() =>
|
|
55
|
-
log_verbose("LongPressSeekController: Crossed long-press threshold")
|
|
56
|
-
),
|
|
57
|
-
switchMap(() => {
|
|
58
|
-
return interval(this.config.TIMER_INTERVAL_MS).pipe(
|
|
59
|
-
tap(() => {
|
|
60
|
-
this.parent.handleDelayedSeek(
|
|
61
|
-
this.parent.currentSeekType,
|
|
62
|
-
this.currentSkipAmount
|
|
63
|
-
);
|
|
64
|
-
|
|
65
|
-
log_debug(
|
|
66
|
-
`LongPressSeekController: handle delayed seek type: ${seekType} - currentSkipAmount: ${this.currentSkipAmount}.`
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
this.currentSkipAmount = Math.min(
|
|
70
|
-
this.currentSkipAmount + this.config.SKIP_INCREMENT_STEP,
|
|
71
|
-
this.config.MAX_SKIP_PER_TICK
|
|
72
|
-
);
|
|
73
|
-
})
|
|
74
|
-
);
|
|
75
|
-
})
|
|
76
|
-
);
|
|
77
|
-
|
|
78
|
-
this.subscription = threshold$.subscribe({
|
|
79
|
-
complete: () =>
|
|
80
|
-
log_verbose(
|
|
81
|
-
"LongPressSeekController: Long press subscription complete"
|
|
82
|
-
),
|
|
83
|
-
error: (err) =>
|
|
84
|
-
log_error(
|
|
85
|
-
"LongPressSeekController: Long press subscription error",
|
|
86
|
-
err
|
|
87
|
-
),
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
onPressEnd() {
|
|
92
|
-
const pressDuration = Date.now() - this.pressStartTime;
|
|
93
|
-
|
|
94
|
-
if (
|
|
95
|
-
this.isLongPressActive &&
|
|
96
|
-
pressDuration > this.config.LONG_PRESS_THRESHOLD
|
|
97
|
-
) {
|
|
98
|
-
const offset = this.parent.delayedSeekOffset;
|
|
99
|
-
|
|
100
|
-
if (offset) {
|
|
101
|
-
log_debug(
|
|
102
|
-
`LongPressSeekController: onPressEnd for LongPressSeekController, seek offset: ${offset}`
|
|
103
|
-
);
|
|
104
|
-
|
|
105
|
-
this.parent.seekPlayer(offset);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
this.parent.resetAll();
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
reset() {
|
|
113
|
-
this.isLongPressActive = false;
|
|
114
|
-
this.currentSkipAmount = 0;
|
|
115
|
-
this.cleanUpSubscription();
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
private cleanUpSubscription() {
|
|
119
|
-
if (this.subscription) {
|
|
120
|
-
this.subscription.unsubscribe();
|
|
121
|
-
this.subscription = null;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
}
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
import { BehaviorSubject } from "rxjs";
|
|
2
|
-
import { TapSeekController } from "./TapSeekController";
|
|
3
|
-
import { LongPressSeekController } from "./LongPressSeekController";
|
|
4
|
-
import { playerManager } from "../../../appUtils";
|
|
5
|
-
import { SEEK_TYPE } from "../const";
|
|
6
|
-
import { createLogger } from "../../../logger";
|
|
7
|
-
|
|
8
|
-
export const { log_warning, log_debug, log_info, log_error, log_verbose } =
|
|
9
|
-
createLogger({
|
|
10
|
-
category: "General",
|
|
11
|
-
subsystem: "TVSeekController",
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
export class TVSeekController {
|
|
15
|
-
private static instance: TVSeekController;
|
|
16
|
-
public static getInstance() {
|
|
17
|
-
if (!TVSeekController.instance) {
|
|
18
|
-
TVSeekController.instance = new TVSeekController();
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return TVSeekController.instance;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// -- SHARED STATE ACROSS STRATEGIES --
|
|
25
|
-
public currentSeekType: SEEK_TYPE | null = null;
|
|
26
|
-
public delayedSeekOffset: number | null = null;
|
|
27
|
-
private delayedSeekProgressSubject = new BehaviorSubject<number | null>(null);
|
|
28
|
-
|
|
29
|
-
// -- STRATEGY INSTANCES --
|
|
30
|
-
private tapSeekController: TapSeekController;
|
|
31
|
-
private longPressSeekController: LongPressSeekController;
|
|
32
|
-
|
|
33
|
-
// Example config for long press
|
|
34
|
-
private config = {
|
|
35
|
-
LONG_PRESS_THRESHOLD: 500,
|
|
36
|
-
TIMER_INTERVAL_MS: 300,
|
|
37
|
-
SKIP_INCREMENT_STEP: 5,
|
|
38
|
-
MAX_SKIP_PER_TICK: 300,
|
|
39
|
-
INITIAL_SKIP_AMOUNT: 10,
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
private constructor() {
|
|
43
|
-
this.tapSeekController = new TapSeekController(this);
|
|
44
|
-
|
|
45
|
-
this.longPressSeekController = new LongPressSeekController(
|
|
46
|
-
this,
|
|
47
|
-
this.config
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
getDelayedSeekProgressObservable() {
|
|
52
|
-
return this.delayedSeekProgressSubject;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
getSeekMethods() {
|
|
56
|
-
return {
|
|
57
|
-
onForwardPress: () =>
|
|
58
|
-
this.tapSeekController.onPressStart(SEEK_TYPE.FORWARD),
|
|
59
|
-
onRewindPress: () =>
|
|
60
|
-
this.tapSeekController.onPressStart(SEEK_TYPE.REWIND),
|
|
61
|
-
|
|
62
|
-
onForwardLongPress: () => {
|
|
63
|
-
this.longPressSeekController.onPressStart(SEEK_TYPE.FORWARD);
|
|
64
|
-
this.tapSeekController.reset();
|
|
65
|
-
},
|
|
66
|
-
onRewindLongPress: () => {
|
|
67
|
-
this.longPressSeekController.onPressStart(SEEK_TYPE.REWIND);
|
|
68
|
-
this.tapSeekController.reset();
|
|
69
|
-
},
|
|
70
|
-
onForwardPressOut: () => this.longPressSeekController.onPressEnd(),
|
|
71
|
-
onRewindPressOut: () => this.longPressSeekController.onPressEnd(),
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// ---------------------------
|
|
76
|
-
// SHARED METHODS
|
|
77
|
-
// ---------------------------
|
|
78
|
-
|
|
79
|
-
/** Called by either strategy to accumulate offset while paused. */
|
|
80
|
-
handleDelayedSeek(eventType: SEEK_TYPE, skipTime: number) {
|
|
81
|
-
const player = this.getPlayer();
|
|
82
|
-
if (!player) return;
|
|
83
|
-
|
|
84
|
-
// If not previously delayed, we pause the first time
|
|
85
|
-
if (this.delayedSeekOffset === null) {
|
|
86
|
-
this.pausePlayer();
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
const newOffset = (this.delayedSeekOffset || 0) + skipTime;
|
|
90
|
-
const currentPos = player.getPosition();
|
|
91
|
-
let targetPos = currentPos;
|
|
92
|
-
|
|
93
|
-
if (eventType === SEEK_TYPE.FORWARD) {
|
|
94
|
-
targetPos = Math.min(currentPos + newOffset, player.getDuration());
|
|
95
|
-
} else {
|
|
96
|
-
targetPos = Math.max(0, currentPos - newOffset);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
this.delayedSeekOffset = newOffset;
|
|
100
|
-
|
|
101
|
-
log_debug(
|
|
102
|
-
`TVSeekController: handleDelayedSeek - targetPos: ${targetPos}, offset: ${newOffset}, skipTime: ${skipTime}`
|
|
103
|
-
);
|
|
104
|
-
|
|
105
|
-
this.delayedSeekProgressSubject.next(targetPos);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
seekPlayer(offset: number) {
|
|
109
|
-
const player = this.getPlayer();
|
|
110
|
-
if (!player || !this.currentSeekType) return;
|
|
111
|
-
player[this.currentSeekType](offset);
|
|
112
|
-
this.playerPlay();
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
playerPlay() {
|
|
116
|
-
const player = this.getPlayer();
|
|
117
|
-
if (!player) return;
|
|
118
|
-
|
|
119
|
-
if (player.isPaused()) {
|
|
120
|
-
player.play();
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
pausePlayer() {
|
|
125
|
-
const player = this.getPlayer();
|
|
126
|
-
if (!player) return;
|
|
127
|
-
player.pause();
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
/**
|
|
131
|
-
* Reset *all* relevant state and strategy controllers
|
|
132
|
-
*/
|
|
133
|
-
resetAll() {
|
|
134
|
-
log_debug("TVSeekController: Reset all states");
|
|
135
|
-
this.currentSeekType = null;
|
|
136
|
-
this.delayedSeekOffset = null;
|
|
137
|
-
this.delayedSeekProgressSubject.next(null);
|
|
138
|
-
|
|
139
|
-
this.tapSeekController.reset();
|
|
140
|
-
this.longPressSeekController.reset();
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
private getPlayer() {
|
|
144
|
-
const player = playerManager.getInstanceController();
|
|
145
|
-
|
|
146
|
-
if (!player) {
|
|
147
|
-
log_warning("TVSeekController: No valid player controller found");
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
return player;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { ISeekController } from "./ISeekController";
|
|
2
|
-
import { SEEK_TYPE, MAX_SEEK_TIME, SKIP_TIME_BASE } from "../const";
|
|
3
|
-
import { log_debug, TVSeekController } from "./TVSeekController";
|
|
4
|
-
|
|
5
|
-
const getSkipTime = (multiplier: number) =>
|
|
6
|
-
Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier);
|
|
7
|
-
|
|
8
|
-
export class TapSeekController implements ISeekController {
|
|
9
|
-
private tapSequenceTimeout: NodeJS.Timeout | null = null;
|
|
10
|
-
private seekMultiplier = 1;
|
|
11
|
-
private readonly ON_PRESS_RESET_DURATION = 500; // ms
|
|
12
|
-
|
|
13
|
-
constructor(private parent: TVSeekController) {}
|
|
14
|
-
|
|
15
|
-
onPressStart(seekType: SEEK_TYPE) {
|
|
16
|
-
log_debug(`TapSeekController: start tap seek type: ${seekType}.`);
|
|
17
|
-
|
|
18
|
-
const prevSeekType = this.parent.currentSeekType;
|
|
19
|
-
|
|
20
|
-
if (prevSeekType !== seekType) {
|
|
21
|
-
this.reset();
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
this.parent.currentSeekType = seekType;
|
|
25
|
-
|
|
26
|
-
if (this.tapSequenceTimeout) {
|
|
27
|
-
clearTimeout(this.tapSequenceTimeout);
|
|
28
|
-
this.tapSequenceTimeout = null;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
this.tapSequenceTimeout = setTimeout(() => {
|
|
32
|
-
if (this.parent.delayedSeekOffset !== null) {
|
|
33
|
-
this.parent.seekPlayer(this.parent.delayedSeekOffset);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
log_debug(
|
|
37
|
-
`TapSeekController: Tap sequence timeout fired, delayedSeekOffset: ${this.parent.delayedSeekOffset}.`
|
|
38
|
-
);
|
|
39
|
-
|
|
40
|
-
this.parent.resetAll();
|
|
41
|
-
}, this.ON_PRESS_RESET_DURATION);
|
|
42
|
-
|
|
43
|
-
const clicksBeforePause = 3;
|
|
44
|
-
const skipTime = getSkipTime(this.seekMultiplier);
|
|
45
|
-
|
|
46
|
-
if (this.seekMultiplier > clicksBeforePause) {
|
|
47
|
-
log_debug(
|
|
48
|
-
`TapSeekController: handle delayed seek type:${seekType} - skipTime: ${skipTime}.`
|
|
49
|
-
);
|
|
50
|
-
|
|
51
|
-
this.parent.handleDelayedSeek(seekType, skipTime);
|
|
52
|
-
} else {
|
|
53
|
-
log_debug(
|
|
54
|
-
`TapSeekController: handle seek type:${seekType} - skipTime: ${skipTime}.`
|
|
55
|
-
);
|
|
56
|
-
|
|
57
|
-
this.parent.seekPlayer(skipTime);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
this.seekMultiplier++;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
reset() {
|
|
64
|
-
log_debug("TapSeekController: Reset states");
|
|
65
|
-
|
|
66
|
-
this.seekMultiplier = 1;
|
|
67
|
-
|
|
68
|
-
if (this.tapSequenceTimeout) {
|
|
69
|
-
clearTimeout(this.tapSequenceTimeout);
|
|
70
|
-
this.tapSequenceTimeout = null;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|