@shopify/react-native-skia 1.3.2 → 1.3.4

package/android/cpp/jni/JniPlatformContext.cpp

@@ -77,6 +77,8 @@ TSelf JniPlatformContext::initHybrid(jni::alias_ref<jhybridobject> jThis,
 
 jni::global_ref<jobject>
 JniPlatformContext::createVideo(const std::string &url) {
+  jni::Environment::ensureCurrentThreadIsAttached();
+
   jni::ThreadScope ts; // Manages JNI thread attachment/detachment
 
   // Get the JNI environment
@@ -85,14 +87,13 @@ JniPlatformContext::createVideo(const std::string &url) {
   // Convert std::string to jstring
   jstring jUrl = env->NewStringUTF(url.c_str());
 
-  // Get the method ID for the createVideo method
-  // Replace "Lcom/yourpackage/RNSkVideo;" with the actual return type
-  // descriptor
   static auto method =
       javaPart_->getClass()->getMethod<jobject(jstring)>("createVideo");
 
   // Call the method and receive a local reference to the video object
   auto videoObject = method(javaPart_.get(), jUrl);
+  env->DeleteLocalRef(jUrl);
+
   // Clean up the jstring local reference
   auto result = jni::make_global(videoObject);
   return result;

package/android/cpp/rnskia-android/RNSkAndroidVideo.cpp

@@ -9,6 +9,7 @@
 #pragma clang diagnostic ignored "-Wdocumentation"
 
 #include "include/core/SkImage.h"
+#include "include/core/SkSize.h"
 
 #pragma clang diagnostic pop
 
@@ -82,7 +83,7 @@ double RNSkAndroidVideo::framerate() {
 void RNSkAndroidVideo::seek(double timestamp) {
   JNIEnv *env = facebook::jni::Environment::current();
   jclass cls = env->GetObjectClass(_jniVideo.get());
-  jmethodID mid = env->GetMethodID(cls, "seek", "(J)V");
+  jmethodID mid = env->GetMethodID(cls, "seek", "(D)V");
   if (!mid) {
     RNSkLogger::logToConsole("seek method not found");
     return;
@@ -102,4 +103,61 @@ float RNSkAndroidVideo::getRotationInDegrees() {
   return static_cast<float>(rotation);
 }
 
+SkISize RNSkAndroidVideo::getSize() {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid =
+      env->GetMethodID(cls, "getSize", "()Landroid/graphics/Point;");
+  if (!mid) {
+    RNSkLogger::logToConsole("getSize method not found");
+    return SkISize::Make(0, 0);
+  }
+  jobject jPoint = env->CallObjectMethod(_jniVideo.get(), mid);
+  jclass pointCls = env->GetObjectClass(jPoint);
+
+  jfieldID xFid = env->GetFieldID(pointCls, "x", "I");
+  jfieldID yFid = env->GetFieldID(pointCls, "y", "I");
+  if (!xFid || !yFid) {
+    RNSkLogger::logToConsole("Point class fields not found");
+    return SkISize::Make(0, 0);
+  }
+
+  jint width = env->GetIntField(jPoint, xFid);
+  jint height = env->GetIntField(jPoint, yFid);
+
+  return SkISize::Make(width, height);
+}
+
+void RNSkAndroidVideo::play() {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "play", "()V");
+  if (!mid) {
+    RNSkLogger::logToConsole("play method not found");
+    return;
+  }
+  env->CallVoidMethod(_jniVideo.get(), mid);
+}
+
+void RNSkAndroidVideo::pause() {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "pause", "()V");
+  if (!mid) {
+    RNSkLogger::logToConsole("pause method not found");
+    return;
+  }
+  env->CallVoidMethod(_jniVideo.get(), mid);
+}
+
+void RNSkAndroidVideo::setVolume(float volume) {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "setVolume", "(F)V");
+  if (!mid) {
+    RNSkLogger::logToConsole("setVolume method not found");
+    return;
+  }
+  env->CallVoidMethod(_jniVideo.get(), mid, volume);
+}
 } // namespace RNSkia

package/android/cpp/rnskia-android/RNSkAndroidVideo.h

@@ -32,6 +32,10 @@ public:
   double framerate() override;
   void seek(double timestamp) override;
   float getRotationInDegrees() override;
+  SkISize getSize() override;
+  void play() override;
+  void pause() override;
+  void setVolume(float volume) override;
 };
 
 } // namespace RNSkia

