chatview: add chatview folder to lrc

Change-Id: I6739b541e7f19addfbef34ed732d2d5c6cad5155

CMakeLists.txt

@@ -344,6 +344,19 @@ SET(libringclient_api_LIB_HDRS
   src/api/newvideo.h
 )
 
+SET(libringclient_WEB_chatview
+   src/web-chatview/.eslintrc.json
+   src/web-chatview/chatview-gnome.css
+   src/web-chatview/chatview.css
+   src/web-chatview/chatview.html
+   src/web-chatview/chatview.js
+   src/web-chatview/jed.js
+   src/web-chatview/linkify-html.js
+   src/web-chatview/linkify-string.js
+   src/web-chatview/linkify.js
+   src/web-chatview/qwebchannel.js
+   src/web-chatview/web.gresource.xml
+)
 
 SET(libringclient_video_LIB_HDRS
   src/video/renderer.h
@@ -580,6 +593,11 @@ INSTALL( FILES ${libringclient_video_LIB_HDRS}
   COMPONENT Devel
 )
 
+INSTALL( FILES ${libringclient_WEB_chatview}
+  DESTINATION ${INCLUDE_INSTALL_DIR}/libringclient/web-chatview
+  COMPONENT Devel
+)
+
 INSTALL( FILES ${libringclient_extensions_LIB_HDRS}
   DESTINATION ${INCLUDE_INSTALL_DIR}/libringclient/extensions
   COMPONENT Devel

src/web-chatview/.eslintrc.json

+{
+    "env": {
+        "browser": true
+    },
+    "plugins": ["html"],
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 6
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "never"
+        ],
+        "no-inner-declarations": [
+            0
+        ]
+    }
+}

src/web-chatview/README

+# README - chatview
+
+The chatview runs under a WebKit GTK view. It is written using web technologies
+(HTML5/CSS3/JS) and is responsible for displaying everything that deals with the
+navbar, the messages, and the message bar.
+
+## Contributing - syntax
+
+We have a set of ESLint rules that define clear syntax rules (web/.eslintrc.json).
+
+You will need the following tools:
+
+- ESLint (The pluggable linting utility for JavaScript and JSX)
+  https://eslint.org/
+- ESLint HTML plugin (eslint-plugin-html)
+  https://www.npmjs.com/package/eslint-plugin-html
+
+Before pushing a patch, make sure that it passes ESLint:
+$ eslint chatview.html
+
+Most trivial issues can be fixed using
+$ eslint chatview.js --fix
+
+We will not accept patches introducing non-ESLint-compliant code.
+
+## WebKit GTK
+
+Everything runs under WebKit GTK, that is if you need to write browser specific
+code, you will only need to support WebKit (CSS -webkit- prefix).
+
+Do not use querySelector if getElementById or getElementByClassName can be used
+instead. querySelector doesn't always make the code easier and has very bad
+performances.

src/web-chatview/chatview-gnome.css

+.internal_mes_wrapper {
+    margin: 3px 0 0 0;
+}
+
+.message_wrapper {
+    padding: 1em;
+}
+
+.sender_image {
+    margin: 10px;
+}
+
+.message_out + .message_out .message_wrapper {
+    border-top-right-radius: 10px;
+}
+
+.message_in + .message_in .message_wrapper {
+    border-top-left-radius: 10px;
+}
+
+.message_in + .message_in .sender_image {
+    visibility: hidden;
+}
+
+.message_out + .message_out .sender_image {
+    visibility: hidden;
+}
+
+.message_text {
+    hyphens: auto;
+    word-break: break-word;
+    word-wrap: break-word;
+}
+
+.nav-right {
+  align-self: flex-end;
+}
+
+.nav-left {
+  align-self: flex-start;
+}
+
+#nav-contactid {
+  margin: 0px;
+  margin-left: 5px;
+  padding: 0px;
+  height: 100%;
+  font-family: emoji;
+
+  /* enable selection (it is globally disabled in the body) */
+  -webkit-user-select: auto;
+
+  /* contactid field should take as much place as possible, but it should
+     also be the first one to shrink if necesary. */
+  flex-grow: 2;
+  flex-shrink: 2;
+  min-width: 0; /* necessary for child to be able to shrink correctly */
+
+  /* center vertically */
+  display: flex;
+  align-items: center;
+}
+
+#nav-contactid-wrapper {
+  width: 100%;
+}
+
+#nav-contactid-alias {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 3px;
+
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#nav-contactid-bestId {
+  font-size: 11px;
+
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.oneEntry #nav-contactid-bestId {
+  display: none;
+}
\ No newline at end of file

