feat: use transparent background on nft viewer screen (LedgerHQ#4070)

* feat: use transparent background on nft viewer screen * chore: remove redundant style * chore: use prop to set video transparency * chore: remove debug * feat: disable elevation on android
etcswap · Jul 24, 2023 · 0ac4ab5 · 0ac4ab5
1 parent 12c6004
commit 0ac4ab5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/.changeset/modern-pandas-run.md b/.changeset/modern-pandas-run.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+use transparent background on nft viewer screen
diff --git a/apps/ledger-live-mobile/src/components/Nft/NftVideo.tsx b/apps/ledger-live-mobile/src/components/Nft/NftVideo.tsx
@@ -17,11 +17,13 @@ type Props = {
   resizeMode?: VideoProperties["resizeMode"] & ResizeMode;
   colors: Theme["colors"];
   children?: React.ReactNode | null;
+  transparency?: boolean;
 };
 
 class NftVideo extends React.PureComponent<Props> {
   state = {
     isPosterMode: false,
+    loaded: false,
   };
 
   opacityAnim = new Animated.Value(0);
@@ -37,23 +39,33 @@ class NftVideo extends React.PureComponent<Props> {
   };
 
   onError = () => {
-    this.setState({ isPosterMode: true });
+    this.setState({ ...this.state, loaded: true, isPosterMode: true });
     this.startAnimation();
   };
 
   onLoad = (onLoadEvent: OnLoadData) => {
     if (!onLoadEvent?.duration) {
       this.onError();
+    } else {
+      this.setState({ ...this.state, loaded: true });
     }
   };
 
   render() {
-    const { style, src, colors, resizeMode = "cover", srcFallback, children } = this.props;
+    const {
+      style,
+      src,
+      colors,
+      transparency,
+      resizeMode = "cover",
+      srcFallback,
+      children,
+    } = this.props;
     const { isPosterMode } = this.state;
 
     return (
       <View style={[style, styles.root]}>
-        <Skeleton style={styles.skeleton} loading={true} />
+        <Skeleton style={styles.skeleton} loading={!this.state.loaded} />
         <Animated.View
           style={[
             styles.imageContainer,
@@ -82,9 +94,11 @@ class NftVideo extends React.PureComponent<Props> {
                 }}
                 style={[
                   styles.video,
-                  {
-                    backgroundColor: colors.white,
-                  },
+                  !transparency
+                    ? {
+                        backgroundColor: colors.white,
+                      }
+                    : {},
                 ]}
                 resizeMode={resizeMode}
                 source={{

diff --git a/apps/ledger-live-mobile/src/components/Nft/NftViewer.tsx b/apps/ledger-live-mobile/src/components/Nft/NftViewer.tsx
@@ -291,6 +291,7 @@ const NftViewer = ({ route }: Props) => {
     () => (
       <>
         <NftMedia
+          transparency={true}
           resizeMode="contain"
           style={styles.image}
           metadata={nftMetadata}
@@ -523,9 +524,6 @@ const styles = StyleSheet.create({
   },
   imageContainer: {
     ...Platform.select({
-      android: {
-        elevation: 1,
-      },
       ios: {
         shadowOpacity: 0.2,
         shadowRadius: 14,