octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-01-21 05:20:10 +01:00
Code Issues Projects Releases Wiki Activity

Add fade in transition of react-native-fast-image

Browse Source 
Based on https://github.com/DylanVann/react-native-fast-image/pull/958
This commit is contained in:
xmflsct 2023-01-31 15:15:15 +01:00
parent 624c1f172c
commit c21e99909d
5 changed files with 350 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

340
.yarn/patches/react-native-fast-image-npm-8.6.3-03ee2d23c0.patch
View File

@ -21,3 +21,343 @@ index 5b21cd59c40a5754f5d19c77e2a0eb0229925911..19d82f826e88125c5e6d87ee7c348fac
annotationProcessor "com.github.bumptech.glide:compiler:${glideVersion}"
+ implementation 'com.github.penfeizhou.android.animation:glide-plugin:2.12.0'
}
diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageEnterTransition.java b/android/src/main/java/com/dylanvann/fastimage/FastImageEnterTransition.java
new file mode 100644
index 0000000000000000000000000000000000000000..55e3b4e0d463654f62d942ba05c2a5e51ae9d6d7
--- /dev/null
+++ b/android/src/main/java/com/dylanvann/fastimage/FastImageEnterTransition.java
@@ -0,0 +1,6 @@
+package com.dylanvann.fastimage;
+
+public enum FastImageEnterTransition {
+ TRANSITION_NONE,
+ FADE_IN
+}
diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageTransitions.java b/android/src/main/java/com/dylanvann/fastimage/FastImageTransitions.java
new file mode 100644
index 0000000000000000000000000000000000000000..d764cc4b8d110f087120a4f0dc5d986754806dec
--- /dev/null
+++ b/android/src/main/java/com/dylanvann/fastimage/FastImageTransitions.java
@@ -0,0 +1,20 @@
+package com.dylanvann.fastimage;
+
+import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions;
+import com.bumptech.glide.TransitionOptions;
+import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
+import android.view.animation.DecelerateInterpolator;
+
+public class FastImageTransitions {
+ static final DecelerateInterpolator mInterpolator = new DecelerateInterpolator();
+
+ public static TransitionOptions getEnterTransition(FastImageEnterTransition transition, int duration) {
+ switch (transition) {
+ case FADE_IN:
+ return DrawableTransitionOptions.withCrossFade(duration);
+
+ default:
+ throw new JSApplicationIllegalArgumentException("FastImage, invalid enterTransition argument");
+ }
+ }
+}
\ No newline at end of file
diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java b/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java
index 86ca00d018d7ded0edff733373d80976c8dbb961..e6220f57b38a3fe3ae9d5a75228f791e0ec978bb 100644
--- a/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java
+++ b/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java
@@ -50,6 +50,12 @@ class FastImageViewConverter {
put("center", ScaleType.CENTER_INSIDE);
}};
+ private static final Map<String, FastImageEnterTransition> FAST_IMAGE_ENTER_TRANSITION_MAP =
+ new HashMap<String, FastImageEnterTransition>() {{
+ put("none", FastImageEnterTransition.TRANSITION_NONE);
+ put("fadeIn", FastImageEnterTransition.FADE_IN);
+ }};
+
// Resolve the source uri to a file path that android understands.
static @Nullable
FastImageSource getImageSource(Context context, @Nullable ReadableMap source) {
@@ -125,6 +131,10 @@ class FastImageViewConverter {
return getValueFromSource("cache", "immutable", FAST_IMAGE_CACHE_CONTROL_MAP, source);
}
+ static FastImageEnterTransition getEnterTransition(String propValue) {
+ return getValue("enterTransition", "none", FAST_IMAGE_ENTER_TRANSITION_MAP, propValue);
+ }
+
private static Priority getPriority(ReadableMap source) {
return getValueFromSource("priority", "normal", FAST_IMAGE_PRIORITY_MAP, source);
}
diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java b/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java
index c7a795471c8f8b48163c778836406bc5ead75dab..53b481547b44224e7791a8d3f39815c9c9a4be59 100644
--- a/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java
+++ b/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java
@@ -83,6 +83,17 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
view.setScaleType(scaleType);
}
+ @ReactProp(name = "enterTransition")
+ public void setEnterTransition(FastImageViewWithUrl view, String enterTransition) {
+ final FastImageEnterTransition transition = FastImageViewConverter.getEnterTransition(enterTransition);
+ view.setEnterTransition(transition);
+ }
+
+ @ReactProp(name = "transitionDuration")
+ public void setTransitionDuration(FastImageViewWithUrl view, int transitionDuration) {
+ view.setTransitionDuration(transitionDuration);
+ }
+
@Override
public void onDropViewInstance(@NonNull FastImageViewWithUrl view) {
// This will cancel existing requests.
diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java b/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java
index 34fcf898d17d82fd52375e9028b71ad815b9b15b..fd57ac68de093d2a8ee53aeede45328c8d52aa39 100644
--- a/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java
+++ b/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java
@@ -30,6 +30,8 @@ class FastImageViewWithUrl extends AppCompatImageView {
private boolean mNeedsReload = false;
private ReadableMap mSource = null;
private Drawable mDefaultSource = null;
+ private FastImageEnterTransition mEnterTransition = FastImageEnterTransition.TRANSITION_NONE;
+ private int mTransitionDuration = 350;
public GlideUrl glideUrl;
@@ -47,6 +49,14 @@ class FastImageViewWithUrl extends AppCompatImageView {
mDefaultSource = source;
}
+ public void setEnterTransition(@Nullable FastImageEnterTransition transition) {
+ mEnterTransition = transition;
+ }
+
+ public void setTransitionDuration(int duration) {
+ mTransitionDuration = duration == 0 ? 350 : duration;
+ }
+
private boolean isNullOrEmpty(final String url) {
return url == null || url.trim().isEmpty();
}
@@ -147,6 +157,10 @@ class FastImageViewWithUrl extends AppCompatImageView {
if (key != null)
builder.listener(new FastImageRequestListener(key));
+ if (mEnterTransition != FastImageEnterTransition.TRANSITION_NONE) {
+ builder.transition(FastImageTransitions.getEnterTransition(mEnterTransition, mTransitionDuration));
+ }
+
builder.into(this);
}
}
diff --git a/dist/index.cjs.js b/dist/index.cjs.js
index 2df6a29769978d8d947dfb50b422e1f56bd97fb6..f3904e20edac5f19cc26f41a4ff02eecd73ac627 100644
--- a/dist/index.cjs.js
+++ b/dist/index.cjs.js
@@ -9,6 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+const enterTransition = {
+ none: 'none',
+ fadeIn: 'fadeIn'
+}
const resizeMode = {
contain: 'contain',
cover: 'cover',
@@ -115,6 +119,7 @@ const FastImageComponent = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PU
}, props)));
FastImageComponent.displayName = 'FastImage';
const FastImage = FastImageComponent;
+FastImage.enterTransition = enterTransition
FastImage.resizeMode = resizeMode;
FastImage.cacheControl = cacheControl;
FastImage.priority = priority;
diff --git a/dist/index.d.ts b/dist/index.d.ts
index 5abb7c98b767cd0709b53f5ab2dd50c752a9377b..2da22817e3136673d40a177ae8c9fc2209f143d8 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -1,5 +1,10 @@
import React from 'react';
import { FlexStyle, LayoutChangeEvent, ShadowStyleIOS, StyleProp, TransformsStyle, ImageRequireSource, AccessibilityProps, ViewProps, ColorValue } from 'react-native';
+export declare type EnterTransition = 'none' | 'fadeIn';
+declare const enterTransition: {
+ readonly none: "none";
+ readonly fadeIn: "fadeIn";
+};
export declare type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center';
declare const resizeMode: {
readonly contain: "contain";
@@ -57,6 +62,16 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
defaultSource?: ImageRequireSource;
resizeMode?: ResizeMode;
fallback?: boolean;
+ /**
+ * Transition durations.
+ * @default none
+ */
+ enterTransition?: EnterTransition
+ /**
+ * Enter transition duration in ms.
+ * @default 500ms
+ */
+ transitionDuration?: number
onLoadStart?(): void;
onProgress?(event: OnProgressEvent): void;
onLoad?(event: OnLoadEvent): void;
@@ -91,6 +106,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
children?: React.ReactNode;
}
export interface FastImageStaticProperties {
+ enterTransition: typeof enterTransition;
resizeMode: typeof resizeMode;
priority: typeof priority;
cacheControl: typeof cacheControl;
diff --git a/dist/index.js b/dist/index.js
index 58e0308bd44836aad3e4979b5c1151083956c295..5853b3b2fd05c91be8c70819fe6fc45606f26f8d 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -2,6 +2,10 @@ import _extends from '@babel/runtime/helpers/extends';
import React, { forwardRef, memo } from 'react';
import { NativeModules, StyleSheet, requireNativeComponent, Image, View, Platform } from 'react-native';
+const enterTransition = {
+ none: 'none',
+ fadeIn: 'fadeIn'
+}
const resizeMode = {
contain: 'contain',
cover: 'cover',
@@ -57,6 +61,8 @@ function FastImageBase({
children,
// eslint-disable-next-line no-shadow
resizeMode = 'cover',
+ enterTransition = 'none',
+ transitionDuration = 350,
forwardedRef,
...props
}) {
@@ -79,7 +85,9 @@ function FastImageBase({
onLoad: onLoad,
onError: onError,
onLoadEnd: onLoadEnd,
- resizeMode: resizeMode
+ resizeMode: resizeMode,
+ enterTransition: enterTransition,
+ transitionDuration: transitionDuration
})), children);
}
@@ -98,7 +106,9 @@ function FastImageBase({
onFastImageLoad: onLoad,
onFastImageError: onError,
onFastImageLoadEnd: onLoadEnd,
- resizeMode: resizeMode
+ resizeMode: resizeMode,
+ enterTransition: enterTransition,
+ transitionDuration: transitionDuration
})), children);
}
@@ -108,6 +118,7 @@ const FastImageComponent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/
}, props)));
FastImageComponent.displayName = 'FastImage';
const FastImage = FastImageComponent;
+FastImage.enterTransition = enterTransition
FastImage.resizeMode = resizeMode;
FastImage.cacheControl = cacheControl;
FastImage.priority = priority;
diff --git a/ios/FastImage/FFFastImageView.h b/ios/FastImage/FFFastImageView.h
index e52fca79882ad2a678487a46b2fe158427e06f3a..6c9c41b0b1a3c967a3715a24bb692447b76ef365 100644
--- a/ios/FastImage/FFFastImageView.h
+++ b/ios/FastImage/FFFastImageView.h
@@ -7,6 +7,7 @@
#import <React/RCTResizeMode.h>
#import "FFFastImageSource.h"
+#import "FFFastImageViewManager.h"
@interface FFFastImageView : SDAnimatedImageView
@@ -16,6 +17,8 @@
@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoad;
@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadEnd;
@property (nonatomic, assign) RCTResizeMode resizeMode;
+@property (nonatomic, assign) FFFEnterTransition enterTransition;
+@property (nonatomic, assign) NSTimeInterval transitionDuration;
@property (nonatomic, strong) FFFastImageSource *source;
@property (nonatomic, strong) UIImage *defaultSource;
@property (nonatomic, strong) UIColor *imageColor;
diff --git a/ios/FastImage/FFFastImageView.m b/ios/FastImage/FFFastImageView.m
index f7100815e652539b29b1fa70ff1477c5f5db08dc..ecb79eafe566fe52090adada3cdf16eb10a67513 100644
--- a/ios/FastImage/FFFastImageView.m
+++ b/ios/FastImage/FFFastImageView.m
@@ -71,6 +71,18 @@ - (void) setImageColor: (UIColor*)imageColor {
}
}
+- (void) setTransitionDuration: (NSTimeInterval)transitionDuration {
+ self.sd_imageTransition.duration = transitionDuration;
+}
+
+- (void) setEnterTransition: (FFFEnterTransition)enterTransition {
+ switch (enterTransition) {
+ case FFFFadeIn:
+ self.sd_imageTransition = SDWebImageTransition.fadeTransition;
+ break;
+ }
+}
+
- (UIImage*) makeImage: (UIImage*)image withTint: (UIColor*)color {
UIImage* newImage = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
UIGraphicsBeginImageContextWithOptions(image.size, NO, newImage.scale);
diff --git a/ios/FastImage/FFFastImageViewManager.h b/ios/FastImage/FFFastImageViewManager.h
index 8ba6020e2c6e5757ed778d00e3f43a6ff4c1d50a..a269669301ea00ef3c2714123d17e822094635d6 100644
--- a/ios/FastImage/FFFastImageViewManager.h
+++ b/ios/FastImage/FFFastImageViewManager.h
@@ -1,5 +1,10 @@
#import <React/RCTViewManager.h>
+typedef NS_ENUM(NSInteger, FFFEnterTransition) {
+ FFFTransitionNone,
+ FFFFadeIn,
+};
+
@interface FFFastImageViewManager : RCTViewManager
@end
diff --git a/ios/FastImage/FFFastImageViewManager.m b/ios/FastImage/FFFastImageViewManager.m
index 84ca94e26e546d4d139dabca6c3efd0a890eda63..2184bac31f0d547e6119356bb4fc7931be87446d 100644
--- a/ios/FastImage/FFFastImageViewManager.m
+++ b/ios/FastImage/FFFastImageViewManager.m
@@ -13,6 +13,8 @@ - (FFFastImageView*)view {
}
RCT_EXPORT_VIEW_PROPERTY(source, FFFastImageSource)
+RCT_EXPORT_VIEW_PROPERTY(enterTransition, FFFEnterTransition)
+RCT_EXPORT_VIEW_PROPERTY(transitionDuration, NSTimeInterval)
RCT_EXPORT_VIEW_PROPERTY(defaultSource, UIImage)
RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode)
RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadStart, RCTDirectEventBlock)
diff --git a/ios/FastImage/RCTConvert+FFFastImage.m b/ios/FastImage/RCTConvert+FFFastImage.m
index 43f8922157655a7497f56a3909ef6b2a886f07d8..0705f8e05f44f3053e7239fcc9a30d986e7aaab7 100644
--- a/ios/FastImage/RCTConvert+FFFastImage.m
+++ b/ios/FastImage/RCTConvert+FFFastImage.m
@@ -1,5 +1,6 @@
#import "RCTConvert+FFFastImage.h"
#import "FFFastImageSource.h"
+#import "FFFastImageViewManager.h"
@implementation RCTConvert (FFFastImage)
@@ -15,6 +16,11 @@ @implementation RCTConvert (FFFastImage)
@"cacheOnly": @(FFFCacheControlCacheOnly),
}), FFFCacheControlImmutable, integerValue);
+RCT_ENUM_CONVERTER(FFFEnterTransition, (@{
+ @"none": @(FFFTransitionNone),
+ @"fadeIn": @(FFFFadeIn),
+ }), FFFTransitionNone, integerValue);
+
+ (FFFastImageSource *)FFFastImageSource:(id)json {
if (!json) {
return nil;

2
src/components/Emojis/List.tsx
View File

@ -130,6 +130,8 @@ const EmojisList = () => {
style={{ padding: StyleConstants.Spacing.S }}
>
<FastImage
enterTransition='fadeIn'
transitionDuration={100}
accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
emoji: emoji.shortcode
})}