src/web-chatview/chatview-windows.css

+:root {
+    /* color definitions */
+    --jami-light-blue: rgba(59, 193, 211, 0.3);
+    --jami-dark-blue: #004e86;
+    --jami-green: #219d55;
+    --jami-green-hover: #1f8b4c;
+    --jami-red: #dc2719;
+    --jami-red-hover: #b02e2c;
+    /* main properties */
+    --bg-color: #ffffff;
+    /* navbar properties */
+    --navbar-height: 40px;
+    --navbar-padding-top: 8px;
+    --navbar-padding-bottom: var(--navbar-padding-top);
+    /* message bar properties */
+    --textarea-max-height: 150px;
+    --placeholder-text-color: #d3d3d3;
+    /* button properties */
+    --action-icon-color: #00;
+    --deactivated-icon-color: #bebebe;
+    --action-icon-hover-color: #ededed;
+    --action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of jami light blue */
+    --action-critical-icon-press-color: rgba(211, 77, 59, 0.5);
+    --action-critical-icon-color: #4E1300;
+    --non-action-icon-color: #212121;
+    --action-icon-press-color: rgba(212, 212, 212, 1.0);
+    --invite-hover-color: white;
+    /* hairline properties */
+    --hairline-color: #f0f0f0;
+    --hairline-thickness: 2px;
+}
+
+#invite_contact_name {
+    font-weight: 500;
+}
+
+
+.internal_mes_wrapper {
+    margin: 0;
+}
+
+.message_wrapper {
+    padding: 0.5em 1em 0.5em 1em;
+}
+
+.sender_image {
+    margin: 0px 10px 0px 10px;
+}
+
+.message_in .message_wrapper {
+    background-color: #cfebf5;
+}
+
+.message_in .sender_image,
+.message_out .sender_image {
+    visibility: hidden;
+}
+
+.message_in.last_of_sequence .sender_image,
+.message_in.single_message .sender_image {
+    visibility: visible;
+}
+
+.message_in.last_of_sequence .sender_image {
+    margin-top: 2px;
+}
+
+.message_in.middle_of_sequence .sender_image {
+    margin-top: 0px;
+}
+
+
+.generated_message.message_in .message_wrapper,
+.generated_message.message_out .message_wrapper {
+    background-color: transparent !important;
+    border-radius: 0px !important;
+}
+
+.single_message.message_in .message_wrapper,
+.single_message.message_out .message_wrapper {
+    border-radius: 20px 20px 20px 20px !important;
+}
+
+.last_of_sequence.message_in .message_wrapper {
+    border-radius: 4px 20px 20px 20px;
+}
+
+.first_of_sequence.message_in .message_wrapper {
+    border-radius: 20px 20px 20px 4px;
+}
+
+.middle_of_sequence.message_in .message_wrapper {
+    border-radius: 4px 20px 20px 5px;
+}
+
+.last_of_sequence.message_out .message_wrapper {
+    border-radius: 20px 4px 20px 20px;
+}
+
+.first_of_sequence.message_out .message_wrapper {
+    border-radius: 20px 20px 4px 20px;
+}
+
+.middle_of_sequence.message_out .message_wrapper {
+    border-radius: 20px 5px 4px 20px;
+}
+
+.middle_of_sequence .internal_mes_wrapper,
+.last_of_sequence .internal_mes_wrapper,
+.last_message .internal_mes_wrapper {
+    margin: 0px 0 0 0 !important;
+}
+
+.message_out .sender_image {
+    margin: 8px;
+}
+
+.first_of_sequence.message_out .internal_mes_wrapper,
+.single_message.message_out .internal_mes_wrapper {
+    margin: 0px 0 0 0 !important;
+}
+
+.sender_image_cell {
+    vertical-align: bottom;
+    min-width: 16px;
+}
+
+.message_in .sender_image_cell {
+    min-width: 56px;
+}
+
+.dummy_cell {
+    padding: 0;
+}
+
+.timestamp_cell {
+    padding: 0;
+    max-width: 0px;
+    overflow: visible;
+    white-space: nowrap;
+}
+
+.timestamp_cell_out {
+    padding: 0;
+    text-align: right;
+    direction: rtl;
+    max-width: 0px;
+    overflow: visible;
+    white-space: nowrap;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0 0px;
+    margin: 0;
+    padding: 0;
+}
+
+.message_text {
+    word-break: break-all;
+    word-wrap: hyphenate;
+}
+
+pre {
+    white-space: pre-wrap;
+}
+
+.message:hover:not(.message_type_contact) .menu_interaction {
+    display: block;
+    opacity: 1;
+}
+
+.menuoption {
+    user-select: none;
+    cursor: pointer;
+}
+
+.nav-button {
+    width: 30px;
+    height: 30px;
+    margin: 8px;
+    padding: 2px;
+    display: flex;
+    cursor: pointer;
+    align-self: center;
+    border-radius: 16px;
+}
+
+.nav-button.deactivated {
+    width: 30px;
+    height: 30px;
+    margin: 8px;
+    padding: 2px;
+    align-self: center;
+    display: flex;
+    border-radius: 16px;
+    cursor: auto;
+}
\ No newline at end of file

