Added ability to toggle playback speed for audio messages via context menu,
This commit is contained in:
parent
43855f9986
commit
9730471d59
|
@ -417,5 +417,6 @@
|
|||
"unknownCountry": "Unknown Country",
|
||||
"device": "Device",
|
||||
"destination": "Destination",
|
||||
"learnMore": "Learn more"
|
||||
"learnMore": "Learn more",
|
||||
"playAtCustomSpeed": "Play at $multipler$x speed"
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { createRef } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Avatar, AvatarSize } from '../Avatar';
|
||||
|
@ -13,9 +13,20 @@ import { Quote } from './Quote';
|
|||
import H5AudioPlayer from 'react-h5-audio-player';
|
||||
// import 'react-h5-audio-player/lib/styles.css';
|
||||
|
||||
const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string }) => {
|
||||
const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string, playbackSpeed: number }) => {
|
||||
const theme = useTheme();
|
||||
const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType);
|
||||
const { playbackSpeed } = props;
|
||||
const player = createRef<H5AudioPlayer>();
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
// updates playback speed to value selected in context menu
|
||||
if (player.current?.audio.current?.playbackRate) {
|
||||
player.current.audio.current.playbackRate = playbackSpeed;
|
||||
}
|
||||
}, [playbackSpeed])
|
||||
|
||||
return (
|
||||
<H5AudioPlayer
|
||||
src={urlToLoad}
|
||||
|
@ -24,6 +35,7 @@ const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string
|
|||
showJumpControls={false}
|
||||
showDownloadProgress={false}
|
||||
listenInterval={100}
|
||||
ref={player}
|
||||
customIcons={{
|
||||
play: (
|
||||
<SessionIcon
|
||||
|
@ -78,6 +90,7 @@ import {
|
|||
} from '../../interactions/messageInteractions';
|
||||
import { updateUserDetailsModal } from '../../state/ducks/modalDialog';
|
||||
import { MessageInteraction } from '../../interactions';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
// Same as MIN_WIDTH in ImageGrid.tsx
|
||||
const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
|
||||
|
@ -86,6 +99,7 @@ interface State {
|
|||
expiring: boolean;
|
||||
expired: boolean;
|
||||
imageBroken: boolean;
|
||||
playbackSpeed: number;
|
||||
}
|
||||
|
||||
const EXPIRATION_CHECK_MINIMUM = 2000;
|
||||
|
@ -106,11 +120,13 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
this.handleContextMenu = this.handleContextMenu.bind(this);
|
||||
this.onAddModerator = this.onAddModerator.bind(this);
|
||||
this.onRemoveFromModerator = this.onRemoveFromModerator.bind(this);
|
||||
this.updatePlaybackSpeed = this.updatePlaybackSpeed.bind(this);
|
||||
|
||||
this.state = {
|
||||
expiring: false,
|
||||
expired: false,
|
||||
imageBroken: false,
|
||||
playbackSpeed: 1
|
||||
};
|
||||
this.ctxMenuID = `ctx-menu-message-${uuid()}`;
|
||||
}
|
||||
|
@ -175,6 +191,18 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Doubles / halves the playback speed based on the current playback speed.
|
||||
*/
|
||||
private updatePlaybackSpeed() {
|
||||
console.log('updating playback speed');
|
||||
this.setState({
|
||||
...this.state,
|
||||
playbackSpeed: this.state.playbackSpeed === 1 ? 2 : 1
|
||||
});
|
||||
}
|
||||
|
||||
// tslint:disable-next-line max-func-body-length cyclomatic-complexity
|
||||
public renderAttachment() {
|
||||
const {
|
||||
|
@ -241,6 +269,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
}}
|
||||
>
|
||||
<AudioPlayerWithEncryptedFile
|
||||
playbackSpeed={this.state.playbackSpeed}
|
||||
src={firstAttachment.url}
|
||||
contentType={firstAttachment.contentType}
|
||||
/>
|
||||
|
@ -589,6 +618,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
const selectMessageText = window.i18n('selectMessage');
|
||||
const deleteMessageText = window.i18n('deleteMessage');
|
||||
|
||||
|
||||
return (
|
||||
<Menu
|
||||
id={this.ctxMenuID}
|
||||
|
@ -608,6 +638,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
</Item>
|
||||
) : null}
|
||||
|
||||
<Item onClick={this.updatePlaybackSpeed}>{window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)}</Item>
|
||||
<Item onClick={onCopyText}>{window.i18n('copyMessage')}</Item>
|
||||
<Item onClick={this.onReplyPrivate}>{window.i18n('replyToMessage')}</Item>
|
||||
<Item onClick={onShowDetail}>{window.i18n('moreInformation')}</Item>
|
||||
|
@ -700,8 +731,8 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
|
||||
return Boolean(
|
||||
displayImage &&
|
||||
((isImage(attachments) && hasImage(attachments)) ||
|
||||
(isVideo(attachments) && hasVideoScreenshot(attachments)))
|
||||
((isImage(attachments) && hasImage(attachments)) ||
|
||||
(isVideo(attachments) && hasVideoScreenshot(attachments)))
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue