@shopify/react-native-skia 1.3.1 → 1.3.3

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
 
@@ -67,6 +68,7 @@ double RNSkAndroidVideo::duration() {
   }
   return env->CallDoubleMethod(_jniVideo.get(), mid);
 }
+
 double RNSkAndroidVideo::framerate() {
   JNIEnv *env = facebook::jni::Environment::current();
   jclass cls = env->GetObjectClass(_jniVideo.get());
@@ -81,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;
@@ -89,4 +91,73 @@ void RNSkAndroidVideo::seek(double timestamp) {
   env->CallVoidMethod(_jniVideo.get(), mid, static_cast<jlong>(timestamp));
 }
 
+float RNSkAndroidVideo::getRotationInDegrees() {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "getRotationDegrees", "()I");
+  if (!mid) {
+    RNSkLogger::logToConsole("getRotationDegrees method not found");
+    return 0;
+  }
+  auto rotation = env->CallIntMethod(_jniVideo.get(), mid);
+  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

@@ -31,6 +31,11 @@ public:
   double duration() override;
   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,8 +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);
@@ -46,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
@@ -53,8 +77,11 @@ public class RNSkVideo {
             if (format.containsKey(MediaFormat.KEY_FRAME_RATE)) {
                 frameRate = format.getInteger(MediaFormat.KEY_FRAME_RATE);
             }
-            int width = format.getInteger(MediaFormat.KEY_WIDTH);
-            int height = format.getInteger(MediaFormat.KEY_HEIGHT);
+            if (format.containsKey(MediaFormat.KEY_ROTATION)) {
+                rotationDegrees = format.getInteger(MediaFormat.KEY_ROTATION);
+            }
+            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,
@@ -87,11 +114,15 @@ public class RNSkVideo {
     }
 
     @DoNotStrip
-
     public double getFrameRate() {
         return frameRate;
     }
 
+    @DoNotStrip
+    public int getRotationDegrees() {
+        return rotationDegrees;
+    }
+
     @DoNotStrip
     public HardwareBuffer nextImage() {
         if (!decoderOutputAvailable()) {
@@ -108,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++) {
@@ -171,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,11 +53,43 @@ public:
     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, dispose))
+  JSI_HOST_FUNCTION(rotation) {
+    auto context = getContext();
+    auto rot = getObject()->getRotationInDegrees();
+    return jsi::Value(static_cast<double>(rot));
+  }
+
+  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

@@ -18,6 +18,11 @@ public:
   virtual double duration() = 0;
   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,12 +21,17 @@ 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);
+  float _videoWidth = 0;
+  float _videoHeight = 0;
+  CGAffineTransform _preferredTransform;
+  bool _isPlaying = false;
+  void setupPlayer();
   NSDictionary *getOutputSettings();
 
 public:
@@ -35,6 +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

@@ -1,5 +1,3 @@
-#pragma once
-
 #include <memory>
 #include <string>
 
@@ -18,77 +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;
-
-  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;
 }
 
@@ -99,21 +80,58 @@ NSDictionary *RNSkiOSVideo::getOutputSettings() {
   };
 }
 
-void RNSkiOSVideo::seek(double timeInMilliseconds) {
-  if (_reader) {
-    [_reader cancelReading];
-    _reader = nil;
-    _trackOutput = nil;
+float RNSkiOSVideo::getRotationInDegrees() {
+  CGFloat rotationAngle = 0.0;
+  auto transform = _preferredTransform;
+  // Determine the rotation angle in radians
+  if (transform.a == 0 && transform.b == 1 && transform.c == -1 &&
+      transform.d == 0) {
+    rotationAngle = 90;
+  } else if (transform.a == 0 && transform.b == -1 && transform.c == 1 &&
+             transform.d == 0) {
+    rotationAngle = 270;
+  } else if (transform.a == -1 && transform.b == 0 && transform.c == 0 &&
+             transform.d == -1) {
+    rotationAngle = 180;
   }
+  return rotationAngle;
+}
 
-  CMTime startTime =
+void RNSkiOSVideo::seek(double timeInMilliseconds) {
+  CMTime seekTime =
       CMTimeMakeWithSeconds(timeInMilliseconds / 1000.0, NSEC_PER_SEC);
-  CMTimeRange timeRange = CMTimeRangeMake(startTime, kCMTimePositiveInfinity);
-  setupReader(timeRange);
+  [_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;
+  }
+}
+
+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