signal-desktop/ts/state/smart/MiniPlayer.tsx

70 lines
2 KiB
TypeScript
Raw Normal View History

2023-02-24 23:18:57 +00:00
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
2023-02-28 13:07:40 +00:00
import React, { useCallback } from 'react';
2023-02-24 23:18:57 +00:00
import { useSelector } from 'react-redux';
import { MiniPlayer, PlayerState } from '../../components/MiniPlayer';
import type { Props as DumbProps } from '../../components/MiniPlayer';
2023-03-02 20:55:40 +00:00
import {
AudioPlayerContent,
useAudioPlayerActions,
} from '../ducks/audioPlayer';
2023-02-24 23:18:57 +00:00
import {
selectAudioPlayerActive,
selectVoiceNoteTitle,
} from '../selectors/audioPlayer';
import { getIntl } from '../selectors/user';
type Props = Pick<DumbProps, 'shouldFlow'>;
2023-02-24 23:18:57 +00:00
/**
* 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({ shouldFlow }: Props): JSX.Element | null {
2023-02-24 23:18:57 +00:00
const i18n = useSelector(getIntl);
const active = useSelector(selectAudioPlayerActive);
const getVoiceNoteTitle = useSelector(selectVoiceNoteTitle);
2023-02-28 13:07:40 +00:00
const { setIsPlaying, setPlaybackRate, unloadMessageAudio } =
useAudioPlayerActions();
2023-02-24 23:18:57 +00:00
const handlePlay = useCallback(() => setIsPlaying(true), [setIsPlaying]);
const handlePause = useCallback(() => setIsPlaying(false), [setIsPlaying]);
2023-02-28 13:07:40 +00:00
if (!active) {
2023-02-24 23:18:57 +00:00
return null;
}
2023-03-02 20:55:40 +00:00
const { content } = active;
const url = AudioPlayerContent.isVoiceNote(content)
? content.current.url
: content.url;
2023-02-24 23:18:57 +00:00
let state = PlayerState.loading;
2023-03-02 20:55:40 +00:00
if (url) {
2023-02-24 23:18:57 +00:00
state = active.playing ? PlayerState.playing : PlayerState.paused;
}
return (
<MiniPlayer
i18n={i18n}
2023-03-02 20:55:40 +00:00
title={
AudioPlayerContent.isDraft(content)
? i18n('you')
: getVoiceNoteTitle(content.current)
}
2023-02-24 23:18:57 +00:00
onPlay={handlePlay}
onPause={handlePause}
onPlaybackRate={setPlaybackRate}
onClose={unloadMessageAudio}
shouldFlow={shouldFlow}
2023-02-24 23:18:57 +00:00
state={state}
currentTime={active.currentTime}
duration={active.duration}
playbackRate={active.playbackRate}
/>
);
}