add button to control speed playback on the player
This commit is contained in:
parent
7192b6ea61
commit
9bdd6ad139
|
@ -404,7 +404,6 @@
|
|||
"device": "Device",
|
||||
"destination": "Destination",
|
||||
"learnMore": "Learn more",
|
||||
"playAtCustomSpeed": "Play at $multipler$x speed",
|
||||
"linkVisitWarningTitle": "Open this link in your browser?",
|
||||
"linkVisitWarningMessage": "Are you sure you want to open $url$ in your browser?",
|
||||
"open": "Open",
|
||||
|
|
|
@ -1385,3 +1385,23 @@ input {
|
|||
padding: $session-margin-sm $session-margin-lg;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.speedButton {
|
||||
padding: $session-margin-xs;
|
||||
opacity: 0.6;
|
||||
transition: none;
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.session-button {
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
color: themed('textColorOpposite');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,18 +1,16 @@
|
|||
// Audio Player
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import H5AudioPlayer from 'react-h5-audio-player';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import H5AudioPlayer, { RHAP_UI } from 'react-h5-audio-player';
|
||||
import { useTheme } from 'styled-components';
|
||||
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
|
||||
import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
|
||||
import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
|
||||
import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
|
||||
|
||||
export const AudioPlayerWithEncryptedFile = (props: {
|
||||
src: string;
|
||||
contentType: string;
|
||||
playbackSpeed: number;
|
||||
}) => {
|
||||
export const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const [playbackSpeed, setPlaybackSpeed] = useState(1.0);
|
||||
const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType);
|
||||
const { playbackSpeed } = props;
|
||||
const player = useRef<H5AudioPlayer | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -31,6 +29,21 @@ export const AudioPlayerWithEncryptedFile = (props: {
|
|||
showDownloadProgress={false}
|
||||
listenInterval={100}
|
||||
ref={player}
|
||||
customControlsSection={[
|
||||
RHAP_UI.MAIN_CONTROLS,
|
||||
RHAP_UI.VOLUME,
|
||||
<div className="speedButton" key="togglePlaybackSpeed">
|
||||
<SessionButton
|
||||
text={`${playbackSpeed}x`}
|
||||
theme={theme}
|
||||
onClick={() => {
|
||||
setPlaybackSpeed(playbackSpeed === 1 ? 1.5 : 1);
|
||||
}}
|
||||
buttonType={SessionButtonType.Simple}
|
||||
buttonColor={SessionButtonColor.None}
|
||||
/>
|
||||
</div>,
|
||||
]}
|
||||
customIcons={{
|
||||
play: (
|
||||
<SessionIcon
|
||||
|
|
|
@ -50,7 +50,6 @@ interface State {
|
|||
expiring: boolean;
|
||||
expired: boolean;
|
||||
imageBroken: boolean;
|
||||
playbackSpeed: number;
|
||||
}
|
||||
|
||||
const EXPIRATION_CHECK_MINIMUM = 2000;
|
||||
|
@ -69,7 +68,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
expiring: false,
|
||||
expired: false,
|
||||
imageBroken: false,
|
||||
playbackSpeed: 1,
|
||||
};
|
||||
this.ctxMenuID = `ctx-menu-message-${uuid()}`;
|
||||
}
|
||||
|
@ -205,7 +203,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
}}
|
||||
>
|
||||
<AudioPlayerWithEncryptedFile
|
||||
playbackSpeed={this.state.playbackSpeed}
|
||||
src={firstAttachment.url}
|
||||
contentType={firstAttachment.contentType}
|
||||
/>
|
||||
|
@ -573,11 +570,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
</Item>
|
||||
) : null}
|
||||
|
||||
{isAudio(attachments) ? (
|
||||
<Item onClick={this.updatePlaybackSpeed}>
|
||||
{window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)}
|
||||
</Item>
|
||||
) : null}
|
||||
<Item
|
||||
onClick={() => {
|
||||
MessageInteraction.copyBodyToClipboard(text);
|
||||
|
@ -824,15 +816,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Doubles / halves the playback speed based on the current playback speed.
|
||||
*/
|
||||
private updatePlaybackSpeed() {
|
||||
this.setState(prevState => ({
|
||||
playbackSpeed: prevState.playbackSpeed === 1 ? 2 : 1,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleContextMenu(e: any) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
|
Loading…
Reference in New Issue