@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.
Files changed (157) hide show
  1. package/README.md +0 -10
  2. package/actionsExecutor/ActionExecutor.ts +16 -9
  3. package/actionsExecutor/ActionExecutorContext.tsx +164 -11
  4. package/alertUtils/alert.ts +148 -0
  5. package/alertUtils/index.ts +1 -148
  6. package/analyticsUtils/AnalyticPlayerListener.ts +18 -1
  7. package/analyticsUtils/__tests__/__snapshots__/analyticsManagerNoModule.test.js.snap +9 -9
  8. package/analyticsUtils/currentScreenProperities.ts +6 -4
  9. package/analyticsUtils/helpers/hooks.ts +1 -1
  10. package/appUtils/HooksManager/{Hook.js → Hook.ts} +39 -23
  11. package/appUtils/HooksManager/__tests__/__snapshots__/hook.test.js.snap +10 -8
  12. package/appUtils/HooksManager/__tests__/__snapshots__/hooksManager.test.js.snap +693 -0
  13. package/appUtils/HooksManager/__tests__/hook.test.js +196 -184
  14. package/appUtils/HooksManager/__tests__/hooksManager.test.js +96 -99
  15. package/appUtils/HooksManager/{constants.js → constants.ts} +1 -1
  16. package/appUtils/HooksManager/{index.js → index.ts} +124 -113
  17. package/appUtils/HooksManager/types.ts +119 -0
  18. package/appUtils/RiverFocusManager/index.js +17 -12
  19. package/appUtils/accessibilityManager/index.ts +42 -1
  20. package/appUtils/contextKeysManager/contextResolver.ts +66 -0
  21. package/appUtils/contextKeysManager/index.ts +2 -2
  22. package/appUtils/contextKeysManager/utils/index.ts +2 -1
  23. package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap +7 -6
  24. package/appUtils/focusManager/index.ts +100 -74
  25. package/appUtils/focusManager/treeDataStructure/Tree/index.js +25 -3
  26. package/appUtils/focusManager/treeDataStructure/Utils/index.js +1 -3
  27. package/appUtils/focusManager/utils/enums.ts +4 -0
  28. package/appUtils/focusManagerAux/utils/index.ts +4 -3
  29. package/appUtils/{index.js → index.ts} +1 -1
  30. package/appUtils/keyCodes/__tests__/__snapshots__/keyCodes.test.js.snap +2 -2
  31. package/appUtils/keyCodes/__tests__/keyCodes.test.js +4 -4
  32. package/appUtils/keyCodes/{index.js → index.ts} +13 -7
  33. package/appUtils/keyCodes/keys/index.ts +3 -0
  34. package/appUtils/keyCodes/{keys.android.js → keys/keyEventMapper.ts} +0 -19
  35. package/appUtils/keyCodes/keys/keys.android.ts +18 -0
  36. package/appUtils/keyCodes/keys/keys.ios.ts +25 -0
  37. package/appUtils/keyCodes/keys/keys.ts +15 -0
  38. package/appUtils/keyCodes/{keysByPlatform.js → keys/keysByPlatform.ts} +4 -0
  39. package/appUtils/keyCodes/keysByPlatform.ts +8 -0
  40. package/appUtils/keyInputHandler/KeyInputHandler.ts +68 -0
  41. package/appUtils/orientationHelper.ts +11 -13
  42. package/appUtils/platform/const.ts +14 -0
  43. package/appUtils/platform/platformUtils.ts +47 -18
  44. package/appUtils/playerManager/index.ts +1 -1
  45. package/appUtils/playerManager/player.ts +42 -18
  46. package/appUtils/playerManager/playerNative.ts +18 -2
  47. package/appUtils/playerManager/usePlayerControllerSetup.tsx +3 -3
  48. package/arrayUtils/__tests__/__snapshots__/arrayUtils.test.ts.snap +4 -4
  49. package/dateUtils/index.ts +2 -0
  50. package/domUtils/{cookieManager.js → cookieManager.ts} +1 -2
  51. package/equalUtils/__tests__/isEqual/combination.test.ts +263 -0
  52. package/equalUtils/index.ts +49 -30
  53. package/focusManager/FocusManager.ts +14 -2
  54. package/focusManager/index.ts +23 -4
  55. package/functionUtils/__tests__/__snapshots__/functionUtils.test.js.snap +4 -4
  56. package/functionUtils/index.ts +36 -19
  57. package/idleUtils/__tests__/withTimeout$.test.ts +37 -0
  58. package/idleUtils/index.ts +1 -1
  59. package/idleUtils/withTimeout.ts +15 -2
  60. package/logger/const.ts +9 -67
  61. package/manifestUtils/__tests__/createConfig.test.js +16 -16
  62. package/manifestUtils/defaultManifestConfigurations/player.js +8 -0
  63. package/manifestUtils/fonts/index.js +5 -6
  64. package/manifestUtils/sharedConfiguration/screenPicker/__tests__/utils.test.js +304 -0
  65. package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js +875 -0
  66. package/manifestUtils/sharedConfiguration/screenPicker/utils.js +130 -0
  67. package/modalState/index.ts +1 -5
  68. package/navigationUtils/__tests__/__snapshots__/navigationUtils.test.js.snap +6 -6
  69. package/navigationUtils/__tests__/itemTypes.test.js +2 -2
  70. package/navigationUtils/__tests__/navigationUtils.test.js +2 -2
  71. package/navigationUtils/index.ts +17 -8
  72. package/numberUtils/index.ts +7 -5
  73. package/package.json +5 -10
  74. package/playerUtils/configurationGenerator.ts +8 -0
  75. package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts +1 -1
  76. package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx +6 -8
  77. package/reactHooks/autoscrolling/useTrackedView.ts +12 -1
  78. package/reactHooks/cell-click/__tests__/index.test.js +10 -2
  79. package/reactHooks/cell-click/index.ts +7 -1
  80. package/reactHooks/feed/__tests__/useBuildPipesUrl.test.tsx +4 -4
  81. package/reactHooks/feed/__tests__/useFeedLoader.test.tsx +10 -11
  82. package/reactHooks/feed/useFeedLoader.tsx +5 -3
  83. package/reactHooks/feed/usePipesCacheReset.ts +5 -5
  84. package/reactHooks/flatList/__tests__/index.test.tsx +30 -21
  85. package/reactHooks/hookModal/hooks/useHookModalScreenData.ts +39 -0
  86. package/reactHooks/layout/__tests__/index.test.tsx +10 -10
  87. package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.native.test.js +14 -28
  88. package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js +1 -1
  89. package/reactHooks/layout/useDimensions/useDimensions.ts +8 -0
  90. package/reactHooks/navigation/__mocks__/useNavigation.ts +3 -0
  91. package/reactHooks/navigation/__tests__/index.test.tsx +6 -21
  92. package/reactHooks/navigation/index.ts +41 -240
  93. package/reactHooks/navigation/useGetBottomTabBarHeight.ts +12 -0
  94. package/reactHooks/navigation/useGetNavBarTopBorderWidth.ts +14 -0
  95. package/reactHooks/navigation/useGetTabBarHeight.ts +10 -0
  96. package/reactHooks/navigation/useIsScreenActive.ts +17 -0
  97. package/reactHooks/navigation/useNavigationPluginData.ts +15 -0
  98. package/reactHooks/navigation/useNavigationType.ts +15 -0
  99. package/reactHooks/navigation/usePathname.ts +4 -0
  100. package/reactHooks/navigation/useProfilerLogging.ts +15 -0
  101. package/reactHooks/navigation/useRoute.ts +98 -0
  102. package/reactHooks/navigation/useUniqueRouteSuffix.ts +41 -0
  103. package/reactHooks/player/TVSeekControlller/ISeekController.ts +32 -0
  104. package/reactHooks/player/TVSeekControlller/LongPressSeekController.ts +71 -0
  105. package/reactHooks/player/TVSeekControlller/TVSeekController.ts +258 -0
  106. package/reactHooks/player/TVSeekControlller/TapSeekController.ts +53 -0
  107. package/reactHooks/player/__tests__/{useAutoSeek.test.tsx → useAutoSeek._test.tsx} +2 -3
  108. package/reactHooks/player/const.ts +0 -4
  109. package/reactHooks/player/index.ts +0 -6
  110. package/reactHooks/state/useRefWithInitialValue.ts +14 -0
  111. package/reactHooks/state/useStateFromSubscribe.ts +23 -0
  112. package/reactHooks/usePluginConfiguration.ts +1 -1
  113. package/reactHooks/useSubscriberFor.ts +4 -3
  114. package/reactUtils/__tests__/__snapshots__/reactUtilsHelpers.test.js.snap +16 -4
  115. package/reactUtils/__tests__/reactUtils.test.js +1 -37
  116. package/reactUtils/__tests__/reactUtilsHelpers.test.js +72 -71
  117. package/reactUtils/createContext/__tests__/__snapshots__/helpers.test.js.snap +13 -79
  118. package/reactUtils/createContext/__tests__/__snapshots__/{index.test.js.snap → index.test.ts.snap} +2 -2
  119. package/reactUtils/createContext/__tests__/__snapshots__/provider.test.js.snap +3 -28
  120. package/reactUtils/createContext/__tests__/__snapshots__/withConsumer.test.js.snap +3 -4
  121. package/reactUtils/createContext/__tests__/__snapshots__/withProvider.test.js.snap +7 -3
  122. package/reactUtils/createContext/__tests__/helpers.test.js +107 -121
  123. package/reactUtils/createContext/__tests__/{index.test.js → index.test.ts} +2 -2
  124. package/reactUtils/createContext/__tests__/provider.test.js +4 -6
  125. package/reactUtils/createContext/__tests__/withConsumer.test.js +12 -12
  126. package/reactUtils/createContext/__tests__/withProvider.test.js +4 -4
  127. package/reactUtils/createContext/helpers.ts +6 -1
  128. package/reactUtils/createContext/index.ts +11 -25
  129. package/reactUtils/index.ts +0 -25
  130. package/screenState/index.ts +24 -10
  131. package/services/js2native.ts +673 -0
  132. package/testUtils/index.tsx +0 -10
  133. package/theme/__mocks__/index.ts +4 -0
  134. package/theme/index.ts +1 -1
  135. package/time/BackgroundTimer.ts +55 -0
  136. package/time/Timer.ts +9 -6
  137. package/types.ts +1 -0
  138. package/utils/README.md +30 -0
  139. package/utils/chunk.ts +5 -0
  140. package/utils/index.ts +5 -0
  141. package/utils/times.ts +5 -0
  142. package/zappFrameworkUtils/localStorageHelper.ts +6 -0
  143. package/zappFrameworkUtils/loginPluginUtils.ts +6 -2
  144. package/zappFrameworkUtils/presentPluginOneTime.ts +2 -3
  145. package/zappFrameworkUtils/types.ts +11 -0
  146. package/appUtils/keyCodes/keys.ios.js +0 -46
  147. package/reactHooks/player/useAutoSeek.tsx +0 -87
  148. package/reactHooks/player/useSeek.tsx +0 -66
  149. package/reactHooks/player/useTapSeek.tsx +0 -58
  150. package/reactUtils/createContext/__tests__/index-no-react.test.js +0 -27
  151. /package/appUtils/HooksManager/{logger.js → logger.ts} +0 -0
  152. /package/appUtils/{directionHelper.js → directionHelper.ts} +0 -0
  153. /package/appUtils/keyCodes/{androidTVKeys.js → androidTVKeys.ts} +0 -0
  154. /package/appUtils/keyCodes/{keys.web.js → keys/keys.web.ts} +0 -0
  155. /package/appUtils/{localizationsHelper.js → localizationsHelper.ts} +0 -0
  156. /package/domUtils/{logger.js → logger.ts} +0 -0
  157. /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;
