@namiml/expo-sdk 3.4.0-dev.202605060437

package/src/components/elements/NamiVideo.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { applyStyles, parseSizeOrPercent } from '../../utils/styles';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { buildSmartTextReplacements, interpolateSmartText } from '../../utils/smartText';
+import { initializeVideoControls, subscribeVideoControls } from '../../utils/videoControls';
+
+// Resolve expo-video at module scope so hooks are called unconditionally
+let ExpoVideoView: React.ComponentType<any> | null = null;
+let useExpoVideoPlayer: ((source: string, setup?: (player: any) => void) => any) | null = null;
+try {
+  const expoVideo = require('expo-video');
+  ExpoVideoView = expoVideo.VideoView;
+  useExpoVideoPlayer = expoVideo.useVideoPlayer;
+} catch {
+  // expo-video is optional
+}
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  parentDirection?: string;
+}
+
+/**
+ * Inner component that uses expo-video hooks.
+ * Only rendered when expo-video is available, so the hook call is safe.
+ */
+const ExpoVideoPlayer: React.FC<{
+  url: string;
+  width: any;
+  height: any;
+  containerStyle: any;
+  component: any;
+  playing: boolean;
+  muted: boolean;
+}> = ({ url, width, height, containerStyle, component, playing, muted }) => {
+  const VideoView = ExpoVideoView as React.ComponentType<any>;
+  const player = useExpoVideoPlayer!(url, (p) => {
+    p.loop = component.loopVideo ?? component.loop ?? false;
+    p.muted = muted;
+    if (playing) {
+      p.play();
+    }
+  });
+
+  useEffect(() => {
+    if (!player) return;
+    if (playing) {
+      player.play();
+    } else {
+      player.pause();
+    }
+  }, [player, playing]);
+
+  useEffect(() => {
+    if (!player) return;
+    player.muted = muted;
+  }, [player, muted]);
+
+  const contentFit = component.imageCropping === 'fit' ? 'contain' : 'cover';
+
+  return (
+    <View style={containerStyle}>
+      <VideoView
+        player={player}
+        style={{ width, height }}
+        contentFit={contentFit}
+        nativeControls={component.controlsType !== 'none'}
+      />
+    </View>
+  );
+};
+
+export const NamiVideo: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const [playing, setPlaying] = useState(!!component.autoplayVideo);
+  const [muted, setMuted] = useState(!!(component.mute ?? component.muted));
+  const smartTextSku = component?.smartTextSku ?? component?.sku;
+
+  const url = useMemo(() => {
+    const raw = component.url ?? component.videoUrl ?? (ctx.state as any).appSuppliedVideoUrl ?? '';
+    const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, smartTextSku);
+    const resolved = interpolateSmartText(raw, replacements);
+    return resolved == null ? '' : String(resolved);
+  }, [component, ctx.state, ctx.flow, smartTextSku]);
+
+  useEffect(() => {
+    const playingFromConfig = component.paused != null
+      ? !component.paused
+      : !!component.autoplayVideo;
+    initializeVideoControls({
+      playing: playingFromConfig,
+      muted: !!(component.mute ?? component.muted),
+    });
+  }, [component.paused, component.autoplayVideo, component.mute, component.muted]);
+
+  useEffect(() => subscribeVideoControls((state) => {
+    setPlaying(state.playing);
+    setMuted(state.muted);
+  }), []);
+
+  const containerStyle = applyStyles(component, scaleFactor, false, parentDirection);
+  const rawW = component.width ?? component.fixedWidth;
+  const rawH = component.height ?? component.fixedHeight;
+  const w = parseSizeOrPercent(rawW, scaleFactor) ?? '100%';
+  const h = parseSizeOrPercent(rawH, scaleFactor) ?? 200;
+
+  if (ExpoVideoView && useExpoVideoPlayer && url) {
+    return (
+      <ExpoVideoPlayer
+        url={url}
+        width={w}
+        height={h}
+        containerStyle={containerStyle}
+        component={component}
+        playing={playing}
+        muted={muted}
+      />
+    );
+  }
+
+  return (
+    <View style={[containerStyle, styles.placeholder, { width: w as any, height: h as any }]}>
+      <Text style={styles.placeholderText} allowFontScaling={false}>Video</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  placeholder: { backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' },
+  placeholderText: { color: '#fff', fontSize: 14 },
+});

