glitchier-soc/app/javascript/flavours/glitch/store/middlewares/sounds.ts
Renaud Chaput 487715a3e3 [Glitch] Type Redux store and middleware
Port d67de22458 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2023-05-09 23:28:40 +02:00

56 lines
1.1 KiB
TypeScript

import { Middleware, AnyAction } from 'redux';
import { RootState } from '..';
interface AudioSource {
src: string
type: string
}
const createAudio = (sources: AudioSource[]) => {
const audio = new Audio();
sources.forEach(({ type, src }) => {
const source = document.createElement('source');
source.type = type;
source.src = src;
audio.appendChild(source);
});
return audio;
};
const play = (audio: HTMLAudioElement) => {
if (!audio.paused) {
audio.pause();
if (typeof audio.fastSeek === 'function') {
audio.fastSeek(0);
} else {
audio.currentTime = 0;
}
}
audio.play();
};
export const soundsMiddleware = (): Middleware<Record<string, never>, RootState> => {
const soundCache: {[key: string]: HTMLAudioElement} = {
boop: createAudio([
{
src: '/sounds/boop.ogg',
type: 'audio/ogg',
},
{
src: '/sounds/boop.mp3',
type: 'audio/mpeg',
},
]),
};
return () => next => (action: AnyAction) => {
const sound = action?.meta?.sound;
if (sound && soundCache[sound]) {
play(soundCache[sound]);
}
return next(action);
};
};