react-native-spalla-player 0.13.2 → 1.0.0

package/package.json

@@ -1,21 +1,16 @@
 {
   "name": "react-native-spalla-player",
-  "version": "0.13.2",
-  "description": "Spalla SDK for RN",
-  "source": "./src/index.tsx",
-  "main": "./lib/commonjs/index.js",
-  "module": "./lib/module/index.js",
+  "version": "1.0.0",
+  "description": "Spalla Player for React Native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./lib/typescript/module/src/index.d.ts",
-        "default": "./lib/module/index.js"
-      },
-      "require": {
-        "types": "./lib/typescript/commonjs/src/index.d.ts",
-        "default": "./lib/commonjs/index.js"
-      }
-    }
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "src",
@@ -24,6 +19,7 @@
     "ios",
     "cpp",
     "*.podspec",
+    "react-native.config.js",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -37,12 +33,12 @@
   ],
   "scripts": {
     "example": "yarn workspace react-native-spalla-player-example",
-    "test": "jest",
-    "typecheck": "tsc",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
-    "release": "release-it"
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
   },
   "keywords": [
     "react-native",
@@ -51,40 +47,41 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/taghos/framework-sdk-spalla-react-native.git"
+    "url": "git+https://github.com/rojas/react-native-spalla-player.git"
   },
   "author": "Rogerio Shimizu <roja@bunker79.com> (https://github.com/rojas)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/taghos/framework-sdk-spalla-react-native/issues"
+    "url": "https://github.com/rojas/react-native-spalla-player/issues"
   },
-  "homepage": "https://github.com/taghos/framework-sdk-spalla-react-native#readme",
+  "homepage": "https://github.com/rojas/react-native-spalla-player#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.0.2",
-    "@evilmartians/lefthook": "^1.5.0",
-    "@react-native/eslint-config": "^0.73.1",
-    "@release-it/conventional-changelog": "^5.0.0",
-    "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.44",
-    "commitlint": "^17.0.2",
-    "del-cli": "^5.1.0",
-    "eslint": "^8.51.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "jest": "^29.7.0",
-    "prettier": "^3.0.3",
-    "react": "18.3.1",
-    "react-native": "0.75.4",
-    "react-native-builder-bob": "^0.30.2",
-    "release-it": "^15.0.0",
-    "turbo": "^1.10.7",
-    "typescript": "^5.2.2"
-  },
-  "resolutions": {
-    "@types/react": "^18.2.44"
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "0.38.0",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
     "react": "*",
@@ -93,7 +90,48 @@
   "workspaces": [
     "example"
   ],
-  "packageManager": "yarn@3.6.1",
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "SpallaPlayerViewSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.spallaplayer"
+    },
+    "ios": {
+      "componentProvider": {
+        "SpallaPlayerView": "SpallaPlayerView"
+      },
+      "modulesProvider": {
+        "SpallaPlayerModule": "SpallaPlayerModule"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -119,69 +157,21 @@
     },
     "plugins": {
       "@release-it/conventional-changelog": {
-        "preset": "angular"
-      }
-    }
-  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native",
-      "prettier"
-    ],
-    "rules": {
-      "react/react-in-jsx-scope": "off",
-      "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
+        "preset": {
+          "name": "angular"
         }
-      ]
+      }
     }
   },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
-  "prettier": {
-    "quoteProps": "consistent",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
-  },
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "commonjs",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json",
-          "esm": true
-        }
-      ]
-    ]
-  },
   "create-react-native-library": {
-    "type": "view-legacy",
-    "languages": "kotlin-swift",
-    "version": "0.41.2"
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.56.0"
   }
 }

package/src/NativeSpallaPlayerModule.ts

@@ -0,0 +1,14 @@
+import type { TurboModule, CodegenTypes } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  play(tag: CodegenTypes.Int32): void;
+  pause(tag: CodegenTypes.Int32): void;
+  seekTo(tag: CodegenTypes.Int32, time: number): void;
+  selectSubtitle(tag: CodegenTypes.Int32, subtitle: string | null): void;
+  selectPlaybackRate(tag: CodegenTypes.Int32, rate: number): void;
+  unmount(tag: CodegenTypes.Int32): void;
+  initialize(token: string, applicationId: string): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('SpallaPlayerModule');

package/src/SpallaPlayerViewNativeComponent.ts

