@shopify/react-native-skia 2.4.17 → 2.4.19

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

@@ -171,4 +171,38 @@ void RNSkAndroidVideo::setVolume(float volume) {
   }
   env->CallVoidMethod(_jniVideo.get(), mid, volume);
 }
+
+double RNSkAndroidVideo::currentTime() {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "getCurrentTime", "()D");
+  if (!mid) {
+    RNSkLogger::logToConsole("getCurrentTime method not found");
+    return 0.0;
+  }
+  return env->CallDoubleMethod(_jniVideo.get(), mid);
+}
+
+void RNSkAndroidVideo::setLooping(bool looping) {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "setLooping", "(Z)V");
+  if (!mid) {
+    RNSkLogger::logToConsole("setLooping method not found");
+    return;
+  }
+  env->CallVoidMethod(_jniVideo.get(), mid, static_cast<jboolean>(looping));
+}
+
+bool RNSkAndroidVideo::isPlaying() {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "getIsPlaying", "()Z");
+  if (!mid) {
+    RNSkLogger::logToConsole("getIsPlaying method not found");
+    return false;
+  }
+  return env->CallBooleanMethod(_jniVideo.get(), mid);
+}
+
 } // namespace RNSkia

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

@@ -30,12 +30,15 @@ public:
   sk_sp<SkImage> nextImage(double *timeStamp = nullptr) override;
   double duration() override;
   double framerate() override;
+  double currentTime() override;
   void seek(double timestamp) override;
   float getRotationInDegrees() override;
   SkISize getSize() override;
   void play() override;
   void pause() override;
   void setVolume(float volume) override;
+  void setLooping(bool looping) override;
+  bool isPlaying() override;
 };
 
 } // namespace RNSkia

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

