From 0c5fd6236dc4bf15ebffe5155da28e5398734d0f Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 21 Jun 2021 09:41:34 +1000 Subject: [PATCH 1/7] lengthen glow animation cycle length. --- ts/components/session/icon/SessionIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx index 2b1bb9934..7d58466c4 100644 --- a/ts/components/session/icon/SessionIcon.tsx +++ b/ts/components/session/icon/SessionIcon.tsx @@ -92,7 +92,7 @@ const animation = (props: any) => { `; } else if (props.glowDuration !== undefined && props.glowStartDelay !== undefined) { return css` - ${glow(props.iconColor, props.glowDuration, props.glowStartDelay)} ${2}s ease-in infinite; + ${glow(props.iconColor, props.glowDuration, props.glowStartDelay)} ${props.glowDuration}s ease-in infinite; `; } else { return; From 740dedecc7ef92a6cd78c0d5a28bb6504a167555 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 21 Jun 2021 09:44:02 +1000 Subject: [PATCH 2/7] Switched hook used for checking online status. --- ts/components/OnionStatusDialog.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx index a3275c7a5..6cadfbb83 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/ts/components/OnionStatusDialog.tsx @@ -16,10 +16,12 @@ import { SessionWrapperModal } from '../components/session/SessionWrapperModal'; import ip2country from 'ip2country'; import countryLookup from 'country-code-lookup'; import { useTheme } from 'styled-components'; -import { useNetwork } from '../hooks/useNetwork'; import { Snode } from '../data/data'; import { onionPathModal } from '../state/ducks/modalDialog'; +// tslint:disable-next-line: no-submodule-imports +import useNetworkState from 'react-use/lib/useNetworkState'; + export type OnionPathModalType = { confirmText?: string; cancelText?: string; @@ -145,7 +147,7 @@ export const ActionPanelOnionStatusLight = (props: { const onionState = useSelector((state: StateType) => state.onionPaths); iconColor = red; - const isOnline = useNetwork(); + const isOnline = useNetworkState().online; if (!(onionState && onionState.snodePath) || !isOnline) { iconColor = red; } else { From 43855f9986327057496e8d6f1bbc04e61b9c86b1 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 21 Jun 2021 10:25:29 +1000 Subject: [PATCH 3/7] animation tweak to onion path status. --- ts/components/session/icon/SessionIcon.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx index 7d58466c4..e506456e1 100644 --- a/ts/components/session/icon/SessionIcon.tsx +++ b/ts/components/session/icon/SessionIcon.tsx @@ -62,7 +62,7 @@ const rotate = keyframes` * Creates a glow animation made for multiple element sequentially */ const glow = (color: string, glowDuration: number, glowStartDelay: number) => { - const dropShadowType = `drop-shadow(0px 0px 6px ${color}) `; + const dropShadowType = `drop-shadow(0px 0px 4px ${color}) `; //increase shadow intensity by 3 const dropShadow = `${dropShadowType.repeat(2)};`; @@ -75,10 +75,12 @@ const glow = (color: string, glowDuration: number, glowStartDelay: number) => { if (i === glowStartDelay) { kf += `${percent}% { filter: ${dropShadow} + transform: scale(1.5); }`; } else { kf += `${percent}% { filter: none; + transform: scale(0.8); }`; } } From 9730471d59c3ace1d41eccd5a84524e4b68c672a Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 21 Jun 2021 11:42:27 +1000 Subject: [PATCH 4/7] Added ability to toggle playback speed for audio messages via context menu, --- _locales/en/messages.json | 3 +- ts/components/conversation/Message.tsx | 39 +++++++++++++++++++++++--- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 6471725c8..3b5a1fb78 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -417,5 +417,6 @@ "unknownCountry": "Unknown Country", "device": "Device", "destination": "Destination", - "learnMore": "Learn more" + "learnMore": "Learn more", + "playAtCustomSpeed": "Play at $multipler$x speed" } diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index c882eff8f..c7a15395b 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -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(); + + useEffect(() => { + + // updates playback speed to value selected in context menu + if (player.current?.audio.current?.playbackRate) { + player.current.audio.current.playbackRate = playbackSpeed; + } + }, [playbackSpeed]) + return ( { 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 { }); } + + /** + * 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 { }} > @@ -589,6 +618,7 @@ class MessageInner extends React.PureComponent { const selectMessageText = window.i18n('selectMessage'); const deleteMessageText = window.i18n('deleteMessage'); + return ( { ) : null} + {window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)} {window.i18n('copyMessage')} {window.i18n('replyToMessage')} {window.i18n('moreInformation')} @@ -700,8 +731,8 @@ class MessageInner extends React.PureComponent { return Boolean( displayImage && - ((isImage(attachments) && hasImage(attachments)) || - (isVideo(attachments) && hasVideoScreenshot(attachments))) + ((isImage(attachments) && hasImage(attachments)) || + (isVideo(attachments) && hasVideoScreenshot(attachments))) ); } From 061cb38300aca69c0603a54d5cbcabcce193c019 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 21 Jun 2021 13:36:28 +1000 Subject: [PATCH 5/7] Linting and formatting changes applied. --- ts/components/conversation/Message.tsx | 47 ++++++++++++---------- ts/components/session/icon/SessionIcon.tsx | 7 +++- 2 files changed, 30 insertions(+), 24 deletions(-) diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index c7a15395b..aa74447ec 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -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(); 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 ( { 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 { }); } - - /** - * 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 { const selectMessageText = window.i18n('selectMessage'); const deleteMessageText = window.i18n('deleteMessage'); - return ( { ) : null} - {window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)} + {isAudio(attachments) ? ( + + {window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)} + + ) : null} {window.i18n('copyMessage')} {window.i18n('replyToMessage')} {window.i18n('moreInformation')} @@ -731,8 +724,8 @@ class MessageInner extends React.PureComponent { 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 { ); } + /** + * 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(); diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx index e506456e1..0abe25f84 100644 --- a/ts/components/session/icon/SessionIcon.tsx +++ b/ts/components/session/icon/SessionIcon.tsx @@ -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; From b92efb9fc6714de6368f8398c07f1bf7e41dec9e Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 21 Jun 2021 13:50:47 +1000 Subject: [PATCH 6/7] minor animation tweak --- ts/components/session/icon/SessionIcon.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx index 0abe25f84..e698b71d5 100644 --- a/ts/components/session/icon/SessionIcon.tsx +++ b/ts/components/session/icon/SessionIcon.tsx @@ -63,8 +63,9 @@ const rotate = keyframes` */ const glow = (color: string, glowDuration: number, glowStartDelay: number) => { const dropShadowType = `drop-shadow(0px 0px 4px ${color}) `; + //increase shadow intensity by 3 - const dropShadow = `${dropShadowType.repeat(2)};`; + const dropShadow = `${dropShadowType.repeat(1)};`; // creating keyframe for sequential animations let kf = ''; From e2ce6c35eeb73389cd4fb08feaf1e8b0f605ec63 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 21 Jun 2021 15:07:58 +1000 Subject: [PATCH 7/7] PR fixes. --- ts/components/OnionStatusDialog.tsx | 6 ------ ts/components/conversation/Message.tsx | 7 +++---- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx index 8a5aa1a86..5b418e555 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/ts/components/OnionStatusDialog.tsx @@ -27,12 +27,6 @@ import { // tslint:disable-next-line: no-submodule-imports import useNetworkState from 'react-use/lib/useNetworkState'; -export type OnionPathModalType = { - confirmText?: string; - cancelText?: string; - title?: string; -}; - export type StatusLightType = { glowStartDelay: number; glowDuration: number; diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index aa74447ec..6f93a334a 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -876,10 +876,9 @@ class MessageInner extends React.PureComponent { * Doubles / halves the playback speed based on the current playback speed. */ private updatePlaybackSpeed() { - this.setState({ - ...this.state, - playbackSpeed: this.state.playbackSpeed === 1 ? 2 : 1, - }); + this.setState(prevState => ({ + playbackSpeed: prevState.playbackSpeed === 1 ? 2 : 1, + })); } private handleContextMenu(e: any) {