@applicaster/zapp-react-native-utils 13.0.0-rc.9 → 13.0.0-rc.90
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/README.md +0 -10
- package/actionsExecutor/ActionExecutor.ts +16 -9
- package/actionsExecutor/ActionExecutorContext.tsx +164 -11
- package/alertUtils/alert.ts +148 -0
- package/alertUtils/index.ts +1 -148
- package/analyticsUtils/AnalyticPlayerListener.ts +18 -1
- package/analyticsUtils/__tests__/__snapshots__/analyticsManagerNoModule.test.js.snap +9 -9
- package/analyticsUtils/currentScreenProperities.ts +6 -4
- package/analyticsUtils/helpers/hooks.ts +1 -1
- package/appUtils/HooksManager/{Hook.js → Hook.ts} +39 -23
- package/appUtils/HooksManager/__tests__/__snapshots__/hook.test.js.snap +10 -8
- package/appUtils/HooksManager/__tests__/__snapshots__/hooksManager.test.js.snap +693 -0
- package/appUtils/HooksManager/__tests__/hook.test.js +196 -184
- package/appUtils/HooksManager/__tests__/hooksManager.test.js +96 -99
- package/appUtils/HooksManager/{constants.js → constants.ts} +1 -1
- package/appUtils/HooksManager/{index.js → index.ts} +124 -113
- package/appUtils/HooksManager/types.ts +119 -0
- package/appUtils/RiverFocusManager/index.js +17 -12
- package/appUtils/accessibilityManager/index.ts +42 -1
- package/appUtils/contextKeysManager/contextResolver.ts +66 -0
- package/appUtils/contextKeysManager/index.ts +2 -2
- package/appUtils/contextKeysManager/utils/index.ts +2 -1
- package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap +7 -6
- package/appUtils/focusManager/index.ts +100 -74
- package/appUtils/focusManager/treeDataStructure/Tree/index.js +25 -3
- package/appUtils/focusManager/treeDataStructure/Utils/index.js +1 -3
- package/appUtils/focusManager/utils/enums.ts +4 -0
- package/appUtils/focusManagerAux/utils/index.ts +4 -3
- package/appUtils/{index.js → index.ts} +1 -1
- package/appUtils/keyCodes/__tests__/__snapshots__/keyCodes.test.js.snap +2 -2
- package/appUtils/keyCodes/__tests__/keyCodes.test.js +4 -4
- package/appUtils/keyCodes/{index.js → index.ts} +13 -7
- package/appUtils/keyCodes/keys/index.ts +3 -0
- package/appUtils/keyCodes/{keys.android.js → keys/keyEventMapper.ts} +0 -19
- package/appUtils/keyCodes/keys/keys.android.ts +18 -0
- package/appUtils/keyCodes/keys/keys.ios.ts +25 -0
- package/appUtils/keyCodes/keys/keys.ts +15 -0
- package/appUtils/keyCodes/{keysByPlatform.js → keys/keysByPlatform.ts} +4 -0
- package/appUtils/keyCodes/keysByPlatform.ts +8 -0
- package/appUtils/keyInputHandler/KeyInputHandler.ts +68 -0
- package/appUtils/orientationHelper.ts +11 -13
- package/appUtils/platform/const.ts +14 -0
- package/appUtils/platform/platformUtils.ts +47 -18
- package/appUtils/playerManager/index.ts +1 -1
- package/appUtils/playerManager/player.ts +42 -18
- package/appUtils/playerManager/playerNative.ts +18 -2
- package/appUtils/playerManager/usePlayerControllerSetup.tsx +3 -3
- package/arrayUtils/__tests__/__snapshots__/arrayUtils.test.ts.snap +4 -4
- package/dateUtils/index.ts +2 -0
- package/domUtils/{cookieManager.js → cookieManager.ts} +1 -2
- package/equalUtils/__tests__/isEqual/combination.test.ts +263 -0
- package/equalUtils/index.ts +49 -30
- package/focusManager/FocusManager.ts +14 -2
- package/focusManager/index.ts +23 -4
- package/functionUtils/__tests__/__snapshots__/functionUtils.test.js.snap +4 -4
- package/functionUtils/index.ts +36 -19
- package/idleUtils/__tests__/withTimeout$.test.ts +37 -0
- package/idleUtils/index.ts +1 -1
- package/idleUtils/withTimeout.ts +15 -2
- package/logger/const.ts +9 -67
- package/manifestUtils/__tests__/createConfig.test.js +16 -16
- package/manifestUtils/defaultManifestConfigurations/player.js +8 -0
- package/manifestUtils/fonts/index.js +5 -6
- package/manifestUtils/sharedConfiguration/screenPicker/__tests__/utils.test.js +304 -0
- package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js +875 -0
- package/manifestUtils/sharedConfiguration/screenPicker/utils.js +130 -0
- package/modalState/index.ts +1 -5
- package/navigationUtils/__tests__/__snapshots__/navigationUtils.test.js.snap +6 -6
- package/navigationUtils/__tests__/itemTypes.test.js +2 -2
- package/navigationUtils/__tests__/navigationUtils.test.js +2 -2
- package/navigationUtils/index.ts +17 -8
- package/numberUtils/index.ts +7 -5
- package/package.json +5 -10
- package/playerUtils/configurationGenerator.ts +8 -0
- package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts +1 -1
- package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx +6 -8
- package/reactHooks/autoscrolling/useTrackedView.ts +12 -1
- package/reactHooks/cell-click/__tests__/index.test.js +10 -2
- package/reactHooks/cell-click/index.ts +7 -1
- package/reactHooks/feed/__tests__/useBuildPipesUrl.test.tsx +4 -4
- package/reactHooks/feed/__tests__/useFeedLoader.test.tsx +10 -11
- package/reactHooks/feed/useFeedLoader.tsx +5 -3
- package/reactHooks/feed/usePipesCacheReset.ts +5 -5
- package/reactHooks/flatList/__tests__/index.test.tsx +30 -21
- package/reactHooks/hookModal/hooks/useHookModalScreenData.ts +39 -0
- package/reactHooks/layout/__tests__/index.test.tsx +10 -10
- package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.native.test.js +14 -28
- package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js +1 -1
- package/reactHooks/layout/useDimensions/useDimensions.ts +8 -0
- package/reactHooks/navigation/__mocks__/useNavigation.ts +3 -0
- package/reactHooks/navigation/__tests__/index.test.tsx +6 -21
- package/reactHooks/navigation/index.ts +41 -240
- package/reactHooks/navigation/useGetBottomTabBarHeight.ts +12 -0
- package/reactHooks/navigation/useGetNavBarTopBorderWidth.ts +14 -0
- package/reactHooks/navigation/useGetTabBarHeight.ts +10 -0
- package/reactHooks/navigation/useIsScreenActive.ts +17 -0
- package/reactHooks/navigation/useNavigationPluginData.ts +15 -0
- package/reactHooks/navigation/useNavigationType.ts +15 -0
- package/reactHooks/navigation/usePathname.ts +4 -0
- package/reactHooks/navigation/useProfilerLogging.ts +15 -0
- package/reactHooks/navigation/useRoute.ts +98 -0
- package/reactHooks/navigation/useUniqueRouteSuffix.ts +41 -0
- package/reactHooks/player/TVSeekControlller/ISeekController.ts +32 -0
- package/reactHooks/player/TVSeekControlller/LongPressSeekController.ts +71 -0
- package/reactHooks/player/TVSeekControlller/TVSeekController.ts +258 -0
- package/reactHooks/player/TVSeekControlller/TapSeekController.ts +53 -0
- package/reactHooks/player/__tests__/{useAutoSeek.test.tsx → useAutoSeek._test.tsx} +2 -3
- package/reactHooks/player/const.ts +0 -4
- package/reactHooks/player/index.ts +0 -6
- package/reactHooks/state/useRefWithInitialValue.ts +14 -0
- package/reactHooks/state/useStateFromSubscribe.ts +23 -0
- package/reactHooks/usePluginConfiguration.ts +1 -1
- package/reactHooks/useSubscriberFor.ts +4 -3
- package/reactUtils/__tests__/__snapshots__/reactUtilsHelpers.test.js.snap +16 -4
- package/reactUtils/__tests__/reactUtils.test.js +1 -37
- package/reactUtils/__tests__/reactUtilsHelpers.test.js +72 -71
- package/reactUtils/createContext/__tests__/__snapshots__/helpers.test.js.snap +13 -79
- package/reactUtils/createContext/__tests__/__snapshots__/{index.test.js.snap → index.test.ts.snap} +2 -2
- package/reactUtils/createContext/__tests__/__snapshots__/provider.test.js.snap +3 -28
- package/reactUtils/createContext/__tests__/__snapshots__/withConsumer.test.js.snap +3 -4
- package/reactUtils/createContext/__tests__/__snapshots__/withProvider.test.js.snap +7 -3
- package/reactUtils/createContext/__tests__/helpers.test.js +107 -121
- package/reactUtils/createContext/__tests__/{index.test.js → index.test.ts} +2 -2
- package/reactUtils/createContext/__tests__/provider.test.js +4 -6
- package/reactUtils/createContext/__tests__/withConsumer.test.js +12 -12
- package/reactUtils/createContext/__tests__/withProvider.test.js +4 -4
- package/reactUtils/createContext/helpers.ts +6 -1
- package/reactUtils/createContext/index.ts +11 -25
- package/reactUtils/index.ts +0 -25
- package/screenState/index.ts +24 -10
- package/services/js2native.ts +673 -0
- package/testUtils/index.tsx +0 -10
- package/theme/__mocks__/index.ts +4 -0
- package/theme/index.ts +1 -1
- package/time/BackgroundTimer.ts +55 -0
- package/time/Timer.ts +9 -6
- package/types.ts +1 -0
- package/utils/README.md +30 -0
- package/utils/chunk.ts +5 -0
- package/utils/index.ts +5 -0
- package/utils/times.ts +5 -0
- package/zappFrameworkUtils/localStorageHelper.ts +6 -0
- package/zappFrameworkUtils/loginPluginUtils.ts +6 -2
- package/zappFrameworkUtils/presentPluginOneTime.ts +2 -3
- package/zappFrameworkUtils/types.ts +11 -0
- package/appUtils/keyCodes/keys.ios.js +0 -46
- package/reactHooks/player/useAutoSeek.tsx +0 -87
- package/reactHooks/player/useSeek.tsx +0 -66
- package/reactHooks/player/useTapSeek.tsx +0 -58
- package/reactUtils/createContext/__tests__/index-no-react.test.js +0 -27
- /package/appUtils/HooksManager/{logger.js → logger.ts} +0 -0
- /package/appUtils/{directionHelper.js → directionHelper.ts} +0 -0
- /package/appUtils/keyCodes/{androidTVKeys.js → androidTVKeys.ts} +0 -0
- /package/appUtils/keyCodes/{keys.web.js → keys/keys.web.ts} +0 -0
- /package/appUtils/{localizationsHelper.js → localizationsHelper.ts} +0 -0
- /package/domUtils/{logger.js → logger.ts} +0 -0
- /package/reactHooks/player/__tests__/{useTapSeek.test.ts → useTapSeek._test.ts} +0 -0
|
@@ -191,7 +191,6 @@ const toDistance = ({ target, direction, comparisonRect }) => {
|
|
|
191
191
|
* Get target in shortest distance in specified direction
|
|
192
192
|
* @private
|
|
193
193
|
* @param {Object} direction of the navigation, which led to this focus change
|
|
194
|
-
* @param {Object} excludedNode node which should be excluded from target group
|
|
195
194
|
* @param {Array} targetNodes array of input target nodes
|
|
196
195
|
* @param {Object} comparisonRect rectangle to compare sides in direction.
|
|
197
196
|
* @returns {Object} target in direction.
|
|
@@ -300,8 +299,7 @@ export function findFocusableNode(direction, currentFocusNode) {
|
|
|
300
299
|
* @public
|
|
301
300
|
* @param {Object} direction of the navigation, which led to this focus change
|
|
302
301
|
* @param {Object} component - object to check props.prioritiseFocusOn
|
|
303
|
-
* @returns {Boolean} TRUE if object has priority in direction.
|
|
304
|
-
* @returns {Boolean} FALSE if object has NO priority in direction.
|
|
302
|
+
* @returns {Boolean} TRUE if object has priority in direction. FALSE if object has NO priority in direction.
|
|
305
303
|
*/
|
|
306
304
|
export function hasPriorityInDirection(direction, component) {
|
|
307
305
|
const { prioritiseFocusOn = 0 } = component.props;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
|
|
2
|
-
import { find, last,
|
|
2
|
+
import { find, last, pathOr, startsWith } from "ramda";
|
|
3
3
|
import {
|
|
4
|
-
QUICK_BRICK_NAVBAR,
|
|
5
4
|
QUICK_BRICK_CONTENT,
|
|
5
|
+
QUICK_BRICK_NAVBAR,
|
|
6
6
|
} from "@applicaster/quick-brick-core/const";
|
|
7
7
|
|
|
8
8
|
// run check each 300 ms
|
|
@@ -66,7 +66,8 @@ export const getContentNode = (focusableTree) => {
|
|
|
66
66
|
const content = find(
|
|
67
67
|
(child) =>
|
|
68
68
|
startsWith(QUICK_BRICK_CONTENT, child.id) ||
|
|
69
|
-
startsWith("player", child.id)
|
|
69
|
+
startsWith("player", child.id) ||
|
|
70
|
+
startsWith("/hooks", child?.parent?.id), // For startup hooks case
|
|
70
71
|
getActiveScreenChildren(focusableTree)
|
|
71
72
|
);
|
|
72
73
|
|
|
@@ -9,7 +9,7 @@ export { KEYS, ARROW_KEYS } from "./keyCodes/keys";
|
|
|
9
9
|
|
|
10
10
|
export { playerManager } from "./playerManager";
|
|
11
11
|
|
|
12
|
-
export {
|
|
12
|
+
export { AccessibilityManager } from "./accessibilityManager";
|
|
13
13
|
|
|
14
14
|
export function deprecationMessage(fn, replacement) {
|
|
15
15
|
if (__DEV__ && process.env.NODE_ENV !== "test") {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`keyCodes keyCode returns an object for a given key event 1`] = `
|
|
4
|
-
|
|
4
|
+
{
|
|
5
5
|
"direction": [Function],
|
|
6
6
|
"matches": [Function],
|
|
7
7
|
"matchesAny": [Function],
|
|
8
|
-
"value":
|
|
8
|
+
"value": {
|
|
9
9
|
"code": "Enter",
|
|
10
10
|
"keyCode": 13,
|
|
11
11
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { Platform } from "react-native";
|
|
2
2
|
|
|
3
3
|
Platform.OS = "web";
|
|
4
4
|
|
|
@@ -13,7 +13,7 @@ const globalTizen = {
|
|
|
13
13
|
describe("keyCodes", () => {
|
|
14
14
|
describe("keyCode", () => {
|
|
15
15
|
const { keyCode } = require("..");
|
|
16
|
-
const { KEYS } = require("../keys.web");
|
|
16
|
+
const { KEYS } = require("../keys/keys.web");
|
|
17
17
|
|
|
18
18
|
it("returns an object for a given key event", () => {
|
|
19
19
|
expect(keyCode(KEYS.Enter)).toMatchSnapshot();
|
|
@@ -63,7 +63,7 @@ describe("keyCodes", () => {
|
|
|
63
63
|
it("uses the proper keyCode for the environment", () => {
|
|
64
64
|
Platform.OS = "samsung_tv";
|
|
65
65
|
const { keyCode } = require("../");
|
|
66
|
-
const { KEYS } = require("../keys.web");
|
|
66
|
+
const { KEYS } = require("../keys/keys.web");
|
|
67
67
|
|
|
68
68
|
expect(globalTizen.tvinputdevice.registerKeyBatch).toHaveBeenCalledWith([
|
|
69
69
|
"MediaPlay",
|
|
@@ -97,7 +97,7 @@ describe("keyCodes", () => {
|
|
|
97
97
|
it("uses the proper keyCode for the environment", () => {
|
|
98
98
|
Platform.OS = "lg_tv";
|
|
99
99
|
const { keyCode } = require("..");
|
|
100
|
-
const { KEYS } = require("../keys.web");
|
|
100
|
+
const { KEYS } = require("../keys/keys.web");
|
|
101
101
|
// Back is reserved on LG
|
|
102
102
|
expect(keyCode({ keyCode: 417 }).matches(KEYS.Forward)).toBeTruthy();
|
|
103
103
|
});
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import * as R from "ramda";
|
|
2
|
-
|
|
3
1
|
// more keys can be added here. Simply make sure
|
|
4
2
|
// the key matches the code value
|
|
5
3
|
|
|
6
4
|
import { directionHelper } from "../directionHelper";
|
|
7
5
|
import { KEYS, ARROW_KEYS } from "./keys";
|
|
8
6
|
|
|
7
|
+
export { KEYS, ARROW_KEYS, keyEventMapper } from "./keys";
|
|
8
|
+
|
|
9
9
|
/**
|
|
10
10
|
* @typedef KeyCode
|
|
11
11
|
* @property {Object} value of the Key
|
|
@@ -32,12 +32,18 @@ export function keyCode(key) {
|
|
|
32
32
|
keyCode(keyEvent).matchesAny("Enter", "Backspace", KEYS.ArrowLeft, ...)
|
|
33
33
|
*/
|
|
34
34
|
|
|
35
|
-
const matches =
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
const matches = (compareKey) => {
|
|
36
|
+
// If compareKey is a string, look it up in KEYS object
|
|
37
|
+
const keyToCompare =
|
|
38
|
+
typeof compareKey === "string" ? KEYS[compareKey] : compareKey;
|
|
39
|
+
|
|
40
|
+
// Compare either code or keyCode properties
|
|
41
|
+
return (
|
|
42
|
+
keyToCompare?.code === key.code || keyToCompare?.keyCode === key.keyCode
|
|
43
|
+
);
|
|
44
|
+
};
|
|
39
45
|
|
|
40
|
-
const matchesAny = (...args) =>
|
|
46
|
+
const matchesAny = (...args) => args.some(matches);
|
|
41
47
|
|
|
42
48
|
const direction = () =>
|
|
43
49
|
matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;
|
|
@@ -1,22 +1,3 @@
|
|
|
1
|
-
export const KEYS = {
|
|
2
|
-
Enter: { code: "Enter", keyCode: 13 },
|
|
3
|
-
EnterKeyboard: { code: "EnterKeyboard", keyCode: 66 },
|
|
4
|
-
Back: { code: "Back", keyCode: 8 },
|
|
5
|
-
Space: { code: "Space", keyCode: 32 },
|
|
6
|
-
m: { code: "m", keyCode: 77 },
|
|
7
|
-
ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
|
|
8
|
-
ArrowUp: { code: "ArrowUp", keyCode: 38 },
|
|
9
|
-
ArrowRight: { code: "ArrowRight", keyCode: 39 },
|
|
10
|
-
ArrowDown: { code: "ArrowDown", keyCode: 40 },
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export const ARROW_KEYS = [
|
|
14
|
-
KEYS.ArrowUp,
|
|
15
|
-
KEYS.ArrowLeft,
|
|
16
|
-
KEYS.ArrowDown,
|
|
17
|
-
KEYS.ArrowRight,
|
|
18
|
-
];
|
|
19
|
-
|
|
20
1
|
export function keyEventMapper(keyCode) {
|
|
21
2
|
switch (keyCode) {
|
|
22
3
|
case 19: // ArrowUp
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export const KEYS = {
|
|
2
|
+
Enter: { code: "Enter", keyCode: 13 },
|
|
3
|
+
EnterKeyboard: { code: "EnterKeyboard", keyCode: 66 },
|
|
4
|
+
Back: { code: "Back", keyCode: 8 },
|
|
5
|
+
Space: { code: "Space", keyCode: 32 },
|
|
6
|
+
m: { code: "m", keyCode: 77 },
|
|
7
|
+
ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
|
|
8
|
+
ArrowUp: { code: "ArrowUp", keyCode: 38 },
|
|
9
|
+
ArrowRight: { code: "ArrowRight", keyCode: 39 },
|
|
10
|
+
ArrowDown: { code: "ArrowDown", keyCode: 40 },
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export const ARROW_KEYS = [
|
|
14
|
+
KEYS.ArrowUp,
|
|
15
|
+
KEYS.ArrowLeft,
|
|
16
|
+
KEYS.ArrowDown,
|
|
17
|
+
KEYS.ArrowRight,
|
|
18
|
+
];
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export const KEYS = {
|
|
2
|
+
Enter: { code: "Enter", keyCode: 13 },
|
|
3
|
+
Space: { code: "Space", keyCode: 32 },
|
|
4
|
+
m: { code: "m", keyCode: 77 },
|
|
5
|
+
ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
|
|
6
|
+
ArrowUp: { code: "ArrowUp", keyCode: 38 },
|
|
7
|
+
ArrowRight: { code: "ArrowRight", keyCode: 39 },
|
|
8
|
+
ArrowDown: { code: "ArrowDown", keyCode: 40 },
|
|
9
|
+
Back: { code: "Backspace", keyCode: 8 },
|
|
10
|
+
Play: { code: "PlayPause", keyCode: 179 },
|
|
11
|
+
Pause: { code: "Pause", keyCode: 179 },
|
|
12
|
+
Forward: { code: "Forward", keyCode: 176 },
|
|
13
|
+
Rewind: { code: "Rewind", keyCode: 177 },
|
|
14
|
+
VolumeUp: { code: "VolumeUp", keyCode: 175 },
|
|
15
|
+
VolumeDown: { code: "VolumeDown", keyCode: 174 },
|
|
16
|
+
ToggleMute: { code: "VolumeMute", keyCode: 173 },
|
|
17
|
+
Stop: { code: "Q", keyCode: 81 },
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export const ARROW_KEYS = [
|
|
21
|
+
KEYS.ArrowUp,
|
|
22
|
+
KEYS.ArrowLeft,
|
|
23
|
+
KEYS.ArrowDown,
|
|
24
|
+
KEYS.ArrowRight,
|
|
25
|
+
];
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// dummy file to make sure the folder structure is created
|
|
2
|
+
export const KEYS: Record<string, { code: string; keyCode: number }> = {
|
|
3
|
+
ArrowLeft: { code: "ArrowLeft", keyCode: -1 },
|
|
4
|
+
ArrowUp: { code: "ArrowUp", keyCode: -1 },
|
|
5
|
+
ArrowRight: { code: "ArrowRight", keyCode: -1 },
|
|
6
|
+
ArrowDown: { code: "ArrowDown", keyCode: -1 },
|
|
7
|
+
Back: { code: "Back", keyCode: -1 },
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export const ARROW_KEYS = [
|
|
11
|
+
KEYS.ArrowUp,
|
|
12
|
+
KEYS.ArrowLeft,
|
|
13
|
+
KEYS.ArrowDown,
|
|
14
|
+
KEYS.ArrowRight,
|
|
15
|
+
];
|
|
@@ -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 }, // Hardware Backward Button
|
|
82
|
+
X: { code: "KeyX", keyCode: 88 }, // Hardware Enter Button
|
|
83
|
+
C: { code: "KeyC", keyCode: 67 }, // Hardware Forward Button
|
|
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
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/// <reference types="@types/react-native" />
|
|
2
1
|
import * as ReactNative from "react-native";
|
|
3
|
-
import { isTV, platformSelect } from "../reactUtils";
|
|
4
2
|
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
|
|
5
|
-
|
|
3
|
+
|
|
4
|
+
import { isTV, platformSelect } from "../reactUtils";
|
|
5
|
+
import { useIsTablet } from "../reactHooks";
|
|
6
6
|
|
|
7
7
|
import {
|
|
8
8
|
QUICK_BRICK_EVENTS,
|
|
@@ -121,8 +121,15 @@ export const removeOrientationChangeListener = (listener: any): void => {
|
|
|
121
121
|
*/
|
|
122
122
|
export const isOrientationCompatible = ({
|
|
123
123
|
orientation,
|
|
124
|
-
layoutData: { width, height },
|
|
124
|
+
layoutData: { width, height, isTablet, isTabletPortrait },
|
|
125
125
|
}) => {
|
|
126
|
+
// We count portrait as compatible, because if default in zapp for mobile layout
|
|
127
|
+
// We count landscape as compatible, because if isTabletPortrait is false,
|
|
128
|
+
// it defaults for device
|
|
129
|
+
if (isTablet && !isTabletPortrait) {
|
|
130
|
+
return true;
|
|
131
|
+
}
|
|
132
|
+
|
|
126
133
|
const isLandscape = width > height;
|
|
127
134
|
|
|
128
135
|
if (
|
|
@@ -146,15 +153,6 @@ export const isOrientationCompatible = ({
|
|
|
146
153
|
return true;
|
|
147
154
|
};
|
|
148
155
|
|
|
149
|
-
export const useIsOrientationCompatible = (orientation) => {
|
|
150
|
-
const { height, width } = ReactNative.useWindowDimensions();
|
|
151
|
-
|
|
152
|
-
return isOrientationCompatible({
|
|
153
|
-
orientation,
|
|
154
|
-
layoutData: { width, height },
|
|
155
|
-
});
|
|
156
|
-
};
|
|
157
|
-
|
|
158
156
|
/**
|
|
159
157
|
* Determine final screen orientation based on device type,
|
|
160
158
|
* settings and orientation value provided by screen data settings
|
|
@@ -23,3 +23,17 @@ export const PLATFORMS = {
|
|
|
23
23
|
export const PLATFORM_KEYS = {
|
|
24
24
|
deviceClosedCaptioningEnabled: "device_closed_captioning_enabled",
|
|
25
25
|
};
|
|
26
|
+
|
|
27
|
+
export enum ZappPlatform {
|
|
28
|
+
Android = "android",
|
|
29
|
+
AndroidTV = "android_tv",
|
|
30
|
+
AmazonFireTV = "amazon",
|
|
31
|
+
iOS = "ios",
|
|
32
|
+
tvOS = "tvos",
|
|
33
|
+
Roku = "roku",
|
|
34
|
+
Tizen = "tizen",
|
|
35
|
+
Web = "web",
|
|
36
|
+
WebOS = "webos",
|
|
37
|
+
Vizio = "vizio",
|
|
38
|
+
Unknown = "unknown",
|
|
39
|
+
}
|
|
@@ -6,22 +6,10 @@ import {
|
|
|
6
6
|
isSamsungPlatform,
|
|
7
7
|
} from "@applicaster/zapp-react-dom-app/App/Loader/utils/platform";
|
|
8
8
|
|
|
9
|
-
import { PLATFORM_KEYS, PLATFORMS } from "./const";
|
|
9
|
+
import { PLATFORM_KEYS, PLATFORMS, ZappPlatform } from "./const";
|
|
10
10
|
import { createLogger, utilsLogger } from "../../logger";
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
interface Window {
|
|
14
|
-
VIZIO?: {
|
|
15
|
-
exitApplication: () => void;
|
|
16
|
-
Chromevox: {
|
|
17
|
-
play: (text: string) => void;
|
|
18
|
-
};
|
|
19
|
-
setClosedCaptionHandler: (
|
|
20
|
-
callback: (isCCEnabled: boolean) => void
|
|
21
|
-
) => void;
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
}
|
|
11
|
+
import { getPlatform } from "../../reactUtils";
|
|
12
|
+
import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
|
|
25
13
|
|
|
26
14
|
const { log_debug } = createLogger({
|
|
27
15
|
category: "General",
|
|
@@ -29,6 +17,20 @@ const { log_debug } = createLogger({
|
|
|
29
17
|
parent: utilsLogger,
|
|
30
18
|
});
|
|
31
19
|
|
|
20
|
+
export const getZappPlatform = (): ZappPlatform => {
|
|
21
|
+
const platform = appStore.get("appData")?.platform;
|
|
22
|
+
|
|
23
|
+
switch (platform) {
|
|
24
|
+
case "amazon_fire_tv":
|
|
25
|
+
return ZappPlatform.AmazonFireTV;
|
|
26
|
+
case ZappPlatform.Vizio:
|
|
27
|
+
return ZappPlatform.Vizio;
|
|
28
|
+
default:
|
|
29
|
+
// TODO: Use only ZappPlatform enum
|
|
30
|
+
return getPlatform() as ZappPlatform;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
32
34
|
export const getUserAgent = () => window?.navigator?.userAgent;
|
|
33
35
|
|
|
34
36
|
/** VIZIO UTILS */
|
|
@@ -75,13 +77,22 @@ export class ClosedCaptioningManager {
|
|
|
75
77
|
|
|
76
78
|
private constructor() {
|
|
77
79
|
this.initialize();
|
|
80
|
+
|
|
81
|
+
window["vizioDebug"] = {
|
|
82
|
+
setCCEnabled: (isCCEnabled: boolean) => {
|
|
83
|
+
this.ccState$.next(isCCEnabled);
|
|
84
|
+
},
|
|
85
|
+
};
|
|
78
86
|
}
|
|
79
87
|
|
|
80
88
|
static getInstance(): ClosedCaptioningManager {
|
|
81
89
|
if (!ClosedCaptioningManager.ccManagerInstance) {
|
|
90
|
+
log_debug("ClosedCaptioningManager: Creating new instance");
|
|
82
91
|
ClosedCaptioningManager.ccManagerInstance = new ClosedCaptioningManager();
|
|
83
92
|
}
|
|
84
93
|
|
|
94
|
+
log_debug("ClosedCaptioningManager: Returning existing instance");
|
|
95
|
+
|
|
85
96
|
return ClosedCaptioningManager.ccManagerInstance;
|
|
86
97
|
}
|
|
87
98
|
|
|
@@ -90,23 +101,41 @@ export class ClosedCaptioningManager {
|
|
|
90
101
|
PLATFORM_KEYS.deviceClosedCaptioningEnabled
|
|
91
102
|
);
|
|
92
103
|
|
|
93
|
-
log_debug("Initializing closed captioning manager", { existingState });
|
|
94
|
-
|
|
95
104
|
if (existingState !== null) {
|
|
105
|
+
log_debug(
|
|
106
|
+
`ClosedCaptioningManager: Setting initial state to ${existingState}`
|
|
107
|
+
);
|
|
108
|
+
|
|
96
109
|
this.ccState$.next(existingState === "true" || existingState === true);
|
|
110
|
+
} else {
|
|
111
|
+
log_debug("ClosedCaptioningManager: No existing state found");
|
|
97
112
|
}
|
|
98
113
|
|
|
99
114
|
if (hasVizioAPIs()) {
|
|
115
|
+
log_debug("ClosedCaptioningManager: Setting closed captioning handler");
|
|
116
|
+
|
|
100
117
|
window.VIZIO!.setClosedCaptionHandler((isCCEnabled) => {
|
|
101
|
-
log_debug(
|
|
118
|
+
log_debug(
|
|
119
|
+
"ClosedCaptioningManager: There was a change in the CC state",
|
|
120
|
+
{ isCCEnabled }
|
|
121
|
+
);
|
|
102
122
|
|
|
103
123
|
sessionStorage.setItem(
|
|
104
124
|
PLATFORM_KEYS.deviceClosedCaptioningEnabled,
|
|
105
125
|
isCCEnabled
|
|
106
126
|
);
|
|
107
127
|
|
|
128
|
+
log_debug(
|
|
129
|
+
"ClosedCaptioningManager: Saved CC state to session storage",
|
|
130
|
+
{ isCCEnabled }
|
|
131
|
+
);
|
|
132
|
+
|
|
108
133
|
this.ccState$.next(isCCEnabled);
|
|
109
134
|
});
|
|
135
|
+
} else {
|
|
136
|
+
log_debug(
|
|
137
|
+
"ClosedCaptioningManager: Vizio APIs are not available, skipping setup"
|
|
138
|
+
);
|
|
110
139
|
}
|
|
111
140
|
}
|
|
112
141
|
|
|
@@ -452,7 +452,7 @@ export class PlayerManager {
|
|
|
452
452
|
if (this.castingReceiver) {
|
|
453
453
|
this.castingReceiver.closeNativePlayer();
|
|
454
454
|
} else {
|
|
455
|
-
this.getActivePlayer()
|
|
455
|
+
this.getActivePlayer()?.closeNativePlayer();
|
|
456
456
|
this.invokeHandler("close");
|
|
457
457
|
}
|
|
458
458
|
}
|
|
@@ -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
|
+
this.onAdBreakEnd = this.onAdBreakEnd.bind(this);
|
|
94
101
|
this.entryObservable = null;
|
|
95
102
|
}
|
|
96
103
|
|
|
@@ -147,8 +154,8 @@ export class Player {
|
|
|
147
154
|
this.isSeeking()
|
|
148
155
|
? this.playerState.seekPosition
|
|
149
156
|
: this.playerState.adState
|
|
150
|
-
|
|
151
|
-
|
|
157
|
+
? this.playerState.adState.adPosition
|
|
158
|
+
: this.playerState.contentPosition;
|
|
152
159
|
|
|
153
160
|
getEntry = (): ZappEntry | null => this.entry;
|
|
154
161
|
|
|
@@ -194,17 +201,25 @@ export class Player {
|
|
|
194
201
|
adPosition: currentTime,
|
|
195
202
|
};
|
|
196
203
|
} else {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
204
|
+
this.updateContentDuration({ seekableDuration, duration, currentTime });
|
|
205
|
+
}
|
|
206
|
+
};
|
|
200
207
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
208
|
+
protected updateContentDuration = ({
|
|
209
|
+
seekableDuration = null,
|
|
210
|
+
duration = null,
|
|
211
|
+
currentTime = null,
|
|
212
|
+
}) => {
|
|
213
|
+
if (!isEmptyOrNil(seekableDuration) && seekableDuration >= 0) {
|
|
214
|
+
this.playerState.seekableDuration = seekableDuration;
|
|
215
|
+
}
|
|
204
216
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
217
|
+
if (!isEmptyOrNil(duration) && duration >= 0) {
|
|
218
|
+
this.playerState.contentDuration = duration;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
if (!isEmptyOrNil(currentTime) && currentTime >= 0) {
|
|
222
|
+
this.playerState.contentPosition = currentTime;
|
|
208
223
|
}
|
|
209
224
|
};
|
|
210
225
|
|
|
@@ -321,7 +336,7 @@ export class Player {
|
|
|
321
336
|
* You should use dispatchPlayerEvent at PlayerContainer or call playerManager.invokeHandler directly
|
|
322
337
|
* This allows you to use one method for everything.
|
|
323
338
|
*/
|
|
324
|
-
|
|
339
|
+
onPlayerSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
|
|
325
340
|
const { isLive, seekableDuration, currentTime, duration, seekTime } = event;
|
|
326
341
|
|
|
327
342
|
this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
|
|
@@ -336,10 +351,11 @@ export class Player {
|
|
|
336
351
|
});
|
|
337
352
|
};
|
|
338
353
|
|
|
339
|
-
|
|
354
|
+
onPlayerSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
|
|
340
355
|
const { isLive, seekableDuration, currentTime, duration } = event;
|
|
341
356
|
|
|
342
357
|
this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
|
|
358
|
+
|
|
343
359
|
this.playerState.seekPosition = null;
|
|
344
360
|
|
|
345
361
|
if (!isLive) {
|
|
@@ -551,7 +567,7 @@ export class Player {
|
|
|
551
567
|
});
|
|
552
568
|
};
|
|
553
569
|
|
|
554
|
-
onAdBreakEnd
|
|
570
|
+
onAdBreakEnd(event) {
|
|
555
571
|
this.playerState.adState = null;
|
|
556
572
|
this.playerState.isInAdBreak = false;
|
|
557
573
|
|
|
@@ -559,7 +575,7 @@ export class Player {
|
|
|
559
575
|
callbackName: SharedPlayerCallBacksKeys.OnAdBreakEnd,
|
|
560
576
|
event,
|
|
561
577
|
});
|
|
562
|
-
}
|
|
578
|
+
}
|
|
563
579
|
|
|
564
580
|
onAdEnd = (event) => {
|
|
565
581
|
this.playerState.adState = null;
|
|
@@ -620,14 +636,18 @@ export class Player {
|
|
|
620
636
|
selectTrack = (_track) => {};
|
|
621
637
|
|
|
622
638
|
protected notifyPlayHeadPositionUpdate = () => {
|
|
639
|
+
const currentTime = this.getPosition();
|
|
640
|
+
|
|
623
641
|
const event = {
|
|
624
|
-
currentTime
|
|
642
|
+
currentTime,
|
|
625
643
|
duration: this.getDuration(),
|
|
626
644
|
item: this.getEntry(),
|
|
627
645
|
seekableDuration: this.playerState.seekableDuration,
|
|
628
646
|
isLive: this.isLive(),
|
|
629
647
|
};
|
|
630
648
|
|
|
649
|
+
this.seekController?.onVideoProgress(currentTime);
|
|
650
|
+
|
|
631
651
|
this.invokeListenersUpdate({
|
|
632
652
|
callbackName: SharedPlayerCallBacksKeys.OnVideoProgress,
|
|
633
653
|
event,
|
|
@@ -653,8 +673,8 @@ export class Player {
|
|
|
653
673
|
};
|
|
654
674
|
|
|
655
675
|
public getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => ({
|
|
656
|
-
onPlayerSeekStart: this.
|
|
657
|
-
onPlayerSeekComplete: this.
|
|
676
|
+
onPlayerSeekStart: this.onPlayerSeekStart,
|
|
677
|
+
onPlayerSeekComplete: this.onPlayerSeekComplete,
|
|
658
678
|
onVideoEnd: this.onVideoEnd,
|
|
659
679
|
onError: this.onError,
|
|
660
680
|
onVideoError: this.onVideoError,
|
|
@@ -724,6 +744,10 @@ export class Player {
|
|
|
724
744
|
return null;
|
|
725
745
|
};
|
|
726
746
|
|
|
747
|
+
public hasResumePosition() {
|
|
748
|
+
return false;
|
|
749
|
+
}
|
|
750
|
+
|
|
727
751
|
public getConfig = () => this.config;
|
|
728
752
|
|
|
729
753
|
// TODO: replace with enum of supported orientations
|