src/web-chatview/chatview.html

+<html>
+<!-- Empty head might be needed for setSenderImage -->
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+</head>
+
+<body>
+    <div id="wrapperOfNavbar" class="navbar-wrapper">
+        <div id="navbar">
+            <div id="backButton" class="nav-button non-action-button nav-left" onmouseover="addBackButtonHoverProperty()"
+                onclick="backToWelcomeView()">
+                <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                    <path d="M0 0h24v24H0z" fill="none" />
+                    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                </svg>
+            </div>
+            <div id="nav-contactid" class="nav-left">
+                <div id="nav-contactid-wrapper">
+                    <div id="nav-contactid-alias"></div>
+                    <div id="nav-contactid-bestId"></div>
+                </div>
+            </div>
+            <div id="optionsButton" style="display:none" class="deactivated nav-button action-button nav-right" onclick="moreOptions()">
+                <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                    <path d="M0 0h24v24H0z" fill="none" />
+                    <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
+                </svg>
+            </div>
+            <div id="callButtons">
+                <!-- callButtons block allows more efficient hiding of placeCallButton and placeAudioCallButton -->
+                <div id="placeCallButton" class="nav-button action-button nav-right" onclick="placeCall()">
+                    <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <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 4z" />
+                    </svg>
+                </div>
+                <div id="placeAudioCallButton" class="nav-button action-button nav-right" onclick="placeAudioCall()">
+                    <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z" />
+                    </svg>
+                </div>
+            </div>
+            <div id="addToConversationsButton" class="nav-button action-button nav-right" onclick="addToConversations()">
+                <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                    <path d="M0 0h24v24H0z" fill="none" />
+                    <path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+                </svg>
+            </div>
+            <div id="unbanButton" class="nav-button action-critical-button nav-right" onclick="addBannedContact()">
+                <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" />
+                    <circle cx="15" cy="8" r="4" />
+                    <path d="M23 20v-2c0-2.3-4.1-3.7-6.9-3.9l6 5.9h.9zm-11.6-5.5C9.2 15.1 7 16.3 7 18v2h9.9l4 4 1.3-1.3-21-20.9L0 3.1l4 4V10H1v2h3v3h2v-3h2.9l2.5 2.5zM6 10v-.9l.9.9H6z" />
+                </svg>
+            </div>
+        </div>
+        <div id="invitation">
+            <div id="invite_header">
+                <span id="invite_image"></span>
+                <div id="text"></div>
+            </div>
+            <div id="actions">
+                <div id="acceptButton" class="nav-button action-button invite-btn-green" onclick="acceptInvitation()">
+                    <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+                    </svg>
+                </div>
+                <div id="refuseButton" class="nav-button action-button invite-btn-red" onclick="refuseInvitation()">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <path fill="none" d="M0 0h24v24H0V0z" />
+                        <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" />
+                    </svg>
+                </div>
+                <div id="blockButton" class="nav-button action-button invite-btn-red" onclick="blockConversation()">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" />
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="container">
+        <div id="messages" onscroll="onScrolled()"></div>
+        <div id="back_to_bottom_button_container">
+            <div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest &#9660;</div>
+        </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">
+                <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>
+            <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()">
+                <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+                    <path d="M0 0h24v24H0z" fill="none" />
+                </svg>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

src/web-chatview/web.gresource.xml

+  <?xml version="1.0" encoding="UTF-8"?>
+  <gresources>
+    <gresource prefix="/net/jami/JamiGnome">
+      <!-- HTML -->
+      <file>chatview.html</file>
+
+      <!-- JavaScript -->
+      <file>chatview.js</file>
+      <file>linkify.js</file>
+      <file>linkify-string.js</file>
+      <file>linkify-html.js</file>
+      <file>jed.js</file>
+
+      <!-- CSS -->
+      <file>chatview.css</file>
+      <file>chatview-gnome.css</file>
+
+      <!-- Locale -->
+    </gresource>
+  </gresources>