chore: done

.yarnrc.yml

@@ -1,10 +1,5 @@
-nodeLinker: node-modules
 nmHoistingLimits: workspaces
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

README.md

@@ -1,21 +1,86 @@
-# react-native-gif-player
+<h1 align="center">
+  React Native Gif Player
+</h1>
 
-react native view component for GIF files
+React Native Gif/Animated WebP Player View Component.
 
-## Installation
+</div>
+<p align="center" >
+  <kbd>
+    <img
+      src="https://github.com/ysfzrn/react-native-gif-player/blob/main/assets/recordiOS.gif?raw=true"
+      title="iOS Demo"
+      float="left"
+    >
+  </kbd>
+  <kbd>
+    <img
+      src="https://github.com/ysfzrn/react-native-gif-player/blob/main/assets/recordiOS.gif?raw=true"
+      title="Android Demo"
+      float="right"
+    >
+  </kbd>
+  <br>
+  <em>React Native Gif Player Example App</em>
+</p>
 
-```sh
-npm install react-native-gif-player
-```
+React Native's Image component can display GIFs but lacks a stop feature. react-native-gif-player comes with a stop feature and additional capabilities.
+
+`react-native-gif-player` is a wrapper around UIImage(iOS) and Fresco (Android).
+
+## Features
+
+- [x] STOP
+- [x] Local/Remote GIF Support.
+- [x] Local/Remote Image Support.
+- [x] Local/Remote Animated WebP Support (iOS has a performance issue with long animated WebP)..
+- [x] Watching Frames
+- [x] Jump to Frame
+- [x] Old/New Architecture Support
 
 ## Usage
 
-```js
-import { GifPlayerView } from "react-native-gif-player";
+```bash
+yarn add react-native-gif-player
+cd ios && pod install
+```
+
+```jsx
+import { GifPlayerView } from 'react-native-gif-player';
+
+const App = () => {
+  const handleOnFrame = (event: any) => {
+    const { frameNumber } = event?.nativeEvent || {};
+  };
+
+  const handleOnError = (event: any) => {
+    setState({ loading: false, error: event?.nativeEvent?.error });
+  };
+
+  const handleLoad = (event: any) => {
+    const { duration, frameCount } = event?.nativeEvent || {};
+  };
 
-// ...
+  const jumpToFrame = () => {
+    gifPlayerRef.current.jumpToFrame(0);
+  }
 
-<GifPlayerView color="tomato" />
+  return (
+    <GifPlayerView
+      ref={gifPlayerRef}
+      style={styles.box}
+      source={{ uri: gifSource }}
+      paused={paused}
+      loopCount={loopCount}
+      onStart={handleStart}
+      onStop={handleStop}
+      onEnd={handleEnd}
+      onFrame={handleOnFrame}
+      onError={handleOnError}
+      onLoad={handleLoad}
+    />
+  );
+};
 ```
 
 ## Contributing

android/build.gradle

@@ -109,6 +109,12 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation "com.facebook.fresco:fresco:3.1.3"
+  implementation "com.facebook.fresco:animated-gif:3.1.3"
+  implementation "com.facebook.fresco:animated-base:3.1.3"
+  implementation "com.facebook.fresco:animated-drawable:3.1.3"
+  implementation 'com.facebook.fresco:animated-webp:3.1.3'
+  implementation 'com.facebook.fresco:webpsupport:3.1.3'
 }
 
 if (isNewArchitectureEnabled()) {

android/src/main/java/com/gifplayer/EventManager.kt

@@ -0,0 +1,143 @@
+package com.gifplayer
+
+import android.util.Log
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+
+class EventManager {
+
+}
+
+data class OnLoadPayloadType(val duration: Double, val frameCount: Int)
+
+open class OnLoadEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: OnLoadPayloadType
+) : Event<OnLoadEvent>(surfaceId, viewId) {
+  override fun getEventName() = NAME
+
+  override fun getEventData(): WritableMap? {
+    return createPayload()
+  }
+
+  private fun createPayload() = Arguments.createMap().apply {
+    putDouble("duration", payload.duration)
+    putInt("frameCount", payload.frameCount)
+  }
+
+  companion object {
+    const val NAME = "topLoadEvent"
+    const val EVENT_PROP_NAME = "onLoad"
+  }
+}
+
+
+open class OnStartEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: String
+) : Event<OnStartEvent>(surfaceId, viewId) {
+  override fun getEventName() = NAME
+
+  override fun getEventData(): WritableMap? {
+    return createPayload()
+  }
+
+  private fun createPayload() = Arguments.createMap().apply {
+    putString("arg", payload)
+  }
+
+  companion object {
+    const val NAME = "topStartEvent"
+    const val EVENT_PROP_NAME = "onStart"
+  }
+}
+
+
+open class OnStopEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: String
+) : Event<OnStopEvent>(surfaceId, viewId) {
+  override fun getEventName() = NAME
+
+  override fun getEventData(): WritableMap? {
+    return createPayload()
+  }
+
+  private fun createPayload() = Arguments.createMap().apply {
+    putString("arg", payload)
+  }
+
+  companion object {
+    const val NAME = "topStopEvent"
+    const val EVENT_PROP_NAME = "onStop"
+  }
+}
+
+open class OnEndEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: String
+) : Event<OnEndEvent>(surfaceId, viewId) {
+  override fun getEventName() = NAME
+
+  override fun getEventData(): WritableMap? {
+    return createPayload()
+  }
+
+  private fun createPayload() = Arguments.createMap().apply {
+    putString("arg", payload)
+  }
+
+  companion object {
+    const val NAME = "topEndEvent"
+    const val EVENT_PROP_NAME = "onEnd"
+  }
+}
+
+
+open class OnFrameEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: Int
+) : Event<OnFrameEvent>(surfaceId, viewId) {
+  override fun getEventName() = NAME
+
+  override fun getEventData(): WritableMap? {
+    return createPayload()
+  }
+
+  private fun createPayload() = Arguments.createMap().apply {
+    putInt("frameNumber", payload)
+  }
+
+  companion object {
+    const val NAME = "topFrameEvent"
+    const val EVENT_PROP_NAME = "onFrame"
+  }
+}
+
+open class OnErrorEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: String
+) : Event<OnErrorEvent>(surfaceId, viewId) {
+  override fun getEventName() = NAME
+
+  override fun getEventData(): WritableMap? {
+    return createPayload()
+  }
+
+  private fun createPayload() = Arguments.createMap().apply {
+    putString("error", payload)
+  }
+
+  companion object {
+    const val NAME = "topErrorEvent"
+    const val EVENT_PROP_NAME = "onError"
+  }
+}