package/src/components/elements/NamiVolumeButton.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { applyStyles, childSpacingStyle, focusedStyleOverrides } from '../../utils/styles';
+import { TemplateRenderer } from '../TemplateRenderer';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { handleAction } from '../../utils/actionHandler';
+import { getVideoControlState, subscribeVideoControls } from '../../utils/videoControls';
+import type { TComponent } from '@namiml/sdk-core';
+import { FocusedStyleProvider, useFocusableState, useFocusEnabled, useRegisterPreferredFocus } from '../../context/FocusContext';
+import { useTVPreferredFocus } from '../../utils/tvFocus';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+export const NamiVolumeButton: React.FC<Props> = ({
+  component,
+  scaleFactor,
+  onClose,
+  parentDirection,
+}) => {
+  const ctx = usePaywallContext();
+  const focusEnabled = useFocusEnabled();
+  const pressableRef = useRef<any>(null);
+  const { isFocused, onFocus, onBlur } = useFocusableState(
+    Boolean(component.focused),
+    focusEnabled,
+  );
+  useTVPreferredFocus(
+    pressableRef,
+    focusEnabled && Boolean(component.focused),
+  );
+  useRegisterPreferredFocus(
+    pressableRef.current,
+    focusEnabled && Boolean(component.focused),
+  );
+  const [muted, setMuted] = useState(getVideoControlState().muted);
+
+  useEffect(() => subscribeVideoControls((next) => setMuted(next.muted)), []);
+
+  const containerStyle = useMemo(() => {
+    const base = applyStyles(component, scaleFactor, false, parentDirection);
+    if (isFocused) {
+      Object.assign(base, focusedStyleOverrides(component, scaleFactor));
+    }
+    return base;
+  }, [component, scaleFactor, parentDirection, isFocused]);
+
+  const onPress = () => {
+    handleAction({
+      onTap: muted ? component.mutedOnTap : component.volumeOnTap,
+      ctx,
+      onClose,
+    });
+  };
+
+  const direction = component.direction ?? 'horizontal';
+  const children = (muted ? component.mutedComponents : component.volumeComponents) ?? [];
+
+  return (
+    <Pressable
+      ref={pressableRef}
+      onPress={onPress}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      hasTVPreferredFocus={focusEnabled && Boolean(component.focused)}
+      style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null]}
+    >
+      <FocusedStyleProvider focused={isFocused}>
+        {children.map((child: TComponent, i: number) => (
+          <View
+            key={child.id ?? i}
+            style={i === 0 ? null : childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor)}
+          >
+            <TemplateRenderer
+              component={child}
+              scaleFactor={scaleFactor}
+              onClose={onClose}
+              parentDirection={direction}
+            />
+          </View>
+        ))}
+      </FocusedStyleProvider>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressed: { opacity: 0.7 },
+});

package/src/context/FocusContext.tsx

