Skip to content

Commit ad6b0ef

Browse files
OmarBasemOmarBasem
committed
# This is a combination of 8 commits.
# This is the 1st commit message: feat: camera updates updates updates feat: camera feat: camera updates icons icons icons icons revert # This is the commit message #2: lint # This is the commit message #3: review # This is the commit message #4: revert # This is the commit message #5: lint # This is the commit message #6: review # This is the commit message #7: camera features # This is the commit message #8: feat: camera extra features
1 parent 1721b40 commit ad6b0ef

File tree

3 files changed

+138
-77
lines changed

3 files changed

+138
-77
lines changed

‎src/status_im2/contexts/chat/camera/style.cljs

+33-9
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,36 @@
77
{:flex 1
88
:background-color colors/black})
99

10-
(def flash-container
11-
{:position :absolute
12-
:top 50
13-
:left 25})
10+
(defn flash-container
11+
[rotate uri]
12+
(reanimated/apply-animations-to-style
13+
{:transform [{:rotate rotate}]}
14+
{:position :absolute
15+
:top 50
16+
:left (if uri -25 25)}))
17+
18+
(def cancel-dash
19+
{:width 1
20+
:height 32
21+
:top -4
22+
:left 12
23+
:z-index 1
24+
:transform [{:rotate "-45deg"}]
25+
:background-color colors/white
26+
:position :absolute})
1427

1528
(defn camera-window
1629
[width height top]
1730
{:width width
1831
:height height
1932
:top top})
2033

34+
(defn image
35+
[width height top portrait?]
36+
{:width width
37+
:height (if portrait? height (* width 0.75))
38+
:top top})
39+
2140
(def zoom-button-container
2241
{:width 37
2342
:height 37
@@ -38,19 +57,22 @@
3857
:bottom (+ top (:bottom insets) (when platform/android? (:top insets)) 18)})
3958

4059
(defn zoom-button
41-
[size]
60+
[size rotate]
4261
(reanimated/apply-animations-to-style
43-
{:width size
44-
:height size}
62+
{:width size
63+
:height size
64+
:transform [{:rotate rotate}]}
4565
{:background-color colors/black-opa-30
4666
:justify-content :center
4767
:align-items :center
4868
:border-radius 50}))
4969

5070
(defn bottom-area
51-
[top insets]
71+
[top insets uri]
5272
{:left 20
5373
:right 20
74+
:opacity (if uri 0 1)
75+
:z-index (if uri 0 1)
5476
:position :absolute
5577
:height (+ top (when platform/android? (:top insets)))
5678
:bottom (:bottom insets)})
@@ -84,8 +106,10 @@
84106
:background-color colors/white})
85107

86108
(defn confirmation-container
87-
[insets]
109+
[insets uri]
88110
{:position :absolute
111+
:opacity (if uri 1 0)
112+
:z-index (if uri 1 0)
89113
:bottom 0
90114
:left 0
91115
:right 0

‎src/status_im2/contexts/chat/camera/view.cljs

+102-68
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
[quo2.foundations.colors :as colors]
55
[react-native.camera-kit :as camera-kit]
66
[react-native.core :as rn]
7+
[react-native.fast-image :as fast-image]
8+
[react-native.orientation :as orientation]
9+
[react-native.platform :as platform]
710
[react-native.reanimated :as reanimated]
811
[react-native.safe-area :as safe-area]
912
[reagent.core :as reagent]
@@ -12,90 +15,121 @@
1215
[utils.re-frame :as rf]))
1316

1417
(defn- f-zoom-button
15-
[{:keys [value current-zoom]}]
16-
(let [selected? (= @current-zoom value)
17-
size (reanimated/use-shared-value (if selected? 37 25))]
18-
(rn/use-effect #(reanimated/animate size (if selected? 37 25)) [@current-zoom])
18+
[{:keys [value current-zoom rotate]}]
19+
(let [selected (= @current-zoom value)
20+
size (reanimated/use-shared-value (if selected 37 25))]
21+
(rn/use-effect #(reanimated/animate size (if selected 37 25)) [@current-zoom])
1922
[rn/touchable-opacity
20-
{:on-press #(reset! current-zoom value)
21-
:style style/zoom-button-container
22-
:accessibility-label (str "zoom-" value)}
23-
[reanimated/view {:style (style/zoom-button size)}
23+
{:on-press #(reset! current-zoom value)
24+
:style style/zoom-button-container}
25+
[reanimated/view {:style (style/zoom-button size rotate)}
2426
[quo/text
25-
{:size (if selected? :paragraph-2 :label)
26-
:weight :semi-bold
27-
:style {:color (if selected?
28-
colors/system-yellow
29-
colors/white)}}
30-
(str value (when selected? "x"))]]]))
27+
{:size (if selected :paragraph-2 :label)
28+
:weight :semi-bold
29+
:number-of-lines 1
30+
:style {:color (if selected
31+
colors/system-yellow
32+
colors/white)}}
33+
(str value (when selected "x"))]]]))
3134

