chatview: add video widget button

Change-Id: I46fb136b15f2be8428b05a63583b3246c6937fb2

src/web-chatview/chatview.html

@@ -91,12 +91,18 @@
         </div>
         <div id="file_image_send_container"></div>
         <div id="sendMessage">
-            <div id="sendFileButton" class="nav-button action-button" onclick="selectFileToSend()" title="select file to send">
+            <div id="sendFileButton" class="nav-button action-button" onclick="selectFileToSend()">
                 <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                     <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
                     <path d="M0 0h24v24H0z" fill="none" />
                 </svg>
             </div>
+            <div id="videoRecordButton" class="nav-button action-button nav-right" onclick="videoRecord()">
+                <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                    <path fill="none" d="M0 0h24v24H0V0z"/>
+                    <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z"/>
+                </svg>
+            </div>
             <textarea id="message" autofocus placeholder="Type a message" onkeyup="grow_text_area()" onkeydown="process_messagebar_keydown()"
                 rows="1"></textarea>
             <div id="sendButton" class="nav-button action-button" onclick="sendMessage(); grow_text_area()">

src/web-chatview/chatview.js

@@ -44,6 +44,7 @@ const optionsButton = document.getElementById("optionsButton")
 const backToBottomBtn = document.getElementById("back_to_bottom_button")
 const backToBottomBtnContainer = document.getElementById("back_to_bottom_button_container")
 const sendFileButton = document.getElementById("sendFileButton")
+const videoRecordButton = document.getElementById("videoRecordButton")
 const aliasField = document.getElementById("nav-contactid-alias")
 const bestIdField = document.getElementById("nav-contactid-bestId")
 const idField = document.getElementById("nav-contactid")
@@ -126,6 +127,7 @@ function set_titles() {
         optionsButton.title = "Options"
         backToBottomBtn.innerHTML = "'Jump to latest' ▼"
         sendFileButton.title = "Send File"
+        videoRecordButton.title = "Record video clip"
         acceptButton.title = "Accept"
         refuseButton.title = "Refuse"
         blockButton.title = "Block"
@@ -139,6 +141,7 @@ function set_titles() {
         optionsButton.title = i18n.gettext("Options")
         backToBottomBtn.innerHTML = `${i18n.gettext("Jump to latest")} ▼`
         sendFileButton.title = i18n.gettext("Send File")
+        videoRecordButton.title = i18n.gettext("Record video clip")
         acceptButton.title = i18n.gettext("Accept")
         refuseButton.title = i18n.gettext("Refuse")
         blockButton.title = i18n.gettext("Block")
@@ -350,6 +353,21 @@ function displayNavbar(isVisible) {
     }
 }
 
+/**
+ * Hide or show record controls, and update body top padding accordingly.
+ *
+ * @param isVisible whether navbar should be displayed or not
+ */
+/* exported displayRecordControls */
+function displayRecordControls(isVisible) {
+    if (isVisible) {
+        videoRecordButton.classList.remove("hiddenState")
+    } else {
+        videoRecordButton.classList.add("hiddenState")
+    }
+}
+
+
 /**
  * Hide or show message bar, and update body bottom padding accordingly.
  *
@@ -628,6 +646,16 @@ function selectFileToSend() {
     }
 }
 
+/* exported sendFile */
+function videoRecord() {
+    if (use_qt) {
+        window.jsbridge.videoRecord()
+    } else {
+        var rect = videoRecordButton.getBoundingClientRect()
+        window.prompt(`VIDEO_RECORD:${rect.left + rect.width / 2}x${rect.top}`)
+    }
+}
+
 /**
  * Clear all messages.
  */