@@ -0,0 +1,4 @@
1
+ export enum ACTION {
2
+ FOCUS = "focus",
3
+ BLUR = "blur",
4
+ }
@@ -1,8 +1,8 @@
1
1
  import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
2
- import { find, last, startsWith, pathOr } from "ramda";
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 { accessibilityManager } from "./accessibilityManager";
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
- Object {
4
+ {
5
5
  "direction": [Function],
6
6
  "matches": [Function],
7
7
  "matchesAny": [Function],
8
- "value": Object {
8
+ "value": {
9
9
  "code": "Enter",
10
10
  "keyCode": 13,
11
11
  },
@@ -1,4 +1,4 @@
1
- const { Platform } = require("react-native");
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 = R.compose(
36
- R.either(R.eqProps("code", key), R.eqProps("keyCode", key)),
37
- R.when(R.is(String), R.prop(R.__, KEYS))
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) => R.any(matches, args);
46
+ const matchesAny = (...args) => args.some(matches);
41
47
 
42
48
  const direction = () =>
43
49
  matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;
@@ -0,0 +1,3 @@
1
+ export * from "./keys";
2
+
3
+ export { keyEventMapper } from "./keyEventMapper";
@@ -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,8 @@
1
+ export {
2
+ lg_tv,
3
+ samsung_tv,
4
+ web,
5
+ tvos,
6
+ android_tv,
7
+ vizio,
8
+ } from "./keys/keysByPlatform";
@@ -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
- import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
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
- declare global {
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("CC state changed", { isCCEnabled });
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().closeNativePlayer();
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
- ? this.playerState.adState.adPosition
151
- : this.playerState.contentPosition;
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
- if (!isEmptyOrNil(seekableDuration) && seekableDuration >= 0) {
198
- this.playerState.seekableDuration = seekableDuration;
199
- }
204
+ this.updateContentDuration({ seekableDuration, duration, currentTime });
205
+ }
206
+ };
200
207
 
201
- if (!isEmptyOrNil(duration) && duration >= 0) {
202
- this.playerState.contentDuration = duration;
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
- if (!isEmptyOrNil(currentTime) && currentTime >= 0) {
206
- this.playerState.contentPosition = currentTime;
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
- onSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
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
- onSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
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 = (event) => {
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: this.getPosition(),
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.onSeekStart,
657
- onPlayerSeekComplete: this.onSeekComplete,
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