3235
(defn zoom-button
3336
[args]
3437
[:f> f-zoom-button args])
3538

3639
(defn snap-button
3740
[camera-ref uri]
38-
[rn/view
39-
{:style style/outer-circle
40-
:accessibility-label :snap}
41+
[rn/view {:style style/outer-circle}
4142
[rn/touchable-opacity
4243
{:on-press (fn []
4344
(camera-kit/capture @camera-ref #(reset! uri %)))
4445
:style style/inner-circle}]])
4546

47+
(defn retake
48+
[flash uri]
49+
(let [current-flash @flash]
50+
(when platform/android?
51+
(reset! flash false) ; On Android, setting flash needs to be delayed until camera has initialized
52+
(js/setTimeout #(reset! flash current-flash) 300))
53+
(reset! uri nil)))
54+
4655
(defn camera-screen
4756
[]
48-
(let [camera-ref (atom nil)
49-
uri (reagent/atom nil)
50-
current-zoom (reagent/atom "1")]
51-
(fn []
52-
(let [window (rn/get-window)
53-
{:keys [width height]} window
54-
camera-window-height (* width 1.33)
55-
insets (safe-area/get-insets)
56-
top (/ (- height camera-window-height (:bottom insets)) 2)]
57-
[rn/view {:style style/screen-container}
58-
(when-not @uri
59-
[rn/view {:style style/flash-container}
60-
[quo/icon :i/flash-camera
61-
{:color colors/white
62-
:size 24}]])
63-
(if @uri
64-
[rn/image
65-
{:style (style/camera-window width camera-window-height top)
66-
:source {:uri @uri}}]
67-
[camera-kit/camera
68-
{:ref #(reset! camera-ref %)
69-
:style (style/camera-window width camera-window-height top)}])
70-
(when-not @uri
71-
[rn/view {:style (style/zoom-container top insets)}
72-
[zoom-button {:value "0.5" :current-zoom current-zoom}]
73-
[zoom-button {:value "1" :current-zoom current-zoom}]
74-
[zoom-button {:value "2" :current-zoom current-zoom}]
75-
[zoom-button {:value "3" :current-zoom current-zoom}]])
76-
(if @uri
77-
[rn/view {:style (style/confirmation-container insets)}
78-
[quo/text
79-
{:on-press #(reset! uri nil)
80-
:style {:font-size 17
81-
:color colors/white}}
82-
(i18n/label :t/retake)]
57+
(let [camera-ref (atom nil)
58+
uri (reagent/atom nil)
59+
current-zoom (reagent/atom "1")
60+
camera-type (reagent/atom camera-kit/camera-type-back)
61+
flash (reagent/atom false)
62+
curr-orientation (atom orientation/portrait)]
63+
[:f>
64+
(fn []
65+
(let [window (rn/get-window)
66+
{:keys [width height]} window
67+
camera-window-height (* width 1.33)
68+
insets (safe-area/get-insets)
69+
top (/ (- height camera-window-height (:bottom insets)) 2)
70+
top-landscape (/ (- height (* width 0.75) (:bottom insets)) 2)
71+
portrait? (= @curr-orientation orientation/portrait)
72+
rotate (reanimated/use-shared-value "0deg")]
73+
(orientation/use-device-orientation-change (fn [result]
74+
(reset! curr-orientation result)
75+
(case result
76+
orientation/landscape-left
77+
(reanimated/animate rotate "90deg")
78+
orientation/landscape-right
79+
(reanimated/animate rotate "-90deg")
80+
(reanimated/animate rotate "0deg"))))
81+
[rn/view {:style style/screen-container}
82+
[reanimated/touchable-opacity
83+
{:active-opacity 1
84+
:on-press #(reset! flash (not @flash))
85+
:style (style/flash-container rotate @uri)}
86+
(when-not @flash
87+
[rn/view {:style style/cancel-dash}])
88+
[quo/icon :i/flash-camera
89+
{:color colors/white
90+
:size 24}]]
91+
(if @uri
92+
[fast-image/fast-image
93+
{:style (style/image width camera-window-height (if portrait? top top-landscape) portrait?)
94+
:source {:uri @uri}}]
95+
[camera-kit/camera
96+
{:ref #(reset! camera-ref %)
97+
:style (style/camera-window width camera-window-height top)
98+
:flash-mode (if @flash :on :off)
99+
:camera-type @camera-type}])
100+
(when-not @uri
101+
[rn/view {:style (style/zoom-container top insets)}
102+
[zoom-button {:value "0.5" :current-zoom current-zoom :rotate rotate}]
103+
[zoom-button {:value "1" :current-zoom current-zoom :rotate rotate}]
104+
[zoom-button {:value "2" :current-zoom current-zoom :rotate rotate}]
105+
[zoom-button {:value "3" :current-zoom current-zoom :rotate rotate}]])
106+
[rn/view {:style (style/confirmation-container insets @uri)}
107+
[quo/text
108+
{:on-press #(retake flash uri)
109+
:style {:font-size 17
110+
:color colors/white}}
111+
(i18n/label :t/retake)]
112+
[quo/text
113+
{:on-press (fn []
114+
(rf/dispatch [:photo-selector/camera-roll-pick {:uri @uri}])
115+
(rf/dispatch [:navigate-back]))
116+
:style {:font-size 17
117+
:color colors/white}}
118+
(i18n/label :t/use-photo)]]
119+
[rn/view {:style (style/bottom-area top insets @uri)}
120+
[quo/text {:style style/photo-text} (i18n/label :t/PHOTO)]
121+
[rn/view {:style style/actions-container}
83122
[quo/text
84-
{:on-press (fn []
85-
(rf/dispatch [:photo-selector/camera-roll-pick {:uri @uri}])
86-
(rf/dispatch [:navigate-back]))
123+
{:on-press #(rf/dispatch [:navigate-back])
87124
:style {:font-size 17
88125
:color colors/white}}
89-
(i18n/label :t/use-photo)]]
90-
[rn/view {:style (style/bottom-area top insets)}
91-
[quo/text {:style style/photo-text} (i18n/label :t/PHOTO)]
92-
[rn/view {:style style/actions-container}
93-
[quo/text
94-
{:on-press #(rf/dispatch [:navigate-back])
95-
:style {:font-size 17
96-
:color colors/white}
97-
:accessibility-label :cancel}
98-
(i18n/label :t/cancel)]
99-
[snap-button camera-ref uri]
100-
[quo/icon :i/rotate-camera
101-
{:size 48 :color colors/white :accessibility-label :flip-camera}]]])]))))
126+
(i18n/label :t/cancel)]
127+
[snap-button camera-ref uri]
128+
[reanimated/touchable-opacity
129+
{:style (reanimated/apply-animations-to-style {:transform [{:rotate rotate}]} {})
130+
:on-press (fn []
131+
(reset! flash false)
132+
(reset! camera-type (if (= @camera-type camera-kit/camera-type-back)
133+
camera-kit/camera-type-front
134+
camera-kit/camera-type-back)))}
135+
[quo/icon :i/rotate-camera {:size 48 :color colors/white}]]]]]))]))

‎translations/en.json

+3
Original file line numberDiff line numberDiff line change
@@ -2254,7 +2254,10 @@
22542254
"chat-unmuted-successfully": "Chat unmuted successfully! ",
22552255
"channel-unmuted-successfully": "Channel unmuted successfully! ",
22562256
"photo-saved": "Photo saved to your device",
2257+
<<<<<<< HEAD
22572258
"community-unmuted": "Community unmuted",
2259+
=======
2260+
>>>>>>> 02661f242 (feat: camera)
22582261
"retake": "Retake",
22592262
"use-photo": "Use Photo",
22602263
"PHOTO": "PHOTO"

0 commit comments

Comments
 (0)