@applicaster/zapp-react-native-utils 15.1.5-rc.2 → 15.1.6-alpha.2015591222

package/actionsExecutor/actions/switchLayout.ts

@@ -0,0 +1,40 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "@applicaster/quick-brick-core/App/remoteContextReloader/consts";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Options for the switchLayout action.
+ */
+export interface SwitchLayoutOptions {
+  /** The ID of the layout to switch to */
+  layoutId: string;
+}
+
+/**
+ * Switches the active layout and triggers an app reload.
+ * Saves the new layout ID to local storage before reloading.
+ */
+export const switchLayoutAction: ActionHandler<SwitchLayoutOptions> = async (
+  action
+): Promise<ActionResult> => {
+  log_info("handleAction: switchLayout event");
+
+  await localStorage.setItem(
+    ACTIVE_LAYOUT_ID_STORAGE_KEY,
+    action.options.layoutId
+  );
+
+  QuickBrickManager.sendQuickBrickEvent(QUICK_BRICK_EVENTS.FORCE_APP_RELOAD);
+
+  return ActionResult.Success;
+};

package/actionsExecutor/feedDecorator.ts

@@ -27,7 +27,7 @@ function makeMultiSelect(feed: ZappFeed, key, decoratedFeed) {
   );
 
   const behavior = {
-    ...feed.extensions?.["behavior"],
+    ...feed.extensions?.behavior,
     select_mode: "multi",
     current_selection: `@{${scope}/${key}}`,
   };
@@ -75,7 +75,7 @@ function makeSingleSelect(feed: ZappFeed, key, decoratedFeed) {
   );
 
   const behavior = {
-    ...feed.extensions?.["behavior"],
+    ...feed.extensions?.behavior,
     select_mode: "single",
     current_selection: `@{${scope}/${key}}`,
   };
