52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
// Copyright 2022 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import React, { useCallback } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { MiniPlayer, PlayerState } from '../../components/MiniPlayer';
|
|
import { useAudioPlayerActions } from '../ducks/audioPlayer';
|
|
import {
|
|
selectAudioPlayerActive,
|
|
selectVoiceNoteTitle,
|
|
} from '../selectors/audioPlayer';
|
|
import { getIntl } from '../selectors/user';
|
|
|
|
/**
|
|
* Wires the dispatch props and shows/hides the MiniPlayer
|
|
*
|
|
* It also triggers side-effecting actions (actual playback) in response to changes in
|
|
* the state
|
|
*/
|
|
export function SmartMiniPlayer(): JSX.Element | null {
|
|
const i18n = useSelector(getIntl);
|
|
const active = useSelector(selectAudioPlayerActive);
|
|
const getVoiceNoteTitle = useSelector(selectVoiceNoteTitle);
|
|
const { setIsPlaying, setPlaybackRate, unloadMessageAudio } =
|
|
useAudioPlayerActions();
|
|
const handlePlay = useCallback(() => setIsPlaying(true), [setIsPlaying]);
|
|
const handlePause = useCallback(() => setIsPlaying(false), [setIsPlaying]);
|
|
|
|
if (!active) {
|
|
return null;
|
|
}
|
|
|
|
let state = PlayerState.loading;
|
|
if (active.content.current.url) {
|
|
state = active.playing ? PlayerState.playing : PlayerState.paused;
|
|
}
|
|
|
|
return (
|
|
<MiniPlayer
|
|
i18n={i18n}
|
|
title={getVoiceNoteTitle(active.content.current)}
|
|
onPlay={handlePlay}
|
|
onPause={handlePause}
|
|
onPlaybackRate={setPlaybackRate}
|
|
onClose={unloadMessageAudio}
|
|
state={state}
|
|
currentTime={active.currentTime}
|
|
duration={active.duration}
|
|
playbackRate={active.playbackRate}
|
|
/>
|
|
);
|
|
}
|