From be867a3b103a442750e3dde8aab3e46348d53f46 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Fri, 11 Oct 2024 22:10:47 +0200
Subject: [PATCH] working

---
 .vscode/settings.json                         |   3 +
 app/(auth)/(tabs)/(home)/index.tsx            | 495 ++++--------------
 modules/vlc-player/ios/VlcPlayerModule.swift  |  98 +++-
 modules/vlc-player/ios/VlcPlayerView.swift    | 452 ++++++++++++++--
 modules/vlc-player/src/VlcPlayer.types.ts     |  88 +++-
 modules/vlc-player/src/VlcPlayerModule.web.ts |  13 -
 modules/vlc-player/src/VlcPlayerView.tsx      | 125 ++++-
 modules/vlc-player/src/VlcPlayerView.web.tsx  |  11 -
 8 files changed, 773 insertions(+), 512 deletions(-)
 delete mode 100644 modules/vlc-player/src/VlcPlayerModule.web.ts
 delete mode 100644 modules/vlc-player/src/VlcPlayerView.web.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2fe7c24f..22480b68 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,8 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
+  },
+  "[swift]": {
+    "editor.defaultFormatter": "sswg.swift-lang"
   }
 }
diff --git a/app/(auth)/(tabs)/(home)/index.tsx b/app/(auth)/(tabs)/(home)/index.tsx
index 31bff9b1..a4ddce6a 100644
--- a/app/(auth)/(tabs)/(home)/index.tsx
+++ b/app/(auth)/(tabs)/(home)/index.tsx
@@ -1,394 +1,52 @@
-import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
-import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
-import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
-import { Loader } from "@/components/Loader";
-import { MediaListSection } from "@/components/medialists/MediaListSection";
-import { Colors } from "@/constants/Colors";
 import { TAB_HEIGHT } from "@/constants/Values";
