feat: add transient message meta, fixes #24

res/fixtures/messaging.json

@@ -33,8 +33,7 @@
       "content": "Quick message just to confirm that I asked the designers for a new illustration.",
 
       "metas": {
-        "encrypted": true,
-        "edited": false
+        "encrypted": true
       }
     },
 
@@ -46,8 +45,7 @@
       "content": "We need one more for the blog.",
 
       "metas": {
-        "encrypted": true,
-        "edited": false
+        "encrypted": true
       }
     },
 
@@ -59,8 +57,7 @@
       "content": "😇",
 
       "metas": {
-        "encrypted": true,
-        "edited": false
+        "encrypted": true
       }
     },
 
@@ -73,8 +70,7 @@
 
       "metas": {
         "secure": true,
-        "encrypted": false,
-        "edited": false
+        "encrypted": false
       },
 
       "reactions": [
@@ -135,8 +131,7 @@
       ],
 
       "metas": {
-        "encrypted": true,
-        "edited": false
+        "encrypted": true
       }
     },
 
@@ -148,8 +143,7 @@
       "content": "Haha yes! I'll keep calm for sure.\n\nIn the meantime, and before I forget, you asked me for some brand assets. Here they are, but you can also find them at: [Crisp website](https://crisp.chat/), https://crisp.chat/en/ or crisp.chat and even email them at: [email protected]",
 
       "metas": {
-        "encrypted": false,
-        "edited": false
+        "encrypted": false
       }
     },
 
@@ -182,8 +176,7 @@
       ],
 
       "metas": {
-        "encrypted": false,
-        "edited": false
+        "encrypted": false
       }
     },
 
@@ -195,8 +188,7 @@
       "content": "Thank you guys, it was well received!",
 
       "metas": {
-        "encrypted": true,
-        "edited": false
+        "encrypted": true
       }
     },
 
@@ -208,8 +200,7 @@
       "content": "I would like to share a video about an open-source medical ventilator I invented! 👨‍💻",
 
       "metas": {
-        "encrypted": true,
-        "edited": false
+        "encrypted": true
       }
     },
 
@@ -239,8 +230,7 @@
       ],
 
       "metas": {
-        "encrypted": true,
-        "edited": false
+        "encrypted": true
       }
     },
 
@@ -264,8 +254,7 @@
       ],
 
       "metas": {
-        "encrypted": true,
-        "edited": false
+        "encrypted": true
       }
     },
 
@@ -276,9 +265,21 @@
       "from": "[email protected]",
       "content": "I'm sharing a backtrace I just saw on the XMPP server:\n\n```\n&> Feb 13 20:43:50 modulemanager   error   Error initializing module 'storage_sql' on 'proxy.ssk.pm': /usr/share/lua/5.1/pr\nosody/util/startup.lua:203: module 'DBI' not found:No LuaRocks module found for DBI\n        no field package.preload['DBI']\n        no file './prosody/DBI.lua'\n        no file './DBI.lua'\n        no file '/usr/local/share/lua/5.1/prosody/DBI.lua'\n        no file '/usr/local/share/lua/5.1/DBI.lua'\n```\n\nCan someone have a look at it? [@Valerian Saliou](xmpp:[email protected])",
 
+      "metas": {
+        "encrypted": true
+      }
+    },
+
+    {
+      "id": "cd05f040-ce95-4aaf-996e-7fb429c26107",
+      "type": "text",
+      "date": "2022-07-02T10:13:15.000Z",
+      "from": "[email protected]",
+      "content": "Psst... just for you in private, can you please DM me?",
+
       "metas": {
         "encrypted": true,
-        "edited": false
+        "transient": true
       }
     },
 
@@ -290,8 +291,7 @@
       "content": "I am testing some ~~Markdown there~~, don't _mind me_... 😇\n\n---\n\n**The developer said:**\n\n1. Thank you for reporting this bug.\n2. I however do not have time to fix this...\n3. Maybe, you should do it!\n\n# This is huge!\n## This is big!\n### This is medium!\n#### This is small!\n##### This is smaller!\n###### This is tiny!\n\nCan you look at this code `instance` please?",
 
       "metas": {
-        "encrypted": true,
-        "edited": false
+        "encrypted": true
       }
     }
   ]

src/messaging/components/message/message.css

@@ -258,6 +258,10 @@
   hyphens: auto;
 }
 
+.message-text-inner.message-text-inner--transient {
+  color: var(--color-grey-dark);
+}
+
 .message-text-inner.message-text-inner--enlarged {
   font-size: 2em;
   line-height: 1.25em;

src/messaging/components/message/message.js

@@ -208,8 +208,13 @@ function Message(message) {
   };
 }
 
-function MessageLine(observer) {
+function MessageLine(content, observer) {
   return {
+    // --> DATA <--
+
+    edited: content.properties?.edited || false,
+    transient: content.properties?.transient || false,
+
     // --> METHODS <--
 
     /**
@@ -236,7 +241,6 @@ function MessagePartText(content) {
 
     html: null,
     enlarged: false,
-    edited: (content.properties || {}).edited || false,
 
     // --> METHODS <--
 

src/messaging/locales/de.json

@@ -18,7 +18,8 @@
 
   "attributes": {
     "insecure": "Nicht verschlüsselt",
-    "edited": "Bearbeitet"
+    "edited": "Bearbeitet",
+    "transient": "Nur für Sie sichtbar"
   },
 
   "actions": {

src/messaging/locales/en.json

@@ -18,7 +18,8 @@
 
   "attributes": {
     "insecure": "Not encrypted",
-    "edited": "Edited"
+    "edited": "Edited",
+    "transient": "Only visible by you"
   },
 
   "actions": {

src/messaging/locales/fr.json

@@ -18,7 +18,8 @@
 
   "attributes": {
     "insecure": "Non chiffré",
-    "edited": "Édité"
+    "edited": "Édité",
+    "transient": "Visible par vous seul"
   },
 
   "actions": {

src/messaging/messaging.html

@@ -61,7 +61,7 @@
       >
         <div
           v-for="(line, lineIndex) in content"
-          v-scope="MessageLine(observer)"
+          v-scope="MessageLine(line, observer)"
           @vue:mounted="mounted"
           :key="line.id"
           :data-line-id="line.id"
@@ -177,6 +177,7 @@
             ]"
           >
             <span
+              v-if="!transient"
               @click.stop="onActionReactionsClick($event, line.id)"
               :title="$context.i18n._.actions.reactions"
               :class="[
@@ -228,11 +229,16 @@
         :class="[
           'message-text-inner',
           {
+            'message-text-inner--transient': transient,
             'message-text-inner--enlarged': enlarged
           }
         ]"
       ></span>
 
+      <span v-if="transient" class="message-text-flag">
+        ({{ $context.i18n._.attributes.transient }})
+      </span>
+
       <span v-if="edited" class="message-text-flag">
         ({{ $context.i18n._.attributes.edited }})
       </span>