feat: KSPlayer as an option for iOS + other improvements (#1266)

modules/sf-player/src/SfPlayer.types.ts

@@ -0,0 +1,111 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export type OnLoadEventPayload = {
+  url: string;
+};
+
+export type OnPlaybackStateChangePayload = {
+  isPaused?: boolean;
+  isPlaying?: boolean;
+  isLoading?: boolean;
+  isReadyToSeek?: boolean;
+};
+
+export type OnProgressEventPayload = {
+  position: number;
+  duration: number;
+  progress: number;
+};
+
+export type OnErrorEventPayload = {
+  error: string;
+};
+
+export type OnTracksReadyEventPayload = Record<string, never>;
+
+export type OnPictureInPictureChangePayload = {
+  isActive: boolean;
+};
+
+export type VideoSource = {
+  url: string;
+  headers?: Record<string, string>;
+  externalSubtitles?: string[];
+  startPosition?: number;
+  autoplay?: boolean;
+  /** Subtitle track ID to select on start (1-based, -1 to disable) */
+  initialSubtitleId?: number;
+  /** Audio track ID to select on start (1-based) */
+  initialAudioId?: number;
+};
+
+export type SfPlayerViewProps = {
+  source?: VideoSource;
+  style?: StyleProp<ViewStyle>;
+  onLoad?: (event: { nativeEvent: OnLoadEventPayload }) => void;
+  onPlaybackStateChange?: (event: {
+    nativeEvent: OnPlaybackStateChangePayload;
+  }) => void;
+  onProgress?: (event: { nativeEvent: OnProgressEventPayload }) => void;
+  onError?: (event: { nativeEvent: OnErrorEventPayload }) => void;
+  onTracksReady?: (event: { nativeEvent: OnTracksReadyEventPayload }) => void;
+  onPictureInPictureChange?: (event: {
+    nativeEvent: OnPictureInPictureChangePayload;
+  }) => void;
+};
+
+export interface SfPlayerViewRef {
+  play: () => Promise<void>;
+  pause: () => Promise<void>;
+  seekTo: (position: number) => Promise<void>;
+  seekBy: (offset: number) => Promise<void>;
+  setSpeed: (speed: number) => Promise<void>;
+  getSpeed: () => Promise<number>;
+  isPaused: () => Promise<boolean>;
+  getCurrentPosition: () => Promise<number>;
+  getDuration: () => Promise<number>;
+  startPictureInPicture: () => Promise<void>;
+  stopPictureInPicture: () => Promise<void>;
+  isPictureInPictureSupported: () => Promise<boolean>;
+  isPictureInPictureActive: () => Promise<boolean>;
+  setAutoPipEnabled: (enabled: boolean) => Promise<void>;
+  // Subtitle controls
+  getSubtitleTracks: () => Promise<SubtitleTrack[]>;
+  setSubtitleTrack: (trackId: number) => Promise<void>;
+  disableSubtitles: () => Promise<void>;
+  getCurrentSubtitleTrack: () => Promise<number>;
+  addSubtitleFile: (url: string, select?: boolean) => Promise<void>;
+  // Subtitle positioning
+  setSubtitlePosition: (position: number) => Promise<void>;
+  setSubtitleScale: (scale: number) => Promise<void>;
+  setSubtitleMarginY: (margin: number) => Promise<void>;
+  setSubtitleAlignX: (alignment: "left" | "center" | "right") => Promise<void>;
+  setSubtitleAlignY: (alignment: "top" | "center" | "bottom") => Promise<void>;
+  setSubtitleFontSize: (size: number) => Promise<void>;
+  setSubtitleColor: (hexColor: string) => Promise<void>;
+  setSubtitleBackgroundColor: (hexColor: string) => Promise<void>;
+  setSubtitleFontName: (fontName: string) => Promise<void>;
+  // Audio controls
+  getAudioTracks: () => Promise<AudioTrack[]>;
+  setAudioTrack: (trackId: number) => Promise<void>;
+  getCurrentAudioTrack: () => Promise<number>;
+  // Video zoom
+  setVideoZoomToFill: (enabled: boolean) => Promise<void>;
+  getVideoZoomToFill: () => Promise<boolean>;
+}
+
+export type SubtitleTrack = {
+  id: number;
+  title?: string;
+  lang?: string;
+  selected?: boolean;
+};
+
+export type AudioTrack = {
+  id: number;
+  title?: string;
+  lang?: string;
+  codec?: string;
+  channels?: number;
+  selected?: boolean;
+};

modules/sf-player/src/SfPlayerView.tsx

@@ -0,0 +1,120 @@
+import { requireNativeView } from "expo";
+import * as React from "react";
+import { useImperativeHandle, useRef } from "react";
+
+import { SfPlayerViewProps, SfPlayerViewRef } from "./SfPlayer.types";
+
+const NativeView: React.ComponentType<SfPlayerViewProps & { ref?: any }> =
+  requireNativeView("SfPlayer");
+
+export default React.forwardRef<SfPlayerViewRef, SfPlayerViewProps>(
+  function SfPlayerView(props, ref) {
+    const nativeRef = useRef<any>(null);
+
+    useImperativeHandle(ref, () => ({
+      play: async () => {
+        await nativeRef.current?.play();
+      },
+      pause: async () => {
+        await nativeRef.current?.pause();
+      },
+      seekTo: async (position: number) => {
+        await nativeRef.current?.seekTo(position);
+      },
+      seekBy: async (offset: number) => {
+        await nativeRef.current?.seekBy(offset);
+      },
+      setSpeed: async (speed: number) => {
+        await nativeRef.current?.setSpeed(speed);
+      },
+      getSpeed: async () => {
+        return (await nativeRef.current?.getSpeed()) ?? 1.0;
+      },
+      isPaused: async () => {
+        return (await nativeRef.current?.isPaused()) ?? true;
+      },
+      getCurrentPosition: async () => {
+        return (await nativeRef.current?.getCurrentPosition()) ?? 0;
+      },
+      getDuration: async () => {
+        return (await nativeRef.current?.getDuration()) ?? 0;
+      },
+      startPictureInPicture: async () => {
+        await nativeRef.current?.startPictureInPicture();
+      },
+      stopPictureInPicture: async () => {
+        await nativeRef.current?.stopPictureInPicture();
+      },
+      isPictureInPictureSupported: async () => {
+        return (
+          (await nativeRef.current?.isPictureInPictureSupported()) ?? false
+        );
+      },
+      isPictureInPictureActive: async () => {
+        return (await nativeRef.current?.isPictureInPictureActive()) ?? false;
+      },
+      setAutoPipEnabled: async (enabled: boolean) => {
+        await nativeRef.current?.setAutoPipEnabled(enabled);
+      },
+      getSubtitleTracks: async () => {
+        return (await nativeRef.current?.getSubtitleTracks()) ?? [];
+      },
+      setSubtitleTrack: async (trackId: number) => {
+        await nativeRef.current?.setSubtitleTrack(trackId);
+      },
+      disableSubtitles: async () => {
+        await nativeRef.current?.disableSubtitles();
+      },
+      getCurrentSubtitleTrack: async () => {
+        return (await nativeRef.current?.getCurrentSubtitleTrack()) ?? 0;
+      },
+      addSubtitleFile: async (url: string, select = true) => {
+        await nativeRef.current?.addSubtitleFile(url, select);
+      },
+      setSubtitlePosition: async (position: number) => {
+        await nativeRef.current?.setSubtitlePosition(position);
+      },
+      setSubtitleScale: async (scale: number) => {
+        await nativeRef.current?.setSubtitleScale(scale);
+      },
+      setSubtitleMarginY: async (margin: number) => {
+        await nativeRef.current?.setSubtitleMarginY(margin);
+      },
+      setSubtitleAlignX: async (alignment: "left" | "center" | "right") => {
+        await nativeRef.current?.setSubtitleAlignX(alignment);
+      },
+      setSubtitleAlignY: async (alignment: "top" | "center" | "bottom") => {
+        await nativeRef.current?.setSubtitleAlignY(alignment);
+      },
+      setSubtitleFontSize: async (size: number) => {
+        await nativeRef.current?.setSubtitleFontSize(size);
+      },
+      setSubtitleColor: async (hexColor: string) => {
+        await nativeRef.current?.setSubtitleColor(hexColor);
+      },
+      setSubtitleBackgroundColor: async (hexColor: string) => {
+        await nativeRef.current?.setSubtitleBackgroundColor(hexColor);
+      },
+      setSubtitleFontName: async (fontName: string) => {
+        await nativeRef.current?.setSubtitleFontName?.(fontName);
+      },
+      getAudioTracks: async () => {
+        return (await nativeRef.current?.getAudioTracks()) ?? [];
+      },
+      setAudioTrack: async (trackId: number) => {
+        await nativeRef.current?.setAudioTrack(trackId);
+      },
+      getCurrentAudioTrack: async () => {
+        return (await nativeRef.current?.getCurrentAudioTrack()) ?? 0;
+      },
+      setVideoZoomToFill: async (enabled: boolean) => {
+        await nativeRef.current?.setVideoZoomToFill(enabled);
+      },
+      getVideoZoomToFill: async () => {
+        return (await nativeRef.current?.getVideoZoomToFill()) ?? false;
+      },
+    }));
+
+    return <NativeView ref={nativeRef} {...props} />;
+  },
+);

modules/sf-player/src/index.ts

@@ -0,0 +1,15 @@
+import { requireNativeModule } from "expo-modules-core";
+
+export * from "./SfPlayer.types";
+export { default as SfPlayerView } from "./SfPlayerView";
+
+// Module-level functions for global KSPlayer settings
+const SfPlayerModule = requireNativeModule("SfPlayer");
+
+export function setHardwareDecode(enabled: boolean): void {
+  SfPlayerModule.setHardwareDecode(enabled);
+}
+
+export function getHardwareDecode(): boolean {
+  return SfPlayerModule.getHardwareDecode();
+}