Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
@Parveshdhull
Parveshdhull committed Feb 23, 2024
1 parent cf2de01 commit ed35efa
Show file tree
Hide file tree
Showing 8 changed files with 70 additions and 146 deletions.
2 changes: 1 addition & 1 deletion src/js/worklets/chat/messenger/composer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function jumpToButtonPosition(scrollDownButtonOpacity, isComposerFocused)
export function containerOpacity(isComposerFocused, isEmptyInput, emptyOpacity) {
return useDerivedValue(function () {
'worklet';
console.log("-----------", isEmptyInput.value, isComposerFocused.value, emptyOpacity);
console.log('-----------', isEmptyInput.value, isComposerFocused.value, emptyOpacity);
return isEmptyInput.value && !isComposerFocused.value ? emptyOpacity : 1;
});
}
Expand Down
18 changes: 3 additions & 15 deletions src/status_im/contexts/chat/messenger/composer/actions/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,12 @@
"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 [height saved-height last-height]}
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)
(rf/dispatch [:chat.ui/send-current-message])
(rf/dispatch [:chat.ui/set-input-maximized false])
(rf/dispatch [:chat.ui/set-input-content-height comp-constants/input-height])
Expand Down Expand Up @@ -84,8 +78,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 +90,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 @@ -111,8 +103,6 @@
(reset! gesture-enabled? true)
(rf/dispatch [:chat/send-audio file-path duration])
(if-not @focused?
(reanimated/animate container-opacity
comp-constants/empty-opacity)
(js/setTimeout #(when @input-ref (.focus ^js @input-ref))
300))
(rf/dispatch [:chat.ui/set-input-audio nil]))
Expand All @@ -122,8 +112,6 @@
(reset! recording? false)
(reset! gesture-enabled? true)
(if-not @focused?
(reanimated/animate container-opacity
comp-constants/empty-opacity)
(js/setTimeout #(when @input-ref
(.focus ^js @input-ref))
300))
Expand Down
23 changes: 3 additions & 20 deletions src/status_im/contexts/chat/messenger/composer/effects.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,6 @@
(reset! kb-default-height (utils.number/parse-int height 0))
(reset! kb-height (utils.number/parse-int height 0))))))

(defn background-effect
[{:keys [maximized?]}
{:keys [opacity background-y]}
{:keys [max-height]}
{:keys [input-content-height]}]
(when (or @maximized? (>= input-content-height (* max-height constants/background-threshold)))
(reanimated/set-shared-value background-y 0)
(reanimated/animate opacity 1)))

(defn link-preview-effect
[{:keys [text-value]}]
(let [text @text-value]
Expand All @@ -70,12 +61,10 @@

(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 [empty-input?]}
Expand All @@ -98,9 +87,8 @@
(maximized-effect state animations dimensions chat-input)
(layout-effect state)
(kb-default-height-effect state)
(background-effect state animations dimensions chat-input)
(link-preview-effect state)
(audio-effect state animations audio)
(audio-effect state audio)
(empty-effect state subscriptions)
(kb/add-kb-listeners props state animations dimensions)
#(component-will-unmount props))
Expand Down Expand Up @@ -160,13 +148,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 +188,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
56 changes: 11 additions & 45 deletions src/status_im/contexts/chat/messenger/composer/gesture.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,12 @@
[utils.number]
[utils.re-frame :as rf]))

(defn set-opacity
[velocity opacity translation expanding? min-height max-height new-height saved-height]
(let [remaining-height (if expanding?
(- max-height (reanimated/get-shared-value saved-height))
(- (reanimated/get-shared-value saved-height) min-height))
progress (if (= new-height min-height) 1 (/ translation remaining-height))
currently-expanding? (neg? velocity)
max-opacity? (and currently-expanding? (= (reanimated/get-shared-value opacity) 1))
min-opacity? (and (not currently-expanding?)
(= (reanimated/get-shared-value opacity) 0))]
(if (>= translation 0)
(when (and (not expanding?) (not min-opacity?))
(reanimated/set-shared-value opacity (- 1 progress)))
(when (and expanding? (not max-opacity?))
(reanimated/set-shared-value opacity (Math/abs progress))))))

(defn maximize
[{:keys [maximized?]}
{:keys [height saved-height background-y opacity]}
{:keys [height saved-height]}
{:keys [max-height]}]
(reanimated/animate height max-height)
(reanimated/set-shared-value saved-height max-height)
(reanimated/set-shared-value background-y 0)
(reanimated/animate opacity 1)
(reset! maximized? true)
(rf/dispatch [:chat.ui/set-input-maximized true]))

Expand All @@ -46,37 +28,30 @@
(utils/blur-input input-ref))

(defn bounce-back
[{:keys [height saved-height opacity background-y]}
{:keys [window-height]}
starting-opacity]
(reanimated/animate height (reanimated/get-shared-value saved-height))
(when (zero? starting-opacity)
(reanimated/animate opacity 0)
(reanimated/animate-delay background-y (- window-height) 300)))
[{:keys [height saved-height]}
{:keys [window-height]}]
(reanimated/animate height (reanimated/get-shared-value saved-height)))

