mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Merge pull request #1727 from Bilb/play-custom-speed-button
add button to control speed playback on the player
This commit is contained in:
commit
ee3475f2be
|
@ -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,23 +1,22 @@
|
|||
// Audio Player
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import H5AudioPlayer from 'react-h5-audio-player';
|
||||
import { useSelector } from 'react-redux';
|
||||
import H5AudioPlayer, { RHAP_UI } from 'react-h5-audio-player';
|
||||
import { useTheme } from 'styled-components';
|
||||
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
|
||||
import { getAudioAutoplay } from '../../state/selectors/userConfig';
|
||||
import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
|
||||
import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
|
||||
|
||||
export const AudioPlayerWithEncryptedFile = (props: {
|
||||
src: string;
|
||||
contentType: string;
|
||||
playbackSpeed: number;
|
||||
playNextMessage?: (index: number) => void;
|
||||
playableMessageIndex?: number;
|
||||
nextMessageToPlay?: number;
|
||||
}) => {
|
||||
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(() => {
|
||||
|
@ -55,6 +54,21 @@ export const AudioPlayerWithEncryptedFile = (props: {
|
|||
listenInterval={100}
|
||||
onEnded={onEnded}
|
||||
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}
|
||||
playNextMessage={this.props.playNextMessage}
|
||||
|
@ -576,11 +573,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);
|
||||
|
@ -827,15 +819,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 a new issue