mirror of
https://github.com/status-im/react-native.git
synced 2025-02-23 06:38:13 +00:00
de759b949e
Summary: Currently, if you load an animated gif using the standard `Image` component, it will not correctly respect the loop count property found in the Netscape App Extension block of the file. The issues are as follows: 1) If the App Extension isn't present, the animated gif loops indefinitely when it should not loop at all. 2) If the App Extension is present, the animated gif loops one less time than it should. The other issue is that once the looping completes, the image doesn't pause at the last frame but instead, loops back to the beginning of the animation e.g. frame 1. The fix does a few things: 1) If there is _no_ App Extension present, the image doesn't loop at all 2) If there _is_ an App Extension present, it loops the correct amount of times. For instance, if the loop count is 1, it means the gif should loop _once_ after it finishes playing, for a total of _two_ total loops. 3) Once the number of loops completes (assuming loop count isn't set to 0 which means infinite), the animation pauses on the last frame. Pull Request resolved: https://github.com/facebook/react-native/pull/21999 Differential Revision: D13287005 Pulled By: hramos fbshipit-source-id: f7210ad40e0e76c9ec454953b8a067569d3feaaa
121 lines
4.3 KiB
Objective-C
121 lines
4.3 KiB
Objective-C
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
#import "RCTGIFImageDecoder.h"
|
|
|
|
#import <ImageIO/ImageIO.h>
|
|
#import <QuartzCore/QuartzCore.h>
|
|
|
|
#import <React/RCTUtils.h>
|
|
|
|
@implementation RCTGIFImageDecoder
|
|
|
|
RCT_EXPORT_MODULE()
|
|
|
|
- (BOOL)canDecodeImageData:(NSData *)imageData
|
|
{
|
|
char header[7] = {};
|
|
[imageData getBytes:header length:6];
|
|
|
|
return !strcmp(header, "GIF87a") || !strcmp(header, "GIF89a");
|
|
}
|
|
|
|
- (RCTImageLoaderCancellationBlock)decodeImageData:(NSData *)imageData
|
|
size:(CGSize)size
|
|
scale:(CGFloat)scale
|
|
resizeMode:(RCTResizeMode)resizeMode
|
|
completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
|
|
{
|
|
CGImageSourceRef imageSource = CGImageSourceCreateWithData((CFDataRef)imageData, NULL);
|
|
NSDictionary<NSString *, id> *properties = (__bridge_transfer NSDictionary *)CGImageSourceCopyProperties(imageSource, NULL);
|
|
NSUInteger loopCount = 0;
|
|
if ([[properties[(id)kCGImagePropertyGIFDictionary] allKeys] containsObject:(id)kCGImagePropertyGIFLoopCount]) {
|
|
loopCount = [properties[(id)kCGImagePropertyGIFDictionary][(id)kCGImagePropertyGIFLoopCount] unsignedIntegerValue];
|
|
if (loopCount == 0) {
|
|
// A loop count of 0 means infinite
|
|
loopCount = HUGE_VALF;
|
|
} else {
|
|
// A loop count of 1 means it should repeat twice, 2 means, thrice, etc.
|
|
loopCount += 1;
|
|
}
|
|
}
|
|
|
|
UIImage *image = nil;
|
|
size_t imageCount = CGImageSourceGetCount(imageSource);
|
|
if (imageCount > 1) {
|
|
|
|
NSTimeInterval duration = 0;
|
|
NSMutableArray<NSNumber *> *delays = [NSMutableArray arrayWithCapacity:imageCount];
|
|
NSMutableArray<id /* CGIMageRef */> *images = [NSMutableArray arrayWithCapacity:imageCount];
|
|
for (size_t i = 0; i < imageCount; i++) {
|
|
|
|
CGImageRef imageRef = CGImageSourceCreateImageAtIndex(imageSource, i, NULL);
|
|
if (!image) {
|
|
image = [UIImage imageWithCGImage:imageRef scale:scale orientation:UIImageOrientationUp];
|
|
}
|
|
|
|
NSDictionary<NSString *, id> *frameProperties = (__bridge_transfer NSDictionary *)CGImageSourceCopyPropertiesAtIndex(imageSource, i, NULL);
|
|
NSDictionary<NSString *, id> *frameGIFProperties = frameProperties[(id)kCGImagePropertyGIFDictionary];
|
|
|
|
const NSTimeInterval kDelayTimeIntervalDefault = 0.1;
|
|
NSNumber *delayTime = frameGIFProperties[(id)kCGImagePropertyGIFUnclampedDelayTime] ?: frameGIFProperties[(id)kCGImagePropertyGIFDelayTime];
|
|
if (delayTime == nil) {
|
|
if (i == 0) {
|
|
delayTime = @(kDelayTimeIntervalDefault);
|
|
} else {
|
|
delayTime = delays[i - 1];
|
|
}
|
|
}
|
|
|
|
const NSTimeInterval kDelayTimeIntervalMinimum = 0.02;
|
|
if (delayTime.floatValue < (float)kDelayTimeIntervalMinimum - FLT_EPSILON) {
|
|
delayTime = @(kDelayTimeIntervalDefault);
|
|
}
|
|
|
|
duration += delayTime.doubleValue;
|
|
delays[i] = delayTime;
|
|
images[i] = (__bridge_transfer id)imageRef;
|
|
}
|
|
CFRelease(imageSource);
|
|
|
|
NSMutableArray<NSNumber *> *keyTimes = [NSMutableArray arrayWithCapacity:delays.count];
|
|
NSTimeInterval runningDuration = 0;
|
|
for (NSNumber *delayNumber in delays) {
|
|
[keyTimes addObject:@(runningDuration / duration)];
|
|
runningDuration += delayNumber.doubleValue;
|
|
}
|
|
|
|
[keyTimes addObject:@1.0];
|
|
|
|
// Create animation
|
|
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];
|
|
animation.calculationMode = kCAAnimationDiscrete;
|
|
animation.repeatCount = loopCount;
|
|
animation.keyTimes = keyTimes;
|
|
animation.values = images;
|
|
animation.duration = duration;
|
|
animation.removedOnCompletion = NO;
|
|
animation.fillMode = kCAFillModeForwards;
|
|
image.reactKeyframeAnimation = animation;
|
|
|
|
} else {
|
|
|
|
// Don't bother creating an animation
|
|
CGImageRef imageRef = CGImageSourceCreateImageAtIndex(imageSource, 0, NULL);
|
|
if (imageRef) {
|
|
image = [UIImage imageWithCGImage:imageRef scale:scale orientation:UIImageOrientationUp];
|
|
CFRelease(imageRef);
|
|
}
|
|
CFRelease(imageSource);
|
|
}
|
|
|
|
completionHandler(nil, image);
|
|
return ^{};
|
|
}
|
|
|
|
@end
|