@shortkitsdk/react-native 0.1.0

package/src/specs/NativeShortKitModule.ts

@@ -0,0 +1,201 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+import type { Double, Int32, EventEmitter } from 'react-native/Libraries/Types/CodegenTypes';
+
+// --- Event payload types (codegen-compatible inline object types) ---
+
+type PlayerStateEvent = Readonly<{
+  state: string;
+  errorMessage?: string;
+}>;
+
+type CurrentItemEvent = Readonly<{
+  id: string;
+  title: string;
+  description?: string;
+  duration: Double;
+  streamingUrl: string;
+  thumbnailUrl: string;
+  captionTracks: string; // JSON-serialized CaptionTrack[]
+  customMetadata?: string; // JSON-serialized Record<string, JSONValue>
+  author?: string;
+  articleUrl?: string;
+  commentCount?: Int32;
+}>;
+
+type TimeUpdateEvent = Readonly<{
+  current: Double;
+  duration: Double;
+  buffered: Double;
+}>;
+
+type MutedEvent = Readonly<{
+  isMuted: boolean;
+}>;
+
+type PlaybackRateEvent = Readonly<{
+  rate: Double;
+}>;
+
+type CaptionsEnabledEvent = Readonly<{
+  enabled: boolean;
+}>;
+
+type CaptionTrackEvent = Readonly<{
+  language: string;
+  label: string;
+  sourceUrl: string;
+}>;
+
+type CueEvent = Readonly<{
+  text: string;
+  startTime: Double;
+  endTime: Double;
+}>;
+
+type LoopEvent = Readonly<{
+  contentId: string;
+  loopCount: Int32;
+}>;
+
+type FeedTransitionEvent = Readonly<{
+  phase: string;
+  fromItem?: string; // JSON-serialized ContentItem
+  toItem?: string; // JSON-serialized ContentItem
+  direction: string;
+}>;
+
+type FormatChangeEvent = Readonly<{
+  contentId: string;
+  fromBitrate: Double;
+  toBitrate: Double;
+  fromResolution: string;
+  toResolution: string;
+}>;
+
+type PrefetchedAheadCountEvent = Readonly<{
+  count: Int32;
+}>;
+
+type ErrorEvent = Readonly<{
+  code: string;
+  message: string;
+}>;
+
+type ShareTappedEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type SurveyResponseEvent = Readonly<{
+  surveyId: string;
+  optionId: string;
+  optionText: string;
+}>;
+
+type ArticleTappedEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type CommentTappedEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type OverlayShareTappedEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type SaveTappedEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type LikeTappedEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type OverlayConfigureEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type OverlayActivateEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type OverlayResetEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type OverlayFadeOutEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type OverlayRestoreEvent = Readonly<{
+  item: string; // JSON-serialized ContentItem
+}>;
+
+type OverlayTapEvent = Readonly<{}>;
+
+type OverlayDoubleTapEvent = Readonly<{
+  x: Double;
+  y: Double;
+}>;
+
+export interface Spec extends TurboModule {
+  // --- Lifecycle ---
+  initialize(
+    apiKey: string,
+    config: string, // JSON-serialized FeedConfig
+    clientAppName?: string,
+    clientAppVersion?: string,
+    customDimensions?: string, // JSON-serialized Record<string, string>
+  ): void;
+  setUserId(userId: string): void;
+  clearUserId(): void;
+  onPause(): void;
+  onResume(): void;
+  destroy(): void;
+
+  // --- Player controls ---
+  play(): void;
+  pause(): void;
+  seek(seconds: Double): void;
+  seekAndPlay(seconds: Double): void;
+  skipToNext(): void;
+  skipToPrevious(): void;
+  setMuted(muted: boolean): void;
+  setPlaybackRate(rate: Double): void;
+  setCaptionsEnabled(enabled: boolean): void;
+  selectCaptionTrack(language: string): void;
+  sendContentSignal(signal: string): void;
+  setMaxBitrate(bitrate: Double): void;
+
+  // --- Event emitters ---
+  readonly onPlayerStateChanged: EventEmitter<PlayerStateEvent>;
+  readonly onCurrentItemChanged: EventEmitter<CurrentItemEvent>;
+  readonly onTimeUpdate: EventEmitter<TimeUpdateEvent>;
+  readonly onMutedChanged: EventEmitter<MutedEvent>;
+  readonly onPlaybackRateChanged: EventEmitter<PlaybackRateEvent>;
+  readonly onCaptionsEnabledChanged: EventEmitter<CaptionsEnabledEvent>;
+  readonly onActiveCaptionTrackChanged: EventEmitter<CaptionTrackEvent>;
+  readonly onActiveCueChanged: EventEmitter<CueEvent>;
+  readonly onDidLoop: EventEmitter<LoopEvent>;
+  readonly onFeedTransition: EventEmitter<FeedTransitionEvent>;
+  readonly onFormatChange: EventEmitter<FormatChangeEvent>;
+  readonly onPrefetchedAheadCountChanged: EventEmitter<PrefetchedAheadCountEvent>;
+  readonly onError: EventEmitter<ErrorEvent>;
+  readonly onShareTapped: EventEmitter<ShareTappedEvent>;
+  readonly onSurveyResponse: EventEmitter<SurveyResponseEvent>;
+  readonly onArticleTapped: EventEmitter<ArticleTappedEvent>;
+  readonly onCommentTapped: EventEmitter<CommentTappedEvent>;
+  readonly onOverlayShareTapped: EventEmitter<OverlayShareTappedEvent>;
+  readonly onSaveTapped: EventEmitter<SaveTappedEvent>;
+  readonly onLikeTapped: EventEmitter<LikeTappedEvent>;
+  readonly onOverlayConfigure: EventEmitter<OverlayConfigureEvent>;
+  readonly onOverlayActivate: EventEmitter<OverlayActivateEvent>;
+  readonly onOverlayReset: EventEmitter<OverlayResetEvent>;
+  readonly onOverlayFadeOut: EventEmitter<OverlayFadeOutEvent>;
+  readonly onOverlayRestore: EventEmitter<OverlayRestoreEvent>;
+  readonly onOverlayTap: EventEmitter<OverlayTapEvent>;
+  readonly onOverlayDoubleTap: EventEmitter<OverlayDoubleTapEvent>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('ShortKitModule');

package/src/specs/ShortKitFeedViewNativeComponent.ts

@@ -0,0 +1,13 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeProps extends ViewProps {
+  config: string;
+  overlayType?: WithDefault<'none' | 'custom', 'none'>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ShortKitFeedView',
+  {},
+) as HostComponent<NativeProps>;

package/src/types.ts

@@ -0,0 +1,167 @@
+import type { ViewStyle } from 'react-native';
+
+// --- Configuration ---
+
+export interface FeedConfig {
+  feedHeight?: FeedHeight;
+  overlay?: OverlayConfig;
+  carouselMode?: CarouselMode;
+  surveyMode?: SurveyMode;
+  muteOnStart?: boolean;
+}
+
+export type FeedHeight =
+  | { type: 'fullscreen' }
+  | { type: 'percentage'; value: number };
+
+export type OverlayConfig =
+  | 'none'
+  | { type: 'custom'; component: React.ComponentType };
+
+export type CarouselMode =
+  | 'none'
+  | { type: 'template'; name: 'default' };
+
+export type SurveyMode =
+  | 'none'
+  | { type: 'template'; name: 'default' };
+
+// --- Data Models ---
+
+export interface ContentItem {
+  id: string;
+  title: string;
+  description?: string;
+  duration: number;
+  streamingUrl: string;
+  thumbnailUrl: string;
+  captionTracks: CaptionTrack[];
+  customMetadata?: Record<string, JSONValue>;
+  author?: string;
+  articleUrl?: string;
+  commentCount?: number;
+}
+
+export type JSONValue =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: JSONValue };
+
+export interface CaptionTrack {
+  language: string;
+  label: string;
+  sourceUrl: string;
+}
+
+export interface PlayerTime {
+  current: number;
+  duration: number;
+  buffered: number;
+}
+
+export type PlayerState =
+  | 'idle'
+  | 'loading'
+  | 'ready'
+  | 'playing'
+  | 'paused'
+  | 'seeking'
+  | 'buffering'
+  | 'ended'
+  | { error: string };
+
+export interface LoopEvent {
+  contentId: string;
+  loopCount: number;
+}
+
+export interface FeedTransitionEvent {
+  phase: 'began' | 'ended';
+  from: ContentItem | null;
+  to: ContentItem | null;
+  direction: 'forward' | 'backward';
+}
+
+export interface FormatChangeEvent {
+  contentId: string;
+  fromBitrate: number;
+  toBitrate: number;
+  fromResolution: string;
+  toResolution: string;
+}
+
+export type ContentSignal = 'positive' | 'negative';
+
+export interface SurveyOption {
+  id: string;
+  text: string;
+}
+
+export interface ShortKitError {
+  code: string;
+  message: string;
+}
+
+// --- Provider Props ---
+
+export interface ShortKitProviderProps {
+  apiKey: string;
+  config: FeedConfig;
+  userId?: string;
+
+  clientAppName?: string;
+  clientAppVersion?: string;
+  customDimensions?: Record<string, string>;
+  children: React.ReactNode;
+}
+
+// --- Feed Component Props ---
+
+export interface ShortKitFeedProps {
+  style?: ViewStyle;
+  onError?: (error: ShortKitError) => void;
+  onShareTapped?: (item: ContentItem) => void;
+  onSurveyResponse?: (surveyId: string, option: SurveyOption) => void;
+  onLoop?: (event: LoopEvent) => void;
+  onFeedTransition?: (event: FeedTransitionEvent) => void;
+  onFormatChange?: (event: FormatChangeEvent) => void;
+  onArticleTapped?: (item: ContentItem) => void;
+  onCommentTapped?: (item: ContentItem) => void;
+  onOverlayShareTapped?: (item: ContentItem) => void;
+  onSaveTapped?: (item: ContentItem) => void;
+  onLikeTapped?: (item: ContentItem) => void;
+}
+
+// --- Hook Return Types ---
+
+export interface ShortKitPlayerState {
+  playerState: PlayerState;
+  currentItem: ContentItem | null;
+  nextItem: ContentItem | null;
+  time: PlayerTime;
+  isMuted: boolean;
+  playbackRate: number;
+  captionsEnabled: boolean;
+  activeCaptionTrack: CaptionTrack | null;
+  activeCue: { text: string; startTime: number; endTime: number } | null;
+  prefetchedAheadCount: number;
+  isActive: boolean;
+  isTransitioning: boolean;
+  lastOverlayTap: number;
+  lastOverlayDoubleTap: { x: number; y: number; id: number } | null;
+
+  play: () => void;
+  pause: () => void;
+  seek: (seconds: number) => void;
+  seekAndPlay: (seconds: number) => void;
+  skipToNext: () => void;
+  skipToPrevious: () => void;
+  setMuted: (muted: boolean) => void;
+  setPlaybackRate: (rate: number) => void;
+  setCaptionsEnabled: (enabled: boolean) => void;
+  selectCaptionTrack: (language: string) => void;
+  sendContentSignal: (signal: ContentSignal) => void;
+  setMaxBitrate: (bitrate: number) => void;
+}