(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] :as animations}
{:keys [max-height lines] :as dimensions}
keyboard-shown]
(let [expanding? (atom true)
starting-opacity (reanimated/get-shared-value opacity)]
(let [expanding? (atom true)]
(-> (gesture/gesture-pan)
(gesture/enabled @gesture-enabled?)
(gesture/on-start (fn [event]
(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
(.focus ^js @input-ref))
(reset! gesture-enabled? false))
(do ; else, will start gesture
(reanimated/set-shared-value background-y 0)
(reset! expanding? (neg? (oops/oget event "velocityY")))))))
; else, will start gesture
(reset! expanding? (neg? (oops/oget event "velocityY"))))))
(gesture/on-update
(fn [event]
(let [translation (oops/oget event "translationY")
Expand All @@ -85,16 +60,7 @@
bounded-height (utils.number/value-in-range new-height min-height max-height)]
(when keyboard-shown
(if (>= new-height min-height)
(do ; expand sheet
(reanimated/set-shared-value height bounded-height)
(set-opacity (oops/oget event "velocityY")
opacity
translation
@expanding?
min-height
max-height
bounded-height
saved-height))
(reanimated/set-shared-value height bounded-height)
; sheet at min-height, collapse keyboard
(utils/blur-input input-ref))))))
(gesture/on-end (fn []
Expand All @@ -104,8 +70,8 @@
(if (and @expanding? (>= diff 0))
(if (> diff constants/drag-threshold)
(maximize state animations dimensions)
(bounce-back animations dimensions starting-opacity))
(bounce-back animations dimensions))
(if (> (Math/abs diff) constants/drag-threshold)
(minimize props state)
(bounce-back animations dimensions starting-opacity)))
(bounce-back animations dimensions)))
(reset! gesture-enabled? true))))))))
22 changes: 4 additions & 18 deletions src/status_im/contexts/chat/messenger/composer/handlers.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"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 [height saved-height last-height]
:as animations}
{:keys [max-height] :as dimensions}]
(reanimated/set-shared-value composer-focused? true)
Expand All @@ -27,11 +27,8 @@
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)
(reanimated/set-shared-value background-y 0)))
(reset! maximized? true)))

(js/setTimeout #(reset! lock-selection? false) 300)
(when (and (not-empty @text-value) @input-ref)
Expand All @@ -43,7 +40,7 @@
"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 [height saved-height last-height gradient-opacity]}
{:keys [content-height max-height window-height]}
{:keys [images link-previews? reply]}]
(when-not @recording?
Expand All @@ -60,10 +57,6 @@
(reanimated/set-shared-value last-height reopen-height)
(reanimated/animate height min-height)
(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 All @@ -76,7 +69,7 @@
"Save new text height, expand composer if possible, show background overlay if needed"
[event
{:keys [maximized? lock-layout? text-value]}
{:keys [height saved-height last-height opacity background-y]}
{:keys [height saved-height last-height]}
{:keys [content-height window-height max-height]}
keyboard-shown]
(when keyboard-shown
Expand All @@ -98,13 +91,6 @@
(when (= new-height max-height)
(reset! maximized? true)
(rf/dispatch [:chat.ui/set-input-maximized true]))
(if (utils/show-background? max-height new-height maximized?)
(do
(reanimated/set-shared-value background-y 0)
(reanimated/animate opacity 1))
(when (= (reanimated/get-shared-value opacity) 1)
(reanimated/animate opacity 0)
(js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300)))
(rf/dispatch [:chat.ui/set-input-content-height content-size])
(reset! lock-layout? (> lines 2)))))

Expand Down
4 changes: 2 additions & 2 deletions src/status_im/contexts/chat/messenger/composer/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@
:shadow-offset {:width 0 :height (colors/theme-colors -4 -8 theme)}}))

(defn sheet-container
[insets {:keys [container-opacity2 composer-elevation]} theme]
[insets {:keys [container-opacity composer-elevation]} theme]
(reanimated/apply-animations-to-style
{:opacity container-opacity2
{:opacity container-opacity
:elevation composer-elevation}
(merge
{:border-top-left-radius border-top-radius
Expand Down
29 changes: 15 additions & 14 deletions src/status_im/contexts/chat/messenger/composer/utils.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,13 +203,14 @@

(defn shared-values
[]
(let [input-container-height (reanimated/use-shared-value 0)
composer-focused? (reanimated/use-shared-value false)
empty-input? (reanimated/use-shared-value true)
container-opacity (worklets/container-opacity composer-focused? empty-input? constants/empty-opacity)]
(let [input-container-height (reanimated/use-shared-value 0)
composer-focused? (reanimated/use-shared-value false)
empty-input? (reanimated/use-shared-value true)
container-opacity (worklets/container-opacity composer-focused?
empty-input?
constants/empty-opacity)]
{:composer-focused? composer-focused?
:container-opacity2 container-opacity
:container-opacity (reanimated/use-shared-value 1) ;; TODO - remove this one
:container-opacity container-opacity
:height input-container-height
:blur-container-elevation (worklets/blur-container-elevation container-opacity)
:composer-elevation (worklets/composer-elevation container-opacity)
Expand All @@ -226,11 +227,11 @@
;; (when (= (reanimated/get-shared-value input-container-height) 0)
;; (reanimated/set-shared-value input-container-height initial-height))
(assoc shared-values
:gradient-opacity (reanimated/use-shared-value 0)
:saved-height (reanimated/use-shared-value
initial-height)
:last-height (reanimated/use-shared-value
(utils.number/value-in-range
@content-height
constants/input-height
max-height)))))
:gradient-opacity (reanimated/use-shared-value 0)
:saved-height (reanimated/use-shared-value
initial-height)
:last-height (reanimated/use-shared-value
(utils.number/value-in-range
@content-height
constants/input-height
max-height)))))
Loading

0 comments on commit ed35efa

Please sign in to comment.