BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flesh out GIF player API

Browse Source
This commit is contained in:
Raphaël Forment
2023-11-08 23:14:48 +01:00
parent d69ab7a75a
commit f91d47faec
1 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/API.ts
View File

@ -2046,65 +2046,67 @@ export class UserAPI {
// ============================================================= // =============================================================
// Resolution // Resolution
// ============================================================= // =============================================================
//
public showGif = (options: any) => { public gif = (options: any) => {
/** /**
* Displays a GIF on the webpage with various customizable options including rotation and fading. * Displays a GIF on the webpage with customizable options including rotation and timed fade-out.
* @param {Object} options - The configuration object for displaying the GIF. * @param {Object} options - The configuration object for displaying the GIF.
* @param {string} options.gifUrl - The URL of the GIF to display. * @param {string} options.url - The URL of the GIF to display.
* @param {number} [options.posX=0] - The X-coordinate to place the GIF at. * @param {number} [options.posX=0] - The X-coordinate to place the GIF at.
* @param {number} [options.posY=0] - The Y-coordinate to place the GIF at. * @param {number} [options.posY=0] - The Y-coordinate to place the GIF at.
* @param {number} [options.opacity=1] - The opacity level of the GIF. * @param {number} [options.opacity=1] - The initial opacity level of the GIF.
* @param {string} [options.size='auto'] - The size of the GIF (can be 'cover', 'contain', or specific dimensions). * @param {string} [options.size='auto'] - The size of the GIF (can be 'cover', 'contain', or specific dimensions).
* @param {number} [options.zIndex=1000] - The z-index of the GIF.
* @param {boolean} [options.center=false] - Whether to center the GIF in the window. * @param {boolean} [options.center=false] - Whether to center the GIF in the window.
* @param {number} [options.rotation=0] - The rotation angle of the GIF in degrees. * @param {number} [options.rotation=0] - The rotation angle of the GIF in degrees.
* @param {string} [options.filter='none'] - The CSS filter function to apply for color alterations. * @param {string} [options.filter='none'] - The CSS filter function to apply for color alterations.
* @param {number} [options.fadeDuration=0] - The duration of the fade-in effect in seconds. * @param {number} [options.duration=10] - The total duration the GIF is displayed, in pulses.
*/ */
const { const {
gifUrl, url,
posX = 0, posX = 0,
posY = 0, posY = 0,
opacity = 1, opacity = 1,
size = 'auto', size = 'auto',
zIndex = 1000,
center = false, center = false,
rotation = 0, rotation = 0,
filter = 'none', filter = 'none',
fadeDuration = 0 dur = 1
} = options; } = options;
let real_duration = dur * this.app.clock.pulse_duration * this.app.clock.ppqn;
let fadeOutDuration = real_duration * 0.1;
let visibilityDuration = real_duration - fadeOutDuration;
const gifElement = document.createElement('img'); const gifElement = document.createElement('img');
gifElement.src = gifUrl; gifElement.src = url;
// @ts-ignore gifElement.style.position = 'fixed';
gifElement.style = ` gifElement.style.left = center ? '50%' : `${posX}px`;
position: fixed; gifElement.style.top = center ? '50%' : `${posY}px`;
left: ${center ? '50%' : `${posX}px`}; gifElement.style.opacity = `${opacity}`;
top: ${center ? '50%' : `${posY}px`}; gifElement.style.zIndex = '-1';
opacity: ${fadeDuration > 0 ? 0 : opacity}; /* Start with opacity 0 if fading in */ if (size !== 'auto') {
z-index: ${zIndex}; gifElement.style.width = size;
${size !== 'auto' ? `width: ${size}; height: ${size};` : ''} gifElement.style.height = size;
${center ? 'transform: translate(-50%, -50%) rotate(${rotation}deg);' : `transform: rotate(${rotation}deg);`} }
filter: ${filter}; const transformRules = [`rotate(${rotation}deg)`];
transition: opacity ${fadeDuration}s ease; if (center) {
`; transformRules.unshift('translate(-50%, -50%)');
gifElement.classList.add('top-level-gif'); // Add a class for easier removal }
gifElement.style.transform = transformRules.join(' ');
gifElement.style.filter = filter;
gifElement.style.transition = `opacity ${fadeOutDuration}s ease`;
document.body.appendChild(gifElement); document.body.appendChild(gifElement);
// If fadeDuration is specified, fade the image in // Start the fade-out at the end of the visibility duration
if (fadeDuration > 0) { setTimeout(() => {
setTimeout(() => { gifElement.style.opacity = '0';
gifElement.style.opacity = opacity; }, visibilityDuration * 1000);
}, 10); // Timeout to ensure the element is rendered before starting the transition
} // Remove the GIF from the DOM after the fade-out duration
setTimeout(() => {
if (document.body.contains(gifElement)) {
document.body.removeChild(gifElement);
}
}, real_duration * 1000);
} }
public clearGif = () => {
const gifs = document.querySelectorAll('.top-level-gif');
gifs.forEach(gif => gif.remove());
}
} }