ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Audio: Fix waveform width on some mobiles (#1946)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-07-09 02:32:27 +02:00
parent d29e7b05f3
commit 8c0cf23c8c
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/common/Audio.tsx
View File

@ -50,6 +50,7 @@ type OwnProps = {
origin: AudioOrigin; origin: AudioOrigin;
date?: number; date?: number;
lastSyncTime?: number; lastSyncTime?: number;
noAvatars?: boolean;
className?: string; className?: string;
isSelectable?: boolean; isSelectable?: boolean;
isSelected?: boolean; isSelected?: boolean;
@ -66,7 +67,8 @@ type OwnProps = {
onDateClick?: (messageId: number, chatId: string) => void; onDateClick?: (messageId: number, chatId: string) => void;
}; };
export const TINY_SCREEN_WIDTH_MQL = window.matchMedia('(max-width: 365px)'); export const TINY_SCREEN_WIDTH_MQL = window.matchMedia('(max-width: 375px)');
export const WITH_AVATAR_TINY_SCREEN_WIDTH_MQL = window.matchMedia('(max-width: 410px)');
const AVG_VOICE_DURATION = 10; const AVG_VOICE_DURATION = 10;
// This is needed for browsers requiring user interaction before playing. // This is needed for browsers requiring user interaction before playing.
const PRELOAD = true; const PRELOAD = true;
@ -81,6 +83,7 @@ const Audio: FC<OwnProps> = ({
origin, origin,
date, date,
lastSyncTime, lastSyncTime,
noAvatars,
className, className,
isSelectable, isSelectable,
isSelected, isSelected,
@ -152,7 +155,9 @@ const Audio: FC<OwnProps> = ({
); );
const isOwn = isOwnMessage(message); const isOwn = isOwnMessage(message);
const waveformCanvasRef = useWaveformCanvas(theme, voice, (isMediaUnread && !isOwn) ? 1 : playProgress, isOwn); const waveformCanvasRef = useWaveformCanvas(
theme, voice, (isMediaUnread && !isOwn) ? 1 : playProgress, isOwn, !noAvatars,
);
const withSeekline = isPlaying || (playProgress > 0 && playProgress < 1); const withSeekline = isPlaying || (playProgress > 0 && playProgress < 1);
@ -401,10 +406,14 @@ const Audio: FC<OwnProps> = ({
); );
}; };
function getSeeklineSpikeAmounts() { function getSeeklineSpikeAmounts(withAvatar?: boolean) {
return { return {
MIN_SPIKES: IS_SINGLE_COLUMN_LAYOUT ? (TINY_SCREEN_WIDTH_MQL.matches ? 16 : 20) : 25, MIN_SPIKES: IS_SINGLE_COLUMN_LAYOUT ? (TINY_SCREEN_WIDTH_MQL.matches ? 16 : 20) : 25,
MAX_SPIKES: IS_SINGLE_COLUMN_LAYOUT ? (TINY_SCREEN_WIDTH_MQL.matches ? 35 : 48) : 75, MAX_SPIKES: IS_SINGLE_COLUMN_LAYOUT
? (TINY_SCREEN_WIDTH_MQL.matches
? 35
: (withAvatar && WITH_AVATAR_TINY_SCREEN_WIDTH_MQL.matches ? 40 : 45))
: 75,
}; };
} }
@ -521,6 +530,7 @@ function useWaveformCanvas(
voice?: ApiVoice, voice?: ApiVoice,
playProgress = 0, playProgress = 0,
isOwn = false, isOwn = false,
withAvatar = false,
) { ) {
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
@ -538,13 +548,13 @@ function useWaveformCanvas(
}; };
} }
const { MIN_SPIKES, MAX_SPIKES } = getSeeklineSpikeAmounts(); const { MIN_SPIKES, MAX_SPIKES } = getSeeklineSpikeAmounts(withAvatar);
const durationFactor = Math.min(duration / AVG_VOICE_DURATION, 1); const durationFactor = Math.min(duration / AVG_VOICE_DURATION, 1);
const spikesCount = Math.round(MIN_SPIKES + (MAX_SPIKES - MIN_SPIKES) * durationFactor); const spikesCount = Math.round(MIN_SPIKES + (MAX_SPIKES - MIN_SPIKES) * durationFactor);
const decodedWaveform = decodeWaveform(new Uint8Array(waveform)); const decodedWaveform = decodeWaveform(new Uint8Array(waveform));
return interpolateArray(decodedWaveform, spikesCount); return interpolateArray(decodedWaveform, spikesCount);
}, [voice]) || {}; }, [voice, withAvatar]) || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const canvas = canvasRef.current; const canvas = canvasRef.current;

1
src/components/middle/message/Message.tsx
View File

@ -763,6 +763,7 @@ const Message: FC<OwnProps & StateProps> = ({
lastSyncTime={lastSyncTime} lastSyncTime={lastSyncTime}
isSelectable={isInDocumentGroup} isSelectable={isInDocumentGroup}
isSelected={isSelected} isSelected={isSelected}
noAvatars={noAvatars}
onPlay={handleAudioPlay} onPlay={handleAudioPlay}
onReadMedia={voice && (!isOwn || isChatWithSelf) ? handleReadMedia : undefined} onReadMedia={voice && (!isOwn || isChatWithSelf) ? handleReadMedia : undefined}
onCancelUpload={handleCancelUpload} onCancelUpload={handleCancelUpload}