@applicaster/zapp-react-native-utils 13.0.0-alpha.6525006318 → 13.0.0-alpha.7210171818
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 +3 -0
- package/appUtils/keyInputHandler/KeyInputHandler.ts +90 -0
- package/appUtils/playerManager/DelayedSeekPlayerWrapper.tsx +180 -0
- package/appUtils/playerManager/player.ts +18 -5
- package/appUtils/playerManager/playerNative.ts +2 -1
- package/appUtils/playerManager/usePlayerControllerSetup.tsx +17 -3
- package/package.json +2 -2
- package/reactHooks/feed/__tests__/useFeedLoader.test.tsx +10 -2
- package/reactHooks/feed/useFeedLoader.tsx +9 -4
- package/reactHooks/player/TVSeekControlller/ISeekController.ts +7 -0
- package/reactHooks/player/TVSeekControlller/LongPressSeekController.ts +106 -0
- package/reactHooks/player/TVSeekControlller/TVSeekController.ts +199 -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/utils/index.ts +1 -1
- 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,9 @@ 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 },
|
|
80
83
|
};
|
|
81
84
|
|
|
82
85
|
const android_tv = {
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
|
|
2
|
+
export type SeekKeyHandlerListener = {
|
|
3
|
+
onRewindPress: () => boolean;
|
|
4
|
+
// onRewindLongPress: () => boolean;
|
|
5
|
+
onForwardPress: () => boolean;
|
|
6
|
+
// onForwardLongPress: () => boolean;
|
|
7
|
+
onRewindPressOut: () => void;
|
|
8
|
+
onForwardPressOut: () => void;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export class KeyInputHandler {
|
|
12
|
+
private static instance: KeyInputHandler;
|
|
13
|
+
|
|
14
|
+
public static getInstance() {
|
|
15
|
+
if (!KeyInputHandler.instance) {
|
|
16
|
+
KeyInputHandler.instance = new KeyInputHandler();
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return KeyInputHandler.instance;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
constructor() {
|
|
23
|
+
this.listeners = [];
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
private listeners: SeekKeyHandlerListener[] = [];
|
|
27
|
+
|
|
28
|
+
addListener = (listener: SeekKeyHandlerListener) => {
|
|
29
|
+
this.listeners.splice(0, 0, listener);
|
|
30
|
+
|
|
31
|
+
return () =>
|
|
32
|
+
this.removeListener(listener);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
removeListener = (listener: SeekKeyHandlerListener) => {
|
|
36
|
+
this.listeners = this.listeners.filter((l) => l !== listener);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
onRewindPress = () => {
|
|
40
|
+
for (const element of this.listeners) {
|
|
41
|
+
if (element.onRewindPress()) {
|
|
42
|
+
break;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// onRewindLongPress = () => {
|
|
48
|
+
// for (const element of this.listeners) {
|
|
49
|
+
// if (element.onRewindLongPress()) {
|
|
50
|
+
// break;
|
|
51
|
+
// }
|
|
52
|
+
// }
|
|
53
|
+
// }
|
|
54
|
+
|
|
55
|
+
onForwardPress = () => {
|
|
56
|
+
for (const element of this.listeners) {
|
|
57
|
+
if (element.onForwardPress()) {
|
|
58
|
+
break;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// onForwardLongPress = () => {
|
|
64
|
+
// for (const element of this.listeners) {
|
|
65
|
+
// if (element.onForwardLongPress()) {
|
|
66
|
+
// break;
|
|
67
|
+
// }
|
|
68
|
+
// }
|
|
69
|
+
// }
|
|
70
|
+
|
|
71
|
+
// TODO: Event should be send to listeners who handled down event
|
|
72
|
+
onRewindPressOut = () => {
|
|
73
|
+
this.listeners.forEach((listener) => listener.onRewindPressOut());
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
onForwardPressOut = () => {
|
|
77
|
+
this.listeners.forEach((listener) => listener.onForwardPressOut());
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
getSeekMethods = () => {
|
|
81
|
+
return {
|
|
82
|
+
onForwardPress: this.onForwardPress,
|
|
83
|
+
onRewindPress: this.onRewindPress,
|
|
84
|
+
// onForwardLongPress: this.onForwardLongPress,
|
|
85
|
+
// onRewindLongPress: this.onRewindLongPress,
|
|
86
|
+
onForwardPressOut: this.onForwardPressOut,
|
|
87
|
+
onRewindPressOut: this.onRewindPressOut
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
}
|
|
@@ -0,0 +1,180 @@
|
|
|
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
|
+
}
|
|
@@ -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) {
|
|
@@ -350,7 +358,7 @@ export class Player {
|
|
|
350
358
|
callbackName: SharedPlayerCallBacksKeys.OnPlayerSeekComplete,
|
|
351
359
|
event,
|
|
352
360
|
});
|
|
353
|
-
}
|
|
361
|
+
}
|
|
354
362
|
|
|
355
363
|
onVideoEnd = (event) => {
|
|
356
364
|
this.invokeListenersUpdate({
|
|
@@ -653,8 +661,8 @@ export class Player {
|
|
|
653
661
|
};
|
|
654
662
|
|
|
655
663
|
public getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => ({
|
|
656
|
-
onPlayerSeekStart: this.
|
|
657
|
-
onPlayerSeekComplete: this.
|
|
664
|
+
onPlayerSeekStart: this.onPlayerSeekStart,
|
|
665
|
+
onPlayerSeekComplete: this.onPlayerSeekComplete,
|
|
658
666
|
onVideoEnd: this.onVideoEnd,
|
|
659
667
|
onError: this.onError,
|
|
660
668
|
onVideoError: this.onVideoError,
|
|
@@ -733,5 +741,10 @@ export class Player {
|
|
|
733
741
|
|
|
734
742
|
public supportsNativeControls = (): boolean => false;
|
|
735
743
|
public supportNativeCast = (): boolean => false;
|
|
744
|
+
|
|
745
|
+
public isInDelayedSeek = (): boolean => false;
|
|
746
|
+
public enterDelayedSeek() {}
|
|
747
|
+
|
|
748
|
+
public exitDelayedSeek() {}
|
|
736
749
|
public destroy = () => {};
|
|
737
750
|
}
|
|
@@ -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
|
}
|
|
@@ -5,6 +5,8 @@ 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";
|
|
8
10
|
|
|
9
11
|
// TODO: Rename to ControllerType
|
|
10
12
|
export const usePlayerControllerSetup = ({
|
|
@@ -39,7 +41,7 @@ export const usePlayerControllerSetup = ({
|
|
|
39
41
|
? { supports_native_controls: true, ...config }
|
|
40
42
|
: config;
|
|
41
43
|
|
|
42
|
-
const
|
|
44
|
+
const combinedProps = {
|
|
43
45
|
player: ref,
|
|
44
46
|
listener: props as any,
|
|
45
47
|
config: newConfig,
|
|
@@ -47,9 +49,21 @@ export const usePlayerControllerSetup = ({
|
|
|
47
49
|
entry,
|
|
48
50
|
playerPluginId: pluginId,
|
|
49
51
|
playerRole: PlayerRole.Primary,
|
|
50
|
-
}
|
|
52
|
+
};
|
|
51
53
|
|
|
52
|
-
|
|
54
|
+
if (isTV()) {
|
|
55
|
+
const wrappedPlayerController = new ControllerType({
|
|
56
|
+
...combinedProps,
|
|
57
|
+
playerRole: PlayerRole.Unspecified,
|
|
58
|
+
playerId: playerId + "." + "wrapped",
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
setPlayerController(
|
|
62
|
+
new DelayedSeekPlayerWrapper(combinedProps, wrappedPlayerController)
|
|
63
|
+
);
|
|
64
|
+
} else {
|
|
65
|
+
setPlayerController(new ControllerType(combinedProps));
|
|
66
|
+
}
|
|
53
67
|
}, [playerId, entry?.id]);
|
|
54
68
|
|
|
55
69
|
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.7210171818",
|
|
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.7210171818",
|
|
32
32
|
"buffer": "^5.2.1",
|
|
33
33
|
"camelize": "^1.0.0",
|
|
34
34
|
"create-react-context": "^0.2.3",
|
|
@@ -135,7 +135,11 @@ describe("useFeedLoader", () => {
|
|
|
135
135
|
);
|
|
136
136
|
|
|
137
137
|
expect(result.current.data).toBeNull();
|
|
138
|
-
|
|
138
|
+
|
|
139
|
+
expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
|
|
140
|
+
clearCache: true,
|
|
141
|
+
riverId: undefined,
|
|
142
|
+
});
|
|
139
143
|
|
|
140
144
|
const store2 = mockStore({
|
|
141
145
|
plugins: [],
|
|
@@ -172,7 +176,11 @@ describe("useFeedLoader", () => {
|
|
|
172
176
|
);
|
|
173
177
|
|
|
174
178
|
expect(result.current.data).toBeNull();
|
|
175
|
-
|
|
179
|
+
|
|
180
|
+
expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
|
|
181
|
+
clearCache: true,
|
|
182
|
+
riverId: undefined,
|
|
183
|
+
});
|
|
176
184
|
|
|
177
185
|
const store2 = mockStore({
|
|
178
186
|
plugins: [],
|
|
@@ -5,7 +5,7 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
|
|
|
5
5
|
import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
|
|
6
6
|
|
|
7
7
|
import { reactHooksLogger } from "../logger";
|
|
8
|
-
import { useIsInitialRender,
|
|
8
|
+
import { useIsInitialRender, shouldDispatchData } from "../utils";
|
|
9
9
|
import { useInflatedUrl } from "./useInflatedUrl";
|
|
10
10
|
import { useRoute } from "../navigation";
|
|
11
11
|
|
|
@@ -89,13 +89,18 @@ export const useFeedLoader = ({
|
|
|
89
89
|
}
|
|
90
90
|
}, [callableFeedUrl, currentFeed?.data]);
|
|
91
91
|
|
|
92
|
-
// If feed doesn't exist, load it
|
|
93
92
|
useEffect(() => {
|
|
94
93
|
if (
|
|
95
|
-
|
|
94
|
+
shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
|
|
96
95
|
) {
|
|
97
96
|
if (callableFeedUrl) {
|
|
98
|
-
dispatch(
|
|
97
|
+
dispatch(
|
|
98
|
+
loadPipesData(callableFeedUrl, {
|
|
99
|
+
...pipesOptions,
|
|
100
|
+
clearCache: true,
|
|
101
|
+
riverId,
|
|
102
|
+
})
|
|
103
|
+
);
|
|
99
104
|
} else {
|
|
100
105
|
logger.info({
|
|
101
106
|
message:
|
|
@@ -0,0 +1,106 @@
|
|
|
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
|
+
/**
|
|
13
|
+
* Example interface for the configuration needed for long-press seeking.
|
|
14
|
+
*/
|
|
15
|
+
interface LongPressConfig {
|
|
16
|
+
LONG_PRESS_THRESHOLD: number; // ms
|
|
17
|
+
TIMER_INTERVAL_MS: number; // ms
|
|
18
|
+
SKIP_INCREMENT_STEP: number; // seconds
|
|
19
|
+
MAX_SKIP_PER_TICK: number; // seconds
|
|
20
|
+
INITIAL_SKIP_AMOUNT: number; // e.g., 10s to start
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export class LongPressSeekController implements ISeekController {
|
|
24
|
+
private pressStartTime = 0;
|
|
25
|
+
private isLongPressActive = false;
|
|
26
|
+
private currentSkipAmount = 0;
|
|
27
|
+
private subscription: Subscription | null = null;
|
|
28
|
+
|
|
29
|
+
constructor(
|
|
30
|
+
private parent: TVSeekController,
|
|
31
|
+
private config: LongPressConfig
|
|
32
|
+
) {}
|
|
33
|
+
|
|
34
|
+
onStartSeek(seekType: SEEK_TYPE) {
|
|
35
|
+
this.cleanUpSubscription();
|
|
36
|
+
|
|
37
|
+
log_debug(
|
|
38
|
+
`LongPressSeekController: start long press seek type:${seekType}.`
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
this.parent.currentSeekType = seekType;
|
|
42
|
+
this.parent.pausePlayer();
|
|
43
|
+
|
|
44
|
+
this.pressStartTime = Date.now();
|
|
45
|
+
this.isLongPressActive = true;
|
|
46
|
+
this.currentSkipAmount = this.config.INITIAL_SKIP_AMOUNT;
|
|
47
|
+
|
|
48
|
+
// Start the interval immediately without waiting for a threshold.
|
|
49
|
+
this.subscription = interval(this.config.TIMER_INTERVAL_MS).pipe(
|
|
50
|
+
tap(() => {
|
|
51
|
+
this.parent.handleDelayedSeek(
|
|
52
|
+
this.parent.currentSeekType,
|
|
53
|
+
this.currentSkipAmount
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
log_debug(
|
|
57
|
+
`LongPressSeekController: handle delayed seek type: ${seekType} - currentSkipAmount: ${this.currentSkipAmount}.`
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
this.currentSkipAmount = Math.min(
|
|
61
|
+
this.currentSkipAmount + this.config.SKIP_INCREMENT_STEP,
|
|
62
|
+
this.config.MAX_SKIP_PER_TICK
|
|
63
|
+
);
|
|
64
|
+
})
|
|
65
|
+
).subscribe({
|
|
66
|
+
complete: () =>
|
|
67
|
+
log_verbose("LongPressSeekController: Long press subscription complete"),
|
|
68
|
+
error: (err) =>
|
|
69
|
+
log_error("LongPressSeekController: Long press subscription error", err),
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
onSeekEnd() {
|
|
74
|
+
const pressDuration = Date.now() - this.pressStartTime;
|
|
75
|
+
|
|
76
|
+
if (
|
|
77
|
+
this.isLongPressActive &&
|
|
78
|
+
pressDuration > this.config.LONG_PRESS_THRESHOLD
|
|
79
|
+
) {
|
|
80
|
+
const offset = this.parent.delayedSeekOffset;
|
|
81
|
+
|
|
82
|
+
if (offset) {
|
|
83
|
+
log_debug(
|
|
84
|
+
`LongPressSeekController: onPressEnd for LongPressSeekController, seek offset: ${offset}`
|
|
85
|
+
);
|
|
86
|
+
|
|
87
|
+
this.parent.seekPlayer(offset);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
this.parent.resetAll();
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
reset() {
|
|
95
|
+
this.isLongPressActive = false;
|
|
96
|
+
this.currentSkipAmount = 0;
|
|
97
|
+
this.cleanUpSubscription();
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
private cleanUpSubscription() {
|
|
101
|
+
if (this.subscription) {
|
|
102
|
+
this.subscription.unsubscribe();
|
|
103
|
+
this.subscription = null;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
@@ -0,0 +1,199 @@
|
|
|
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
|
+
import { Player } from "../../../appUtils/playerManager/player";
|
|
8
|
+
import { SeekKeyHandlerListener } from "../../../appUtils/keyInputHandler/KeyInputHandler";
|
|
9
|
+
import { ISeekController } from "./ISeekController";
|
|
10
|
+
|
|
11
|
+
export const { log_warning, log_debug, log_info, log_error, log_verbose } =
|
|
12
|
+
createLogger({
|
|
13
|
+
category: "General",
|
|
14
|
+
subsystem: "TVSeekController",
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export enum SEEK_STRATEGY {
|
|
18
|
+
TAP_SEEK = "TAP_SEEK",
|
|
19
|
+
AUTO_SEEK = "AUTO_SEEK",
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export class TVSeekController implements SeekKeyHandlerListener {
|
|
23
|
+
// -- SHARED STATE ACROSS STRATEGIES --
|
|
24
|
+
public currentSeekType: SEEK_TYPE | null = null;
|
|
25
|
+
public delayedSeekOffset: number | null = null;
|
|
26
|
+
private controller: Player;
|
|
27
|
+
private delayedSeekProgressSubject = new BehaviorSubject<number | null>(null);
|
|
28
|
+
|
|
29
|
+
private currentSeekController: ISeekController;
|
|
30
|
+
|
|
31
|
+
// -- STRATEGY INSTANCES --
|
|
32
|
+
private tapSeekController: TapSeekController;
|
|
33
|
+
private longPressSeekController: LongPressSeekController;
|
|
34
|
+
private longPressThresholdTimeout: any | null = null;
|
|
35
|
+
|
|
36
|
+
// Example config for long press
|
|
37
|
+
private config = {
|
|
38
|
+
LONG_PRESS_THRESHOLD: 500,
|
|
39
|
+
TIMER_INTERVAL_MS: 300,
|
|
40
|
+
SKIP_INCREMENT_STEP: 5,
|
|
41
|
+
MAX_SKIP_PER_TICK: 300,
|
|
42
|
+
INITIAL_SKIP_AMOUNT: 10,
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
constructor(controller: Player) {
|
|
46
|
+
this.controller = controller;
|
|
47
|
+
this.tapSeekController = new TapSeekController(this);
|
|
48
|
+
|
|
49
|
+
this.longPressSeekController = new LongPressSeekController(
|
|
50
|
+
this,
|
|
51
|
+
this.config
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
getDelayedSeekProgressObservable = () => {
|
|
56
|
+
return this.delayedSeekProgressSubject;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
setStrategy = (seekStrategy: SEEK_STRATEGY) => {
|
|
60
|
+
switch (seekStrategy) {
|
|
61
|
+
case SEEK_STRATEGY.TAP_SEEK:
|
|
62
|
+
clearTimeout(this.longPressThresholdTimeout);
|
|
63
|
+
this.longPressThresholdTimeout = null;
|
|
64
|
+
this.currentSeekController = this.tapSeekController;
|
|
65
|
+
|
|
66
|
+
break;
|
|
67
|
+
case SEEK_STRATEGY.AUTO_SEEK:
|
|
68
|
+
this.currentSeekController.reset();
|
|
69
|
+
this.currentSeekController = this.longPressSeekController;
|
|
70
|
+
break;
|
|
71
|
+
default:
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
handleStartSeek = (seekType: SEEK_TYPE) => {
|
|
76
|
+
this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
|
|
77
|
+
this.currentSeekController.onStartSeek(seekType);
|
|
78
|
+
log_verbose(`handleStartSeek: TAP seekType: ${seekType}`);
|
|
79
|
+
|
|
80
|
+
this.longPressThresholdTimeout = setTimeout(() => {
|
|
81
|
+
log_verbose(`handleStartSeek: longPressThresholdTimeout: TIMEOUT, START AUTO_SEEK seekType: ${seekType}`);
|
|
82
|
+
this.setStrategy(SEEK_STRATEGY.AUTO_SEEK);
|
|
83
|
+
this.currentSeekController.onStartSeek(seekType);
|
|
84
|
+
}, this.config.LONG_PRESS_THRESHOLD);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
onForwardPress = (): boolean => {
|
|
88
|
+
this.handleStartSeek(SEEK_TYPE.FORWARD);
|
|
89
|
+
|
|
90
|
+
return true;
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
onRewindPress = (): boolean => {
|
|
94
|
+
this.handleStartSeek(SEEK_TYPE.REWIND);
|
|
95
|
+
|
|
96
|
+
return true;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
onSeekEnd = () => {
|
|
100
|
+
this.currentSeekController.onSeekEnd();
|
|
101
|
+
this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
onRewindPressOut = () => {
|
|
105
|
+
const isAutoSeek = this.currentSeekController === this.longPressSeekController;
|
|
106
|
+
|
|
107
|
+
log_verbose(`handleStartSeek: onRewindPressOut, isAutoSeek: ${isAutoSeek}`);
|
|
108
|
+
|
|
109
|
+
this.onSeekEnd();
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
onForwardPressOut = () => {
|
|
113
|
+
const isAutoSeek = this.currentSeekController === this.longPressSeekController;
|
|
114
|
+
|
|
115
|
+
log_verbose(`handleStartSeek: onForwardPressOut, isAutoSeek: ${isAutoSeek}`);
|
|
116
|
+
this.onSeekEnd();
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// ---------------------------
|
|
120
|
+
// SHARED METHODS
|
|
121
|
+
// ---------------------------
|
|
122
|
+
|
|
123
|
+
/** Called by either strategy to accumulate offset while paused. */
|
|
124
|
+
handleDelayedSeek(eventType: SEEK_TYPE, skipTime: number) {
|
|
125
|
+
const player = this.getPlayer();
|
|
126
|
+
if (!player) return;
|
|
127
|
+
|
|
128
|
+
// If not previously delayed, we pause the first time
|
|
129
|
+
if (this.delayedSeekOffset === null) {
|
|
130
|
+
this.pausePlayer();
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
const newOffset = (this.delayedSeekOffset || 0) + skipTime;
|
|
134
|
+
const currentPos = player.getPosition();
|
|
135
|
+
let targetPos = currentPos;
|
|
136
|
+
|
|
137
|
+
if (eventType === SEEK_TYPE.FORWARD) {
|
|
138
|
+
targetPos = Math.min(currentPos + newOffset, player.getDuration());
|
|
139
|
+
} else {
|
|
140
|
+
targetPos = Math.max(0, currentPos - newOffset);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
this.delayedSeekOffset = newOffset;
|
|
144
|
+
|
|
145
|
+
log_debug(
|
|
146
|
+
`TVSeekController: handleDelayedSeek - targetPos: ${targetPos}, offset: ${newOffset}, skipTime: ${skipTime}`
|
|
147
|
+
);
|
|
148
|
+
|
|
149
|
+
this.delayedSeekProgressSubject.next(targetPos);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
seekPlayer(offset: number) {
|
|
153
|
+
const player = this.getPlayer();
|
|
154
|
+
if (!player || !this.currentSeekType) return;
|
|
155
|
+
player[this.currentSeekType](offset);
|
|
156
|
+
this.playerPlay();
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
playerPlay() {
|
|
160
|
+
const player = this.getPlayer();
|
|
161
|
+
if (!player) return;
|
|
162
|
+
|
|
163
|
+
if (player.isPaused()) {
|
|
164
|
+
player.play();
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
pausePlayer() {
|
|
169
|
+
const player = this.getPlayer();
|
|
170
|
+
if (!player) return;
|
|
171
|
+
player.pause();
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Reset *all* relevant state and strategy controllers
|
|
176
|
+
*/
|
|
177
|
+
resetAll() {
|
|
178
|
+
log_debug("TVSeekController: Reset all states");
|
|
179
|
+
this.currentSeekType = null;
|
|
180
|
+
this.delayedSeekOffset = null;
|
|
181
|
+
|
|
182
|
+
this.delayedSeekProgressSubject.next(null);
|
|
183
|
+
|
|
184
|
+
this.tapSeekController.reset();
|
|
185
|
+
this.longPressSeekController.reset();
|
|
186
|
+
|
|
187
|
+
this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
private getPlayer() {
|
|
191
|
+
const player = playerManager.getInstanceController();
|
|
192
|
+
|
|
193
|
+
if (!player) {
|
|
194
|
+
log_warning("TVSeekController: No valid player controller found");
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
return player;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -33,7 +33,7 @@ export const useIsInitialRender = (): boolean => {
|
|
|
33
33
|
|
|
34
34
|
export const checkIsLocalFeed = (feedUrl) => feedUrl?.startsWith("pipesv2://");
|
|
35
35
|
|
|
36
|
-
export const
|
|
36
|
+
export const shouldDispatchData = (
|
|
37
37
|
url: string,
|
|
38
38
|
feed: ZappPipesData | null,
|
|
39
39
|
clearCache: boolean
|
|
@@ -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
|
-
};
|