@@ -0,0 +1,61 @@
+import {
+  codegenNativeComponent,
+  type ViewProps,
+  type CodegenTypes,
+  type HostComponent,
+  codegenNativeCommands,
+} from 'react-native';
+
+// Define a single comprehensive event payload interface
+interface PlayerEventPayload {
+  event: string;
+  time?: CodegenTypes.Double;
+  duration?: CodegenTypes.Double;
+  isLive?: boolean;
+  subtitles?: string[];
+  subtitle?: string;
+  rate?: CodegenTypes.Float;
+  message?: string;
+  error?: string;
+}
+
+export interface NativeProps extends ViewProps {
+  contentId?: string;
+  muted?: boolean;
+  startTime?: CodegenTypes.Double;
+  subtitle?: string | null;
+  playbackRate?: CodegenTypes.Float;
+  hideUI?: boolean;
+  onPlayerEvent?: CodegenTypes.BubblingEventHandler<PlayerEventPayload>;
+}
+
+export interface NativeCommands {
+  play: (viewRef: React.ElementRef<HostComponent<any>>) => void;
+  pause: (viewRef: React.ElementRef<HostComponent<any>>) => void;
+  seekTo: (
+    viewRef: React.ElementRef<HostComponent<any>>,
+    time: CodegenTypes.Double
+  ) => void;
+  selectSubtitle: (
+    viewRef: React.ElementRef<HostComponent<any>>,
+    subtitle: string | null
+  ) => void;
+  selectPlaybackRate: (
+    viewRef: React.ElementRef<HostComponent<any>>,
+    rate: CodegenTypes.Float
+  ) => void;
+  unmount: (viewRef: React.ElementRef<HostComponent<any>>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'play',
+    'pause',
+    'seekTo',
+    'selectSubtitle',
+    'selectPlaybackRate',
+    'unmount',
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>('SpallaPlayerView');

package/src/index.tsx

@@ -1,28 +1,22 @@
 import React from 'react';
-import {
-  requireNativeComponent,
-  type ViewStyle,
-  NativeModules,
-  findNodeHandle,
-} from 'react-native';
+import { type ViewStyle } from 'react-native';
+import { Commands } from './SpallaPlayerViewNativeComponent';
 
-type allowedPlaybackRates = 0.25 | 0.5 | 1.0 | 1.25 | 1.5 | 2.0;
+// Import the appropriate component based on architecture
+const isFabricEnabled = (global as any)?.nativeFabricUIManager != null;
 
-interface RNSpallaPlayerProps {
-  children?: React.ReactNode;
-  style?: ViewStyle;
-  startTime: number;
-  subtitle?: String | null;
-  playbackRate?: allowedPlaybackRates;
-  hideUI?: boolean;
-  ref?: (ref: any) => void;
-}
+const RNSpallaPlayer = isFabricEnabled
+  ? require('./SpallaPlayerViewNativeComponent').default
+  : require('react-native').requireNativeComponent('RNSpallaPlayer');
 
-const RNSpallaPlayer =
-  requireNativeComponent<RNSpallaPlayerProps>('RNSpallaPlayer');
+// Import the appropriate module
+const RNSpallaPlayerModule = isFabricEnabled
+  ? require('./NativeSpallaPlayerModule').default
+  : require('react-native').NativeModules.RNSpallaPlayer;
 
-const RNSpallaPlayerModule = NativeModules.RNSpallaPlayer;
+type allowedPlaybackRates = 0.25 | 0.5 | 1.0 | 1.25 | 1.5 | 2.0;
 
+// Event interfaces (keep these as they are)
 interface PlayerEventTimeUpdate {
   event: 'timeUpdate';
   time: number;
@@ -76,11 +70,11 @@ interface Props {
   autoplay?: boolean;
   startTime?: number;
   subtitle?: String | null;
-  playbackRate?: 0.25 | 0.5 | 1.0 | 1.25 | 1.5 | 2.0;
+  playbackRate?: allowedPlaybackRates;
   onPlayerEvent?: (event: {
     nativeEvent:
-      | PlayerEventTimeUpdate
       | PlayerEvent
+      | PlayerEventTimeUpdate
       | PlayerEventDurationUpdate
       | PlayerEventSubtitlesAvailable
       | PlayerEventSubtitleSelected
@@ -89,71 +83,66 @@ interface Props {
   }) => void;
 }
 
-export const play = (ref: any) => {
-  const handle = findNodeHandle(ref);
-  RNSpallaPlayerModule.play(handle);
-};
-
-export const pause = (ref: any) => {
-  const handle = findNodeHandle(ref);
-  RNSpallaPlayerModule.pause(handle);
-};
-
-export const seekTo = (ref: any, time: number) => {
-  const handle = findNodeHandle(ref);
-  RNSpallaPlayerModule.seekTo(handle, time);
+export const initialize = (token: string, applicationId: string | null) => {
+  RNSpallaPlayerModule.initialize(token, applicationId);
 };
 
-//export default SpallaPlayer;
-
-class SpallaPlayer extends React.Component<Props> {
-  _player = null;
-
-  _setRef = (ref: any) => {
-    this._player = ref;
-  };
-
-  render() {
-    const { style, startTime, playbackRate, hideUI } = this.props;
-
-    return (
-      <RNSpallaPlayer
-        {...this.props}
-        ref={this._setRef}
-        style={style}
-        startTime={startTime ?? 0}
-        playbackRate={playbackRate ?? 1.0}
-        hideUI={hideUI ?? false}
-      >
-        {this.props.children}
-      </RNSpallaPlayer>
-    );
-  }
-
-  play = () => {
-    const handle = findNodeHandle(this._player);
-    RNSpallaPlayerModule.play(handle);
-  };
-
-  pause = () => {
-    const handle = findNodeHandle(this._player);
-    RNSpallaPlayerModule.pause(handle);
-  };
-
-  seekTo = (time: number) => {
-    const handle = findNodeHandle(this._player);
-    RNSpallaPlayerModule.seekTo(handle, time);
-  };
-
-  componentWillUnmount() {
-    const handle = findNodeHandle(this._player);
-    RNSpallaPlayerModule.unmount(handle);
-  }
+export interface SpallaPlayerRef {
+  play(): void;
+  pause(): void;
+  seekTo(time: number): void;
 }
 
-export const initialize = (token: String, applicationId: String | null) => {
-  RNSpallaPlayerModule.initialize(token, applicationId);
-};
+const SpallaPlayer = React.forwardRef<SpallaPlayerRef, Props>((props, ref) => {
+  const playerRef = React.useRef(null);
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      play: () => {
+        if (playerRef.current) {
+          Commands.play(playerRef.current);
+        }
+      },
+      pause: () => {
+        console.log('Calling pause command');
+        if (playerRef.current) {
+          Commands.pause(playerRef.current);
+        }
+      },
+      seekTo: (time: number) => {
+        if (playerRef.current) {
+          Commands.seekTo(playerRef.current, time);
+        }
+      },
+    }),
+    []
+  );
+
+  React.useEffect(() => {
+    const currentRef = playerRef.current;
+    return () => {
+      if (currentRef) {
+        Commands.unmount(currentRef);
+      }
+    };
+  }, []);
+
+  return (
+    <RNSpallaPlayer
+      {...props}
+      ref={playerRef}
+      style={props.style}
+      startTime={props.startTime ?? 0}
+      playbackRate={props.playbackRate ?? 1.0}
+      hideUI={props.hideUI ?? false}
+    >
+      {props.children}
+    </RNSpallaPlayer>
+  );
+});
+
+SpallaPlayer.displayName = 'SpallaPlayer';
 
 export default SpallaPlayer;
 export { default as SpallaCastButton } from './components/CastButton';

package/android/src/main/AndroidManifestNew.xml

@@ -1,2 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-</manifest>

package/android/src/main/java/com/spallaplayer/SpallaPlayerContainerView.kt

@@ -1,36 +0,0 @@
-package com.spallaplayer
-
-import android.content.Context
-import android.widget.FrameLayout
-import com.spalla.sdk.android.core.player.view.SpallaPlayerView
-import android.view.ViewGroup;
-
-class SpallaPlayerContainerView(context: Context) : ViewGroup(context) {
-  val spallaPlayerView: SpallaPlayerView = SpallaPlayerView(context)
-
-  init {
-    addView(spallaPlayerView) // Add SpallaPlayerView as a child of this container
-    // You might need to set layout params for spallaPlayerView here
-  }
-
-  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
-    for (i in 0 until childCount) {
-        val child = getChildAt(i)
-        child.layout(0, 0, width, height)
-    }
-}
-
-override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
-    val width = MeasureSpec.getSize(widthMeasureSpec)
-    val height = MeasureSpec.getSize(heightMeasureSpec)
-    for (i in 0 until childCount) {
-        val child = getChildAt(i)
-        child.measure(
-            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
-            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
-        )
-    }
-    setMeasuredDimension(width, height)
-}
-
-}

package/ios/RNSpallaPlayer.m

@@ -1,102 +0,0 @@
-#import <React/RCTViewManager.h>
-#import <React/RCTUIManager.h>
-#import <react_native_spalla_player-Swift.h>
-@import SpallaSDK;
-
-@interface RCT_EXTERN_MODULE(RNSpallaPlayer, RCTViewManager)
-
-RCT_EXPORT_VIEW_PROPERTY(contentId, NSString)
-
-RCT_EXPORT_VIEW_PROPERTY(muted, BOOL)
-
-RCT_EXPORT_VIEW_PROPERTY(hideUI, BOOL)
-
-RCT_EXPORT_VIEW_PROPERTY(startTime, NSNumber)
-
-RCT_EXPORT_VIEW_PROPERTY(subtitle, NSString)
-
-RCT_EXPORT_VIEW_PROPERTY(playbackRate, NSNumber)
-
-RCT_EXPORT_METHOD(play: (nonnull NSNumber *) reactTag {
-  
-  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
-          UIView *view = viewRegistry[reactTag];
-          if (!view || ![view isKindOfClass:[SpallaPlayerWrapper class]]) {
-              RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
-              return;
-          } else {
-            [(SpallaPlayerWrapper *)view play];
-          }
-    
-  }];
-})
-
-RCT_EXPORT_METHOD(pause: (nonnull NSNumber *) reactTag {
-  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
-          UIView *view = viewRegistry[reactTag];
-          if (!view || ![view isKindOfClass:[SpallaPlayerWrapper class]]) {
-              RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
-              return;
-          } else {
-            [(SpallaPlayerWrapper *)view pause];
-          }
-  }];
-})
-
-RCT_EXPORT_METHOD(seekTo: (nonnull NSNumber *) reactTag time:(float)time) {
-  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
-          UIView *view = viewRegistry[reactTag];
-          if (!view || ![view isKindOfClass:[SpallaPlayerWrapper class]]) {
-              RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
-              return;
-          } else {
-            [(SpallaPlayerWrapper *)view seekToTime: time];
-          }
-  }];
-}
-
-RCT_EXPORT_METHOD(selectSubtitle: (nonnull NSNumber *) reactTag subtitle:(NSString *)subtitle) {
-  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
-          UIView *view = viewRegistry[reactTag];
-          if (!view || ![view isKindOfClass:[SpallaPlayerWrapper class]]) {
-              RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
-              return;
-          } else {
-            [(SpallaPlayerWrapper *)view selectSubtitle: subtitle];
-          }
-  }];
-}
-
-RCT_EXPORT_METHOD(selectPlaybackRate: (nonnull NSNumber *) reactTag rate:(NSNumber *)rate) {
-  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
-          UIView *view = viewRegistry[reactTag];
-          if (!view || ![view isKindOfClass:[SpallaPlayerWrapper class]]) {
-              RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
-              return;
-          } else {
-            [(SpallaPlayerWrapper *)view selectPlaybackRate: rate.doubleValue];
-          }
-  }];
-}
-
-RCT_EXPORT_METHOD(initialize: (nonnull NSString *) token: (NSString *) applicationId) {
-  dispatch_async(dispatch_get_main_queue(), ^{
-    [SpallaPlayerWrapper initializeWithToken: token applicationId: applicationId];
-  });
-}
-
-RCT_EXPORT_METHOD(unmount: (nonnull NSNumber *) reactTag {
-  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
-          UIView *view = viewRegistry[reactTag];
-          if (!view || ![view isKindOfClass:[SpallaPlayerWrapper class]]) {
-              RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
-              return;
-          } else {
-            [(SpallaPlayerWrapper *)view unmount];
-          }
-  }];
-})
-
-RCT_EXPORT_VIEW_PROPERTY(onPlayerEvent, RCTBubblingEventBlock)
-
-@end

package/ios/RNSpallaPlayer.swift

@@ -1,11 +0,0 @@
-@objc(RNSpallaPlayer)
-class RNSpallaPlayer: RCTViewManager {
-
-  override func view() -> (SpallaPlayerWrapper) {
-    return SpallaPlayerWrapper()
-  }
-
-  @objc override static func requiresMainQueueSetup() -> Bool {
-    return true
-  }
-}

package/ios/SpallaPlayer-Bridging-Header.h

@@ -1 +0,0 @@
-#import <React/RCTViewManager.h>