Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix android composer background shadow not visible when image is attached #19492

Merged
merged 1 commit into from
Apr 8, 2024
Merged

fix android composer background shadow not visible when image is attached #19492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 24 additions & 1 deletion src/js/worklets/chat/messenger/composer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useDerivedValue, withTiming } from 'react-native-reanimated';
import { useDerivedValue, withTiming, withDelay } from 'react-native-reanimated';

export function scrollDownButtonOpacity(chatListScrollY, isComposerFocused, windowHeight) {
return useDerivedValue(function () {
Expand All @@ -24,3 +24,26 @@ export function jumpToButtonPosition(scrollDownButtonOpacity, isComposerFocused)
return withTiming(scrollDownButtonOpacity.value == 1 || isComposerFocused.value ? 35 : 0);
});
}

export function composerContainerOpacity(isComposerFocused, isEmptyInput, emptyOpacity) {
return useDerivedValue(function () {
'worklet';
return isEmptyInput.value && !isComposerFocused.value
? withDelay(300, withTiming(emptyOpacity, { duration: 0 }))
: 1;
});
}

export function blurContainerElevation(isComposerFocused, isEmptyInput) {
return useDerivedValue(function () {
'worklet';
return isEmptyInput.value && !isComposerFocused.value ? 10 : 0;
});
}