@@ -141,11 +141,11 @@ function makeSingleSelect(feed: ZappFeed, key, decoratedFeed) {
 }
 
 export const decorateFeed = (feed: ZappFeed) => {
-  if (!(feed.extensions?.["role"] === "preference_editor")) {
+  if (!(feed.extensions?.role === "preference_editor")) {
     return feed;
   }
 
-  const key = feed.extensions?.["preference_editor_options"]?.["key"];
+  const key = feed.extensions?.preference_editor_options?.key;
 
   if (!key) {
     log_error(
@@ -160,8 +160,8 @@ export const decorateFeed = (feed: ZappFeed) => {
   const decoratedFeed = R.clone(feed);
 
   const isSingleSelect =
-    (feed.extensions?.["preference_editor_options"]?.select_mode ||
-      feed.extensions?.["behavior"]?.select_mode) === "single";
+    (feed.extensions?.preference_editor_options?.select_mode ||
+      feed.extensions?.behavior?.select_mode) === "single";
 
   if (isSingleSelect) {
     return makeSingleSelect(feed, key, decoratedFeed);

package/actionsExecutor/types.ts

@@ -0,0 +1,59 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { ActionResult } from "./ActionExecutor";
+import { useScreenStateStore } from "../reactHooks/navigation/useScreenStateStore";
+
+/**
+ * Base context object passed to action handlers during execution.
+ * Contains references to the current entry, screen, and other execution state.
+ */
+export interface ActionExecutionContext {
+  /** The entry associated with this action (e.g., the item that was tapped) */
+  entry?: ZappEntry;
+
+  /** The current screen/river data */
+  screenData?: ZappRiver;
+
+  /** The entry that defines the screen (if screen was opened from an entry) */
+  screenEntry?: ZappEntry;
+
+  /** The UI component that triggered the action.
+   * From UIComponentContext as `{ ...component, parent }`.
+   */
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
+
+  /** The route identifier for the current screen */
+  screenRoute?: string;
+
+  /** The screen state store for managing screen-level state (Zustand store) */
+  screenStateStore?: ReturnType<typeof useScreenStateStore>;
+
+  /** Context entry for additional data */
+  entryContext?: ZappEntry;
+
+  /** Callback function for action completion */
+  callback?: (result: { success: boolean; error: any; abort: boolean }) => void;
+
+  screenState?: Record<any, any>;
+}
+
+/**
+ * Type for action handler functions.
+ * Handlers receive the action (which may have typed options) and execution context.
+ *
+ * @template _TOptions - Optional type hint for the action's options object (for documentation/intellisense)
+ * @param action - The action to execute
+ * @param context - The execution context
+ * @returns A promise that resolves to the action result
+ */
+export type ActionHandler<_TOptions = any> = (
+  action: ActionType,
+  context?: ActionExecutionContext
+) => Promise<ActionResult>;
+
+/**
+ * Factory function that creates an action handler.
+ * Used for actions that need to capture dependencies at registration time.
+ */
+export type ActionHandlerFactory<_TOptions = any> = (
+  ...dependencies: any[]
+) => ActionHandler<_TOptions>;

package/analyticsUtils/PlayerAnalyticsManager.ts

@@ -8,7 +8,7 @@ import {
 } from "../appUtils/playerManager";
 import { Player } from "../appUtils/playerManager/player";
 import { AnalyticPlayerListener } from "./AnalyticPlayerListener";
-import { PlayerRole } from "../appUtils/playerManager/conts";
+import { PlayerRole } from "../appUtils/playerManager/const";
 
 enum PlayerAnalyticsTrackerType {
   PlayerAnalyticsTracker = "PlayerAnalyticsTracker",

package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -59,6 +59,7 @@ type PlayNextConfig = {
 export type PlayNextState = PlayNextConfig & {
   triggerTime: number;
   handleUserCancelPlayNext: () => void;
+  hidePlayNext: () => void;
 };
 
 export class OverlaysObserver {
@@ -76,7 +77,7 @@ export class OverlaysObserver {
   private chapterMarkerEvents: ChapterMarkerEvent[];
   readonly player: Player;
   private playNextConfig?: PlayNextConfig;
-  private isCanceledByUser = false;
+  private isPlayNextSuppressed = false;
 
   constructor({ player }: ChapterMarkersObserverProps) {
     this.chapterSubject = new BehaviorSubject(null);
@@ -143,11 +144,15 @@ export class OverlaysObserver {
     return this.titleSummarySubject.asObservable().pipe(distinctUntilChanged());
   }
 
-  handleUserCancelPlayNext = () => {
-    this.isCanceledByUser = true;
+  hidePlayNext = () => {
+    this.isPlayNextSuppressed = true;
     this.playNextSubject.next(null);
   };
 
+  handleUserCancelPlayNext = () => {
+    this.hidePlayNext();
+  };
+
   preparePlayNext = async () => {
     try {
       const plugins = appStore.get("plugins");
@@ -270,7 +275,7 @@ export class OverlaysObserver {
 
   // TODO: Hack for video end, will be replaced with playlist prev/next in the future
   getPlayNextEntry = () =>
-    !this.isCanceledByUser ? this.playNextConfig?.entry : null;
+    !this.isPlayNextSuppressed ? this.playNextConfig?.entry : null;
 
   prepareChapterMarkers = () => {
     const chapterMarkers: ChapterMarkerOriginal[] =
@@ -353,7 +358,7 @@ export class OverlaysObserver {
     const shouldPlayNextBeVisible = currentTime > triggerTime;
 
     if (shouldPlayNextBeVisible) {
-      if (this.isCanceledByUser) {
+      if (this.isPlayNextSuppressed) {
         return;
       }
 
@@ -361,10 +366,11 @@ export class OverlaysObserver {
         ...this.playNextConfig,
         triggerTime,
         handleUserCancelPlayNext: this.handleUserCancelPlayNext,
+        hidePlayNext: this.hidePlayNext,
       });
     } else {
       this.playNextSubject.next(null);
-      this.isCanceledByUser = false;
+      this.isPlayNextSuppressed = false;
     }
   };
 

package/appUtils/playerManager/__tests__/playerFactory.test.ts

@@ -10,7 +10,7 @@ jest.mock("@applicaster/zapp-react-native-utils/pluginUtils", () => ({
     mockFindPluginByIdentifier(id, plugins),
 }));
 
-import { PlayerRole } from "../conts";
+import { PlayerRole } from "../const";
 import { playerFactory } from "../playerFactory";
 
 const fakeComponent = () => null;

package/appUtils/playerManager/{conts.ts → const.ts}

@@ -67,3 +67,23 @@ export enum PlayerRole {
   Chromecast = "Chromecast",
   Unspecified = "Unspecified",
 }
+
+/**
+ * The playback engine backing a web player. Published on
+ * `window.applicaster.playerType` when a player is created, so that plugins
+ * observing the player can tell which engine they are looking at instead of
+ * inferring it from the API the instance happens to expose.
+ *
+ * Keep in sync with `ApplicasterGlobals["playerType"]` in applicaster-types.
+ */
+export enum WebPlayerEngine {
+  Videojs = "videojs",
+  Hlsjs = "hlsjs",
+  Dashjs = "dashjs",
+}
+
+export enum PLAYER_EVENTS {
+  PlayNextTriggered = "play_next_triggered",
+}
+
+export type PlayNextTriggeredEvent = { id: string };

package/appUtils/playerManager/index.ts

@@ -9,7 +9,7 @@ import {
   unsubscribeToDeviceNetworkChanges,
 } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
 import { setUserLanguagePreference } from "./userLanguagePreference";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 import { RNPlayerManager } from "./nativePlayerManager";
 
 const { log_error, log_debug, log_warning } = createLogger({

package/appUtils/playerManager/player.ts

@@ -3,7 +3,7 @@ import { BehaviorSubject } from "rxjs";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
 import { getBoolFromConfigValue } from "../../configurationUtils";
-import { PlayerRole, SharedPlayerCallBacksKeys } from "./conts";
+import { PlayerRole, SharedPlayerCallBacksKeys } from "./const";
 import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
 import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
 

package/appUtils/playerManager/playerFactory.ts

@@ -1,7 +1,7 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { Player } from "./player";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 
 type PlayerFactoryItem = {
   Component: any;

package/appUtils/playerManager/playerNative.ts

@@ -3,7 +3,7 @@ import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
 import { Player } from "./player";
 import { findNodeHandle } from "react-native";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 import { toBooleanWithDefaultFalse } from "../../booleanUtils";
 import { RNPlayerManager } from "./nativePlayerManager";
 

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -3,7 +3,7 @@ import { useConfiguration } from "../../reactHooks/useConfiguration";
 import { useEffect } from "react";
 import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
 import { KeyInputHandler } from "../keyInputHandler/KeyInputHandler";

package/appUtils/playerManager/userLanguagePreference.ts

@@ -1,7 +1,7 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 import { createLogger, utilsLogger } from "../../logger";
-import { userPreferencesNamespace } from "./conts";
+import { userPreferencesNamespace } from "./const";
 
 export const preferredAudioLanguageStorageKey = "preferred_audio_language";
 

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -3464,13 +3464,13 @@ function getPlayerConfiguration({ platform, version }) {
             label: "Advanced Player Styles",
             type: "text_input",
             multiline: true,
-            initial_value: `.vjs-text-track-cue { 
-            inset: unset !important;
-            top: 94% !important;
+            initial_value: `.vjs-text-track-cue {
+            top: auto !important;
             bottom: 0 !important;
             left: 0 !important;
-            right: 0 !important;
+            right: auto !important;
             width: 100% !important;
+            height: auto !important;
           }`,
             label_tooltip:
               "This field allows you to inject custom CSS styles to override default player styles. The styles will be injected into the document head and can be used to customize the appearance of the player. Leave empty to use only default styles.",

package/modalState/ContentViewModel.ts

@@ -0,0 +1,111 @@
+import { BehaviorSubject, Observable } from "rxjs";
+import {
+  Content,
+  MenuItem,
+  SelectionBehavior,
+  DynamicCollectionOptions,
+} from "./types";
+import { loadItemsFromSource } from "../actionsExecutor/actions/openBottomSheet";
+import { resolveEditableCollection } from "./EditableCollectionRegistry";
+import { EditableCollection } from "./EditableCollection";
+
+export interface ContentState {
+  items: MenuItem[];
+  isLoading: boolean;
+  error?: Error | string;
+  role?: string;
+  behavior?: SelectionBehavior;
+  dynamicCollection?: DynamicCollectionOptions;
+}
+
+export class ContentViewModel {
+  private state$: BehaviorSubject<ContentState>;
+  readonly itemsUrl?: string;
+  public editableCollection: EditableCollection | null = null;
+  private content: Content;
+
+  constructor(content: Content) {
+    this.content = content;
+    this.itemsUrl = content.itemsUrl;
+
+    this.state$ = new BehaviorSubject<ContentState>({
+      items: content.items || [],
+      isLoading: false,
+      role: content.role,
+      behavior: content.behavior,
+      dynamicCollection: content.dynamicCollection,
+    });
+
+    this.initEditableCollection(content);
+
+    if (this.itemsUrl && this.state$.value.items.length === 0) {
+      this.refetch();
+    }
+  }
+
+  private initEditableCollection(content: Content) {
+    this.editableCollection = resolveEditableCollection(content, this.refetch);
+  }
+
+  getState = (): ContentState => this.state$.value;
+
+  get stateObservable(): Observable<ContentState> {
+    return this.state$.asObservable();
+  }
+
+  subscribe = (listener: (state: ContentState) => void) => {
+    const subscription = this.state$.subscribe(listener);
+
+    return () => subscription.unsubscribe();
+  };
+
+  private updateState(partialState: Partial<ContentState>) {
+    this.state$.next({ ...this.state$.value, ...partialState });
+  }
+
+  refetch = async () => {
+    if (!this.itemsUrl) return;
+
+    this.updateState({ isLoading: true, error: undefined });
+
+    try {
+      const separator = this.itemsUrl.includes("?") ? "&" : "?";
+      const cacheBustedUrl = `${this.itemsUrl}${separator}_t=${Date.now()}`;
+
+      const { items, role, behavior, dynamicCollection } =
+        await loadItemsFromSource(cacheBustedUrl);
+
+      this.content = {
+        ...this.content,
+        items,
+        role,
+        behavior,
+        dynamicCollection,
+      };
+
+      this.updateState({
+        items,
+        role,
+        behavior,
+        dynamicCollection,
+        isLoading: false,
+      });
+
+      if (this.editableCollection) {
+        // Reuse the existing collection instance. Pushing the freshly loaded
+        // server items replaces any optimistic local state with the
+        // authoritative result (and rolls forward a successful mutation).
+        this.editableCollection.sync?.(items);
+      } else {
+        // The collection may only become resolvable once options arrive from
+        // the feed (e.g. inline content had none). Create it lazily here.
+        this.initEditableCollection(this.content);
+      }
+    } catch (err) {
+      this.updateState({
+        error: err?.message || "Failed to load",
+        isLoading: false,
+      });
+    }
+  };
+}

package/modalState/EditableCollection.ts

@@ -0,0 +1,17 @@
+import { Observable } from "rxjs";
+import { MenuItem, Operation } from "./types";
+
+export interface EditableCollection {
+  items$: Observable<MenuItem[]>;
+  operations: Operation[];
+  add?(item?: MenuItem): void | Promise<void>;
+  remove?(index: number): void | Promise<void>;
+  move?(itemIds: string[]): void | Promise<void>;
+  deleteCollection?(): void | Promise<void>;
+  /**
+   * Push authoritative items (e.g. a fresh server feed after a mutation) into
+   * the collection, replacing any optimistic local state. Called by the
+   * ContentViewModel on refetch so the instance is reused instead of recreated.
+   */
+  sync?(items: MenuItem[]): void;
+}

package/modalState/EditableCollectionRegistry.ts

@@ -0,0 +1,51 @@
+import { Content } from "./types";
+import { EditableCollection } from "./EditableCollection";
+import { RemoteEditableCollection } from "./RemoteEditableCollection";
+import { createLogger } from "../logger";
+
+const { log_error } = createLogger({
+  subsystem: "modalState",
+  category: "EditableCollectionRegistry",
+});
+
+type ProviderFactory = () => EditableCollection;
+
+export class EditableCollectionRegistry {
+  private static providers: Record<string, ProviderFactory> = {};
+
+  static register(token: string, factory: ProviderFactory) {
+    this.providers[token] = factory;
+  }
+
+  static getProvider(token: string): EditableCollection | null {
+    const factory = this.providers[token];
+
+    return factory ? factory() : null;
+  }
+}
+
+export function resolveEditableCollection(
+  content: Content,
+  refetch: () => Promise<void>
+): EditableCollection | null {
+  const options = content.dynamicCollection;
+  if (!options) return null;
+
+  if (options.provider) {
+    const provider = EditableCollectionRegistry.getProvider(options.provider);
+
+    if (!provider) {
+      log_error(
+        `No EditableCollection provider registered for token "${options.provider}"`
+      );
+    }
+
+    return provider;
+  }
+
+  if (options.postUrl) {
+    return new RemoteEditableCollection(content, refetch);
+  }
+
+  return null;
+}