4
src/components/GracefullyImage.tsx
View File

@ -94,11 +94,15 @@ const GracefullyImage = ({
{uri.preview && !imageLoaded ? (
<FastImage
source={connectMedia({ uri: uri.preview })}
enterTransition='fadeIn'
transitionDuration={100}
style={[styles.placeholder, { backgroundColor: colors.shimmerDefault }]}
/>
) : null}
<FastImage
source={connectMedia(source)}
enterTransition='fadeIn'
transitionDuration={100}
style={[{ flex: 1 }, imageStyle]}
onLoad={() => {
setImageLoaded(true)

2
src/screens/Compose/Root/Footer/Attachments.tsx
View File

@ -105,6 +105,8 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
}}
>
<FastImage
enterTransition='fadeIn'
transitionDuration={100}
style={{ width: '100%', height: '100%' }}
source={
item.local?.thumbnail

4
yarn.lock
View File

@ -9653,11 +9653,11 @@ __metadata:
"react-native-fast-image@patch:react-native-fast-image@npm%3A8.6.3#./.yarn/patches/react-native-fast-image-npm-8.6.3-03ee2d23c0.patch::locator=tooot%40workspace%3A.":
version: 8.6.3
resolution: "react-native-fast-image@patch:react-native-fast-image@npm%3A8.6.3#./.yarn/patches/react-native-fast-image-npm-8.6.3-03ee2d23c0.patch::version=8.6.3&hash=65bdbb&locator=tooot%40workspace%3A."
resolution: "react-native-fast-image@patch:react-native-fast-image@npm%3A8.6.3#./.yarn/patches/react-native-fast-image-npm-8.6.3-03ee2d23c0.patch::version=8.6.3&hash=1a9a6d&locator=tooot%40workspace%3A."
peerDependencies:
react: ^17 || ^18
react-native: ">=0.60.0"
checksum: 09d7ccebd6075b85fc06d60093edf2611d97a6571b5bcd7d915df0316866a09d3bf9a74960a64aa75ac8901c9840f78b70aac58ff8b6ac627968259151109328
checksum: 4b2c6b2d6fc461f26936ff5033acccf7aef15f9d176ea835d09c87bee83accbb6c2b98a2435ad019a305c0751aa43040c153a6d5735664ace31e64aad0b2bc61
languageName: node
linkType: hard