package/android/src/main/java/com/shopify/reactnative/skia/RNSkVideo.java

@@ -3,14 +3,19 @@ package com.shopify.reactnative.skia;
 import android.content.Context;
 import android.graphics.ImageFormat;
 import android.hardware.HardwareBuffer;
-import android.media.Image;
-import android.media.ImageReader;
+import android.media.AudioAttributes;
+import android.media.AudioManager;
 import android.media.MediaCodec;
 import android.media.MediaExtractor;
 import android.media.MediaFormat;
+import android.media.MediaPlayer;
+import android.media.MediaSync;
+import android.media.Image;
+import android.media.ImageReader;
 import android.net.Uri;
 import android.os.Build;
 import android.view.Surface;
+import android.graphics.Point;
 
 import androidx.annotation.RequiresApi;
 
@@ -27,9 +32,15 @@ public class RNSkVideo {
     private MediaCodec decoder;
     private ImageReader imageReader;
     private Surface outputSurface;
+    private MediaPlayer mediaPlayer;
+    private MediaSync mediaSync;
     private double durationMs;
     private double frameRate;
     private int rotationDegrees = 0;
+    private int width = 0;
+    private int height = 0;
+
+    private boolean isPlaying = false;
 
     RNSkVideo(Context context, String localUri) {
         this.uri = Uri.parse(localUri);
@@ -47,6 +58,18 @@ public class RNSkVideo {
             }
             extractor.selectTrack(trackIndex);
             MediaFormat format = extractor.getTrackFormat(trackIndex);
+
+            // Initialize MediaPlayer
+            mediaPlayer = new MediaPlayer();
+            mediaPlayer.setDataSource(context, uri);
+            mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
+            mediaPlayer.setOnPreparedListener(mp -> {
+                durationMs = mp.getDuration();
+                mp.start();
+                isPlaying = true;
+            });
+            mediaPlayer.prepareAsync();
+
             // Retrieve and store video properties
             if (format.containsKey(MediaFormat.KEY_DURATION)) {
                 durationMs = format.getLong(MediaFormat.KEY_DURATION) / 1000;  // Convert microseconds to milliseconds
@@ -57,8 +80,8 @@ public class RNSkVideo {
             if (format.containsKey(MediaFormat.KEY_ROTATION)) {
                 rotationDegrees = format.getInteger(MediaFormat.KEY_ROTATION);
             }
-            int width = format.getInteger(MediaFormat.KEY_WIDTH);
-            int height = format.getInteger(MediaFormat.KEY_HEIGHT);
+            width = format.getInteger(MediaFormat.KEY_WIDTH);
+            height = format.getInteger(MediaFormat.KEY_HEIGHT);
             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                 imageReader = ImageReader.newInstance(
                         width,
@@ -116,15 +139,38 @@ public class RNSkVideo {
     }
 
     @DoNotStrip
-    public void seek(long timestamp) {
-        // Seek to the closest sync frame at or before the specified time
-        extractor.seekTo(timestamp * 1000, MediaExtractor.SEEK_TO_PREVIOUS_SYNC);
+    public void seek(double timestamp) {
+        // Log the values for debugging
+
+        long timestampUs = (long)(timestamp * 1000); // Convert milliseconds to microseconds
+
+        extractor.seekTo(timestampUs, MediaExtractor.SEEK_TO_CLOSEST_SYNC);
+        if (mediaPlayer != null) {
+            int timestampMs = (int) timestamp; // Convert to milliseconds
+            mediaPlayer.seekTo(timestampMs, MediaPlayer.SEEK_CLOSEST);
+        }
+
         // Flush the codec to reset internal state and buffers
         if (decoder != null) {
             decoder.flush();
+
+            // Decode frames until reaching the exact timestamp
+            boolean isSeeking = true;
+            while (isSeeking) {
+                decodeFrame();
+                long currentTimestampUs = extractor.getSampleTime();
+                if (currentTimestampUs >= timestampUs) {
+                    isSeeking = false;
+                }
+            }
         }
     }
 
+    @DoNotStrip
+    public Point getSize() {
+        return new Point(width, height);
+    }
+
     private int selectVideoTrack(MediaExtractor extractor) {
         int numTracks = extractor.getTrackCount();
         for (int i = 0; i < numTracks; i++) {
@@ -179,7 +225,34 @@ public class RNSkVideo {
         }
     }
 
+    @DoNotStrip
+    public void play() {
+        if (mediaPlayer != null && !isPlaying) {
+            mediaPlayer.start();
+            isPlaying = true;
+        }
+    }
+
+    @DoNotStrip
+    public void pause() {
+        if (mediaPlayer != null && isPlaying) {
+            mediaPlayer.pause();
+            isPlaying = false;
+        }
+    }
+
+    @DoNotStrip
+    public void setVolume(float volume) {
+        if (mediaPlayer != null) {
+            mediaPlayer.setVolume(volume, volume);
+        }
+    }
+
     public void release() {
+        if (mediaPlayer != null) {
+            mediaPlayer.release();
+            mediaPlayer = null;
+        }
         if (decoder != null) {
             decoder.stop();
             decoder.release();

package/cpp/api/JsiVideo.h

@@ -53,18 +53,43 @@ public:
     return jsi::Value::undefined();
   }
 
-  JSI_HOST_FUNCTION(getRotationInDegrees) {
+  JSI_HOST_FUNCTION(rotation) {
     auto context = getContext();
     auto rot = getObject()->getRotationInDegrees();
     return jsi::Value(static_cast<double>(rot));
   }
 
-  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiVideo, nextImage),
-                       JSI_EXPORT_FUNC(JsiVideo, duration),
-                       JSI_EXPORT_FUNC(JsiVideo, framerate),
-                       JSI_EXPORT_FUNC(JsiVideo, seek),
-                       JSI_EXPORT_FUNC(JsiVideo, getRotationInDegrees),
-                       JSI_EXPORT_FUNC(JsiVideo, dispose))
+  JSI_HOST_FUNCTION(size) {
+    auto context = getContext();
+    auto size = getObject()->getSize();
+    auto result = jsi::Object(runtime);
+    result.setProperty(runtime, "width", static_cast<double>(size.width()));
+    result.setProperty(runtime, "height", static_cast<double>(size.height()));
+    return result;
+  }
+
+  JSI_HOST_FUNCTION(play) {
+    getObject()->play();
+    return jsi::Value::undefined();
+  }
+
+  JSI_HOST_FUNCTION(pause) {
+    getObject()->pause();
+    return jsi::Value::undefined();
+  }
+
+  JSI_HOST_FUNCTION(setVolume) {
+    auto volume = arguments[0].asNumber();
+    getObject()->setVolume(static_cast<float>(volume));
+    return jsi::Value::undefined();
+  }
+
+  JSI_EXPORT_FUNCTIONS(
+      JSI_EXPORT_FUNC(JsiVideo, nextImage), JSI_EXPORT_FUNC(JsiVideo, duration),
+      JSI_EXPORT_FUNC(JsiVideo, framerate), JSI_EXPORT_FUNC(JsiVideo, seek),
+      JSI_EXPORT_FUNC(JsiVideo, rotation), JSI_EXPORT_FUNC(JsiVideo, size),
+      JSI_EXPORT_FUNC(JsiVideo, play), JSI_EXPORT_FUNC(JsiVideo, pause),
+      JSI_EXPORT_FUNC(JsiVideo, setVolume), JSI_EXPORT_FUNC(JsiVideo, dispose))
 
   JsiVideo(std::shared_ptr<RNSkPlatformContext> context,
            std::shared_ptr<RNSkVideo> video)

package/cpp/rnskia/RNSkVideo.h

@@ -19,6 +19,10 @@ public:
   virtual double framerate() = 0;
   virtual void seek(double timestamp) = 0;
   virtual float getRotationInDegrees() = 0;
+  virtual SkISize getSize() = 0;
+  virtual void play() = 0;
+  virtual void pause() = 0;
+  virtual void setVolume(float volume) = 0;
 };
 
 } // namespace RNSkia

package/ios/RNSkia-iOS/RNSkiOSVideo.h

@@ -9,6 +9,7 @@
 #pragma clang diagnostic ignored "-Wdocumentation"
 
 #include "include/core/SkImage.h"
+#include "include/core/SkSize.h"
 
 #pragma clang diagnostic pop
 
@@ -20,14 +21,18 @@ namespace RNSkia {
 class RNSkiOSVideo : public RNSkVideo {
 private:
   std::string _url;
-  AVAssetReader *_reader = nullptr;
-  AVAssetReaderTrackOutput *_trackOutput = nullptr;
+  AVPlayer *_player = nullptr;
+  AVPlayerItem *_playerItem = nullptr;
+  AVPlayerItemVideoOutput *_videoOutput = nullptr;
   RNSkPlatformContext *_context;
   double _duration = 0;
   double _framerate = 0;
-  void setupReader(CMTimeRange timeRange);
-  NSDictionary *getOutputSettings();
+  float _videoWidth = 0;
+  float _videoHeight = 0;
   CGAffineTransform _preferredTransform;
+  bool _isPlaying = false;
+  void setupPlayer();
+  NSDictionary *getOutputSettings();
 
 public:
   RNSkiOSVideo(std::string url, RNSkPlatformContext *context);
@@ -36,7 +41,11 @@ public:
   double duration() override;
   double framerate() override;
   void seek(double timestamp) override;
+  void play();
+  void pause();
   float getRotationInDegrees() override;
+  SkISize getSize() override;
+  void setVolume(float volume);
 };
 
 } // namespace RNSkia

package/ios/RNSkia-iOS/RNSkiOSVideo.mm

@@ -16,78 +16,60 @@ namespace RNSkia {
 
 RNSkiOSVideo::RNSkiOSVideo(std::string url, RNSkPlatformContext *context)
     : _url(std::move(url)), _context(context) {
-  setupReader(CMTimeRangeMake(kCMTimeZero, kCMTimePositiveInfinity));
+  setupPlayer();
 }
 
-RNSkiOSVideo::~RNSkiOSVideo() {}
+RNSkiOSVideo::~RNSkiOSVideo() {
+  if (_player) {
+    [_player pause];
+  }
+}
 
-void RNSkiOSVideo::setupReader(CMTimeRange timeRange) {
-  NSError *error = nil;
+void RNSkiOSVideo::setupPlayer() {
+  NSURL *videoURL = [NSURL URLWithString:@(_url.c_str())];
+  AVPlayerItem *playerItem = [AVPlayerItem playerItemWithURL:videoURL];
+  _player = [AVPlayer playerWithPlayerItem:playerItem];
+  _playerItem = playerItem;
 
-  AVURLAsset *asset =
-      [AVURLAsset URLAssetWithURL:[NSURL URLWithString:@(_url.c_str())]
-                          options:nil];
-  AVAssetReader *assetReader = [[AVAssetReader alloc] initWithAsset:asset
-                                                              error:&error];
-  if (error) {
-    NSLog(@"Error initializing asset reader: %@", error.localizedDescription);
-    return;
-  }
+  NSDictionary *outputSettings = getOutputSettings();
+  _videoOutput =
+      [[AVPlayerItemVideoOutput alloc] initWithOutputSettings:outputSettings];
+  [playerItem addOutput:_videoOutput];
 
-  CMTime time = [asset duration];
-  if (time.timescale == 0) {
-    NSLog(@"Error: Timescale of the asset is zero.");
-    return;
+  CMTime time = playerItem.asset.duration;
+  if (time.timescale != 0) {
+    _duration = CMTimeGetSeconds(time) * 1000; // Store duration in milliseconds
   }
 
-  _duration = CMTimeGetSeconds(time) * 1000; // Store duration in milliseconds
   AVAssetTrack *videoTrack =
-      [[asset tracksWithMediaType:AVMediaTypeVideo] firstObject];
-  _framerate = videoTrack.nominalFrameRate;
-  _preferredTransform = videoTrack.preferredTransform;
-
-  NSDictionary *outputSettings = getOutputSettings();
-  AVAssetReaderTrackOutput *trackOutput =
-      [[AVAssetReaderTrackOutput alloc] initWithTrack:videoTrack
-                                       outputSettings:outputSettings];
-
-  assetReader.timeRange = timeRange;
-  if ([assetReader canAddOutput:trackOutput]) {
-    [assetReader addOutput:trackOutput];
-    [assetReader startReading];
-  } else {
-    NSLog(@"Cannot add output to asset reader.");
-    return;
+      [[playerItem.asset tracksWithMediaType:AVMediaTypeVideo] firstObject];
+  if (videoTrack) {
+    _framerate = videoTrack.nominalFrameRate;
+    _preferredTransform = videoTrack.preferredTransform;
+    CGSize videoSize = videoTrack.naturalSize;
+    _videoWidth = videoSize.width;
+    _videoHeight = videoSize.height;
   }
-
-  _reader = assetReader;
-  _trackOutput = trackOutput;
+  play();
 }
 
 sk_sp<SkImage> RNSkiOSVideo::nextImage(double *timeStamp) {
-  CMSampleBufferRef sampleBuffer = [_trackOutput copyNextSampleBuffer];
-  if (!sampleBuffer) {
-    NSLog(@"No sample buffer.");
-    return nullptr;
-  }
-
-  // Extract the pixel buffer from the sample buffer
-  CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
+  CMTime currentTime = [_player currentTime];
+  CVPixelBufferRef pixelBuffer =
+      [_videoOutput copyPixelBufferForItemTime:currentTime
+                            itemTimeForDisplay:nullptr];
   if (!pixelBuffer) {
     NSLog(@"No pixel buffer.");
-    CFRelease(sampleBuffer);
     return nullptr;
   }
 
-  auto skImage = _context->makeImageFromNativeBuffer(
-      reinterpret_cast<void *>(pixelBuffer));
+  auto skImage = _context->makeImageFromNativeBuffer((void *)pixelBuffer);
 
   if (timeStamp) {
-    CMTime time = CMSampleBufferGetPresentationTimeStamp(sampleBuffer);
-    *timeStamp = CMTimeGetSeconds(time);
+    *timeStamp = CMTimeGetSeconds(currentTime);
   }
 
-  CFRelease(sampleBuffer);
+  CVPixelBufferRelease(pixelBuffer);
   return skImage;
 }
 
@@ -104,36 +86,52 @@ float RNSkiOSVideo::getRotationInDegrees() {
   // Determine the rotation angle in radians
   if (transform.a == 0 && transform.b == 1 && transform.c == -1 &&
       transform.d == 0) {
-    rotationAngle = M_PI_2; // 90 degrees
+    rotationAngle = 90;
   } else if (transform.a == 0 && transform.b == -1 && transform.c == 1 &&
              transform.d == 0) {
-    rotationAngle = -M_PI_2; // -90 degrees
+    rotationAngle = 270;
   } else if (transform.a == -1 && transform.b == 0 && transform.c == 0 &&
              transform.d == -1) {
-    rotationAngle = M_PI; // 180 degrees
-  } else if (transform.a == 1 && transform.b == 0 && transform.c == 0 &&
-             transform.d == 1) {
-    rotationAngle = 0.0; // 0 degrees
+    rotationAngle = 180;
   }
-  // Convert the rotation angle from radians to degrees
-  return rotationAngle * 180 / M_PI;
+  return rotationAngle;
 }
 
 void RNSkiOSVideo::seek(double timeInMilliseconds) {
-  if (_reader) {
-    [_reader cancelReading];
-    _reader = nil;
-    _trackOutput = nil;
+  CMTime seekTime =
+      CMTimeMakeWithSeconds(timeInMilliseconds / 1000.0, NSEC_PER_SEC);
+  [_player seekToTime:seekTime
+        toleranceBefore:kCMTimeZero
+         toleranceAfter:kCMTimeZero
+      completionHandler:^(BOOL finished) {
+        if (!finished) {
+          NSLog(@"Seek failed or was interrupted.");
+        }
+      }];
+}
+
+void RNSkiOSVideo::play() {
+  if (_player) {
+    [_player play];
+    _isPlaying = true;
   }
+}
 
-  CMTime startTime =
-      CMTimeMakeWithSeconds(timeInMilliseconds / 1000.0, NSEC_PER_SEC);
-  CMTimeRange timeRange = CMTimeRangeMake(startTime, kCMTimePositiveInfinity);
-  setupReader(timeRange);
+void RNSkiOSVideo::pause() {
+  if (_player) {
+    [_player pause];
+    _isPlaying = false;
+  }
 }
 
 double RNSkiOSVideo::duration() { return _duration; }
 
 double RNSkiOSVideo::framerate() { return _framerate; }
 
+SkISize RNSkiOSVideo::getSize() {
+  return SkISize::Make(_videoWidth, _videoHeight);
+}
+
+void RNSkiOSVideo::setVolume(float volume) { _player.volume = volume; }
+
 } // namespace RNSkia

package/lib/commonjs/dom/nodes/datatypes/Fitting.js

@@ -5,12 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.size = exports.rect2rect = exports.fitRects = void 0;
 var _typeddash = require("../../../renderer/typeddash");
-const size = (width = 0, height = 0) => ({
-  width,
-  height
-});
+const size = (width = 0, height = 0) => {
+  "worklet";
+
+  return {
+    width,
+    height
+  };
+};
 exports.size = size;
 const rect2rect = (src, dst) => {
+  "worklet";
+
   const scaleX = dst.width / src.width;
   const scaleY = dst.height / src.height;
   const translateX = dst.x - src.x * scaleX;
@@ -26,36 +32,12 @@ const rect2rect = (src, dst) => {
   }];
 };
 exports.rect2rect = rect2rect;
-const fitRects = (fit, rect, {
-  x,
-  y,
-  width,
-  height
-}) => {
-  const sizes = applyBoxFit(fit, {
-    width: rect.width,
-    height: rect.height
-  }, {
-    width,
-    height
-  });
-  const src = inscribe(sizes.src, rect);
-  const dst = inscribe(sizes.dst, {
-    x,
-    y,
-    width,
-    height
-  });
-  return {
-    src,
-    dst
-  };
-};
-exports.fitRects = fitRects;
 const inscribe = ({
   width,
   height
 }, rect) => {
+  "worklet";
+
   const halfWidthDelta = (rect.width - width) / 2.0;
   const halfHeightDelta = (rect.height - height) / 2.0;
   return {
@@ -66,6 +48,8 @@ const inscribe = ({
   };
 };
 const applyBoxFit = (fit, input, output) => {
+  "worklet";
+
   let src = size(),
     dst = size();
   if (input.height <= 0.0 || input.width <= 0.0 || output.height <= 0.0 || output.width <= 0.0) {
@@ -126,4 +110,32 @@ const applyBoxFit = (fit, input, output) => {
     dst
   };
 };
+const fitRects = (fit, rect, {
+  x,
+  y,
+  width,
+  height
+}) => {
+  "worklet";
+
+  const sizes = applyBoxFit(fit, {
+    width: rect.width,
+    height: rect.height
+  }, {
+    width,
+    height
+  });
+  const src = inscribe(sizes.src, rect);
+  const dst = inscribe(sizes.dst, {
+    x,
+    y,
+    width,
+    height
+  });
+  return {
+    src,
+    dst
+  };
+};
+exports.fitRects = fitRects;
 //# sourceMappingURL=Fitting.js.map