@@ -41,6 +41,12 @@ public class RNSkVideo {
     private int height = 0;
 
     private boolean isPlaying = false;
+    private boolean isLooping = false;
+    private boolean isPrepared = false;
+    private boolean playWhenReady = false;
+    private HardwareBuffer lastBuffer = null;
+    private boolean pendingSeek = false;
+    private double lastFrameTimeMs = 0;
 
     RNSkVideo(Context context, String localUri) {
         this.uri = Uri.parse(localUri);
@@ -65,8 +71,21 @@ public class RNSkVideo {
             mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
             mediaPlayer.setOnPreparedListener(mp -> {
                 durationMs = mp.getDuration();
-                mp.start();
-                isPlaying = true;
+                isPrepared = true;
+                // Apply looping setting
+                mp.setLooping(isLooping);
+                // Start playing if play() was called before preparation completed
+                if (playWhenReady) {
+                    mp.start();
+                    isPlaying = true;
+                    playWhenReady = false;
+                }
+            });
+            // Note: When setLooping(true) is used, this listener won't fire as
+            // MediaPlayer handles looping automatically. This only handles the
+            // non-looping case to update playback state.
+            mediaPlayer.setOnCompletionListener(mp -> {
+                isPlaying = false;
             });
             mediaPlayer.prepareAsync();
 
@@ -125,6 +144,12 @@ public class RNSkVideo {
 
     @DoNotStrip
     public HardwareBuffer nextImage() {
+        // If paused and not seeking, return cached buffer
+        if (!isPlaying && !pendingSeek && lastBuffer != null) {
+            return lastBuffer;
+        }
+
+        // Decode new frame if needed
         if (!decoderOutputAvailable()) {
             decodeFrame();
         }
@@ -133,37 +158,37 @@ public class RNSkVideo {
         if (image != null) {
             HardwareBuffer hardwareBuffer = image.getHardwareBuffer();
             image.close();  // Make sure to close the Image to free up the buffer
+            // Cache the buffer
+            lastBuffer = hardwareBuffer;
+            // Clear pending seek flag after getting frame
+            if (pendingSeek) {
+                pendingSeek = false;
+            }
             return hardwareBuffer;
         }
-        return null;
+        // Return cached buffer if no new frame available
+        return lastBuffer;
     }
 
     @DoNotStrip
     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) {
+        if (mediaPlayer != null && isPrepared) {
             int timestampMs = (int) timestamp; // Convert to milliseconds
             mediaPlayer.seekTo(timestampMs, MediaPlayer.SEEK_CLOSEST);
         }
 
-        // Flush the codec to reset internal state and buffers
+        // Flush the codec to reset internal state and prepare for new position
         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;
-                }
-            }
         }
+
+        // Signal that we need to decode a new frame (for seek while paused)
+        pendingSeek = true;
+        // Decode a frame immediately so it's ready
+        decodeFrame();
     }
 
     @DoNotStrip
@@ -216,6 +241,8 @@ public class RNSkVideo {
 
         int outputBufferId = decoder.dequeueOutputBuffer(info, timeoutUs);
         if (outputBufferId >= 0) {
+            // Store the frame's presentation timestamp for accurate time reporting
+            lastFrameTimeMs = info.presentationTimeUs / 1000.0;
             // If we have a valid buffer, release it to make it available to the ImageReader's surface
             decoder.releaseOutputBuffer(outputBufferId, true);
 
@@ -227,14 +254,21 @@ public class RNSkVideo {
 
     @DoNotStrip
     public void play() {
-        if (mediaPlayer != null && !isPlaying) {
+        if (mediaPlayer == null || isPlaying) {
+            return;
+        }
+        if (isPrepared) {
             mediaPlayer.start();
             isPlaying = true;
+        } else {
+            // Queue the play request for when preparation completes
+            playWhenReady = true;
         }
     }
 
     @DoNotStrip
     public void pause() {
+        playWhenReady = false;
         if (mediaPlayer != null && isPlaying) {
             mediaPlayer.pause();
             isPlaying = false;
@@ -248,7 +282,27 @@ public class RNSkVideo {
         }
     }
 
+    @DoNotStrip
+    public double getCurrentTime() {
+        // Return the timestamp of the last decoded frame for accurate synchronization
+        return lastFrameTimeMs;
+    }
+
+    @DoNotStrip
+    public void setLooping(boolean looping) {
+        isLooping = looping;
+        if (mediaPlayer != null && isPrepared) {
+            mediaPlayer.setLooping(looping);
+        }
+    }
+
+    @DoNotStrip
+    public boolean getIsPlaying() {
+        return isPlaying;
+    }
+
     public void release() {
+        lastBuffer = null;
         if (mediaPlayer != null) {
             mediaPlayer.release();
             mediaPlayer = null;

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

@@ -18,7 +18,7 @@ public abstract class SkiaBaseView extends ReactViewGroup implements SkiaViewAPI
 
     public SkiaBaseView(Context context) {
         super(context);
-        mView = new SkiaSurfaceView(context, this, debug);
+        mView = new SkiaTextureView(context, this, debug);
         addView(mView);
     }
 
@@ -33,15 +33,15 @@ public abstract class SkiaBaseView extends ReactViewGroup implements SkiaViewAPI
     }
 
     public void setOpaque(boolean value) {
-      //  if (value && mView instanceof SkiaTextureView) {
+        if (value && mView instanceof SkiaTextureView) {
             removeView(mView);
             mView = new SkiaSurfaceView(getContext(), this, debug);
             addView(mView);
-//        } else if (!value && mView instanceof SkiaSurfaceView) {
-//            removeView(mView);
-//            mView = new SkiaTextureView(getContext(), this, debug);
-//            addView(mView);
-//        }
+        } else if (!value && mView instanceof SkiaSurfaceView) {
+            removeView(mView);
+            mView = new SkiaTextureView(getContext(), this, debug);
+            addView(mView);
+        }
     }
 
     void dropInstance() {

package/apple/RNSkAppleVideo.h

@@ -24,6 +24,13 @@ private:
   AVPlayer *_player = nullptr;
   AVPlayerItem *_playerItem = nullptr;
   AVPlayerItemVideoOutput *_videoOutput = nullptr;
+#if !TARGET_OS_OSX
+  CADisplayLink *_displayLink = nullptr;
+  id _displayLinkTarget = nullptr;
+#else
+  CVDisplayLinkRef _displayLink = nullptr;
+  bool _displayLinkRunning = false;
+#endif
   RNSkPlatformContext *_context;
   double _duration = 0;
   double _framerate = 0;
@@ -31,21 +38,41 @@ private:
   float _videoHeight = 0;
   CGAffineTransform _preferredTransform;
   bool _isPlaying = false;
+  bool _isLooping = false;
+  bool _waitingForFrame = false;
+  id _endObserver = nullptr;
+  sk_sp<SkImage> _lastImage = nullptr;
+  double _lastFrameTimeMs = 0;
   void setupPlayer();
+  void setupDisplayLink();
   NSDictionary *getOutputSettings();
+#if TARGET_OS_OSX
+  void startDisplayLink();
+  void stopDisplayLink();
+  static CVReturn displayLinkCallback(CVDisplayLinkRef displayLink,
+                                      const CVTimeStamp *now,
+                                      const CVTimeStamp *outputTime,
+                                      CVOptionFlags flagsIn,
+                                      CVOptionFlags *flagsOut, void *context);
+#endif
 
 public:
+  void onDisplayLink();
+  void expectFrame();
   RNSkAppleVideo(std::string url, RNSkPlatformContext *context);
   ~RNSkAppleVideo();
   sk_sp<SkImage> nextImage(double *timeStamp = nullptr) override;
   double duration() override;
   double framerate() override;
+  double currentTime() override;
   void seek(double timestamp) override;
-  void play();
-  void pause();
+  void play() override;
+  void pause() override;
   float getRotationInDegrees() override;
   SkISize getSize() override;
-  void setVolume(float volume);
+  void setVolume(float volume) override;
+  void setLooping(bool looping) override;
+  bool isPlaying() override;
 };
 
 } // namespace RNSkia

package/apple/RNSkAppleVideo.mm

@@ -12,14 +12,51 @@
 #include <AVFoundation/AVFoundation.h>
 #include <CoreVideo/CoreVideo.h>
 
+#if !TARGET_OS_OSX
+// Helper class to bridge CADisplayLink callback to C++
+@interface RNSkDisplayLinkTarget : NSObject
+@property(nonatomic, assign) RNSkia::RNSkAppleVideo *video;
+- (void)displayLinkFired:(CADisplayLink *)sender;
+@end
+
+@implementation RNSkDisplayLinkTarget
+- (void)displayLinkFired:(CADisplayLink *)sender {
+  if (_video) {
+    _video->onDisplayLink();
+  }
+}
+@end
+#endif
+
 namespace RNSkia {
 
 RNSkAppleVideo::RNSkAppleVideo(std::string url, RNSkPlatformContext *context)
     : _url(std::move(url)), _context(context) {
   setupPlayer();
+  setupDisplayLink();
 }
 
 RNSkAppleVideo::~RNSkAppleVideo() {
+#if !TARGET_OS_OSX
+  if (_displayLink) {
+    [_displayLink invalidate];
+    _displayLink = nullptr;
+  }
+  if (_displayLinkTarget) {
+    [_displayLinkTarget setVideo:nullptr];
+    _displayLinkTarget = nullptr;
+  }
+#else
+  if (_displayLink) {
+    CVDisplayLinkStop(_displayLink);
+    CVDisplayLinkRelease(_displayLink);
+    _displayLink = nullptr;
+  }
+#endif
+  if (_endObserver) {
+    [[NSNotificationCenter defaultCenter] removeObserver:_endObserver];
+    _endObserver = nullptr;
+  }
   if (_player) {
     [_player pause];
   }
@@ -30,6 +67,7 @@ void RNSkAppleVideo::setupPlayer() {
   AVPlayerItem *playerItem = [AVPlayerItem playerItemWithURL:videoURL];
   _player = [AVPlayer playerWithPlayerItem:playerItem];
   _playerItem = playerItem;
+  _player.actionAtItemEnd = AVPlayerActionAtItemEndNone;
 
   NSDictionary *outputSettings = getOutputSettings();
   _videoOutput =
@@ -50,27 +88,118 @@ void RNSkAppleVideo::setupPlayer() {
     _videoWidth = videoSize.width;
     _videoHeight = videoSize.height;
   }
-  play();
+
+  // Set up end-of-playback observer
+  __weak AVPlayer *weakPlayer = _player;
+  _endObserver = [[NSNotificationCenter defaultCenter]
+      addObserverForName:AVPlayerItemDidPlayToEndTimeNotification
+                  object:playerItem
+                   queue:[NSOperationQueue mainQueue]
+              usingBlock:^(NSNotification *note) {
+                if (_isLooping) {
+                  [weakPlayer seekToTime:kCMTimeZero
+                         toleranceBefore:kCMTimeZero
+                          toleranceAfter:kCMTimeZero
+                       completionHandler:nil];
+                } else {
+                  _isPlaying = false;
+                }
+              }];
 }
 
-sk_sp<SkImage> RNSkAppleVideo::nextImage(double *timeStamp) {
-  CMTime currentTime = [_player currentTime];
-  CVPixelBufferRef pixelBuffer =
-      [_videoOutput copyPixelBufferForItemTime:currentTime
-                            itemTimeForDisplay:nullptr];
-  if (!pixelBuffer) {
-    NSLog(@"No pixel buffer.");
-    return nullptr;
+void RNSkAppleVideo::setupDisplayLink() {
+#if !TARGET_OS_OSX
+  _displayLinkTarget = [[RNSkDisplayLinkTarget alloc] init];
+  [_displayLinkTarget setVideo:this];
+
+  _displayLink =
+      [CADisplayLink displayLinkWithTarget:_displayLinkTarget
+                                  selector:@selector(displayLinkFired:)];
+  [_displayLink addToRunLoop:[NSRunLoop mainRunLoop]
+                     forMode:NSRunLoopCommonModes];
+  _displayLink.paused = YES; // Start paused, will unpause when play() is called
+#else
+  // Create CVDisplayLink for macOS
+  CVDisplayLinkCreateWithActiveCGDisplays(&_displayLink);
+  CVDisplayLinkSetOutputCallback(_displayLink, &displayLinkCallback, this);
+  _displayLinkRunning = false;
+#endif
+}
+
+void RNSkAppleVideo::onDisplayLink() {
+  CMTime outputItemTime =
+      [_videoOutput itemTimeForHostTime:CACurrentMediaTime()];
+
+  if ([_videoOutput hasNewPixelBufferForItemTime:outputItemTime]) {
+    CMTime actualItemTime = kCMTimeZero;
+    CVPixelBufferRef pixelBuffer =
+        [_videoOutput copyPixelBufferForItemTime:outputItemTime
+                              itemTimeForDisplay:&actualItemTime];
+    if (pixelBuffer) {
+      _lastImage = _context->makeImageFromNativeBuffer((void *)pixelBuffer);
+      _lastFrameTimeMs = CMTimeGetSeconds(actualItemTime) * 1000;
+      CVPixelBufferRelease(pixelBuffer);
+
+      if (_waitingForFrame) {
+        _waitingForFrame = false;
+        // If paused and we got the frame we were waiting for, pause the display
+        // link
+        if (!_isPlaying) {
+#if !TARGET_OS_OSX
+          _displayLink.paused = YES;
+#else
+          stopDisplayLink();
+#endif
+        }
+      }
+    }
   }
+}
 
-  auto skImage = _context->makeImageFromNativeBuffer((void *)pixelBuffer);
+void RNSkAppleVideo::expectFrame() {
+  _waitingForFrame = true;
+#if !TARGET_OS_OSX
+  _displayLink.paused = NO;
+#else
+  startDisplayLink();
+#endif
+}
 
-  if (timeStamp) {
-    *timeStamp = CMTimeGetSeconds(currentTime);
+#if TARGET_OS_OSX
+CVReturn RNSkAppleVideo::displayLinkCallback(CVDisplayLinkRef displayLink,
+                                             const CVTimeStamp *now,
+                                             const CVTimeStamp *outputTime,
+                                             CVOptionFlags flagsIn,
+                                             CVOptionFlags *flagsOut,
+                                             void *context) {
+  RNSkAppleVideo *video = static_cast<RNSkAppleVideo *>(context);
+  // Dispatch to main thread since video operations need to happen there
+  dispatch_async(dispatch_get_main_queue(), ^{
+    video->onDisplayLink();
+  });
+  return kCVReturnSuccess;
+}
+
+void RNSkAppleVideo::startDisplayLink() {
+  if (_displayLink && !_displayLinkRunning) {
+    CVDisplayLinkStart(_displayLink);
+    _displayLinkRunning = true;
   }
+}
+
+void RNSkAppleVideo::stopDisplayLink() {
+  if (_displayLink && _displayLinkRunning) {
+    CVDisplayLinkStop(_displayLink);
+    _displayLinkRunning = false;
+  }
+}
+#endif
 
-  CVPixelBufferRelease(pixelBuffer);
-  return skImage;
+sk_sp<SkImage> RNSkAppleVideo::nextImage(double *timeStamp) {
+  if (timeStamp) {
+    *timeStamp = CMTimeGetSeconds([_player currentTime]);
+  }
+  return _lastImage;
 }
 
 NSDictionary *RNSkAppleVideo::getOutputSettings() {
@@ -83,7 +212,6 @@ NSDictionary *RNSkAppleVideo::getOutputSettings() {
 float RNSkAppleVideo::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;
@@ -100,12 +228,16 @@ float RNSkAppleVideo::getRotationInDegrees() {
 void RNSkAppleVideo::seek(double timeInMilliseconds) {
   CMTime seekTime =
       CMTimeMakeWithSeconds(timeInMilliseconds / 1000.0, NSEC_PER_SEC);
+  CMTime previousTime = [_player currentTime];
+
   [_player seekToTime:seekTime
         toleranceBefore:kCMTimeZero
          toleranceAfter:kCMTimeZero
       completionHandler:^(BOOL finished) {
-        if (!finished) {
-          NSLog(@"Seek failed or was interrupted.");
+        if (finished &&
+            CMTimeCompare([_player currentTime], previousTime) != 0) {
+          // Ensure a frame is extracted after seek, even when paused
+          expectFrame();
         }
       }];
 }
@@ -114,6 +246,11 @@ void RNSkAppleVideo::play() {
   if (_player) {
     [_player play];
     _isPlaying = true;
+#if !TARGET_OS_OSX
+    _displayLink.paused = NO;
+#else
+    startDisplayLink();
+#endif
   }
 }
 
@@ -121,6 +258,14 @@ void RNSkAppleVideo::pause() {
   if (_player) {
     [_player pause];
     _isPlaying = false;
+    // Only pause display link if not waiting for a frame
+    if (!_waitingForFrame) {
+#if !TARGET_OS_OSX
+      _displayLink.paused = YES;
+#else
+      stopDisplayLink();
+#endif
+    }
   }
 }
 
@@ -128,10 +273,20 @@ double RNSkAppleVideo::duration() { return _duration; }
 
 double RNSkAppleVideo::framerate() { return _framerate; }
 
+double RNSkAppleVideo::currentTime() {
+  // Return the timestamp of the last captured frame for accurate
+  // synchronization
+  return _lastFrameTimeMs;
+}
+
 SkISize RNSkAppleVideo::getSize() {
   return SkISize::Make(_videoWidth, _videoHeight);
 }
 
 void RNSkAppleVideo::setVolume(float volume) { _player.volume = volume; }
 
+void RNSkAppleVideo::setLooping(bool looping) { _isLooping = looping; }
+
+bool RNSkAppleVideo::isPlaying() { return _isPlaying; }
+
 } // namespace RNSkia

package/cpp/api/JsiSkApi.h

@@ -147,30 +147,32 @@ public:
 
     installFunction("Recorder", JsiRecorder::createCtor(context));
 
-    installFunction("hasDevice", JSI_HOST_FUNCTION_LAMBDA {
+    installFunction(
+        "hasDevice", JSI_HOST_FUNCTION_LAMBDA {
 #ifdef SK_GRAPHITE
-      return jsi::Value(true);
+          return jsi::Value(true);
 #else
       return jsi::Value(false);
 #endif
-    });
+        });
 
-    installFunction("getDevice", JSI_HOST_FUNCTION_LAMBDA {
+    installFunction(
+        "getDevice", JSI_HOST_FUNCTION_LAMBDA {
 #ifdef SK_GRAPHITE
-      auto &dawnContext = DawnContext::getInstance();
-      auto asyncRunner = rnwgpu::async::AsyncRunner::get(runtime);
-      if (!asyncRunner) {
-        throw jsi::JSError(runtime, "AsyncRunner not initialized");
-      }
-      auto device = std::make_shared<rnwgpu::GPUDevice>(
-          dawnContext.getWGPUDevice(), asyncRunner, "Skia Device");
-      return rnwgpu::GPUDevice::create(runtime, device);
+          auto &dawnContext = DawnContext::getInstance();
+          auto asyncRunner = rnwgpu::async::AsyncRunner::get(runtime);
+          if (!asyncRunner) {
+            throw jsi::JSError(runtime, "AsyncRunner not initialized");
+          }
+          auto device = std::make_shared<rnwgpu::GPUDevice>(
+              dawnContext.getWGPUDevice(), asyncRunner, "Skia Device");
+          return rnwgpu::GPUDevice::create(runtime, device);
 #else
       throw jsi::JSError(runtime,
                          "getDevice() is only available with the Graphite "
                          "backend. Rebuild with SK_GRAPHITE enabled.");
 #endif
-    });
+        });
   }
 };
 } // namespace RNSkia