package/src/useShortKit.ts

@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import { ShortKitContext } from './ShortKitContext';
+
+/**
+ * Hook to access SDK-level operations from the nearest ShortKitProvider.
+ *
+ * Must be used within a `<ShortKitProvider>`.
+ *
+ * @returns SDK operations: `setUserId` and `clearUserId`.
+ */
+export function useShortKit() {
+  const context = useContext(ShortKitContext);
+  if (!context) {
+    throw new Error('useShortKit must be used within a ShortKitProvider');
+  }
+  return {
+    setUserId: context.setUserId,
+    clearUserId: context.clearUserId,
+  };
+}

package/src/useShortKitPlayer.ts

@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+import { ShortKitContext } from './ShortKitContext';
+import type { ShortKitPlayerState } from './types';
+
+/**
+ * Hook to access player state and commands from the nearest ShortKitProvider.
+ *
+ * Must be used within a `<ShortKitProvider>`.
+ *
+ * @returns Player state (playerState, currentItem, time, etc.) and
+ *          command functions (play, pause, seek, etc.).
+ */
+export function useShortKitPlayer(): ShortKitPlayerState {
+  const context = useContext(ShortKitContext);
+  if (!context) {
+    throw new Error('useShortKitPlayer must be used within a ShortKitProvider');
+  }
+
+  // Return only player-related state and commands (exclude SDK operations
+  // and internal fields)
+  const {
+    setUserId: _setUserId,
+    clearUserId: _clearUserId,
+    _overlayConfig: _overlay,
+    ...playerState
+  } = context;
+
+  return playerState;
+}