@applicaster/zapp-react-native-utils 12.0.2-alpha.9449031370 → 13.0.0-alpha.1632352572
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 +4 -0
- package/appUtils/keyInputHandler/KeyInputHandler.ts +68 -0
- package/appUtils/playerManager/index.ts +6 -2
- package/appUtils/playerManager/player.ts +17 -5
- package/appUtils/playerManager/playerNative.ts +2 -1
- package/appUtils/playerManager/usePlayerControllerSetup.tsx +3 -3
- package/package.json +2 -2
- package/reactHooks/player/TVSeekControlller/ISeekController.ts +7 -0
- package/reactHooks/player/TVSeekControlller/LongPressSeekController.ts +109 -0
- package/reactHooks/player/TVSeekControlller/TVSeekController.ts +168 -0
- package/reactHooks/player/TVSeekControlller/TapSeekController.ts +75 -0
- package/reactHooks/player/const.ts +1 -1
- package/reactHooks/player/index.ts +0 -6
- package/reactHooks/player/__tests__/useAutoSeek.test.tsx +0 -116
- package/reactHooks/player/__tests__/useTapSeek.test.ts +0 -94
- package/reactHooks/player/useAutoSeek.tsx +0 -87
- package/reactHooks/player/useSeek.tsx +0 -66
- package/reactHooks/player/useTapSeek.tsx +0 -58
|
@@ -77,6 +77,10 @@ const web = {
|
|
|
77
77
|
Exit: { code: "Exit", keyCode: null },
|
|
78
78
|
Escape: { code: "Escape", keyCode: 27 },
|
|
79
79
|
EscapeDevice: { code: "Escape", keyCode: 27 },
|
|
80
|
+
// For Debugging
|
|
81
|
+
Z: { code: "KeyZ", keyCode: 90 },
|
|
82
|
+
X: { code: "KeyX", keyCode: 88 },
|
|
83
|
+
C: { code: "KeyC", keyCode: 67 },
|
|
80
84
|
};
|
|
81
85
|
|
|
82
86
|
const android_tv = {
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
export type SeekKeyHandlerListener = {
|
|
2
|
+
onRewindPress: () => boolean;
|
|
3
|
+
onForwardPress: () => boolean;
|
|
4
|
+
onRewindPressOut: () => void;
|
|
5
|
+
onForwardPressOut: () => void;
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export class KeyInputHandler {
|
|
9
|
+
private static instance: KeyInputHandler;
|
|
10
|
+
|
|
11
|
+
public static getInstance() {
|
|
12
|
+
if (!KeyInputHandler.instance) {
|
|
13
|
+
KeyInputHandler.instance = new KeyInputHandler();
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
return KeyInputHandler.instance;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
constructor() {
|
|
20
|
+
this.listeners = [];
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
private listeners: SeekKeyHandlerListener[] = [];
|
|
24
|
+
|
|
25
|
+
addListener = (listener: SeekKeyHandlerListener) => {
|
|
26
|
+
this.listeners.splice(0, 0, listener);
|
|
27
|
+
|
|
28
|
+
return () => this.removeListener(listener);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
removeListener = (listener: SeekKeyHandlerListener) => {
|
|
32
|
+
this.listeners = this.listeners.filter((l) => l !== listener);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
onRewindPress = () => {
|
|
36
|
+
for (const element of this.listeners) {
|
|
37
|
+
if (element.onRewindPress()) {
|
|
38
|
+
break;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
onForwardPress = () => {
|
|
44
|
+
for (const element of this.listeners) {
|
|
45
|
+
if (element.onForwardPress()) {
|
|
46
|
+
break;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// TODO: Event should be send to listeners who handled down event
|
|
52
|
+
onRewindPressOut = () => {
|
|
53
|
+
this.listeners.forEach((listener) => listener.onRewindPressOut());
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
onForwardPressOut = () => {
|
|
57
|
+
this.listeners.forEach((listener) => listener.onForwardPressOut());
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
getSeekMethods = () => {
|
|
61
|
+
return {
|
|
62
|
+
onForwardPress: this.onForwardPress,
|
|
63
|
+
onRewindPress: this.onRewindPress,
|
|
64
|
+
onForwardPressOut: this.onForwardPressOut,
|
|
65
|
+
onRewindPressOut: this.onRewindPressOut,
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
}
|
|
@@ -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({
|
|
@@ -5,6 +5,7 @@ import { createLogger, utilsLogger } from "../../logger";
|
|
|
5
5
|
import { getBoolFromConfigValue } from "../../configurationUtils";
|
|
6
6
|
import { PlayerRole, SharedPlayerCallBacksKeys } from "./conts";
|
|
7
7
|
import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
|
|
8
|
+
import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
|
|
8
9
|
|
|
9
10
|
const logger = createLogger({
|
|
10
11
|
category: "PlayerController",
|
|
@@ -49,6 +50,8 @@ export class Player {
|
|
|
49
50
|
[key: string]: QuickBrickPlayer.SharedPlayerCallBacks;
|
|
50
51
|
} = {};
|
|
51
52
|
|
|
53
|
+
public seekController?: TVSeekController | null;
|
|
54
|
+
|
|
52
55
|
get entry(): ZappEntry | null {
|
|
53
56
|
return this._entry;
|
|
54
57
|
}
|
|
@@ -59,6 +62,8 @@ export class Player {
|
|
|
59
62
|
}
|
|
60
63
|
|
|
61
64
|
constructor(props) {
|
|
65
|
+
this.seekController = null;
|
|
66
|
+
|
|
62
67
|
this.playerState = {
|
|
63
68
|
// We want isLive null by default to be able not to show controls if we do not know type
|
|
64
69
|
isLive: null,
|
|
@@ -91,6 +96,8 @@ export class Player {
|
|
|
91
96
|
this.onVideoProgress = this.onVideoProgress.bind(this);
|
|
92
97
|
this.onVideoLoad = this.onVideoLoad.bind(this);
|
|
93
98
|
this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
|
|
99
|
+
this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
|
|
100
|
+
|
|
94
101
|
this.entryObservable = null;
|
|
95
102
|
}
|
|
96
103
|
|
|
@@ -321,7 +328,7 @@ export class Player {
|
|
|
321
328
|
* You should use dispatchPlayerEvent at PlayerContainer or call playerManager.invokeHandler directly
|
|
322
329
|
* This allows you to use one method for everything.
|
|
323
330
|
*/
|
|
324
|
-
|
|
331
|
+
onPlayerSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
|
|
325
332
|
const { isLive, seekableDuration, currentTime, duration, seekTime } = event;
|
|
326
333
|
|
|
327
334
|
this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
|
|
@@ -336,10 +343,11 @@ export class Player {
|
|
|
336
343
|
});
|
|
337
344
|
};
|
|
338
345
|
|
|
339
|
-
|
|
346
|
+
onPlayerSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
|
|
340
347
|
const { isLive, seekableDuration, currentTime, duration } = event;
|
|
341
348
|
|
|
342
349
|
this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
|
|
350
|
+
|
|
343
351
|
this.playerState.seekPosition = null;
|
|
344
352
|
|
|
345
353
|
if (!isLive) {
|
|
@@ -620,14 +628,18 @@ export class Player {
|
|
|
620
628
|
selectTrack = (_track) => {};
|
|
621
629
|
|
|
622
630
|
protected notifyPlayHeadPositionUpdate = () => {
|
|
631
|
+
const currentTime = this.getPosition();
|
|
632
|
+
|
|
623
633
|
const event = {
|
|
624
|
-
currentTime
|
|
634
|
+
currentTime,
|
|
625
635
|
duration: this.getDuration(),
|
|
626
636
|
item: this.getEntry(),
|
|
627
637
|
seekableDuration: this.playerState.seekableDuration,
|
|
628
638
|
isLive: this.isLive(),
|
|
629
639
|
};
|
|
630
640
|
|
|
641
|
+
this.seekController?.onVideoProgress(currentTime);
|
|
642
|
+
|
|
631
643
|
this.invokeListenersUpdate({
|
|
632
644
|
callbackName: SharedPlayerCallBacksKeys.OnVideoProgress,
|
|
633
645
|
event,
|
|
@@ -653,8 +665,8 @@ export class Player {
|
|
|
653
665
|
};
|
|
654
666
|
|
|
655
667
|
public getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => ({
|
|
656
|
-
onPlayerSeekStart: this.
|
|
657
|
-
onPlayerSeekComplete: this.
|
|
668
|
+
onPlayerSeekStart: this.onPlayerSeekStart,
|
|
669
|
+
onPlayerSeekComplete: this.onPlayerSeekComplete,
|
|
658
670
|
onVideoEnd: this.onVideoEnd,
|
|
659
671
|
onError: this.onError,
|
|
660
672
|
onVideoError: this.onVideoError,
|
|
@@ -222,9 +222,10 @@ export class PlayerNative extends Player {
|
|
|
222
222
|
|
|
223
223
|
onVideoLoad = (event) => {
|
|
224
224
|
if (this.startPosition) {
|
|
225
|
-
super.onVideoLoad({ ...event, ignoreContinueWatching: true });
|
|
226
225
|
this.seekTo(this.startPosition);
|
|
227
226
|
this.startPosition = null;
|
|
227
|
+
|
|
228
|
+
super.onVideoLoad({ ...event, ignoreContinueWatching: true });
|
|
228
229
|
} else {
|
|
229
230
|
super.onVideoLoad(event);
|
|
230
231
|
}
|
|
@@ -39,7 +39,7 @@ export const usePlayerControllerSetup = ({
|
|
|
39
39
|
? { supports_native_controls: true, ...config }
|
|
40
40
|
: config;
|
|
41
41
|
|
|
42
|
-
const
|
|
42
|
+
const combinedProps = {
|
|
43
43
|
player: ref,
|
|
44
44
|
listener: props as any,
|
|
45
45
|
config: newConfig,
|
|
@@ -47,9 +47,9 @@ export const usePlayerControllerSetup = ({
|
|
|
47
47
|
entry,
|
|
48
48
|
playerPluginId: pluginId,
|
|
49
49
|
playerRole: PlayerRole.Primary,
|
|
50
|
-
}
|
|
50
|
+
};
|
|
51
51
|
|
|
52
|
-
setPlayerController(
|
|
52
|
+
setPlayerController(new ControllerType(combinedProps));
|
|
53
53
|
}, [playerId, entry?.id]);
|
|
54
54
|
|
|
55
55
|
React.useEffect(() => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-utils",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0-alpha.1632352572",
|
|
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": "
|
|
31
|
+
"@applicaster/applicaster-types": "13.0.0-alpha.1632352572",
|
|
32
32
|
"buffer": "^5.2.1",
|
|
33
33
|
"camelize": "^1.0.0",
|
|
34
34
|
"create-react-context": "^0.2.3",
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { ISeekController } from "./ISeekController";
|
|
2
|
+
import { SEEK_TYPE } from "../const";
|
|
3
|
+
import {
|
|
4
|
+
log_debug,
|
|
5
|
+
log_error,
|
|
6
|
+
log_verbose,
|
|
7
|
+
TVSeekController,
|
|
8
|
+
} from "./TVSeekController";
|
|
9
|
+
import { interval, Subscription } from "rxjs";
|
|
10
|
+
import { tap } from "rxjs/operators";
|
|
11
|
+
|
|
12
|
+
interface LongPressConfig {
|
|
13
|
+
LONG_PRESS_THRESHOLD: number; // ms
|
|
14
|
+
TIMER_INTERVAL_MS: number; // ms
|
|
15
|
+
SKIP_INCREMENT_STEP: number; // seconds
|
|
16
|
+
MAX_SKIP_PER_TICK: number; // seconds
|
|
17
|
+
INITIAL_SKIP_AMOUNT: number; // e.g., 10s to start
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export class LongPressSeekController implements ISeekController {
|
|
21
|
+
private pressStartTime = 0;
|
|
22
|
+
private isLongPressActive = false;
|
|
23
|
+
private currentSkipAmount = 0;
|
|
24
|
+
private subscription: Subscription | null = null;
|
|
25
|
+
|
|
26
|
+
constructor(
|
|
27
|
+
private parent: TVSeekController,
|
|
28
|
+
private config: LongPressConfig
|
|
29
|
+
) {}
|
|
30
|
+
|
|
31
|
+
onStartSeek(seekType: SEEK_TYPE) {
|
|
32
|
+
this.cleanUpSubscription();
|
|
33
|
+
|
|
34
|
+
log_debug(
|
|
35
|
+
`LongPressSeekController: start long press seek type:${seekType}.`
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
this.parent.currentSeekType = seekType;
|
|
39
|
+
this.parent.pausePlayer();
|
|
40
|
+
|
|
41
|
+
this.pressStartTime = Date.now();
|
|
42
|
+
this.isLongPressActive = true;
|
|
43
|
+
this.currentSkipAmount = this.config.INITIAL_SKIP_AMOUNT;
|
|
44
|
+
|
|
45
|
+
this.subscription = interval(this.config.TIMER_INTERVAL_MS)
|
|
46
|
+
.pipe(
|
|
47
|
+
tap(() => {
|
|
48
|
+
this.parent.handleDelayedSeek(
|
|
49
|
+
this.parent.currentSeekType,
|
|
50
|
+
this.currentSkipAmount
|
|
51
|
+
);
|
|
52
|
+
|
|
53
|
+
log_debug(
|
|
54
|
+
`LongPressSeekController: handle delayed seek type: ${seekType} - currentSkipAmount: ${this.currentSkipAmount}.`
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
this.currentSkipAmount = Math.min(
|
|
58
|
+
this.currentSkipAmount + this.config.SKIP_INCREMENT_STEP,
|
|
59
|
+
this.config.MAX_SKIP_PER_TICK
|
|
60
|
+
);
|
|
61
|
+
})
|
|
62
|
+
)
|
|
63
|
+
.subscribe({
|
|
64
|
+
complete: () =>
|
|
65
|
+
log_verbose(
|
|
66
|
+
"LongPressSeekController: Long press subscription complete"
|
|
67
|
+
),
|
|
68
|
+
error: (err) =>
|
|
69
|
+
log_error(
|
|
70
|
+
"LongPressSeekController: Long press subscription error",
|
|
71
|
+
err
|
|
72
|
+
),
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
onSeekEnd() {
|
|
77
|
+
const pressDuration = Date.now() - this.pressStartTime;
|
|
78
|
+
|
|
79
|
+
if (
|
|
80
|
+
this.isLongPressActive &&
|
|
81
|
+
pressDuration > this.config.LONG_PRESS_THRESHOLD
|
|
82
|
+
) {
|
|
83
|
+
const offset = this.parent.delayedSeekOffset;
|
|
84
|
+
|
|
85
|
+
if (offset) {
|
|
86
|
+
log_debug(
|
|
87
|
+
`LongPressSeekController: onPressEnd for LongPressSeekController, seek offset: ${offset}`
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
this.parent.seekPlayer(offset);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
this.parent.resetAll();
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
reset() {
|
|
98
|
+
this.isLongPressActive = false;
|
|
99
|
+
this.currentSkipAmount = 0;
|
|
100
|
+
this.cleanUpSubscription();
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
private cleanUpSubscription() {
|
|
104
|
+
if (this.subscription) {
|
|
105
|
+
this.subscription.unsubscribe();
|
|
106
|
+
this.subscription = null;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
import { BehaviorSubject } from "rxjs";
|
|
2
|
+
import { TapSeekController } from "./TapSeekController";
|
|
3
|
+
import { LongPressSeekController } from "./LongPressSeekController";
|
|
4
|
+
import { SEEK_TYPE } from "../const";
|
|
5
|
+
import { createLogger } from "../../../logger";
|
|
6
|
+
import { Player } from "../../../appUtils/playerManager/player";
|
|
7
|
+
import { SeekKeyHandlerListener } from "../../../appUtils/keyInputHandler/KeyInputHandler";
|
|
8
|
+
import { ISeekController } from "./ISeekController";
|
|
9
|
+
|
|
10
|
+
export const { log_warning, log_debug, log_info, log_error, log_verbose } =
|
|
11
|
+
createLogger({
|
|
12
|
+
category: "General",
|
|
13
|
+
subsystem: "TVSeekController",
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export enum SEEK_STRATEGY {
|
|
17
|
+
TAP_SEEK = "TAP_SEEK",
|
|
18
|
+
AUTO_SEEK = "AUTO_SEEK",
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export class TVSeekController implements SeekKeyHandlerListener {
|
|
22
|
+
public currentSeekType: SEEK_TYPE | null = null;
|
|
23
|
+
public delayedSeekOffset: number | null = null;
|
|
24
|
+
private readonly playerController: Player;
|
|
25
|
+
private delayedSeekProgressSubject = new BehaviorSubject<number | null>(null);
|
|
26
|
+
|
|
27
|
+
private currentSeekController: ISeekController;
|
|
28
|
+
|
|
29
|
+
private tapSeekController: TapSeekController;
|
|
30
|
+
private longPressSeekController: LongPressSeekController;
|
|
31
|
+
private longPressThresholdTimeout: any | null = null;
|
|
32
|
+
|
|
33
|
+
private config = {
|
|
34
|
+
LONG_PRESS_THRESHOLD: 500,
|
|
35
|
+
TIMER_INTERVAL_MS: 300,
|
|
36
|
+
SKIP_INCREMENT_STEP: 5,
|
|
37
|
+
MAX_SKIP_PER_TICK: 300,
|
|
38
|
+
INITIAL_SKIP_AMOUNT: 10,
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
constructor(playerController: Player) {
|
|
42
|
+
this.playerController = playerController;
|
|
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
|
+
setStrategy = (seekStrategy: SEEK_STRATEGY) => {
|
|
56
|
+
switch (seekStrategy) {
|
|
57
|
+
case SEEK_STRATEGY.TAP_SEEK:
|
|
58
|
+
clearTimeout(this.longPressThresholdTimeout);
|
|
59
|
+
this.longPressThresholdTimeout = null;
|
|
60
|
+
this.currentSeekController = this.tapSeekController;
|
|
61
|
+
|
|
62
|
+
break;
|
|
63
|
+
case SEEK_STRATEGY.AUTO_SEEK:
|
|
64
|
+
this.currentSeekController.reset();
|
|
65
|
+
this.currentSeekController = this.longPressSeekController;
|
|
66
|
+
break;
|
|
67
|
+
default:
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
handleStartSeek = (seekType: SEEK_TYPE) => {
|
|
72
|
+
this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
|
|
73
|
+
this.currentSeekController.onStartSeek(seekType);
|
|
74
|
+
|
|
75
|
+
this.longPressThresholdTimeout = setTimeout(() => {
|
|
76
|
+
this.setStrategy(SEEK_STRATEGY.AUTO_SEEK);
|
|
77
|
+
this.currentSeekController.onStartSeek(seekType);
|
|
78
|
+
}, this.config.LONG_PRESS_THRESHOLD);
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
onForwardPress = (): boolean => {
|
|
82
|
+
this.handleStartSeek(SEEK_TYPE.FORWARD);
|
|
83
|
+
|
|
84
|
+
return true;
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
onRewindPress = (): boolean => {
|
|
88
|
+
this.handleStartSeek(SEEK_TYPE.REWIND);
|
|
89
|
+
|
|
90
|
+
return true;
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
onSeekEnd = () => {
|
|
94
|
+
this.currentSeekController.onSeekEnd();
|
|
95
|
+
this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
onRewindPressOut = () => {
|
|
99
|
+
this.onSeekEnd();
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
onForwardPressOut = () => {
|
|
103
|
+
this.onSeekEnd();
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
public onVideoProgress = (position: number) => {
|
|
107
|
+
if (this.delayedSeekOffset) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// TODO: If 1 second after seek, send
|
|
112
|
+
|
|
113
|
+
this.delayedSeekProgressSubject.next(position);
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
handleDelayedSeek(eventType: SEEK_TYPE, skipTime: number) {
|
|
117
|
+
if (this.delayedSeekOffset === null) {
|
|
118
|
+
this.pausePlayer();
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
const newOffset = (this.delayedSeekOffset || 0) + skipTime;
|
|
122
|
+
const currentPos = this.playerController.getPosition();
|
|
123
|
+
let targetPos = currentPos;
|
|
124
|
+
|
|
125
|
+
if (eventType === SEEK_TYPE.FORWARD) {
|
|
126
|
+
targetPos = Math.min(
|
|
127
|
+
currentPos + newOffset,
|
|
128
|
+
this.playerController.getSeekableDuration()
|
|
129
|
+
);
|
|
130
|
+
} else {
|
|
131
|
+
targetPos = Math.max(0, currentPos - newOffset);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
this.delayedSeekOffset = newOffset;
|
|
135
|
+
|
|
136
|
+
log_debug(
|
|
137
|
+
`TVSeekController: handleDelayedSeek - targetPos: ${targetPos}, offset: ${newOffset}, skipTime: ${skipTime}`
|
|
138
|
+
);
|
|
139
|
+
|
|
140
|
+
this.delayedSeekProgressSubject.next(targetPos);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
seekPlayer(offset: number) {
|
|
144
|
+
this.playerController[this.currentSeekType](offset);
|
|
145
|
+
this.playerPlay();
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
playerPlay() {
|
|
149
|
+
if (this.playerController.isPaused()) {
|
|
150
|
+
this.playerController.play();
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
pausePlayer() {
|
|
155
|
+
this.playerController.pause();
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
resetAll() {
|
|
159
|
+
log_debug("TVSeekController: Reset all states");
|
|
160
|
+
this.currentSeekType = null;
|
|
161
|
+
this.delayedSeekOffset = null;
|
|
162
|
+
|
|
163
|
+
this.tapSeekController.reset();
|
|
164
|
+
this.longPressSeekController.reset();
|
|
165
|
+
|
|
166
|
+
this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
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: any | null = null;
|
|
10
|
+
private seekMultiplier = 1;
|
|
11
|
+
private readonly ON_PRESS_RESET_DURATION = 500; // ms
|
|
12
|
+
|
|
13
|
+
constructor(private parent: TVSeekController) {}
|
|
14
|
+
|
|
15
|
+
onStartSeek = (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
|
+
const clicksBeforePause = 0;
|
|
32
|
+
const skipTime = getSkipTime(this.seekMultiplier);
|
|
33
|
+
|
|
34
|
+
if (this.seekMultiplier > clicksBeforePause) {
|
|
35
|
+
log_debug(
|
|
36
|
+
`TapSeekController: handle delayed seek type:${seekType} - skipTime: ${skipTime}.`
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
this.parent.handleDelayedSeek(seekType, skipTime);
|
|
40
|
+
} else {
|
|
41
|
+
log_debug(
|
|
42
|
+
`TapSeekController: handle seek type:${seekType} - skipTime: ${skipTime}.`
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
this.parent.seekPlayer(skipTime);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
this.seekMultiplier++;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
onSeekEnd = () => {
|
|
52
|
+
this.tapSequenceTimeout = setTimeout(() => {
|
|
53
|
+
if (this.parent.delayedSeekOffset !== null) {
|
|
54
|
+
this.parent.seekPlayer(this.parent.delayedSeekOffset);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
log_debug(
|
|
58
|
+
`TapSeekController: Tap sequence timeout fired, delayedSeekOffset: ${this.parent.delayedSeekOffset}.`
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
this.parent.resetAll();
|
|
62
|
+
}, this.ON_PRESS_RESET_DURATION);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
reset = () => {
|
|
66
|
+
log_debug("TapSeekController: Reset states");
|
|
67
|
+
|
|
68
|
+
this.seekMultiplier = 1;
|
|
69
|
+
|
|
70
|
+
if (this.tapSequenceTimeout) {
|
|
71
|
+
clearTimeout(this.tapSequenceTimeout);
|
|
72
|
+
this.tapSequenceTimeout = null;
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
}
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
import { act, renderHook } from "@testing-library/react-hooks";
|
|
2
|
-
import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
|
|
3
|
-
|
|
4
|
-
import { ON_HOLD_INTERVAL, SEEK_TYPE, SKIP_TIME_BASE } from "../const";
|
|
5
|
-
|
|
6
|
-
import { useAutoSeek } from "../useAutoSeek";
|
|
7
|
-
|
|
8
|
-
jest.useFakeTimers();
|
|
9
|
-
|
|
10
|
-
const rewind = jest.fn();
|
|
11
|
-
const forward = jest.fn();
|
|
12
|
-
|
|
13
|
-
jest
|
|
14
|
-
.spyOn(playerManager, "getInstanceController")
|
|
15
|
-
// @ts-ignore
|
|
16
|
-
.mockImplementation(() => ({ rewind, forward }));
|
|
17
|
-
|
|
18
|
-
describe("useAutoSeek", () => {
|
|
19
|
-
beforeEach(() => {
|
|
20
|
-
rewind.mockReset();
|
|
21
|
-
forward.mockReset();
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
describe("autoSeekStart", () => {
|
|
25
|
-
it("should call forward method on playerInstance", () => {
|
|
26
|
-
const { result } = renderHook(() => useAutoSeek());
|
|
27
|
-
|
|
28
|
-
act(() => {
|
|
29
|
-
result.current.autoSeekStart(SEEK_TYPE.FORWARD);
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
expect(forward).toBeCalled();
|
|
33
|
-
result.current.autoSeekStop();
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
it("should call rewind method on playerManager", () => {
|
|
37
|
-
const { result } = renderHook(() => useAutoSeek());
|
|
38
|
-
|
|
39
|
-
act(() => {
|
|
40
|
-
result.current.autoSeekStart(SEEK_TYPE.REWIND);
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
expect(rewind).toBeCalled();
|
|
44
|
-
result.current.autoSeekStop();
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
it("should call rewind with default skip time", () => {
|
|
48
|
-
const { result } = renderHook(() => useAutoSeek());
|
|
49
|
-
|
|
50
|
-
act(() => {
|
|
51
|
-
result.current.autoSeekStart(SEEK_TYPE.REWIND);
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
expect(rewind).toBeCalledWith(SKIP_TIME_BASE);
|
|
55
|
-
result.current.autoSeekStop();
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
it("should call forward with default skip time", () => {
|
|
59
|
-
const { result } = renderHook(() => useAutoSeek());
|
|
60
|
-
|
|
61
|
-
act(() => {
|
|
62
|
-
result.current.autoSeekStart(SEEK_TYPE.FORWARD);
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
expect(forward).toBeCalledWith(SKIP_TIME_BASE);
|
|
66
|
-
result.current.autoSeekStop();
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
it("should call rewind in intervals set in configuration", () => {
|
|
70
|
-
const { result } = renderHook(() => useAutoSeek());
|
|
71
|
-
|
|
72
|
-
act(() => {
|
|
73
|
-
result.current.autoSeekStart(SEEK_TYPE.REWIND);
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
expect(rewind).toBeCalled();
|
|
77
|
-
jest.advanceTimersByTime(ON_HOLD_INTERVAL * 3);
|
|
78
|
-
expect(rewind).toBeCalledTimes(4);
|
|
79
|
-
result.current.autoSeekStop();
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
it("should call forward in intervals set in configuration", () => {
|
|
83
|
-
const { result } = renderHook(() => useAutoSeek());
|
|
84
|
-
|
|
85
|
-
act(() => {
|
|
86
|
-
result.current.autoSeekStart(SEEK_TYPE.FORWARD);
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
expect(forward).toBeCalled();
|
|
90
|
-
jest.advanceTimersByTime(ON_HOLD_INTERVAL * 3);
|
|
91
|
-
expect(forward).toBeCalledTimes(4);
|
|
92
|
-
result.current.autoSeekStop();
|
|
93
|
-
});
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
describe("autoSeekStop", () => {
|
|
97
|
-
it("should stop calling playerManager method after autoSeekStop is called", () => {
|
|
98
|
-
const { result } = renderHook(() => useAutoSeek());
|
|
99
|
-
|
|
100
|
-
act(() => {
|
|
101
|
-
result.current.autoSeekStart(SEEK_TYPE.FORWARD);
|
|
102
|
-
});
|
|
103
|
-
|
|
104
|
-
expect(forward).toBeCalled();
|
|
105
|
-
jest.advanceTimersByTime(ON_HOLD_INTERVAL * 3);
|
|
106
|
-
expect(forward).toBeCalledTimes(4);
|
|
107
|
-
|
|
108
|
-
act(() => {
|
|
109
|
-
result.current.autoSeekStop();
|
|
110
|
-
});
|
|
111
|
-
|
|
112
|
-
jest.advanceTimersByTime(ON_HOLD_INTERVAL * 3);
|
|
113
|
-
expect(forward).toBeCalledTimes(4);
|
|
114
|
-
});
|
|
115
|
-
});
|
|
116
|
-
});
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { renderHook } from "@testing-library/react-hooks";
|
|
2
|
-
import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
|
|
3
|
-
import { useTapSeek } from "../useTapSeek";
|
|
4
|
-
|
|
5
|
-
import { ON_PRESS_RESET_DURATION, SEEK_TYPE, SKIP_TIME_BASE } from "../const";
|
|
6
|
-
|
|
7
|
-
const rewind = jest.fn();
|
|
8
|
-
const forward = jest.fn();
|
|
9
|
-
|
|
10
|
-
jest
|
|
11
|
-
.spyOn(playerManager, "getInstanceController")
|
|
12
|
-
// @ts-ignore
|
|
13
|
-
.mockImplementation(() => ({ rewind, forward }));
|
|
14
|
-
|
|
15
|
-
describe("useTapSeek", () => {
|
|
16
|
-
beforeEach(() => {
|
|
17
|
-
rewind.mockReset();
|
|
18
|
-
forward.mockReset();
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
describe("forward", () => {
|
|
22
|
-
it("should call forward method on playerManager", () => {
|
|
23
|
-
const { result } = renderHook(() => useTapSeek());
|
|
24
|
-
|
|
25
|
-
result.current(SEEK_TYPE.FORWARD);
|
|
26
|
-
expect(forward).toBeCalled();
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
it("should call forward with default skip time", () => {
|
|
30
|
-
const { result } = renderHook(() => useTapSeek());
|
|
31
|
-
|
|
32
|
-
result.current(SEEK_TYPE.FORWARD);
|
|
33
|
-
expect(forward).toBeCalledWith(SKIP_TIME_BASE);
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
it("should multiply skip time for every call", async () => {
|
|
37
|
-
const { result } = renderHook(() => useTapSeek());
|
|
38
|
-
|
|
39
|
-
result.current(SEEK_TYPE.FORWARD);
|
|
40
|
-
expect(forward).toBeCalledWith(SKIP_TIME_BASE);
|
|
41
|
-
result.current(SEEK_TYPE.FORWARD);
|
|
42
|
-
expect(forward).toBeCalledWith(SKIP_TIME_BASE * 2);
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
it("should reset multiplier if waiting more then resetDuration between press actions", () => {
|
|
46
|
-
const { result, waitFor } = renderHook(() => useTapSeek());
|
|
47
|
-
|
|
48
|
-
result.current(SEEK_TYPE.FORWARD);
|
|
49
|
-
expect(forward).toBeCalledWith(SKIP_TIME_BASE);
|
|
50
|
-
waitFor(jest.fn(), { timeout: ON_PRESS_RESET_DURATION });
|
|
51
|
-
result.current(SEEK_TYPE.FORWARD);
|
|
52
|
-
expect(forward).toBeCalledWith(SKIP_TIME_BASE);
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
describe("rewind", () => {
|
|
57
|
-
it("should call rewind method on playerManager", () => {
|
|
58
|
-
const { result } = renderHook(() => useTapSeek());
|
|
59
|
-
|
|
60
|
-
result.current(SEEK_TYPE.REWIND);
|
|
61
|
-
expect(rewind).toBeCalled();
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
it("should call rewind with default skip time", () => {
|
|
65
|
-
const { result } = renderHook(() => useTapSeek());
|
|
66
|
-
|
|
67
|
-
result.current(SEEK_TYPE.REWIND);
|
|
68
|
-
expect(rewind).toBeCalledWith(SKIP_TIME_BASE);
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
it("should multiply skip time for every call", async () => {
|
|
72
|
-
const { result } = renderHook(() => useTapSeek());
|
|
73
|
-
|
|
74
|
-
result.current(SEEK_TYPE.REWIND);
|
|
75
|
-
expect(rewind).toBeCalledWith(SKIP_TIME_BASE);
|
|
76
|
-
result.current(SEEK_TYPE.REWIND);
|
|
77
|
-
expect(rewind).toBeCalledWith(SKIP_TIME_BASE * 2);
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
describe("mixed usage", () => {
|
|
82
|
-
it("should reset timer if different type of event is emitted", () => {
|
|
83
|
-
const { result } = renderHook(() => useTapSeek());
|
|
84
|
-
result.current(SEEK_TYPE.REWIND);
|
|
85
|
-
expect(rewind).toBeCalledWith(SKIP_TIME_BASE);
|
|
86
|
-
|
|
87
|
-
result.current(SEEK_TYPE.REWIND);
|
|
88
|
-
expect(rewind).toBeCalledWith(SKIP_TIME_BASE * 2);
|
|
89
|
-
|
|
90
|
-
result.current(SEEK_TYPE.FORWARD);
|
|
91
|
-
expect(forward).toBeCalledWith(SKIP_TIME_BASE);
|
|
92
|
-
});
|
|
93
|
-
});
|
|
94
|
-
});
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
|
2
|
-
import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
|
|
3
|
-
import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
|
|
4
|
-
import {
|
|
5
|
-
MAX_SEEK_TIME,
|
|
6
|
-
ON_HOLD_INTERVAL,
|
|
7
|
-
SEEK_TYPE,
|
|
8
|
-
SKIP_TIME_BASE,
|
|
9
|
-
} from "./const";
|
|
10
|
-
import { noop } from "../../functionUtils";
|
|
11
|
-
|
|
12
|
-
export const useAutoSeek = (resetHUDTimer = noop) => {
|
|
13
|
-
const [isRunning, setIsRunning] = useState<boolean>(false);
|
|
14
|
-
const [direction, setDirection] = useState<Nullable<SEEK_TYPE>>(null);
|
|
15
|
-
const [multiplier, setMultiplier] = useState(1);
|
|
16
|
-
const intervalTimer = React.useRef(null);
|
|
17
|
-
const prevRunning = usePrevious(isRunning);
|
|
18
|
-
|
|
19
|
-
const clearIntervalTimer = () => {
|
|
20
|
-
try {
|
|
21
|
-
clearInterval(intervalTimer.current);
|
|
22
|
-
} catch (err) {
|
|
23
|
-
intervalTimer.current = null;
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
const setIntervalTimer = (cb) => {
|
|
28
|
-
clearIntervalTimer();
|
|
29
|
-
intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
const resetState = () => {
|
|
33
|
-
setIsRunning(false);
|
|
34
|
-
setDirection(null);
|
|
35
|
-
setMultiplier(1);
|
|
36
|
-
clearIntervalTimer();
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
const player = playerManager.getInstanceController();
|
|
41
|
-
|
|
42
|
-
if (!player) return;
|
|
43
|
-
|
|
44
|
-
if (direction) {
|
|
45
|
-
player[direction](Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
|
|
46
|
-
resetHUDTimer();
|
|
47
|
-
}
|
|
48
|
-
}, [multiplier, direction]);
|
|
49
|
-
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
if (isRunning && isRunning !== prevRunning) {
|
|
52
|
-
setIntervalTimer(() => {
|
|
53
|
-
setMultiplier((prev) => {
|
|
54
|
-
return prev + 1;
|
|
55
|
-
});
|
|
56
|
-
});
|
|
57
|
-
} else if (!isRunning && isRunning !== prevRunning) {
|
|
58
|
-
resetState();
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
return () => {
|
|
62
|
-
clearIntervalTimer();
|
|
63
|
-
};
|
|
64
|
-
}, [isRunning, direction]);
|
|
65
|
-
|
|
66
|
-
const autoSeekStop = React.useCallback(() => {
|
|
67
|
-
resetState();
|
|
68
|
-
}, []);
|
|
69
|
-
|
|
70
|
-
const autoSeekStart = React.useCallback(
|
|
71
|
-
(eventType: SEEK_TYPE) => {
|
|
72
|
-
// Check if there is another session running
|
|
73
|
-
if (isRunning) {
|
|
74
|
-
autoSeekStop();
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
setDirection(eventType);
|
|
78
|
-
setIsRunning(true);
|
|
79
|
-
},
|
|
80
|
-
[isRunning]
|
|
81
|
-
);
|
|
82
|
-
|
|
83
|
-
return React.useMemo(
|
|
84
|
-
() => ({ autoSeekStart, autoSeekStop }),
|
|
85
|
-
[autoSeekStart, autoSeekStop]
|
|
86
|
-
);
|
|
87
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { SEEK_TYPE } from "./const";
|
|
3
|
-
import { useTapSeek } from "./useTapSeek";
|
|
4
|
-
import { useAutoSeek } from "./useAutoSeek";
|
|
5
|
-
import { noop } from "../../functionUtils";
|
|
6
|
-
|
|
7
|
-
export const useSeek = (resetHUDTimer = noop) => {
|
|
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
|
-
);
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export const withUseSeek = (Component) =>
|
|
59
|
-
Object.assign(
|
|
60
|
-
(props) => {
|
|
61
|
-
const seekMethods = useSeek(props?.resetHUDTimer);
|
|
62
|
-
|
|
63
|
-
return <Component {...props} seekMethods={seekMethods} />;
|
|
64
|
-
},
|
|
65
|
-
{ displayName: "WithUseSeek" }
|
|
66
|
-
);
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { useCallback, useRef } from "react";
|
|
2
|
-
import * as R from "ramda";
|
|
3
|
-
import {
|
|
4
|
-
MAX_SEEK_TIME,
|
|
5
|
-
ON_PRESS_RESET_DURATION,
|
|
6
|
-
SEEK_TYPE,
|
|
7
|
-
SKIP_TIME_BASE,
|
|
8
|
-
} from "./const";
|
|
9
|
-
import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
|
|
10
|
-
|
|
11
|
-
type SeekType = SEEK_TYPE | null;
|
|
12
|
-
|
|
13
|
-
const getSkipTime = (multiplier) => {
|
|
14
|
-
const skipTime = R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier);
|
|
15
|
-
|
|
16
|
-
return skipTime;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export const useTapSeek = () => {
|
|
20
|
-
const onPressMultiplier = useRef(1);
|
|
21
|
-
const lastPressTime = useRef(0);
|
|
22
|
-
const currentOnPressEventType = useRef<SeekType>(null);
|
|
23
|
-
|
|
24
|
-
const resetMultiplier = useCallback(() => {
|
|
25
|
-
onPressMultiplier.current = 1;
|
|
26
|
-
}, []);
|
|
27
|
-
|
|
28
|
-
const handlePressEvent = useCallback(
|
|
29
|
-
(eventType) => {
|
|
30
|
-
const player = playerManager.getInstanceController();
|
|
31
|
-
if (!player) return;
|
|
32
|
-
|
|
33
|
-
const now = Date.now();
|
|
34
|
-
const timeSinceLastPress = now - lastPressTime.current;
|
|
35
|
-
const isSameEventType = eventType === currentOnPressEventType.current;
|
|
36
|
-
|
|
37
|
-
const isWithinResetDuration =
|
|
38
|
-
timeSinceLastPress <= ON_PRESS_RESET_DURATION;
|
|
39
|
-
|
|
40
|
-
const shouldIncreaseMultiplier = isSameEventType && isWithinResetDuration;
|
|
41
|
-
|
|
42
|
-
if (shouldIncreaseMultiplier) {
|
|
43
|
-
onPressMultiplier.current += 1;
|
|
44
|
-
} else {
|
|
45
|
-
resetMultiplier();
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
const seekTime = getSkipTime(onPressMultiplier.current);
|
|
49
|
-
player[eventType](seekTime);
|
|
50
|
-
|
|
51
|
-
lastPressTime.current = now;
|
|
52
|
-
currentOnPressEventType.current = eventType;
|
|
53
|
-
},
|
|
54
|
-
[resetMultiplier]
|
|
55
|
-
);
|
|
56
|
-
|
|
57
|
-
return handlePressEvent;
|
|
58
|
-
};
|