-import { hello, VlcPlayerView } from "@/modules/vlc-player";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { Feather, Ionicons } from "@expo/vector-icons";
-import { Api } from "@jellyfin/sdk";
+import { VlcPlayerView } from "@/modules/vlc-player";
 import {
-  BaseItemDto,
-  BaseItemKind,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import {
-  getItemsApi,
-  getSuggestionsApi,
-  getTvShowsApi,
-  getUserLibraryApi,
-  getUserViewsApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import NetInfo from "@react-native-community/netinfo";
-import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigation, useRouter } from "expo-router";
-import { useAtom, useAtomValue } from "jotai";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  ActivityIndicator,
-  Platform,
-  RefreshControl,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  VlcPlayerViewRef,
+} from "@/modules/vlc-player/src/VlcPlayer.types";
+import React, { useEffect, useRef, useState } from "react";
+import { Button, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-type ScrollingCollectionListSection = {
-  type: "ScrollingCollectionList";
-  title?: string;
-  queryKey: (string | undefined | null)[];
-  queryFn: QueryFunction<BaseItemDto[]>;
-  orientation?: "horizontal" | "vertical";
-};
-
-type MediaListSection = {
-  type: "MediaListSection";
-  queryKey: (string | undefined)[];
-  queryFn: QueryFunction<BaseItemDto>;
-};
-
-type Section = ScrollingCollectionListSection | MediaListSection;
-
 export default function index() {
-  const queryClient = useQueryClient();
-  const router = useRouter();
-
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-
-  const [loading, setLoading] = useState(false);
-  const [settings, _] = useSettings();
-
-  const [isConnected, setIsConnected] = useState<boolean | null>(null);
-  const [loadingRetry, setLoadingRetry] = useState(false);
-
-  const { downloadedFiles } = useDownload();
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    const hasDownloads = downloadedFiles && downloadedFiles.length > 0;
-    navigation.setOptions({
-      headerLeft: () => (
-        <TouchableOpacity
-          onPress={() => {
-            router.push("/(auth)/downloads");
-          }}
-          className="p-2"
-        >
-          <Feather
-            name="download"
-            color={hasDownloads ? Colors.primary : "white"}
-            size={22}
-          />
-        </TouchableOpacity>
-      ),
-    });
-  }, [downloadedFiles, navigation, router]);
-
-  const checkConnection = useCallback(async () => {
-    setLoadingRetry(true);
-    const state = await NetInfo.fetch();
-    setIsConnected(state.isConnected);
-    setLoadingRetry(false);
-  }, []);
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      if (state.isConnected == false || state.isInternetReachable === false)
-        setIsConnected(false);
-      else setIsConnected(true);
-    });
-
-    NetInfo.fetch().then((state) => {
-      setIsConnected(state.isConnected);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
-  const {
-    data: userViews,
-    isError: e1,
-    isLoading: l1,
-  } = useQuery({
-    queryKey: ["home", "userViews", user?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id) {
-        return null;
-      }
-
-      const response = await getUserViewsApi(api).getUserViews({
-        userId: user.Id,
-      });
-
-      return response.data.Items || null;
-    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 60 * 1000,
-  });
-
-  const {
-    data: mediaListCollections,
-    isError: e2,
-    isLoading: l2,
-  } = useQuery({
-    queryKey: ["home", "sf_promoted", user?.Id, settings?.usePopularPlugin],
-    queryFn: async () => {
-      if (!api || !user?.Id) return [];
-
-      const response = await getItemsApi(api).getItems({
-        userId: user.Id,
-        tags: ["sf_promoted"],
-        recursive: true,
-        fields: ["Tags"],
-        includeItemTypes: ["BoxSet"],
-      });
-
-      return response.data.Items || [];
-    },
-    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
-    staleTime: 60 * 1000,
-  });
-
-  const collections = useMemo(() => {
-    const allow = ["movies", "tvshows"];
-    return (
-      userViews?.filter(
-        (c) => c.CollectionType && allow.includes(c.CollectionType)
-      ) || []
-    );
-  }, [userViews]);
-
-  const refetch = useCallback(async () => {
-    setLoading(true);
-    await queryClient.invalidateQueries({
-      queryKey: ["home"],
-      refetchType: "all",
-      type: "all",
-      exact: false,
-    });
-    await queryClient.invalidateQueries({
-      queryKey: ["home"],
-      refetchType: "all",
-      type: "all",
-      exact: false,
-    });
-    await queryClient.invalidateQueries({
-      queryKey: ["item"],
-      refetchType: "all",
-      type: "all",
-      exact: false,
-    });
-    setLoading(false);
-  }, [queryClient]);
-
-  const createCollectionConfig = useCallback(
-    (
-      title: string,
-      queryKey: string[],
-      includeItemTypes: BaseItemKind[],
-      parentId: string | undefined
-    ): ScrollingCollectionListSection => ({
-      title,
-      queryKey,
-      queryFn: async () => {
-        if (!api) return [];
-        return (
-          (
-            await getUserLibraryApi(api).getLatestMedia({
-              userId: user?.Id,
-              limit: 50,
-              fields: ["PrimaryImageAspectRatio", "Path"],
-              imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              includeItemTypes,
-              parentId,
-            })
-          ).data || []
-        );
-      },
-      type: "ScrollingCollectionList",
-    }),
-    [api, user?.Id]
-  );
-
-  const sections = useMemo(() => {
-    if (!api || !user?.Id) return [];
-
-    const latestMediaViews = collections.map((c) => {
-      const includeItemTypes: BaseItemKind[] =
-        c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
-      const title = "Recently Added in " + c.Name;
-      const queryKey = [
-        "home",
-        "recentlyAddedIn" + c.CollectionType,
-        user?.Id!,
-        c.Id!,
-      ];
-      return createCollectionConfig(
-        title || "",
-        queryKey,
-        includeItemTypes,
-        c.Id
-      );
-    });
-
-    const ss: Section[] = [
-      {
-        title: "Continue Watching",
-        queryKey: ["home", "resumeItems", user.Id],
-        queryFn: async () =>
-          (
-            await getItemsApi(api).getResumeItems({
-              userId: user.Id,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              includeItemTypes: ["Movie", "Series", "Episode"],
-            })
-          ).data.Items || [],
-        type: "ScrollingCollectionList",
-        orientation: "horizontal",
-      },
-      {
-        title: "Next Up",
-        queryKey: ["home", "nextUp-all", user?.Id],
-        queryFn: async () =>
-          (
-            await getTvShowsApi(api).getNextUp({
-              userId: user?.Id,
-              fields: ["MediaSourceCount"],
-              limit: 20,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              enableResumable: false,
-            })
-          ).data.Items || [],
-        type: "ScrollingCollectionList",
-        orientation: "horizontal",
-      },
-      ...latestMediaViews,
-      ...(mediaListCollections?.map(
-        (ml) =>
-          ({
-            title: ml.Name,
-            queryKey: ["home", "mediaList", ml.Id!],
-            queryFn: async () => ml,
-            type: "MediaListSection",
-            orientation: "vertical",
-          } as Section)
-      ) || []),
-      {
-        title: "Suggested Movies",
-        queryKey: ["home", "suggestedMovies", user?.Id],
-        queryFn: async () =>
-          (
-            await getSuggestionsApi(api).getSuggestions({
-              userId: user?.Id,
-              limit: 10,
-              mediaType: ["Video"],
-              type: ["Movie"],
-            })
-          ).data.Items || [],
-        type: "ScrollingCollectionList",
-        orientation: "vertical",
-      },
-      {
-        title: "Suggested Episodes",
-        queryKey: ["home", "suggestedEpisodes", user?.Id],
-        queryFn: async () => {
-          try {
-            const suggestions = await getSuggestions(api, user.Id);
-            const nextUpPromises = suggestions.map((series) =>
-              getNextUp(api, user.Id, series.Id)
-            );
-            const nextUpResults = await Promise.all(nextUpPromises);
-
-            return nextUpResults.filter((item) => item !== null) || [];
-          } catch (error) {
-            console.error("Error fetching data:", error);
-            return [];
-          }
-        },
-        type: "ScrollingCollectionList",
-        orientation: "horizontal",
-      },
-    ];
-    return ss;
-  }, [api, user?.Id, collections, mediaListCollections]);
-
-  if (isConnected === false) {
-    return (
-      <View className="flex flex-col items-center justify-center h-full -mt-6 px-8">
-        <Text className="text-3xl font-bold mb-2">No Internet</Text>
-        <Text className="text-center opacity-70">
-          No worries, you can still watch{"\n"}downloaded content.
-        </Text>
-        <View className="mt-4">
-          <Button
-            color="purple"
-            onPress={() => router.push("/(auth)/downloads")}
-            justify="center"
-            iconRight={
-              <Ionicons name="arrow-forward" size={20} color="white" />
-            }
-          >
-            Go to downloads
-          </Button>
-          <Button
-            color="black"
-            onPress={() => {
-              checkConnection();
-            }}
-            justify="center"
-            className="mt-2"
-            iconRight={
-              loadingRetry ? null : (
-                <Ionicons name="refresh" size={20} color="white" />
-              )
-            }
-          >
-            {loadingRetry ? (
-              <ActivityIndicator size={"small"} color={"white"} />
-            ) : (
-              "Retry"
-            )}
-          </Button>
-        </View>
-      </View>
-    );
-  }
-
   const insets = useSafeAreaInsets();
+  const videoRef = useRef<VlcPlayerViewRef>(null);
+  const [playbackState, setPlaybackState] = useState<
+    PlaybackStatePayload["nativeEvent"] | null
+  >(null);
+  const [progress, setProgress] = useState<
+    ProgressUpdatePayload["nativeEvent"] | null
+  >(null);
 
-  if (e1 || e2)
-    return (
-      <View className="flex flex-col items-center justify-center h-full -mt-6">
-        <Text className="text-3xl font-bold mb-2">Oops!</Text>
-        <Text className="text-center opacity-70">
-          Something went wrong.{"\n"}Please log out and in again.
-        </Text>
-      </View>
-    );
+  useEffect(() => {
+    videoRef.current?.play();
+  }, []);
 
-  if (l1 || l2)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
+  const onProgress = (event: ProgressUpdatePayload) => {
+    const { currentTime, duration } = event.nativeEvent;
+    console.log(`Current Time: ${currentTime}, Duration: ${duration}`);
+    setProgress(event.nativeEvent);
+  };
+
+  const onPlaybackStateChanged = (event: PlaybackStatePayload) => {
+    const { isBuffering, currentTime, duration, target, type } =
+      event.nativeEvent;
+    console.log("onVideoStateChange", {
+      isBuffering,
+      currentTime,
+      duration,
+      target,
+      type,
+    });
+    setPlaybackState(event.nativeEvent);
+  };
 
   return (
     <ScrollView
       nestedScrollEnabled
       contentInsetAdjustmentBehavior="automatic"
-      refreshControl={
-        <RefreshControl refreshing={loading} onRefresh={refetch} />
-      }
       key={"home"}
       contentContainerStyle={{
         paddingLeft: insets.left,
@@ -400,36 +58,63 @@ export default function index() {
       }}
     >
       <View className="flex flex-col space-y-4">
-        <Text>{hello()}</Text>
-        <VlcPlayerView source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
+        <VlcPlayerView
+          ref={videoRef}
+          source={{
+            uri: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+            autoplay: true,
+            isNetwork: true,
+          }}
+          style={{ width: "100%", height: 300 }}
+          onVideoProgress={onProgress}
+          progressUpdateInterval={2000}
+          onVideoStateChange={onPlaybackStateChanged}
+        />
+        <VideoDebugInfo playbackState={playbackState} progress={progress} />
       </View>
+      <Button
+        title="pause"
+        onPress={() => {
+          videoRef.current?.pause();
+        }}
+      />
+      <Button
+        title="play"
+        onPress={() => {
+          videoRef.current?.play();
+        }}
+      />
+      <Button
+        title="seek to 10 seconds"
+        onPress={() => {
+          videoRef.current?.seekTo(10);
+        }}
+      />
     </ScrollView>
   );
 }
 
-// Function to get suggestions
-async function getSuggestions(api: Api, userId: string | undefined) {
-  if (!userId) return [];
-  const response = await getSuggestionsApi(api).getSuggestions({
-    userId,
-    limit: 10,
-    mediaType: ["Unknown"],
-    type: ["Series"],
-  });
-  return response.data.Items ?? [];
-}
-
-// Function to get the next up TV show for a series
-async function getNextUp(
-  api: Api,
-  userId: string | undefined,
-  seriesId: string | undefined
-) {
-  if (!userId || !seriesId) return null;
-  const response = await getTvShowsApi(api).getNextUp({
-    userId,
-    seriesId,
-    limit: 1,
-  });
-  return response.data.Items?.[0] ?? null;
-}
+const VideoDebugInfo: React.FC<{
+  playbackState: PlaybackStatePayload["nativeEvent"] | null;
+  progress: ProgressUpdatePayload["nativeEvent"] | null;
+}> = ({ playbackState, progress }) => (
+  <View className="p-2.5 bg-black mt-2.5">
+    <Text className="font-bold">Playback State:</Text>
+    {playbackState && (
+      <>
+        <Text>Type: {playbackState.type}</Text>
+        <Text>Current Time: {playbackState.currentTime}</Text>
+        <Text>Duration: {playbackState.duration}</Text>
+        <Text>Is Buffering: {playbackState.isBuffering ? "Yes" : "No"}</Text>
+        <Text>Target: {playbackState.target}</Text>
+      </>
+    )}
+    <Text className="font-bold mt-2.5">Progress:</Text>
+    {progress && (
+      <>
+        <Text>Current Time: {progress.currentTime}</Text>
+        <Text>Duration: {progress.duration.toFixed(2)}</Text>
+      </>
+    )}
+  </View>
+);
diff --git a/modules/vlc-player/ios/VlcPlayerModule.swift b/modules/vlc-player/ios/VlcPlayerModule.swift
index 756aea11..313dbca1 100644
--- a/modules/vlc-player/ios/VlcPlayerModule.swift
+++ b/modules/vlc-player/ios/VlcPlayerModule.swift
@@ -1,22 +1,88 @@
 import ExpoModulesCore
 
 public class VlcPlayerModule: Module {
-  // Each module class must implement the definition function. The definition consists of components
-  // that describes the module's functionality and behavior.
-  // See https://docs.expo.dev/modules/module-api for more details about available components.
-  public func definition() -> ModuleDefinition {
-    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
-    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
-    // The module will be accessible from `requireNativeModule('VlcPlayer')` in JavaScript.
-    Name("VlcPlayer")
-    View(VlcPlayerView.self) {
-      Prop("source") { (view: VlcPlayerView, source: String) in
-        view.setSource(source)
-      }
-    }
+    public func definition() -> ModuleDefinition {
+        Name("VlcPlayer")
+        View(VlcPlayerView.self) {
+            Prop("source") { (view: VlcPlayerView, source: [String: Any]) in
+                view.setSource(source)
+            }
 
-    Function("hello") {
-      return "hello from native ios"
+            Prop("progressUpdateInterval") { (view: VlcPlayerView, interval: Double) in
+                view.setProgressUpdateInterval(interval)
+            }
+
+            Prop("paused") { (view: VlcPlayerView, paused: Bool) in
+                if paused {
+                    view.pause()
+                } else {
+                    view.play()
+                }
+            }
+
+            Prop("muted") { (view: VlcPlayerView, muted: Bool) in
+                view.setMuted(muted)
+            }
+
+            Prop("volume") { (view: VlcPlayerView, volume: Int) in
+                view.setVolume(volume)
+            }
+
+            Prop("videoAspectRatio") { (view: VlcPlayerView, ratio: String) in
+                view.setVideoAspectRatio(ratio)
+            }
+
+            Events(
+                "onProgress",
+                "onPlaybackStateChanged",
+                "onVideoLoadStart",
+                "onVideoStateChange",
+                "onVideoProgress"
+            )
+
+            AsyncFunction("play") { (view: VlcPlayerView) in
+                view.play()
+            }
+
+            AsyncFunction("pause") { (view: VlcPlayerView) in
+                view.pause()
+            }
+
+            AsyncFunction("seekTo") { (view: VlcPlayerView, time: Double) in
+                view.seekTo(time)
+            }
+
+            AsyncFunction("jumpBackward") { (view: VlcPlayerView, interval: Int) in
+                view.jumpBackward(interval)
+            }
+
+            AsyncFunction("jumpForward") { (view: VlcPlayerView, interval: Int) in
+                view.jumpForward(interval)
+            }
+
+            AsyncFunction("setAudioTrack") { (view: VlcPlayerView, trackIndex: Int) in
+                view.setAudioTrack(trackIndex)
+            }
+
+            AsyncFunction("getAudioTracks") { (view: VlcPlayerView) -> [[String: Any]]? in
+                return view.getAudioTracks()
+            }
+
+            AsyncFunction("setSubtitleTrack") { (view: VlcPlayerView, trackIndex: Int) in
+                view.setSubtitleTrack(trackIndex)
+            }
+
+            AsyncFunction("getSubtitleTracks") { (view: VlcPlayerView) -> [[String: Any]]? in
+                return view.getSubtitleTracks()
+            }
+
+            AsyncFunction("setVideoCropGeometry") { (view: VlcPlayerView, geometry: String?) in
+                view.setVideoCropGeometry(geometry)
+            }
+
+            AsyncFunction("getVideoCropGeometry") { (view: VlcPlayerView) -> String? in
+                return view.getVideoCropGeometry()
+            }
+        }
     }
-  }
 }
diff --git a/modules/vlc-player/ios/VlcPlayerView.swift b/modules/vlc-player/ios/VlcPlayerView.swift
index 90ccf3ee..9b39ad98 100644
--- a/modules/vlc-player/ios/VlcPlayerView.swift
+++ b/modules/vlc-player/ios/VlcPlayerView.swift
@@ -1,77 +1,413 @@
 import ExpoModulesCore
-import UIKit
 import MobileVLCKit
+import UIKit
 
-class VlcPlayerView: ExpoView, VLCMediaPlayerDelegate {
-  private var mediaPlayer: VLCMediaPlayer?
-  private var movieView: UIView?
+class VlcPlayerView: ExpoView {
+    private var mediaPlayer: VLCMediaPlayer?
+    private var videoView: UIView?
+    private var progressUpdateTimer: Timer?
+    private var progressUpdateInterval: TimeInterval = 0.5
+    private var isPaused: Bool = false
+    private var currentGeometryCString: [CChar]?
 
-  required init(appContext: AppContext? = nil) {
-    super.init(appContext: appContext)
-    DispatchQueue.main.async {
-      self.setupView()
-      self.backgroundColor = UIColor.black // Set background color to black
+    // MARK: - Initialization
+
+    required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+        setupView()
+        setupNotifications()
     }
-  }
 
-  private func setupView() {
-    DispatchQueue.main.async {
-      self.movieView = UIView()
-      self.movieView?.translatesAutoresizingMaskIntoConstraints = false
+    // MARK: - Setup
 
-      if let movieView = self.movieView {
-        self.addSubview(movieView)
-        NSLayoutConstraint.activate([
-          movieView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
-          movieView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
-          movieView.topAnchor.constraint(equalTo: self.topAnchor),
-          movieView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
-        ])
-      }
+    private func setupView() {
+        DispatchQueue.main.async {
+            self.backgroundColor = .black
+            self.videoView = UIView()
+            self.videoView?.translatesAutoresizingMaskIntoConstraints = false
 
-      self.setupMediaPlayer()
+            if let videoView = self.videoView {
+                self.addSubview(videoView)
+                NSLayoutConstraint.activate([
+                    videoView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
+                    videoView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
+                    videoView.topAnchor.constraint(equalTo: self.topAnchor),
+                    videoView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
+                ])
+            }
+
+            self.setupMediaPlayer()
+        }
     }
-  }
 
-  private func setupMediaPlayer() {
-    DispatchQueue.main.async {
-      self.mediaPlayer = VLCMediaPlayer()
-      self.mediaPlayer?.delegate = self
-      self.mediaPlayer?.drawable = self.movieView
-      print("Media player setup on main thread: \(Thread.isMainThread)")
+    private func setupMediaPlayer() {
+        DispatchQueue.main.async {
+            self.mediaPlayer = VLCMediaPlayer()
+            self.mediaPlayer?.delegate = self
+            self.mediaPlayer?.drawable = self.videoView
+        }
     }
-  }
 
-  @objc func setSource(_ source: String) {
-    DispatchQueue.main.async {
-      print("Setting media source on main thread: \(Thread.isMainThread)")
-      if let url = URL(string: source) {
-        self.mediaPlayer?.media = VLCMedia(url: url)
-        print("Media set, now playing...")
+    private func setupNotifications() {
+        NotificationCenter.default.addObserver(
+            self, selector: #selector(applicationWillResignActive),
+            name: UIApplication.willResignActiveNotification, object: nil)
+        NotificationCenter.default.addObserver(
+            self, selector: #selector(applicationWillEnterForeground),
+            name: UIApplication.willEnterForegroundNotification, object: nil)
+    }
+
+    // MARK: - Public Methods
+
+    @objc func play() {
         self.mediaPlayer?.play()
-      } else {
-        print("Invalid URL.")
-      }
+        self.isPaused = false
     }
-  }
 
-  @objc func handlePlayPause() {
-    DispatchQueue.main.async {
-      print("Handling play/pause on main thread: \(Thread.isMainThread)")
-      if self.mediaPlayer?.isPlaying == true {
+    @objc func pause() {
         self.mediaPlayer?.pause()
-      } else {
-        self.mediaPlayer?.play()
-      }
+        self.isPaused = true
     }
-  }
 
-  func mediaPlayerStateChanged(_ aNotification: Notification!) {
-    DispatchQueue.main.async {
-      print("Media player state changed on main thread: \(Thread.isMainThread)")
-      if self.mediaPlayer?.state == .stopped {
-        print("Media player stopped")
-      }
+    @objc func seekTo(_ time: Double) {
+        self.mediaPlayer?.time = VLCTime(int: Int32(time * 1000))
     }
-  }
-}
\ No newline at end of file
+
+    @objc func setSource(_ source: [String: Any]) {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.stop()
+            self.mediaPlayer = nil
+
+            let mediaOptions = source["mediaOptions"] as? [String: Any]
+            let initOptions = source["initOptions"] as? [Any]
+            let uri = source["uri"] as? String
+            let initType = source["initType"] as? Int ?? 0
+            let autoplay = source["autoplay"] as? Bool ?? false
+            let isNetwork = source["isNetwork"] as? Bool ?? false
+
+            guard let uri = uri, !uri.isEmpty else { return }
+
+            if initType == 2, let options = initOptions {
+                self.mediaPlayer = VLCMediaPlayer(options: options)
+            } else {
+                self.mediaPlayer = VLCMediaPlayer()
+            }
+
+            self.mediaPlayer?.delegate = self
+            self.mediaPlayer?.drawable = self.videoView
+            self.mediaPlayer?.scaleFactor = 0
+
+            let media: VLCMedia
+            if isNetwork {
+                media = VLCMedia(url: URL(string: uri)!)
+            } else {
+                media = VLCMedia(path: uri)
+            }
+
+            media.delegate = self
+            if let mediaOptions = mediaOptions {
+                media.addOptions(mediaOptions)
+            }
+
+            // Parse the media asynchronously
+            media.parse()
+            self.mediaPlayer?.media = media
+
+            if autoplay {
+                self.play()
+            }
+
+            self.onVideoLoadStart?(["target": self.reactTag ?? NSNull()])
+        }
+    }
+
+    @objc func setProgressUpdateInterval(_ interval: Double) {
+        progressUpdateInterval = TimeInterval(interval / 1000.0)
+        updateProgressTimer()
+    }
+
+    @objc func jumpBackward(_ interval: Int) {
+        mediaPlayer?.jumpBackward(Int32(interval))
+    }
+
+    @objc func jumpForward(_ interval: Int) {
+        mediaPlayer?.jumpForward(Int32(interval))
+    }
+
+    @objc func setMuted(_ muted: Bool) {
+        mediaPlayer?.audio?.isMuted = muted
+    }
+
+    @objc func setVolume(_ volume: Int) {
+        mediaPlayer?.audio?.volume = Int32(volume)
+    }
+
+    @objc func setVideoAspectRatio(_ ratio: String) {
+        DispatchQueue.main.async {
+            ratio.withCString { cString in
+                self.mediaPlayer?.videoAspectRatio = UnsafeMutablePointer(mutating: cString)
+            }
+        }
+    }
+
+    @objc func setAudioTrack(_ trackIndex: Int) {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.currentAudioTrackIndex = Int32(trackIndex)
+        }
+    }
+
+    @objc func getAudioTracks() -> [[String: Any]]? {
+        guard let trackNames = mediaPlayer?.audioTrackNames,
+            let trackIndexes = mediaPlayer?.audioTrackIndexes
+        else {
+            return nil
+        }
+
+        return zip(trackNames, trackIndexes).map { name, index in
+            return ["name": name, "index": index]
+        }
+    }
+
+    @objc func setSubtitleTrack(_ trackIndex: Int) {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.currentVideoSubTitleIndex = Int32(trackIndex)
+        }
+    }
+
+    @objc func getSubtitleTracks() -> [[String: Any]]? {
+        guard let trackNames = mediaPlayer?.videoSubTitlesNames,
+            let trackIndexes = mediaPlayer?.videoSubTitlesIndexes
+        else {
+            return nil
+        }
+
+        return zip(trackNames, trackIndexes).map { name, index in
+            return ["name": name, "index": index]
+        }
+    }
+
+    @objc func setSubtitleDelay(_ delay: Int) {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.currentVideoSubTitleDelay = NSInteger(delay)
+        }
+    }
+
+    @objc func setAudioDelay(_ delay: Int) {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.currentAudioPlaybackDelay = NSInteger(delay)
+        }
+    }
+
+    @objc func takeSnapshot(_ path: String, width: Int, height: Int) {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.mediaPlayer?.saveVideoSnapshot(
+                at: path, withWidth: Int32(width), andHeight: Int32(height))
+        }
+    }
+
+    @objc func setVideoCropGeometry(_ geometry: String?) {
+        DispatchQueue.main.async {
+            if let geometry = geometry, !geometry.isEmpty {
+                self.currentGeometryCString = geometry.cString(using: .utf8)
+                self.currentGeometryCString?.withUnsafeMutableBufferPointer { buffer in
+                    self.mediaPlayer?.videoCropGeometry = buffer.baseAddress
+                }
+            } else {
+                self.currentGeometryCString = nil
+                self.mediaPlayer?.videoCropGeometry = nil
+            }
+        }
+    }
+
+    @objc func getVideoCropGeometry() -> String? {
+        guard let cString = mediaPlayer?.videoCropGeometry else {
+            return nil
+        }
+        return String(cString: cString)
+    }
+
+    @objc func setRate(_ rate: Float) {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.rate = rate
+        }
+    }
+
+    @objc func nextChapter() {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.nextChapter()
+        }
+    }
+
+    @objc func previousChapter() {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.previousChapter()
+        }
+    }
+
+    @objc func getChapters() -> [[String: Any]]? {
+        guard let currentTitleIndex = mediaPlayer?.currentTitleIndex,
+            let chapters = mediaPlayer?.chapterDescriptions(ofTitle: currentTitleIndex)
+                as? [[String: Any]]
+        else {
+            return nil
+        }
+
+        return chapters.compactMap { chapter in
+            guard let name = chapter[VLCChapterDescriptionName] as? String,
+                let timeOffset = chapter[VLCChapterDescriptionTimeOffset] as? NSNumber,
+                let duration = chapter[VLCChapterDescriptionDuration] as? NSNumber
+            else {
+                return nil
+            }
+
+            return [
+                "name": name,
+                "timeOffset": timeOffset.doubleValue,
+                "duration": duration.doubleValue,
+            ]
+        }
+    }
+
+    // MARK: - Private Methods
+
+    private func updateProgressTimer() {
+        progressUpdateTimer?.invalidate()
+        progressUpdateTimer = Timer.scheduledTimer(
+            withTimeInterval: progressUpdateInterval, repeats: true
+        ) { [weak self] _ in
+            self?.sendProgressUpdate()
+        }
+    }
+
+    private func sendProgressUpdate() {
+        DispatchQueue.main.async {
+            guard let player = self.mediaPlayer else { return }
+            let currentTime = player.time.intValue
+            let duration = player.media?.length.intValue ?? 0
+            let progress: [String: Any] = [
+                "currentTime": currentTime,
+                "duration": duration,
+            ]
+            self.onVideoProgress?(progress)
+        }
+    }
+
+    @objc private func applicationWillResignActive() {
+        if !isPaused {
+            pause()
+        }
+    }
+
+    @objc private func applicationWillEnterForeground() {
+        if !isPaused {
+            play()
+        }
+    }
+
+    private func release() {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.stop()
+            self.mediaPlayer = nil
+            NotificationCenter.default.removeObserver(self)
+        }
+    }
+
+    // MARK: - Expo Events
+
+    @objc var onProgress: RCTDirectEventBlock?
+    @objc var onPlaybackStateChanged: RCTDirectEventBlock?
+    @objc var onVideoLoadStart: RCTDirectEventBlock?
+    @objc var onVideoStateChange: RCTDirectEventBlock?
+    @objc var onVideoProgress: RCTDirectEventBlock?
+
+    // MARK: - Deinitialization
+
+    deinit {
+        release()
+    }
+}
+
+extension VlcPlayerView: VLCMediaPlayerDelegate {
+    func mediaPlayerStateChanged(_ aNotification: Notification) {
+        DispatchQueue.main.async {
+            guard let player = self.mediaPlayer else { return }
+
+            let state = player.state
+            var stateInfo: [String: Any] = [
+                "target": self.reactTag ?? NSNull(),
+                "currentTime": player.time.intValue,
+                "duration": player.media?.length.intValue ?? 0,
+            ]
+
+            switch state {
+            case .opening:
+                stateInfo["type"] = "Opening"
+            case .paused:
+                self.isPaused = true
+                stateInfo["type"] = "Paused"
+            case .stopped:
+                stateInfo["type"] = "Stopped"
+            case .buffering:
+                if player.isPlaying {
+                    // If the player is actually playing while in buffering state,
+                    // we'll report it as "Playing"
+                    self.isPaused = false
+                    stateInfo["type"] = "Playing"
+                } else {
+                    stateInfo["type"] = "Buffering"
+                    stateInfo["isBuffering"] = true
+                }
+            case .playing:
+                self.isPaused = false
+                stateInfo["type"] = "Playing"
+            case .esAdded:
+                stateInfo["type"] = "ESAdded"
+            case .ended:
+                print("VLCMediaPlayerStateEnded")
+                stateInfo["type"] = "Ended"
+            case .error:
+                stateInfo["type"] = "Error"
+                self.release()
+            @unknown default:
+                stateInfo["type"] = "Unknown"
+            }
+
+            self.onVideoStateChange?(stateInfo)
+        }
+    }
+
+    func mediaPlayerTimeChanged(_ aNotification: Notification) {
+        updateVideoProgress()
+    }
+
+    private func updateVideoProgress() {
+        DispatchQueue.main.async {
+            guard let player = self.mediaPlayer else { return }
+
+            let currentTime = player.time.intValue
+            let duration = player.media?.length.intValue ?? 0
+
+            if currentTime >= 0 && currentTime < duration {
+                self.onVideoProgress?([
+                    "target": self.reactTag ?? NSNull(),
+                    "currentTime": currentTime,
+                    "duration": duration,
+                ])
+            }
+        }
+    }
+}
+
+extension VlcPlayerView: VLCMediaDelegate {
+    func mediaMetaDataDidChange(_ aMedia: VLCMedia) {
+        // Implement if needed
+    }
+
+    func mediaDidFinishParsing(_ aMedia: VLCMedia) {
+        DispatchQueue.main.async {
+            let duration = aMedia.length.intValue
+            self.onVideoStateChange?(["type": "MediaParsed", "duration": duration])
+        }
+    }
+}
diff --git a/modules/vlc-player/src/VlcPlayer.types.ts b/modules/vlc-player/src/VlcPlayer.types.ts
index 0a1dd94d..2a612f20 100644
--- a/modules/vlc-player/src/VlcPlayer.types.ts
+++ b/modules/vlc-player/src/VlcPlayer.types.ts
@@ -1,7 +1,89 @@
-export type ChangeEventPayload = {
-  value: string;
+export type PlaybackStatePayload = {
+  nativeEvent: {
+    target: number;
+    type:
+      | "Opening"
+      | "Paused"
+      | "Stopped"
+      | "Buffering"
+      | "Playing"
+      | "ESAdded"
+      | "Ended"
+      | "Error"
+      | "Unknown";
+    currentTime: number;
+    duration: number;
+    isBuffering?: boolean;
+  };
+};
+
+export type ProgressUpdatePayload = {
+  nativeEvent: {
+    currentTime: number;
+    duration: number;
+  };
+};
+
+export type VideoLoadStartPayload = {
+  nativeEvent: {
+    target: number;
+  };
+};
+
+export type VideoStateChangePayload = PlaybackStatePayload;
+
+export type VideoProgressPayload = ProgressUpdatePayload;
+
+export type VlcPlayerSource = {
+  uri: string;
+  type?: string;
+  isNetwork?: boolean;
+  autoplay?: boolean;
+  initOptions?: any[];
+  mediaOptions?: { [key: string]: any };
+};
+
+export type TrackInfo = {
+  name: string;
+  index: number;
+};
+
+export type ChapterInfo = {
+  name: string;
+  timeOffset: number;
+  duration: number;
 };
 
 export type VlcPlayerViewProps = {
-  source: string;
+  source: VlcPlayerSource;
+  style?: Object;
+  progressUpdateInterval?: number;
+  paused?: boolean;
+  muted?: boolean;
+  volume?: number;
+  videoAspectRatio?: string;
+  onVideoProgress?: (event: ProgressUpdatePayload) => void;
+  onVideoStateChange?: (event: PlaybackStatePayload) => void;
+  onVideoLoadStart?: (event: VideoLoadStartPayload) => void;
 };
+
+export interface VlcPlayerViewRef {
+  play: () => Promise<void>;
+  pause: () => Promise<void>;
+  seekTo: (time: number) => Promise<void>;
+  jumpBackward: (interval: number) => Promise<void>;
+  jumpForward: (interval: number) => Promise<void>;
+  setAudioTrack: (trackIndex: number) => Promise<void>;
+  getAudioTracks: () => Promise<TrackInfo[] | null>;
+  setSubtitleTrack: (trackIndex: number) => Promise<void>;
+  getSubtitleTracks: () => Promise<TrackInfo[] | null>;
+  setSubtitleDelay: (delay: number) => Promise<void>;
+  setAudioDelay: (delay: number) => Promise<void>;
+  takeSnapshot: (path: string, width: number, height: number) => Promise<void>;
+  setRate: (rate: number) => Promise<void>;
+  nextChapter: () => Promise<void>;
+  previousChapter: () => Promise<void>;
+  getChapters: () => Promise<ChapterInfo[] | null>;
+  setVideoCropGeometry: (geometry: string | null) => Promise<void>;
+  getVideoCropGeometry: () => Promise<string | null>;
+}
diff --git a/modules/vlc-player/src/VlcPlayerModule.web.ts b/modules/vlc-player/src/VlcPlayerModule.web.ts
deleted file mode 100644
index be76495b..00000000
--- a/modules/vlc-player/src/VlcPlayerModule.web.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { EventEmitter } from 'expo-modules-core';
-
-const emitter = new EventEmitter({} as any);
-
-export default {
-  PI: Math.PI,
-  async setValueAsync(value: string): Promise<void> {
-    emitter.emit('onChange', { value });
-  },
-  hello() {
-    return 'Hello world! 👋';
-  },
-};
diff --git a/modules/vlc-player/src/VlcPlayerView.tsx b/modules/vlc-player/src/VlcPlayerView.tsx
index 5f245d91..8206a2a8 100644
--- a/modules/vlc-player/src/VlcPlayerView.tsx
+++ b/modules/vlc-player/src/VlcPlayerView.tsx
@@ -1,11 +1,124 @@
 import { requireNativeViewManager } from "expo-modules-core";
 import * as React from "react";
 
-import { VlcPlayerViewProps } from "./VlcPlayer.types";
+import {
+  VlcPlayerViewProps,
+  VlcPlayerViewRef,
+  VlcPlayerSource,
+  TrackInfo,
+  ChapterInfo,
+} from "./VlcPlayer.types";
 
-const NativeView: React.ComponentType<VlcPlayerViewProps> =
-  requireNativeViewManager("VlcPlayer");
-
-export default function VlcPlayerView(props: VlcPlayerViewProps) {
-  return <NativeView {...props} />;
+interface NativeViewRef extends VlcPlayerViewRef {
+  setNativeProps?: (props: Partial<VlcPlayerViewProps>) => void;
 }
+
+const NativeViewManager = requireNativeViewManager("VlcPlayer");
+
+// Create a forwarded ref version of the native view
+const NativeView = React.forwardRef<NativeViewRef, VlcPlayerViewProps>(
+  (props, ref) => <NativeViewManager {...props} ref={ref} />
+);
+
+const VlcPlayerView = React.forwardRef<VlcPlayerViewRef, VlcPlayerViewProps>(
+  (props, ref) => {
+    const nativeRef = React.useRef<NativeViewRef>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      play: async () => {
+        await nativeRef.current?.play();
+      },
+      pause: async () => {
+        await nativeRef.current?.pause();
+      },
+      seekTo: async (time: number) => {
+        await nativeRef.current?.seekTo(time);
+      },
+      jumpBackward: async (interval: number) => {
+        await nativeRef.current?.jumpBackward(interval);
+      },
+      jumpForward: async (interval: number) => {
+        await nativeRef.current?.jumpForward(interval);
+      },
+      setAudioTrack: async (trackIndex: number) => {
+        await nativeRef.current?.setAudioTrack(trackIndex);
+      },
+      getAudioTracks: async () => {
+        const tracks = await nativeRef.current?.getAudioTracks();
+        return tracks ?? null;
+      },
+      setSubtitleTrack: async (trackIndex: number) => {
+        await nativeRef.current?.setSubtitleTrack(trackIndex);
+      },
+      getSubtitleTracks: async () => {
+        const tracks = await nativeRef.current?.getSubtitleTracks();
+        return tracks ?? null;
+      },
+      setSubtitleDelay: async (delay: number) => {
+        await nativeRef.current?.setSubtitleDelay(delay);
+      },
+      setAudioDelay: async (delay: number) => {
+        await nativeRef.current?.setAudioDelay(delay);
+      },
+      takeSnapshot: async (path: string, width: number, height: number) => {
+        await nativeRef.current?.takeSnapshot(path, width, height);
+      },
+      setRate: async (rate: number) => {
+        await nativeRef.current?.setRate(rate);
+      },
+      nextChapter: async () => {
+        await nativeRef.current?.nextChapter();
+      },
+      previousChapter: async () => {
+        await nativeRef.current?.previousChapter();
+      },
+      getChapters: async () => {
+        const chapters = await nativeRef.current?.getChapters();
+        return chapters ?? null;
+      },
+      setVideoCropGeometry: async (geometry: string | null) => {
+        await nativeRef.current?.setVideoCropGeometry(geometry);
+      },
+      getVideoCropGeometry: async () => {
+        const geometry = await nativeRef.current?.getVideoCropGeometry();
+        return geometry ?? null;
+      },
+    }));
+
+    const {
+      source,
+      style,
+      progressUpdateInterval = 500,
+      paused,
+      muted,
+      volume,
+      videoAspectRatio,
+      onVideoLoadStart,
+      onVideoStateChange,
+      onVideoProgress,
+      ...otherProps
+    } = props;
+
+    const processedSource: VlcPlayerSource =
+      typeof source === "string" ? { uri: source } : source;
+
+    return (
+      <NativeView
+        {...otherProps}
+        ref={nativeRef}
+        source={processedSource}
+        style={[{ width: "100%", height: "100%" }, style]}
+        progressUpdateInterval={progressUpdateInterval}
+        paused={paused}
+        muted={muted}
+        volume={volume}
+        videoAspectRatio={videoAspectRatio}
+        onVideoLoadStart={onVideoLoadStart}
+        onVideoStateChange={onVideoStateChange}
+        onVideoProgress={onVideoProgress}
+      />
+    );
+  }
+);
+
+export default VlcPlayerView;
diff --git a/modules/vlc-player/src/VlcPlayerView.web.tsx b/modules/vlc-player/src/VlcPlayerView.web.tsx
deleted file mode 100644
index d00682d7..00000000
--- a/modules/vlc-player/src/VlcPlayerView.web.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { VlcPlayerViewProps } from './VlcPlayer.types';
-
-export default function VlcPlayerView(props: VlcPlayerViewProps) {
-  return (
-    <div>
-      <span>{props.name}</span>
-    </div>
-  );
-}