Skip to content

Commit

Permalink
fix android composer background shadow not visible when image is atta…
Browse files Browse the repository at this point in the history
…ched
  • Loading branch information
Parveshdhull authored and pavloburykh committed Apr 4, 2024
1 parent 3dfd9df commit 76ab1d5
Show file tree
Hide file tree
Showing 10 changed files with 126 additions and 135 deletions.
25 changes: 24 additions & 1 deletion src/js/worklets/chat/messenger/composer.js
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
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
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)))

(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))
(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
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)
(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
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"))))
23 changes: 11 additions & 12 deletions src/status_im/contexts/chat/messenger/composer/style.cljs
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)}}))

(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)
: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
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

0 comments on commit 76ab1d5

Please sign in to comment.