Browse Source

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
pull/1058/head
Timothée Jaussoin 4 years ago
parent
commit
1759ef455b
  1. 5
      app/widgets/Chat/chat.css
  2. 3
      app/widgets/Chat/chat.js
  3. 2
      app/widgets/Upload/_upload.tpl
  4. 10
      app/widgets/Upload/upload.js
  5. 43
      public/theme/img/poster.svg

5
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) {

3
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);

2
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()"/>

10
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');
}
}
},

43
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>
Loading…
Cancel
Save