diff --git a/.changeset/modern-pandas-run.md b/.changeset/modern-pandas-run.md new file mode 100644 index 000000000000..27ac3d8007ea --- /dev/null +++ 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 index 10afdcd3c636..f602400810b2 100644 --- 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 { state = { isPosterMode: false, + loaded: false, }; opacityAnim = new Animated.Value(0); @@ -37,23 +39,33 @@ class NftVideo extends React.PureComponent { }; 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 ( - + { }} 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 index d397c6e8256b..541343a4d8db 100644 --- 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) => { () => ( <>