Linting and formatting changes applied.

pull/1706/head
Warrick Corfe-Tan 4 years ago
parent 207026025c
commit 061cb38300

@ -1,4 +1,4 @@
import React, { createRef } from 'react';
import React, { createRef, useEffect } from 'react';
import classNames from 'classnames';
import { Avatar, AvatarSize } from '../Avatar';
@ -13,19 +13,22 @@ 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, playbackSpeed: number }) => {
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])
}, [playbackSpeed]);
return (
<H5AudioPlayer
@ -90,7 +93,6 @@ 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;
@ -126,7 +128,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
expiring: false,
expired: false,
imageBroken: false,
playbackSpeed: 1
playbackSpeed: 1,
};
this.ctxMenuID = `ctx-menu-message-${uuid()}`;
}
@ -191,18 +193,6 @@ 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 {
@ -618,7 +608,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
const selectMessageText = window.i18n('selectMessage');
const deleteMessageText = window.i18n('deleteMessage');
return (
<Menu
id={this.ctxMenuID}
@ -638,7 +627,11 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
</Item>
) : null}
<Item onClick={this.updatePlaybackSpeed}>{window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)}</Item>
{isAudio(attachments) ? (
<Item onClick={this.updatePlaybackSpeed}>
{window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)}
</Item>
) : null}
<Item onClick={onCopyText}>{window.i18n('copyMessage')}</Item>
<Item onClick={this.onReplyPrivate}>{window.i18n('replyToMessage')}</Item>
<Item onClick={onShowDetail}>{window.i18n('moreInformation')}</Item>
@ -731,8 +724,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)))
);
}
@ -879,6 +872,16 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
);
}
/**
* Doubles / halves the playback speed based on the current playback speed.
*/
private updatePlaybackSpeed() {
this.setState({
...this.state,
playbackSpeed: this.state.playbackSpeed === 1 ? 2 : 1,
});
}
private handleContextMenu(e: any) {
e.preventDefault();
e.stopPropagation();

@ -66,7 +66,6 @@ const glow = (color: string, glowDuration: number, glowStartDelay: number) => {
//increase shadow intensity by 3
const dropShadow = `${dropShadowType.repeat(2)};`;
// TODO: Decrease dropshadow for last frame
// creating keyframe for sequential animations
let kf = '';
for (let i = 0; i <= glowDuration; i++) {
@ -94,7 +93,11 @@ const animation = (props: any) => {
`;
} else if (props.glowDuration !== undefined && props.glowStartDelay !== undefined) {
return css`
${glow(props.iconColor, props.glowDuration, props.glowStartDelay)} ${props.glowDuration}s ease-in infinite;
${glow(
props.iconColor,
props.glowDuration,
props.glowStartDelay
)} ${props.glowDuration}s ease-in infinite;
`;
} else {
return;

Loading…
Cancel
Save