@@ -0,0 +1,169 @@
+import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+type FocusScopeValue = {
+  reportDescendantFocusDelta(delta: number): void;
+};
+
+type PreferredFocusValue = {
+  registerPreferredTarget(target: unknown): () => void;
+};
+
+const FocusScopeContext = createContext<FocusScopeValue | null>(null);
+const FocusedStyleContext = createContext(false);
+const FocusContext = createContext(true);
+const PreferredFocusContext = createContext<PreferredFocusValue | null>(null);
+
+export const FocusScope: React.FC<{
+  children: React.ReactNode;
+  onFocusWithinChange?: (focused: boolean) => void;
+}> = ({ children, onFocusWithinChange }) => {
+  const parentScope = useContext(FocusScopeContext);
+  const focusedCountRef = useRef(0);
+
+  const reportDescendantFocusDelta = useCallback((delta: number) => {
+    const previousCount = focusedCountRef.current;
+    const nextCount = Math.max(0, previousCount + delta);
+    focusedCountRef.current = nextCount;
+
+    if ((previousCount === 0) === (nextCount === 0)) {
+      return;
+    }
+
+    const isFocused = nextCount > 0;
+    onFocusWithinChange?.(isFocused);
+    parentScope?.reportDescendantFocusDelta(isFocused ? 1 : -1);
+  }, [onFocusWithinChange, parentScope]);
+
+  useEffect(() => () => {
+    if (focusedCountRef.current > 0) {
+      parentScope?.reportDescendantFocusDelta(-1);
+    }
+  }, [parentScope]);
+
+  const value = useMemo<FocusScopeValue>(
+    () => ({ reportDescendantFocusDelta }),
+    [reportDescendantFocusDelta],
+  );
+
+  return (
+    <FocusScopeContext.Provider value={value}>
+      {children}
+    </FocusScopeContext.Provider>
+  );
+};
+
+export const FocusedStyleProvider: React.FC<{
+  children: React.ReactNode;
+  focused: boolean;
+}> = ({ children, focused }) => {
+  const parentFocused = useContext(FocusedStyleContext);
+  const value = parentFocused || focused;
+
+  return (
+    <FocusedStyleContext.Provider value={value}>
+      {children}
+    </FocusedStyleContext.Provider>
+  );
+};
+
+export const FocusProvider: React.FC<{
+  children: React.ReactNode;
+  enabled: boolean;
+}> = ({ children, enabled }) => (
+  <FocusContext.Provider value={enabled}>
+    {children}
+  </FocusContext.Provider>
+);
+
+export const PreferredFocusProvider: React.FC<{
+  children: React.ReactNode;
+  onPreferredTargetChange?: (target: unknown | null) => void;
+}> = ({ children, onPreferredTargetChange }) => {
+  const registerPreferredTarget = useCallback((target: unknown) => {
+    onPreferredTargetChange?.(target);
+
+    return () => {
+      onPreferredTargetChange?.(null);
+    };
+  }, [onPreferredTargetChange]);
+
+  const value = useMemo<PreferredFocusValue>(
+    () => ({ registerPreferredTarget }),
+    [registerPreferredTarget],
+  );
+
+  return (
+    <PreferredFocusContext.Provider value={value}>
+      {children}
+    </PreferredFocusContext.Provider>
+  );
+};
+
+export function useInheritedFocusedStyle(): boolean {
+  return useContext(FocusedStyleContext);
+}
+
+export function useFocusEnabled(): boolean {
+  return useContext(FocusContext);
+}
+
+export function useRegisterPreferredFocus(target: unknown, enabled: boolean): void {
+  const context = useContext(PreferredFocusContext);
+
+  useEffect(() => {
+    if (!enabled || target == null) {
+      return;
+    }
+
+    return context?.registerPreferredTarget(target);
+  }, [context, enabled, target]);
+}
+
+export function useFocusableState(initialFocused = false, enabled = true) {
+  const scope = useContext(FocusScopeContext);
+  const [isFocused, setIsFocused] = useState(initialFocused);
+  const isFocusedRef = useRef(initialFocused);
+  const reportedToScopeRef = useRef(false);
+
+  const setFocused = useCallback((focused: boolean) => {
+    if (isFocusedRef.current === focused) {
+      return;
+    }
+
+    isFocusedRef.current = focused;
+    setIsFocused(focused);
+    if (focused && !reportedToScopeRef.current) {
+      scope?.reportDescendantFocusDelta(1);
+      reportedToScopeRef.current = true;
+    } else if (!focused && reportedToScopeRef.current) {
+      scope?.reportDescendantFocusDelta(-1);
+      reportedToScopeRef.current = false;
+    }
+  }, [scope]);
+
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setFocused(false);
+      return;
+    }
+
+    if (initialFocused && !reportedToScopeRef.current) {
+      scope?.reportDescendantFocusDelta(1);
+      reportedToScopeRef.current = true;
+    }
+
+    return () => {
+      if (reportedToScopeRef.current) {
+        reportedToScopeRef.current = false;
+        scope?.reportDescendantFocusDelta(-1);
+      }
+    };
+  }, [enabled, initialFocused, scope, setFocused]);
+
+  return {
+    isFocused,
+    onFocus: useCallback(() => setFocused(true), [setFocused]),
+    onBlur: useCallback(() => setFocused(false), [setFocused]),
+    setFocused,
+  };
+}