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

Audio: Add 2X button for long audio (#1905)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-06-06 01:44:23 +04:00
parent 0355aa6d8f
commit 52fa0c8fca
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/middle/AudioPlayer.tsx
View File

@ -1,13 +1,14 @@
import type { FC } from '../../lib/teact/teact';
import React, { useCallback, useEffect, useMemo } from '../../lib/teact/teact'; import React, { useCallback, useEffect, useMemo } from '../../lib/teact/teact';
import { getActions, withGlobal } from '../../global'; import { getActions, withGlobal } from '../../global';
import type { FC } from '../../lib/teact/teact';
import type { AudioOrigin } from '../../types'; import type { AudioOrigin } from '../../types';
import type { import type {
ApiAudio, ApiChat, ApiMessage, ApiUser, ApiAudio, ApiChat, ApiMessage, ApiUser,
} from '../../api/types'; } from '../../api/types';
import { IS_IOS, IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment'; import { IS_IOS, IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment';
import { PLAYBACK_RATE_FOR_AUDIO_MIN_DURATION } from '../../config';
import * as mediaLoader from '../../util/mediaLoader'; import * as mediaLoader from '../../util/mediaLoader';
import { import {
@ -67,6 +68,7 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
const lang = useLang(); const lang = useLang();
const { audio, voice, video } = getMessageContent(message); const { audio, voice, video } = getMessageContent(message);
const isVoice = Boolean(voice || video); const isVoice = Boolean(voice || video);
const shouldRenderPlaybackButton = isVoice || (audio?.duration || 0) > PLAYBACK_RATE_FOR_AUDIO_MIN_DURATION;
const senderName = sender ? getSenderTitle(lang, sender) : undefined; const senderName = sender ? getSenderTitle(lang, sender) : undefined;
const mediaData = mediaLoader.getFromMemory(getMessageMediaHash(message, 'inline')!) as (string | undefined); const mediaData = mediaLoader.getFromMemory(getMessageMediaHash(message, 'inline')!) as (string | undefined);
const mediaMetadata = useMessageMediaMetadata(message, sender, chat); const mediaMetadata = useMessageMediaMetadata(message, sender, chat);
@ -220,7 +222,7 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
)} )}
</Button> </Button>
{isVoice && ( {shouldRenderPlaybackButton && (
<Button <Button
round round
className={buildClassName('playback-button', playbackRate !== 1 && 'applied')} className={buildClassName('playback-button', playbackRate !== 1 && 'applied')}

1
src/config.ts
View File

@ -76,6 +76,7 @@ export const SPONSORED_MESSAGE_CACHE_MS = 300000; // 5 min
export const DEFAULT_VOLUME = 1; export const DEFAULT_VOLUME = 1;
export const DEFAULT_PLAYBACK_RATE = 1; export const DEFAULT_PLAYBACK_RATE = 1;
export const PLAYBACK_RATE_FOR_AUDIO_MIN_DURATION = 20 * 60; // 20 min
export const ANIMATION_LEVEL_MIN = 0; export const ANIMATION_LEVEL_MIN = 0;
export const ANIMATION_LEVEL_MED = 1; export const ANIMATION_LEVEL_MED = 1;

9
src/hooks/useAudioPlayer.ts
View File

@ -3,16 +3,18 @@ import {
} from '../lib/teact/teact'; } from '../lib/teact/teact';
import { getActions, getGlobal } from '../global'; import { getActions, getGlobal } from '../global';
import { PLAYBACK_RATE_FOR_AUDIO_MIN_DURATION } from '../config';
import type { Track, TrackId } from '../util/audioPlayer'; import type { Track, TrackId } from '../util/audioPlayer';
import { register } from '../util/audioPlayer'; import { register } from '../util/audioPlayer';
import useEffectWithPrevDeps from './useEffectWithPrevDeps';
import { isSafariPatchInProgress } from '../util/patchSafariProgressiveAudio'; import { isSafariPatchInProgress } from '../util/patchSafariProgressiveAudio';
import useOnChange from './useOnChange';
import type { MediaSessionHandlers } from '../util/mediaSession'; import type { MediaSessionHandlers } from '../util/mediaSession';
import { import {
registerMediaSession, setPlaybackState, setPositionState, updateMetadata, registerMediaSession, setPlaybackState, setPositionState, updateMetadata,
} from '../util/mediaSession'; } from '../util/mediaSession';
import useEffectWithPrevDeps from './useEffectWithPrevDeps';
import useOnChange from './useOnChange';
type Handler = (e: Event) => void; type Handler = (e: Event) => void;
const DEFAULT_SKIP_TIME = 10; const DEFAULT_SKIP_TIME = 10;
@ -57,7 +59,8 @@ const useAudioPlayer = (
setPlaybackState('playing'); setPlaybackState('playing');
setVolume(getGlobal().audioPlayer.volume); setVolume(getGlobal().audioPlayer.volume);
toggleMuted(Boolean(getGlobal().audioPlayer.isMuted)); toggleMuted(Boolean(getGlobal().audioPlayer.isMuted));
if (trackType === 'voice') { const duration = proxy.duration && Number.isFinite(proxy.duration) ? proxy.duration : originalDuration;
if (trackType === 'voice' || duration > PLAYBACK_RATE_FOR_AUDIO_MIN_DURATION) {
setPlaybackRate(getGlobal().audioPlayer.playbackRate); setPlaybackRate(getGlobal().audioPlayer.playbackRate);
} }