Send audio messages

Author: easafe

src/Client/Im/Chat.purs

@@ -6,7 +6,7 @@ import Shared.Im.Types
 
 import Client.Common.Dom as CCD
 import Client.Common.File as CCF
-import Client.Im.Flame (MoreMessages, NextMessage, NoMessages)
+import Client.Im.Flame (NextMessage, NoMessages, MoreMessages)
 import Client.Im.Flame as CIF
 import Client.Im.Scroll as CIS
 import Client.Im.WebSocket as CIW
@@ -419,6 +419,18 @@ checkTyping text now webSocket model@{ lastTyping: DateTimeWrapper lt, contacts,
       minimumLength = 7
       enoughTime dt = let (Milliseconds milliseconds) = DT.diff now dt in milliseconds >= 800.0
 
+beforeAudioMessage :: ImModel -> MoreMessages
+beforeAudioMessage model = model /\ [pure Nothing]
+
+audioMessage :: Touch -> ImModel -> MoreMessages
+audioMessage touch model =
+      if touch.startX - touch.endX >= threshold && touch.startY - touch.endY < threshold then
+            model /\ [pure Nothing]
+      else
+            model /\ [pure Nothing]
+      where
+      threshold = 40
+
 --this messy ass event can be from double click, context menu or swipe
 quoteMessage ∷ String → Either Touch (Maybe Event) → ImModel → NextMessage
 quoteMessage contents event model@{ chatting, smallScreen } =

src/Client/Im/Main.purs

@@ -138,6 +138,8 @@ update st model =
             Apply markup → CIC.applyMarkup markup model
             SetEmoji event → CIC.setEmoji event model
             ToggleMessageEnter → CIC.toggleMessageEnter model
+            BeforeAudioMessage -> CIC.beforeAudioMessage model
+            AudioMessage touch -> CIC.audioMessage touch model
             FocusCurrentSuggestion → CIC.focusCurrentSuggestion model
             FocusInput elementId → focusInput elementId model
             QuoteMessage message et → CIC.quoteMessage message et model

src/Client/Im/Touch.purs

@@ -13,12 +13,12 @@ import Web.Event.Internal.Types (Event)
 foreign import touchStart ∷ EffectFn1 Event Unit
 foreign import touchEnd ∷ EffectFn1 Event (Array Int)
 
-onTouchStart ∷ ∀ message. NodeData message
-onTouchStart = HA.createRawEvent "touchstart" handler
+onTouchStart ∷ ∀ message. Maybe message -> NodeData message
+onTouchStart message = HA.createRawEvent "touchstart" handler
       where
       handler event = do
             EU.runEffectFn1 touchStart event
-            pure Nothing
+            pure message
 
 onTouchEnd ∷ ∀ message. (Touch → message) → NodeData message
 onTouchEnd message = HA.createRawEvent "touchend" handler

src/Client/css/im.css

@@ -2105,6 +2105,18 @@ select {
     margin-bottom: 20px;
 }
 
+.audio-button {
+    display: none;
+}
+
+.chat-input:placeholder-shown + .chat-right-buttons .send-button-div {
+    display: none;
+}
+
+.chat-input:not(:placeholder-shown) + .chat-right-buttons .attachment-button {
+    display: none;
+}
+
 /* dry this shite  */
 
 @media (max-width:1279px) {
@@ -2113,9 +2125,9 @@ select {
         overflow-x: hidden
     }
 
-    /* .contact-name-badge .badge-text {
-        display: none
-    } */
+    .audio-button {
+        display: block;
+    }
 
     .sign-up-call {
         display: flex;

src/Server/Guard.purs

@@ -38,7 +38,8 @@ checkLoggedUser { configuration: { tokenSecret }, pool } request = do
       maybeUserId ← SE.poolEffect pool <<< ST.userIdFromToken tokenSecret <<< DMB.fromMaybe "" $ DM.lookup cookieName cookies
       case maybeUserId of
             Just userId → pure $ Right userId
-            _ →   if isPost then
+            _ →
+                  if isPost then
                         pure <<< Left $ PSR.unauthorized Empty
                   else
                         redirectLogin

src/Server/KarmaPrivileges/Database.purs

@@ -30,16 +30,8 @@ fetchInBetween10 ∷ Int → ServerEffect (Array LeaderboardUser)
 fetchInBetween10 position = avatarPath <$> SD.unsafeQuery "select u.name, u.avatar, position, current_karma karma from karma_leaderboard k join users u on k.ranker = u.id where position between greatest(1, @position - 5) and @position + 5 order by position" { position }
 
 fetchPrivileges ∷ Int → ServerEffect (Array PrivilegeUser)
-fetchPrivileges loggedUserId = SD.unsafeQuery "SELECT name, description, quantity, current_karma >= quantity AS got FROM privileges LEFT JOIN karma_leaderboard ON ranker = @loggedUserId WHERE feature = ANY(@privileges) ORDER BY quantity desc"
+fetchPrivileges loggedUserId = SD.unsafeQuery "SELECT name, description, quantity, current_karma >= quantity AS got FROM privileges LEFT JOIN karma_leaderboard ON ranker = @loggedUserId ORDER BY quantity desc"
       { loggedUserId
-      , privileges:
-              [ ReceiveChats
-              , StartChats
-              , StartChatExperiments
-              , MoreTags
-              , SendLinks
-              , SendImages
-              ]
       }
 
 fetchStats ∷ Int → ServerEffect _

src/Server/sql/index.sql

@@ -884,6 +884,7 @@ insert into privileges (feature, name, description, quantity) values
     (201, 'Impersonation', 'Start Impersonation chat experiment', 1000),
     (300, 'More tags', 'Increased number of max profile tags', 250),
     (400, 'Send links', 'Send markdown links', 1000),
+    (401, 'Send audio', 'Send voice messages', 2000),
     (500, 'Send images', 'Send pictures in chats', 3000);
 
 insert into badges (kind, description) values

src/Shared/Im/Types.purs

@@ -295,6 +295,8 @@ data ImMessage
       | SetMessageContent (Maybe Int) String
       | Apply Markup
       | SetEmoji Event
+      | BeforeAudioMessage
+      | AudioMessage Touch
       | InsertLink
       | CheckTyping String
       | NoTyping Int

src/Shared/Im/View/ChatInput.purs

@@ -5,6 +5,7 @@ import Shared.Availability
 import Shared.Im.Types
 
 import Client.Common.Privilege as CCP
+import Client.Im.Swipe as CIT
 import Control.Alt ((<|>))
 import Data.Array ((!!), (:))
 import Data.Array as DA
@@ -132,6 +133,7 @@ chatBarInput
                                           ]
                       , HE.div (HA.class' "chat-right-buttons")
                               [ imageButton
+                              , audioButton
                               , sendButton messageEnter model
                               ]
                       ]
@@ -247,6 +249,15 @@ imageButton = HE.svg [ HA.onClick $ ToggleChatModal ShowSelectedImage, HA.class'
       [ HE.path' [ HA.class' "strokeless", HA.d "M10.91,4v8.78a2.44,2.44,0,0,1-.72,1.65A3.31,3.31,0,0,1,8,15.25H7.67a2.67,2.67,0,0,1-2.58-2.48L5.26,2.9V2.82l0-.2h0a2,2,0,0,1,.19-.7v0a1.82,1.82,0,0,1,1.6-1A1.69,1.69,0,0,1,7.73,1,2.14,2.14,0,0,1,9.16,2.81h0v7.81c0,.75-.36,1.26-1.13,1.26A1.12,1.12,0,0,1,6.9,10.63V4H6.11v6.61a1.93,1.93,0,0,0,2,2,1.83,1.83,0,0,0,1.82-2l0-7.81c0-.06,0-.12,0-.18s0-.11,0-.17,0,0,0-.05a2.59,2.59,0,0,0-.32-1s0,0,0,0A3.19,3.19,0,0,0,7.77.09h0A2.41,2.41,0,0,0,7.09,0a2.56,2.56,0,0,0-1,.21H6A2.74,2.74,0,0,0,4.76,1.39h0a3,3,0,0,0-.37,1.43v10A3.41,3.41,0,0,0,7.67,16H8A4,4,0,0,0,10.69,15a3.22,3.22,0,0,0,.93-2.18V4Z" ]
       ]
 
+audioButton ∷ Html ImMessage
+audioButton = HE.svg [ CIT.onTouchStart $ Just BeforeAudioMessage, CIT.onTouchEnd AudioMessage, HA.class' "attachment-button audio-button", HA.viewBox "0 0 512 512" ]
+      [
+            HE.g_
+                  [ HE.path' [HA.class' "strokeless", HA.d "m439.5,236c0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,70-64,126.9-142.7,126.9-78.7,0-142.7-56.9-142.7-126.9 0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,86.2 71.5,157.4 163.1,166.7v57.5h-23.6c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h88c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-23.6v-57.5c91.6-9.3 163.1-80.5 163.1-166.7z" ]
+                  , HE.path' [ HA.class' "strokeless", HA.d "m256,323.5c51,0 92.3-41.3 92.3-92.3v-127.9c0-51-41.3-92.3-92.3-92.3s-92.3,41.3-92.3,92.3v127.9c0,51 41.3,92.3 92.3,92.3zm-52.3-220.2c0-28.8 23.5-52.3 52.3-52.3s52.3,23.5 52.3,52.3v127.9c0,28.8-23.5,52.3-52.3,52.3s-52.3-23.5-52.3-52.3v-127.9z" ]
+                  ]
+      ]
+
 sendButton ∷ Boolean → ImModel → Html ImMessage
 sendButton messageEnter model =
       HE.div

src/Shared/Privilege.purs

@@ -25,6 +25,7 @@ data Privilege
       | ImpersonationChatExperiment
       | MoreTags
       | SendLinks
+      | SendAudios
       | SendImages
 
 hasPrivilege ∷ ∀ r. Privilege → { privileges ∷ Array Privilege | r } → Boolean
@@ -56,6 +57,7 @@ instance BoundedEnum Privilege where
             ImpersonationChatExperiment → 201
             MoreTags → 300
             SendLinks → 400
+            SendAudios → 401
             SendImages → 500
 
       toEnum = case _ of
@@ -65,6 +67,7 @@ instance BoundedEnum Privilege where
             201 → Just ImpersonationChatExperiment
             300 → Just MoreTags
             400 → Just SendLinks
+            401 → Just SendAudios
             500 → Just SendImages
             _ → Nothing
 
@@ -76,6 +79,7 @@ instance Enum Privilege where
             ImpersonationChatExperiment → Nothing
             MoreTags → Just SendLinks
             SendLinks → Just SendImages
+            SendAudios → Just SendImages
             SendImages → Nothing
 
       pred = case _ of
@@ -85,7 +89,8 @@ instance Enum Privilege where
             ImpersonationChatExperiment → Just StartChatExperiments
             MoreTags → Just StartChatExperiments
             SendLinks → Just MoreTags
-            SendImages → Just SendLinks
+            SendAudios → Just SendLinks
+            SendImages → Just SendAudios
 
 instance Show Privilege where
       show = DSG.genericShow