Add a default poster for videos in the chat

Fix the height of the videos to prevent scroll issues in the Chat
Disable the Upload button when the selected file exceed the XMPP Upload service limit

app/widgets/Chat/chat.css

@@ -309,6 +309,11 @@ main:not(.enabled) #chat_widget {
 #chat_widget ul li div.bubble.file video {
     display: block;
     max-height: 200px;
+    background-color: rgba(var(--movim-font), 0.15);
+}
+
+#chat_widget ul li div.bubble.file video:not(.gif) {
+    height: 200px;
 }
 
 #chat_widget li div.bubble.sticker.file img:not(.emoji):not(.hfr) {

app/widgets/Chat/chat.js

@@ -1308,6 +1308,8 @@ var Chat = {
                     video.setAttribute('poster', file.thumbnail.uri);
                     video.setAttribute('width', file.thumbnail.width);
                     video.setAttribute('height', file.thumbnail.height);
+                } else {
+                    video.setAttribute('poster', BASE_URI + 'theme/img/poster.svg');
                 }
 
                 // Tenor implementation
@@ -1315,6 +1317,7 @@ var Chat = {
                     video.classList.add('gif');
                 } else {
                     video.setAttribute('controls', 'controls');
+                    video.setAttribute('preload', 'metadata');
                 }
 
                 div.appendChild(video);

app/widgets/Upload/_upload.tpl

@@ -11,7 +11,7 @@
             <div>
                 <p>{$c->__('upload.choose')}</p>
                 {if="isset($service->description)"}
-                    <p>{$c->__('upload.max_size', sizeToCleanSize($service->description))}</p>
+                    <p class="limit" data-limit="{$service->description}">{$c->__('upload.max_size', sizeToCleanSize($service->description))}</p>
                 {/if}
                 <p>
                     <input type="file" id="file" onchange="Upload.preview()"/>

app/widgets/Upload/upload.js

@@ -168,10 +168,10 @@ var Upload = {
         Upload.file = file;
 
         var preview = document.querySelector('#upload img.preview_picture');
+        var fileInfo = document.querySelector('#upload li.file');
 
         // If the preview system is there
         if (preview) {
-            var fileInfo = document.querySelector('#upload li.file');
             var toDraw = fileInfo.querySelector('span.primary');
             fileInfo.classList.remove('preview');
             fileInfo.querySelector('p.name').innerText = Upload.name;
@@ -196,7 +196,13 @@ var Upload = {
         }
 
         if (Upload.uploadButton) {
-            Upload.uploadButton.classList.remove('disabled');
+            console.log(document.querySelector('#upload p.limit'));
+            console.log(document.querySelector('#upload p.limit').dataset.limit);
+            if (!document.querySelector('#upload p.limit') || document.querySelector('#upload p.limit').dataset.limit >= file.size) {
+                Upload.uploadButton.classList.remove('disabled');
+            } else {
+                Upload.uploadButton.classList.add('disabled');
+            }
         }
     },
 

public/theme/img/poster.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="250"
+   viewBox="0 0 444 250"
+   width="444"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="poster.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="1.9195257"
+     inkscape:cx="119.03983"
+     inkscape:cy="93.773167"
+     inkscape:window-width="1920"
+     inkscape:window-height="1025"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M 0,0 H 24 V 24 H 0 Z"
+     fill="none"
+     id="path2" />
+  <path
+     d="m 238.62077,102.83892 5.54029,11.08054 h -8.31041 l -5.54028,-11.08054 h -5.54027 l 5.54027,11.08054 h -8.31041 l -5.54026,-11.08054 h -5.54029 l 5.54029,11.08054 h -8.31041 l -5.54028,-11.08054 h -2.77014 c -3.04715,0 -5.51257,2.49313 -5.51257,5.54029 l -0.0277,33.24161 c 0,3.04714 2.49312,5.54027 5.54028,5.54027 h 44.32219 c 3.04714,0 5.54025,-2.49314 5.54025,-5.54027 v -38.7819 z"
+     id="path4"
+     style="fill:#f2f2f2;stroke-width:2.77013" />
+</svg>