diff --git a/src/web-chatview/chatview.html b/src/web-chatview/chatview.html index 4baae2afb6936b1ae242c43a8463394956111ebd..d9ce0247c797baf38e3364120cbcd2d20276d461 100644 --- a/src/web-chatview/chatview.html +++ b/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()"> diff --git a/src/web-chatview/chatview.js b/src/web-chatview/chatview.js index 630a507c363a0602e7014fb887c8ceb8c446b85d..fd402afe01557951c07e8d5b0a83a3bffc2d5ea1 100644 --- a/src/web-chatview/chatview.js +++ b/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. */