export function composerElevation(isComposerFocused, isEmptyInput) {
return useDerivedValue(function () {
'worklet';
return isEmptyInput.value && !isComposerFocused.value ? 0 : 10;
});
}
20 changes: 6 additions & 14 deletions src/status_im/contexts/chat/messenger/composer/actions/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,14 @@
(defn send-message
"Minimize composer, animate-out background overlay, clear input and flush state"
[{:keys [sending-images? sending-links?]}
{:keys [text-value focused? maximized?]}
{:keys [height saved-height last-height opacity background-y container-opacity]}
{:keys [text-value maximized?]}
{:keys [height saved-height last-height opacity background-y]}
window-height
edit]
(reanimated/animate height comp-constants/input-height)
(reanimated/set-shared-value saved-height comp-constants/input-height)
(reanimated/set-shared-value last-height comp-constants/input-height)
(reanimated/animate opacity 0)
(when-not @focused?
(js/setTimeout #(reanimated/animate container-opacity comp-constants/empty-opacity) 300))
(js/setTimeout #(reanimated/set-shared-value background-y
(- window-height))
300)
Expand Down Expand Up @@ -84,8 +82,7 @@

(defn audio-button
[{:keys [record-reset-fn input-ref]}
{:keys [record-permission? recording? gesture-enabled? focused?]}
{:keys [container-opacity]}]
{:keys [record-permission? recording? gesture-enabled? focused?]}]
(let [audio (rf/sub [:chats/sending-audio])]
[rn/view
{:style (style/record-audio-container)
Expand All @@ -97,8 +94,7 @@
:on-start-recording (fn []
(rf/dispatch [:chat.ui/set-recording true])
(reset! recording? true)
(reset! gesture-enabled? false)
(reanimated/animate container-opacity 1))
(reset! gesture-enabled? false))
:audio-file audio
:on-lock (fn []
(rf/dispatch [:chat.ui/set-recording false]))
Expand All @@ -110,9 +106,7 @@
(reset! recording? false)
(reset! gesture-enabled? true)
(rf/dispatch [:chat/send-audio file-path duration])
(if-not @focused?
(reanimated/animate container-opacity
comp-constants/empty-opacity)
(when @focused?
(js/setTimeout #(when @input-ref (.focus ^js @input-ref))
300))
(rf/dispatch [:chat.ui/set-input-audio nil]))
Expand All @@ -121,9 +115,7 @@
(rf/dispatch [:chat.ui/set-recording false])
(reset! recording? false)
(reset! gesture-enabled? true)
(if-not @focused?
(reanimated/animate container-opacity
comp-constants/empty-opacity)
(when @focused?
(js/setTimeout #(when @input-ref
(.focus ^js @input-ref))
300))
Expand Down
23 changes: 8 additions & 15 deletions src/status_im/contexts/chat/messenger/composer/effects.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,19 +70,17 @@

(defn audio-effect
[{:keys [recording? gesture-enabled?]}
{:keys [container-opacity]}
audio]
(when (and audio (not @recording?))
(reset! recording? true)
(reset! gesture-enabled? false)
(reanimated/animate container-opacity 1)))
(reset! gesture-enabled? false)))

(defn empty-effect
[{:keys [focused?]}
{:keys [container-opacity]}
[{:keys [empty-input?]}
{:keys [input-text images link-previews? reply audio]}]
(when (and (not @focused?) (utils/empty-input? input-text images link-previews? reply audio))
(reanimated/animate-delay container-opacity constants/empty-opacity 200)))
(reanimated/set-shared-value
empty-input?
(utils/empty-input? input-text images link-previews? reply audio)))
Comment on lines -84 to +83
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was an animation, and now it is setting a shared value. Are you sure about this change @Parveshdhull ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @OmarBasem, Thank you very much for reviewing PR.

Yes, the empty-input? shared value is supposed to be updated whenever we have input empty without delay. We need animation for container-opacity, which is now handled in composerContainerOpacity in the composer.js file.


(defn component-will-unmount
[{:keys [keyboard-show-listener keyboard-hide-listener keyboard-frame-listener]}]
Expand All @@ -100,8 +98,8 @@
(kb-default-height-effect state)
(background-effect state animations dimensions chat-input)
(link-preview-effect state)
(audio-effect state animations audio)
(empty-effect state animations subscriptions)
(audio-effect state audio)
(empty-effect animations subscriptions)
(kb/add-kb-listeners props state animations dimensions)
#(component-will-unmount props))
[max-height])
Expand Down Expand Up @@ -160,13 +158,10 @@

(defn use-reply
[{:keys [input-ref]}
{:keys [container-opacity]}
{:keys [reply]}
chat-screen-layout-calculations-complete?]
(rn/use-effect
(fn []
(when reply
(reanimated/animate container-opacity 1))
(when (and reply @input-ref (reanimated/get-shared-value chat-screen-layout-calculations-complete?))
(js/setTimeout #(.focus ^js @input-ref) 600)))
[(:message-id reply)]))
Expand Down Expand Up @@ -203,12 +198,10 @@
(defn use-images
[{:keys [sending-images? input-ref]}
{:keys [text-value maximized?]}
{:keys [container-opacity height saved-height]}
{:keys [height saved-height]}
{:keys [images]}]
(rn/use-effect
(fn []
(when images
(reanimated/animate container-opacity 1))
Comment on lines -210 to -211
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the container's opacity being animated on adding images somewhere else? (and have you tested adding images, then existing and entering the chat screen)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, as I mentioned in above comment all animations for container-opacity is handled in composer.js file at one place. Now we don't need to handle this manually.

and have you tested adding images, then existing and entering the chat screen

Double checked just now, working fine. Thank you for reminding.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also checked this case and it looks fine for me

(when (and (not @sending-images?) (seq images) @input-ref)
(.focus ^js @input-ref))
(if-not @maximized?
Expand Down
3 changes: 1 addition & 2 deletions src/status_im/contexts/chat/messenger/composer/gesture.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
(defn drag-gesture
[{:keys [input-ref] :as props}
{:keys [gesture-enabled?] :as state}
{:keys [height saved-height last-height opacity background-y container-opacity] :as animations}
{:keys [height saved-height last-height opacity background-y] :as animations}
{:keys [max-height lines] :as dimensions}
keyboard-shown]
(let [expanding? (atom true)
Expand All @@ -68,7 +68,6 @@
(if-not keyboard-shown
(do ; focus and end
(when (< (oops/oget event "velocityY") constants/velocity-threshold)
(reanimated/set-shared-value container-opacity 1)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also here, is the container's opacity being handled somewhere else on-focus?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes

(reanimated/set-shared-value last-height max-height)
(maximize state animations dimensions))
(when @input-ref
Expand Down
19 changes: 5 additions & 14 deletions src/status_im/contexts/chat/messenger/composer/handlers.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
(defn focus
"Animate to the `saved-height`, display background-overlay if needed, and set cursor position"
[{:keys [input-ref] :as props}
{:keys [text-value focused? lock-selection? saved-cursor-position composer-focused? maximized?]}
{:keys [height saved-height last-height opacity background-y container-opacity]
{:keys [text-value focused? lock-selection? saved-cursor-position maximized?]}
{:keys [height saved-height last-height opacity background-y composer-focused?]
:as animations}
{:keys [max-height] :as dimensions}]
(reanimated/set-shared-value composer-focused? true)
Expand All @@ -27,7 +27,6 @@
new-height (min max-height last-height-value)]
(reanimated/animate height new-height)
(reanimated/set-shared-value saved-height new-height)
(reanimated/animate container-opacity 1)
(when (> last-height-value (* constants/background-threshold max-height))
(reset! maximized? true)
(reanimated/animate opacity 1)
Expand All @@ -42,10 +41,9 @@
(defn blur
"Save the current height, minimize the composer, animate-out the background, and save cursor position"
[{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index
maximized? recording? composer-focused?]}
{:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]}
{:keys [content-height max-height window-height]}
{:keys [images link-previews? reply]}]
maximized? recording?]}
{:keys [height saved-height last-height gradient-opacity opacity background-y composer-focused?]}
{:keys [content-height max-height window-height]}]
(when-not @recording?
(let [lines (utils/calc-lines (- @content-height constants/extra-content-offset))
min-height (utils/get-min-height lines)
Expand All @@ -62,8 +60,6 @@
(reanimated/set-shared-value saved-height min-height)
(reanimated/animate opacity 0)
(js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300)
(when (utils/empty-input? @text-value images link-previews? reply nil)
(reanimated/animate container-opacity constants/empty-opacity))
(reanimated/animate gradient-opacity 0)
(reset! lock-selection? true)
(reset! saved-cursor-position @cursor-position)
Expand Down Expand Up @@ -164,8 +160,3 @@
(let [{:keys [start end text-input-handle]} @selection-event]
(selection/update-selection text-input-handle start end)
(reset! selection-event nil)))))

(defn layout
[event state blur-height]
(when (utils/update-blur-height? event state blur-height)
(reanimated/set-shared-value blur-height (oops/oget event "nativeEvent.layout.height"))))
Comment on lines -167 to -171
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we not need this anymore?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Composer is only blurred when it is collapsed and empty, not sure why we animated blur height in first place. But yes we don't this anymore

23 changes: 11 additions & 12 deletions src/status_im/contexts/chat/messenger/composer/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,12 @@
(def border-top-radius 20)

(defn shadow
[focused? theme]
(if platform/ios?
[theme]
(when platform/ios?
{:shadow-radius 20
:shadow-opacity (colors/theme-colors 0.1 0.7 theme)
:shadow-color colors/neutral-100
:shadow-offset {:width 0 :height (colors/theme-colors -4 -8 theme)}}
{:elevation (if @focused? 10 0)}))
:shadow-offset {:width 0 :height (colors/theme-colors -4 -8 theme)}}))
Comment on lines 12 to +18
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the elevation here not needed? Does the shadow look right with all combinations of being focused and not focused, and having content and not having content?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it looks fine. But just to be double sure, @pavloburykh Please keep an eye on this while testing.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have checked those cases, shadow looks okay to me


(def composer-sheet-and-jump-to-container
{:position :absolute
Expand All @@ -25,17 +24,18 @@
:right 0})

(defn sheet-container
[insets {:keys [focused?]} {:keys [container-opacity]} theme]
[insets {:keys [container-opacity composer-elevation]} theme]
(reanimated/apply-animations-to-style
{:opacity container-opacity}
{:opacity container-opacity
:elevation composer-elevation}
(merge
{:border-top-left-radius border-top-radius
:border-top-right-radius border-top-radius
:padding-horizontal 20
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:z-index 3
:padding-bottom (:bottom insets)}
(shadow focused? theme))))
(shadow theme))))

(def bar-container
{:height constants/bar-container-height
Expand Down Expand Up @@ -95,17 +95,16 @@
:background-color colors/neutral-95-opa-70}))

(defn blur-container
[height focused?]
(reanimated/apply-animations-to-style
{:height height}
[composer-default-height {:keys [blur-container-elevation]}]
[{:elevation blur-container-elevation}
{:position :absolute
:elevation (if-not @focused? 10 0)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we removing the shadow completely on Android?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope, moved to blur-container-elevation

:left 0
:right 0
:bottom 0
:height composer-default-height
:border-top-right-radius border-top-radius
:border-top-left-radius border-top-radius
:overflow :hidden}))
:overflow :hidden}])

(defn blur-view
[theme]
Expand Down
14 changes: 2 additions & 12 deletions src/status_im/contexts/chat/messenger/composer/sub_view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
(ns status-im.contexts.chat.messenger.composer.sub-view
(:require
[quo.core :as quo]
[react-native.blur :as blur]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[status-im.contexts.chat.messenger.composer.style :as style]
Expand All @@ -14,15 +13,6 @@
[rn/view {:style style/bar-container}
[rn/view {:style (style/bar theme)}]])

(defn f-blur-view
[{:keys [layout-height focused? theme]}]
[reanimated/view {:style (style/blur-container layout-height focused?)}
[blur/view (style/blur-view theme)]])

(defn blur-view
[props]
[:f> f-blur-view props])

(defn- f-shell-button
[{:keys [composer-focused?]} chat-list-scroll-y window-height]
(let [customization-color (rf/sub [:profile/customization-color])
Expand Down Expand Up @@ -52,5 +42,5 @@
scroll-down-button-opacity]]))

(defn shell-button
[state chat-list-scroll-y window-height]
[:f> f-shell-button state chat-list-scroll-y window-height])
[shared-values chat-list-scroll-y window-height]
[:f> f-shell-button shared-values chat-list-scroll-y window-height])
Loading