105 lines
3.2 KiB
JavaScript
105 lines
3.2 KiB
JavaScript
import ConverseGif from 'shared/gif/index.js';
|
|
import { CustomElement } from 'shared/components/element.js';
|
|
import { api } from '@converse/headless/core';
|
|
import { getHyperlinkTemplate } from 'utils/html.js';
|
|
import { html } from 'lit';
|
|
|
|
import './styles/gif.scss';
|
|
|
|
export default class ConverseGIFElement extends CustomElement {
|
|
static get properties () {
|
|
/**
|
|
* @typedef { Object } ConverseGIFComponentProperties
|
|
* @property { Boolean } autoplay
|
|
* @property { Boolean } noloop
|
|
* @property { String } progress_color
|
|
* @property { String } nick
|
|
* @property { ('url'|'empty'|'error') } fallback
|
|
* @property { String } src
|
|
*/
|
|
return {
|
|
'autoplay': { type: Boolean },
|
|
'noloop': { type: Boolean },
|
|
'progress_color': { type: String },
|
|
'fallback': { type: String },
|
|
'src': { type: String },
|
|
};
|
|
}
|
|
|
|
constructor () {
|
|
super();
|
|
this.src = null;
|
|
this.autoplay = false;
|
|
this.noloop = false;
|
|
this.fallback = 'url';
|
|
}
|
|
|
|
initGIF () {
|
|
const options = {
|
|
'autoplay': this.autoplay,
|
|
'loop': !this.noloop,
|
|
}
|
|
if (this.progress_color) {
|
|
options['progress_color'] = this.progress_color;
|
|
}
|
|
this.supergif = new ConverseGif(this, options);
|
|
}
|
|
|
|
updated (changed) {
|
|
if (!this.supergif || changed.has('src')) {
|
|
this.initGIF();
|
|
return;
|
|
}
|
|
if (changed.has('autoplay')) {
|
|
this.supergif.options.autoplay = this.autoplay;
|
|
}
|
|
if (changed.has('noloop')) {
|
|
this.supergif.options.loop = !this.noloop;
|
|
}
|
|
if (changed.has('progress_color')) {
|
|
this.supergif.options.progress_color = this.progress_color;
|
|
}
|
|
}
|
|
|
|
render () {
|
|
return (this.supergif?.load_error && ['url', 'empty'].includes(this.fallback)) ? this.renderErrorFallback() :
|
|
html`<canvas class="gif-canvas"
|
|
@mouseover=${() => this.setHover()}
|
|
@mouseleave=${() => this.unsetHover()}
|
|
@click=${ev => this.onControlsClicked(ev)}><img class="gif" src="${this.src}"></a></canvas>`;
|
|
}
|
|
|
|
renderErrorFallback () {
|
|
if (this.fallback === 'url') {
|
|
return getHyperlinkTemplate(this.src);
|
|
} else if (this.fallback === 'empty') {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
setHover () {
|
|
if (this.supergif) {
|
|
this.supergif.hovering = true;
|
|
this.hover_timeout && clearTimeout(this.hover_timeout);
|
|
this.hover_timeout = setTimeout(() => this.unsetHover(), 2000);
|
|
}
|
|
}
|
|
|
|
unsetHover () {
|
|
if (this.supergif) this.supergif.hovering = false;
|
|
}
|
|
|
|
onControlsClicked (ev) {
|
|
ev.preventDefault();
|
|
if (this.supergif.playing) {
|
|
this.supergif.pause();
|
|
} else if (this.supergif.frames.length > 0) {
|
|
// When the user manually clicks play, we turn on looping
|
|
this.supergif.options.loop = true;
|
|
this.supergif.play();
|
|
}
|
|
}
|
|
}
|
|
|
|
api.elements.define('converse-gif', ConverseGIFElement);
|