Improve Link and Image previews using thumbhash in the Chats widget

Fix SendTo contact/chatroom Post sharing

CHANGELOG.md

@@ -5,6 +5,8 @@ Movim Changelog
 ---------------------------
 * Fix #1327 Use string casting for senders attribute
 * Fix URL handling when path is containing empty values //
+* Fix SendTo contact/chatroom Post sharing
+* Improve Link and Image previews using thumbhash in the Chats widget
 
 v0.25
 ---------------------------

app/Message.php

@@ -523,39 +523,7 @@ class Message extends Model
                         $this->picture = $messageFile->isPicture;
                         $this->messageFiles->push($messageFile);
                     }
-                } /*elseif (
-                    \in_array($stanza->reference->attributes()->type, ['mention', 'data'])
-                    && $stanza->reference->attributes()->uri
-                ) {
-
-                    $uri = parse_url($stanza->reference->attributes()->uri);
-
-                    if ($uri['scheme'] === 'xmpp') {
-                        $begin = '<a href="' . Route::urlize('share', $stanza->reference->attributes()->uri) . '">';
-
-                        if ($stanza->reference->attributes()->begin && $stanza->reference->attributes()->end) {
-                            $this->html = substr_replace(
-                                $this->body,
-                                $begin,
-                                (int)$stanza->reference->attributes()->begin,
-                                0
-                            );
-                            $this->html = substr_replace(
-                                $this->html,
-                                '</a>',
-                                (int)$stanza->reference->attributes()->end + strlen($begin),
-                                0
-                            );
-                        } else {
-                            $this->html = $begin . $this->body . '</a>';
-                        }
-
-                        $this->file = [
-                            'type' => 'xmpp',
-                            'uri' => (string)$stanza->reference->attributes()->uri,
-                        ];
-                    }
-                }*/
+                }
             }
 
             if (

app/widgets/Chat/chat.js

@@ -1338,7 +1338,7 @@ var Chat = {
                     img.setAttribute('onclick', 'Preview_ajaxHttpShow("' + file.preview.url + '", ' + data.mid + ')');
                 }
 
-                if (file.preview.thumbnail_type = 'image/thumbhash' && file.preview.thumbnail_url) {
+                if (file.preview.thumbnail_type == 'image/thumbhash' && file.preview.thumbnail_url) {
                     try {
                         div.style.background = `center / cover url(${thumbHashToDataURL(MovimUtils.base64ToBinary(file.preview.thumbnail_url))})`;
                     } catch (error) {

app/widgets/Chats/_chats_item.tpl

@@ -82,7 +82,10 @@
                         <span class="moderator">{$c->__('chats.me')}:</span>
                     {/if}
                     {if="$message->file->isPicture"}
-                        <i class="material-symbols">image</i> {$c->__('chats.picture')}
+                        {if="$message->file->preview && $message->file->preview['thumbnail_type'] == 'image/thumbhash' && $message->file->preview['thumbnail_url']"}
+                            <img class="tinythumb" data-thumbhash="{$message->file->preview['thumbnail_url']}">
+                        {/if}
+                        {$c->__('chats.picture')}
                     {elseif="$message->file->isAudio"}
                         <i class="material-symbols">equalizer</i> {$c->__('chats.audio')}
                     {elseif="$message->file->isVideo"}
@@ -96,9 +99,16 @@
                     {if="$message->jidfrom == $message->user_id"}
                         <span class="moderator">{$c->__('chats.me')}:</span>
                     {/if}
+                    {if="$message->resolvedUrl && $message->resolvedUrl->cache"}
+                        <i class="material-symbols">link</i> {$message->resolvedUrl->cache->title}
+                        {if="!empty($message->resolvedUrl->cache->description)"}
+                            | {$message->resolvedUrl->cache->description}
+                        {/if}
+                    {else}
                     {autoescape="off"}
                         {$message->body|stripTags|addEmojis}
                     {/autoescape}
+                    {/if}
                 </p>
             {/if}
         {elseif="$roster && $roster->presence && $roster && $roster->presence->status"}

app/widgets/Chats/chats.css

@@ -13,6 +13,13 @@ ul#chats_widget_list li {
     max-height: 8rem;
 }
 
+ul#chats_widget_list li img.tinythumb {
+    object-fit: cover;
+    width: 1.4rem;
+    height: 1.4rem;
+    margin-right: 0.25rem;
+}
+
 ul#chats_widget_list li.moving {
     will-change: transform;
     transition: transform 0.1s, max-height 0.2s ease-in-out 0.2s;

app/widgets/Chats/chats.js

@@ -23,6 +23,16 @@ var Chats = {
 
         while(i < items.length)
         {
+            if (items[i].querySelector('img.tinythumb')) {
+                var img = items[i].querySelector('img.tinythumb');
+
+                try {
+                    img.src = thumbHashToDataURL(MovimUtils.base64ToBinary(img.dataset.thumbhash));
+                } catch (error) {
+                    console.log('Cannot handle thumbhash hash');
+                }
+            }
+
             if (items[i].dataset.jid != null) {
                 items[i].onclick = function(e) {
                     Rooms.refresh();

app/widgets/SendTo/SendTo.php

@@ -80,14 +80,8 @@ class SendTo extends Base
         $this->rpc('SendTo.init');
     }
 
-    public function ajaxSend(string $to, $file, $muc = false, $message = false)
+    public function ajaxSend(string $to, bool $muc = false, string $message)
     {
-        $file->type = 'xmpp/uri'; // Internal placeholder
-        $file->name = $this->__('sendto.shared_with');
-
-        $messageFile = new MessageFile;
-        $messageFile->import($file);
-
         Toast::send($muc
             ? $this->__('sendto.shared_chatroom')
             : $this->__('sendto.shared_contact')
@@ -97,10 +91,9 @@ class SendTo extends Base
         $c = new Chat;
         $c->sendMessage(
             $to,
-            !empty($message) ? $message : $this->__('sendto.shared_with'),
+            $message,
             $muc,
-            null,
-            $messageFile
+            null
         );
     }
 

app/widgets/SendTo/_sendto_share.tpl

@@ -25,7 +25,7 @@
                         <img src="{$value->getPicture()}">
                     </span>
 
-                    <span class="control icon active gray" onclick="SendTo_ajaxSend('{$value->conference|echapJS}', {'uri': '{$uri}'}, true, '{$openlink}');">
+                    <span class="control icon active gray" onclick="SendTo_ajaxSend('{$value->conference|echapJS}', true, '{$openlink}');">
                         <i class="material-symbols">send</i>
                     </span>
 

app/widgets/SendTo/_sendto_share_contacts.tpl

@@ -13,7 +13,7 @@
             {/if}">
             <img src="{$value->getPicture(\Movim\ImageSize::M)}">
         </span>
-        <span class="control icon active gray" onclick="SendTo_ajaxSend('{$value->jid|echapJS}', {'uri': '{$uri}'}, false, '{$openlink}')">
+        <span class="control icon active gray" onclick="SendTo_ajaxSend('{$value->jid|echapJS}', false, '{$openlink}')">
             <i class="material-symbols">send</i>
         </span>
         <div>