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 classNames from 'classnames';
import { Avatar, AvatarSize } from '../Avatar'; import { Avatar, AvatarSize } from '../Avatar';
@ -13,19 +13,22 @@ import { Quote } from './Quote';
import H5AudioPlayer from 'react-h5-audio-player'; import H5AudioPlayer from 'react-h5-audio-player';
// import 'react-h5-audio-player/lib/styles.css'; // 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 theme = useTheme();
const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType); const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType);
const { playbackSpeed } = props; const { playbackSpeed } = props;
const player = createRef<H5AudioPlayer>(); const player = createRef<H5AudioPlayer>();
useEffect(() => { useEffect(() => {
// updates playback speed to value selected in context menu // updates playback speed to value selected in context menu
if (player.current?.audio.current?.playbackRate) { if (player.current?.audio.current?.playbackRate) {
player.current.audio.current.playbackRate = playbackSpeed; player.current.audio.current.playbackRate = playbackSpeed;
} }
}, [playbackSpeed]) }, [playbackSpeed]);
return ( return (
<H5AudioPlayer <H5AudioPlayer
@ -90,7 +93,6 @@ import {
} from '../../interactions/messageInteractions'; } from '../../interactions/messageInteractions';
import { updateUserDetailsModal } from '../../state/ducks/modalDialog'; import { updateUserDetailsModal } from '../../state/ducks/modalDialog';
import { MessageInteraction } from '../../interactions'; import { MessageInteraction } from '../../interactions';
import { useEffect } from 'react';
// Same as MIN_WIDTH in ImageGrid.tsx // Same as MIN_WIDTH in ImageGrid.tsx
const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200; const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
@ -126,7 +128,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
expiring: false, expiring: false,
expired: false, expired: false,
imageBroken: false, imageBroken: false,
playbackSpeed: 1 playbackSpeed: 1,
}; };
this.ctxMenuID = `ctx-menu-message-${uuid()}`; 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 // tslint:disable-next-line max-func-body-length cyclomatic-complexity
public renderAttachment() { public renderAttachment() {
const { const {
@ -618,7 +608,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
const selectMessageText = window.i18n('selectMessage'); const selectMessageText = window.i18n('selectMessage');
const deleteMessageText = window.i18n('deleteMessage'); const deleteMessageText = window.i18n('deleteMessage');
return ( return (
<Menu <Menu
id={this.ctxMenuID} id={this.ctxMenuID}
@ -638,7 +627,11 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
</Item> </Item>
) : null} ) : 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={onCopyText}>{window.i18n('copyMessage')}</Item>
<Item onClick={this.onReplyPrivate}>{window.i18n('replyToMessage')}</Item> <Item onClick={this.onReplyPrivate}>{window.i18n('replyToMessage')}</Item>
<Item onClick={onShowDetail}>{window.i18n('moreInformation')}</Item> <Item onClick={onShowDetail}>{window.i18n('moreInformation')}</Item>
@ -731,8 +724,8 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
return Boolean( return Boolean(
displayImage && displayImage &&
((isImage(attachments) && hasImage(attachments)) || ((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) && hasVideoScreenshot(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) { private handleContextMenu(e: any) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

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

Loading…
Cancel
Save