From 52fa0c8fcaf0cc309ed8705d6f42fa1c4e44b979 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 6 Jun 2022 01:44:23 +0400
Subject: [PATCH] Audio: Add 2X button for long audio (#1905)

---
 src/components/middle/AudioPlayer.tsx | 6 ++++--
 src/config.ts                         | 1 +
 src/hooks/useAudioPlayer.ts           | 9 ++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/middle/AudioPlayer.tsx b/src/components/middle/AudioPlayer.tsx
index 68bab1651..f4a79db61 100644
--- a/src/components/middle/AudioPlayer.tsx
+++ b/src/components/middle/AudioPlayer.tsx
@@ -1,13 +1,14 @@
-import type { FC } from '../../lib/teact/teact';
 import React, { useCallback, useEffect, useMemo } from '../../lib/teact/teact';
 import { getActions, withGlobal } from '../../global';
 
+import type { FC } from '../../lib/teact/teact';
 import type { AudioOrigin } from '../../types';
 import type {
   ApiAudio, ApiChat, ApiMessage, ApiUser,
 } from '../../api/types';
 
 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 {
@@ -67,6 +68,7 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
   const lang = useLang();
   const { audio, voice, video } = getMessageContent(message);
   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 mediaData = mediaLoader.getFromMemory(getMessageMediaHash(message, 'inline')!) as (string | undefined);
   const mediaMetadata = useMessageMediaMetadata(message, sender, chat);
@@ -220,7 +222,7 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
         )}
       </Button>
 
-      {isVoice && (
+      {shouldRenderPlaybackButton && (
         <Button
           round
           className={buildClassName('playback-button', playbackRate !== 1 && 'applied')}
diff --git a/src/config.ts b/src/config.ts
index 302676c3d..71887c8a2 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -76,6 +76,7 @@ export const SPONSORED_MESSAGE_CACHE_MS = 300000; // 5 min
 
 export const DEFAULT_VOLUME = 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_MED = 1;
diff --git a/src/hooks/useAudioPlayer.ts b/src/hooks/useAudioPlayer.ts
index f0f768ecf..c8db7cac9 100644
--- a/src/hooks/useAudioPlayer.ts
+++ b/src/hooks/useAudioPlayer.ts
@@ -3,16 +3,18 @@ import {
 } from '../lib/teact/teact';
 import { getActions, getGlobal } from '../global';
 
+import { PLAYBACK_RATE_FOR_AUDIO_MIN_DURATION } from '../config';
 import type { Track, TrackId } from '../util/audioPlayer';
 import { register } from '../util/audioPlayer';
-import useEffectWithPrevDeps from './useEffectWithPrevDeps';
 import { isSafariPatchInProgress } from '../util/patchSafariProgressiveAudio';
-import useOnChange from './useOnChange';
 import type { MediaSessionHandlers } from '../util/mediaSession';
 import {
   registerMediaSession, setPlaybackState, setPositionState, updateMetadata,
 } from '../util/mediaSession';
 
+import useEffectWithPrevDeps from './useEffectWithPrevDeps';
+import useOnChange from './useOnChange';
+
 type Handler = (e: Event) => void;
 
 const DEFAULT_SKIP_TIME = 10;
@@ -57,7 +59,8 @@ const useAudioPlayer = (
           setPlaybackState('playing');
           setVolume(getGlobal().audioPlayer.volume);
           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);
           }