feat: add configurable timeout to stop TTS playback automatically, closes #747 (#826)

2025-04-07 18:40:14 +08:00
parent 2599f40dfb
commit 99182a1f9e
20 changed files with 271 additions and 31 deletions
@@ -266,5 +266,10 @@
  "This book format is not supported.": "هذا تنسيق الكتاب غير مدعوم.",
  "Unable to fetch the translation. Please log in first and try again.": "تعذر جلب الترجمة. يرجى تسجيل الدخول أولاً ثم المحاولة مرة أخرى.",
  "Group": "تجميع",
-  "Always on Top": "دائمًا في المقدمة"
+  "Always on Top": "دائمًا في المقدمة",
+  "No Timeout": "لا مهلة",
+  "{{value}} minute": "{{value}} دقيقة",
+  "{{value}} minutes": "{{value}} دقائق",
+  "{{value}} hour": "{{value}} ساعة",
+  "{{value}} hours": "{{value}} ساعات"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Dieses Buchformat wird nicht unterstützt.",
  "Unable to fetch the translation. Please log in first and try again.": "Übersetzung konnte nicht abgerufen werden. Bitte zuerst anmelden und erneut versuchen.",
  "Group": "Gruppieren",
-  "Always on Top": "Immer im Vordergrund"
+  "Always on Top": "Immer im Vordergrund",
+  "No Timeout": "Kein Timeout",
+  "{{value}} minute": "{{value}} Minute",
+  "{{value}} minutes": "{{value}} Minuten",
+  "{{value}} hour": "{{value}} Stunde",
+  "{{value}} hours": "{{value}} Stunden"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Αυτή η μορφή βιβλίου δεν υποστηρίζεται.",
  "Unable to fetch the translation. Please log in first and try again.": "Αδυναμία λήψης της μετάφρασης. Παρακαλώ συνδεθείτε πρώτα και δοκιμάστε ξανά.",
  "Group": "Ομάδα",
-  "Always on Top": "Πάντα στην κορυφή"
+  "Always on Top": "Πάντα στην κορυφή",
+  "No Timeout": "Χωρίς χρονικό όριο",
+  "{{value}} minute": "{{value}} λεπτό",
+  "{{value}} minutes": "{{value}} λεπτά",
+  "{{value}} hour": "{{value}} ώρα",
+  "{{value}} hours": "{{value}} ώρες"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Este formato de libro no es compatible.",
  "Unable to fetch the translation. Please log in first and try again.": "No se puede obtener la traducción. Por favor, inicia sesión primero e inténtalo de nuevo.",
  "Group": "Grupo",
-  "Always on Top": "Siempre en la parte superior"
+  "Always on Top": "Siempre en la parte superior",
+  "No Timeout": "Sin tiempo de espera",
+  "{{value}} minute": "{{value}} minuto",
+  "{{value}} minutes": "{{value}} minutos",
+  "{{value}} hour": "{{value}} hora",
+  "{{value}} hours": "{{value}} horas"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Ce format de livre n'est pas pris en charge.",
  "Unable to fetch the translation. Please log in first and try again.": "Impossible de récupérer la traduction. Veuillez d'abord vous connecter et réessayer.",
  "Group": "Groupe",
-  "Always on Top": "Toujours au-dessus"
+  "Always on Top": "Toujours au-dessus",
+  "No Timeout": "Aucun délai d'attente",
+  "{{value}} minute": "{{value}} minute",
+  "{{value}} minutes": "{{value}} minutes",
+  "{{value}} hour": "{{value}} heure",
+  "{{value}} hours": "{{value}} heures"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "यह पुस्तक प्रारूप समर्थित नहीं है।",
  "Unable to fetch the translation. Please log in first and try again.": "अनुवाद प्राप्त करने में असमर्थ। कृपया पहले लॉग इन करें और पुनः प्रयास करें।",
  "Group": "समूह",
-  "Always on Top": "सर्वोच्च पर हमेशा"
+  "Always on Top": "सर्वोच्च पर हमेशा",
+  "No Timeout": "कोई समय समाप्त नहीं",
+  "{{value}} minute": "{{value}} मिनट",
+  "{{value}} minutes": "{{value}} मिनट",
+  "{{value}} hour": "{{value}} घंटा",
+  "{{value}} hours": "{{value}} घंटे"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Format buku ini tidak didukung.",
  "Unable to fetch the translation. Please log in first and try again.": "Tidak dapat mengambil terjemahan. Silakan masuk terlebih dahulu dan coba lagi.",
  "Group": "Grup",
-  "Always on Top": "Selalu di Atas"
+  "Always on Top": "Selalu di Atas",
+  "No Timeout": "Tidak Ada Waktu Habis",
+  "{{value}} minute": "{{value}} menit",
+  "{{value}} minutes": "{{value}} menit",
+  "{{value}} hour": "{{value}} jam",
+  "{{value}} hours": "{{value}} jam"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Questo formato di libro non è supportato.",
  "Unable to fetch the translation. Please log in first and try again.": "Impossibile recuperare la traduzione. Accedi prima e riprova.",
  "Group": "Gruppo",
-  "Always on Top": "Sempre in primo piano"
+  "Always on Top": "Sempre in primo piano",
+  "No Timeout": "Nessun timeout",
+  "{{value}} minute": "{{value}} minuto",
+  "{{value}} minutes": "{{value}} minuti",
+  "{{value}} hour": "{{value}} ora",
+  "{{value}} hours": "{{value}} ore"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "この書籍形式はサポートされていません。",
  "Unable to fetch the translation. Please log in first and try again.": "翻訳を取得できません。まずログインして再試行してください。",
  "Group": "グループ",
-  "Always on Top": "常に最前面"
+  "Always on Top": "常に最前面",
+  "No Timeout": "タイムアウトなし",
+  "{{value}} minute": "{{value}}分",
+  "{{value}} minutes": "{{value}}分",
+  "{{value}} hour": "{{value}}時間",
+  "{{value}} hours": "{{value}}時間"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "이 책 형식은 지원되지 않습니다.",
  "Unable to fetch the translation. Please log in first and try again.": "번역을 가져올 수 없습니다. 먼저 로그인하고 다시 시도하세요.",
  "Group": "그룹",
-  "Always on Top": "항상 위에"
+  "Always on Top": "항상 위에",
+  "No Timeout": "타임아웃 없음",
+  "{{value}} minute": "{{value}} 분",
+  "{{value}} minutes": "{{value}} 분",
+  "{{value}} hour": "{{value}} 시간",
+  "{{value}} hours": "{{value}} 시간"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Ten format książki nie jest obsługiwany.",
  "Unable to fetch the translation. Please log in first and try again.": "Nie można pobrać tłumaczenia. Proszę najpierw się zalogować i spróbować ponownie.",
  "Group": "Grupa",
-  "Always on Top": "Zawsze na wierzchu"
+  "Always on Top": "Zawsze na wierzchu",
+  "No Timeout": "Brak limitu czasu",
+  "{{value}} minute": "{{value}} minuta",
+  "{{value}} minutes": "{{value}} minut",
+  "{{value}} hour": "{{value}} godzina",
+  "{{value}} hours": "{{value}} godziny"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Este formato de livro não é suportado.",
  "Unable to fetch the translation. Please log in first and try again.": "Não foi possível buscar a tradução. Faça login primeiro e tente novamente.",
  "Group": "Grupo",
-  "Always on Top": "Sempre no Topo"
+  "Always on Top": "Sempre no Topo",
+  "No Timeout": "Sem Tempo Limite",
+  "{{value}} minute": "{{value}} minuto",
+  "{{value}} minutes": "{{value}} minutos",
+  "{{value}} hour": "{{value}} hora",
+  "{{value}} hours": "{{value}} horas"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Этот формат книги не поддерживается.",
  "Unable to fetch the translation. Please log in first and try again.": "Не удалось получить перевод. Пожалуйста, войдите в систему и попробуйте снова.",
  "Group": "Группа",
-  "Always on Top": "Всегда сверху"
+  "Always on Top": "Всегда сверху",
+  "No Timeout": "Нет таймаута",
+  "{{value}} minute": "{{value}} минута",
+  "{{value}} minutes": "{{value}} минуты",
+  "{{value}} hour": "{{value}} час",
+  "{{value}} hours": "{{value}} часа"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Bu kitap formatı desteklenmiyor.",
  "Unable to fetch the translation. Please log in first and try again.": "Çeviri alınamıyor. Lütfen önce giriş yapın ve tekrar deneyin.",
  "Group": "Grup",
-  "Always on Top": "Her Zaman Üstte"
+  "Always on Top": "Her Zaman Üstte",
+  "No Timeout": "Zaman Aşımı Yok",
+  "{{value}} minute": "{{value}} dakika",
+  "{{value}} minutes": "{{value}} dakika",
+  "{{value}} hour": "{{value}} saat",
+  "{{value}} hours": "{{value}} saat"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Цей формат книги не підтримується.",
  "Unable to fetch the translation. Please log in first and try again.": "Не вдалося отримати переклад. Будь ласка, спочатку увійдіть у систему та спробуйте ще раз.",
  "Group": "Група",
-  "Always on Top": "Завжди зверху"
+  "Always on Top": "Завжди зверху",
+  "No Timeout": "Без тайм-ауту",
+  "{{value}} minute": "{{value}} хвилина",
+  "{{value}} minutes": "{{value}} хвилин",
+  "{{value}} hour": "{{value}} година",
+  "{{value}} hours": "{{value}} години"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "Định dạng sách này không được hỗ trợ.",
  "Unable to fetch the translation. Please log in first and try again.": "Không thể tải dịch vụ. Vui lòng đăng nhập trước và thử lại.",
  "Group": "Nhóm",
-  "Always on Top": "Luôn ở trên cùng"
+  "Always on Top": "Luôn ở trên cùng",
+  "No Timeout": "Không có thời gian chờ",
+  "{{value}} minute": "{{value}} phút",
+  "{{value}} minutes": "{{value}} phút",
+  "{{value}} hour": "{{value}} giờ",
+  "{{value}} hours": "{{value}} giờ"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "不支持此书籍格式。",
  "Unable to fetch the translation. Please log in first and try again.": "无法获取翻译。请登录后重试。",
  "Group": "分组",
-  "Always on Top": "窗口置顶"
+  "Always on Top": "窗口置顶",
+  "No Timeout": "关闭定时",
+  "{{value}} minute": "{{value}}分钟",
+  "{{value}} minutes": "{{value}}分钟",
+  "{{value}} hour": "{{value}}小时",
+  "{{value}} hours": "{{value}}小时"
 }
@@ -266,5 +266,10 @@
  "This book format is not supported.": "不支援此書籍格式。",
  "Unable to fetch the translation. Please log in first and try again.": "無法獲取翻譯。請先登入然後重試。",
  "Group": "分組",
-  "Always on Top": "視窗置頂"
+  "Always on Top": "視窗置頂",
+  "No Timeout": "關閉定時",
+  "{{value}} minute": "{{value}}分鐘",
+  "{{value}} minutes": "{{value}}分鐘",
+  "{{value}} hour": "{{value}}小時",
+  "{{value}} hours": "{{value}}小時"
 }
@@ -34,6 +34,10 @@ const TTSControl = () => {
  const [panelPosition, setPanelPosition] = useState<Position>();
  const [trianglePosition, setTrianglePosition] = useState<Position>();

+  const [timeoutOption, setTimeoutOption] = useState(0);
+  const [timeoutTimestamp, setTimeoutTimestamp] = useState(0);
+  const [timeoutFunc, setTimeoutFunc] = useState<ReturnType<typeof setTimeout> | null>(null);
+
  const popupWidth = useResponsiveSize(POPUP_WIDTH);
  const popupHeight = useResponsiveSize(POPUP_HEIGHT);
  const popupPadding = useResponsiveSize(POPUP_PADDING);
@@ -142,11 +146,8 @@ const TTSControl = () => {
    }
  };

-  const handleTTSStop = async (event: CustomEvent) => {
-    const { bookKey: stopBookKey } = event.detail;
-    if (bookKey === stopBookKey) {
-      handleStop();
-    }
+  const handleTTSStop = async () => {
+    handleStop();
  };

  const handleQueryIsSpeaking = () => {
@@ -257,6 +258,23 @@ const TTSControl = () => {
    return '';
  };

+  const handleSelectTimeout = (value: number) => {
+    setTimeoutOption(value);
+    if (timeoutFunc) {
+      clearTimeout(timeoutFunc);
+    }
+    if (value > 0) {
+      setTimeoutFunc(
+        setTimeout(() => {
+          handleStop();
+        }, value * 1000),
+      );
+      setTimeoutTimestamp(Date.now() + value * 1000);
+    } else {
+      setTimeoutTimestamp(0);
+    }
+  };
+
  const updatePanelPosition = () => {
    if (iconRef.current) {
      const rect = iconRef.current.getBoundingClientRect();
@@ -323,14 +341,16 @@ const TTSControl = () => {
            bookKey={bookKey}
            ttsLang={ttsLang}
            isPlaying={isPlaying}
+            timeoutOption={timeoutOption}
+            timeoutTimestamp={timeoutTimestamp}
            onTogglePlay={handleTogglePlay}
            onBackward={handleBackward}
            onForward={handleForward}
-            onStop={handleStop}
            onSetRate={handleSetRate}
            onGetVoices={handleGetVoices}
            onSetVoice={handleSetVoice}
            onGetVoiceId={handleGetVoiceId}
+            onSelectTimeout={handleSelectTimeout}
          />
        </Popup>
      )}
@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 import React, { useState, ChangeEvent, useEffect } from 'react';
-import { MdPlayCircle, MdPauseCircle, MdFastRewind, MdFastForward, MdStop } from 'react-icons/md';
+import { MdPlayCircle, MdPauseCircle, MdFastRewind, MdFastForward, MdAlarm } from 'react-icons/md';
 import { RiVoiceAiFill } from 'react-icons/ri';
 import { MdCheck } from 'react-icons/md';
 import { TTSVoice } from '@/services/tts';
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
-import { useTranslation } from '@/hooks/useTranslation';
+import { TranslationFunc, useTranslation } from '@/hooks/useTranslation';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useDefaultIconSize, useResponsiveSize } from '@/hooks/useResponsiveSize';

@@ -14,28 +14,104 @@ type TTSPanelProps = {
  bookKey: string;
  ttsLang: string;
  isPlaying: boolean;
+  timeoutOption: number;
+  timeoutTimestamp: number;
  onTogglePlay: () => void;
  onBackward: () => void;
  onForward: () => void;
-  onStop: () => void;
  onSetRate: (rate: number) => void;
  onGetVoices: (lang: string) => Promise<TTSVoice[]>;
  onSetVoice: (voice: string) => void;
  onGetVoiceId: () => string;
+  onSelectTimeout: (value: number) => void;
+};
+
+const getTTSTimeoutOptions = (_: TranslationFunc) => {
+  return [
+    {
+      label: _('No Timeout'),
+      value: 0,
+    },
+    {
+      label: _('{{value}} minute', { value: 1 }),
+      value: 60,
+    },
+    {
+      label: _('{{value}} minutes', { value: 3 }),
+      value: 180,
+    },
+    {
+      label: _('{{value}} minutes', { value: 5 }),
+      value: 300,
+    },
+    {
+      label: _('{{value}} minutes', { value: 10 }),
+      value: 600,
+    },
+    {
+      label: _('{{value}} minutes', { value: 20 }),
+      value: 1200,
+    },
+    {
+      label: _('{{value}} minutes', { value: 30 }),
+      value: 1800,
+    },
+    {
+      label: _('{{value}} minutes', { value: 45 }),
+      value: 2700,
+    },
+    {
+      label: _('{{value}} hour', { value: 1 }),
+      value: 3600,
+    },
+    {
+      label: _('{{value}} hours', { value: 2 }),
+      value: 7200,
+    },
+    {
+      label: _('{{value}} hours', { value: 3 }),
+      value: 10800,
+    },
+    {
+      label: _('{{value}} hours', { value: 4 }),
+      value: 14400,
+    },
+    {
+      label: _('{{value}} hours', { value: 6 }),
+      value: 21600,
+    },
+    {
+      label: _('{{value}} hours', { value: 8 }),
+      value: 28800,
+    },
+  ];
+};
+
+const getCountdownTime = (timeout: number) => {
+  const now = Date.now();
+  if (timeout > now) {
+    const remainingTime = Math.floor((timeout - now) / 1000);
+    const minutes = Math.floor(remainingTime / 3600) * 60 + Math.floor((remainingTime % 3600) / 60);
+    const seconds = remainingTime % 60;
+    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  }
+  return '';
 };

 const TTSPanel = ({
  bookKey,
  ttsLang,
  isPlaying,
+  timeoutOption,
+  timeoutTimestamp,
  onTogglePlay,
  onBackward,
  onForward,
-  onStop,
  onSetRate,
  onGetVoices,
  onSetVoice,
  onGetVoiceId,
+  onSelectTimeout,
 }: TTSPanelProps) => {
  const _ = useTranslation();
  const { envConfig } = useEnv();
@@ -47,6 +123,10 @@ const TTSPanel = ({
  const [rate, setRate] = useState(viewSettings?.ttsRate ?? 1.0);
  const [selectedVoice, setSelectedVoice] = useState(viewSettings?.ttsVoice ?? '');

+  const [timeoutCountdown, setTimeoutCountdown] = useState(() => {
+    return getCountdownTime(timeoutTimestamp);
+  });
+
  const defaultIconSize = useDefaultIconSize();
  const iconSize32 = useResponsiveSize(32);
  const iconSize48 = useResponsiveSize(48);
@@ -72,6 +152,23 @@ const TTSPanel = ({
    setViewSettings(bookKey, viewSettings);
  };

+  const updateTimeout = (timeout: number) => {
+    const now = Date.now();
+    if (timeout > 0 && timeout < now) {
+      onSelectTimeout(0);
+      setTimeoutCountdown('');
+    } else if (timeout > 0) {
+      setTimeoutCountdown(getCountdownTime(timeout));
+    }
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      updateTimeout(timeoutTimestamp);
+    }, 1000);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeoutTimestamp, timeoutCountdown]);
+
  useEffect(() => {
    const voiceId = onGetVoiceId();
    setSelectedVoice(voiceId);
@@ -87,6 +184,8 @@ const TTSPanel = ({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ttsLang]);

+  const timeoutOptions = getTTSTimeoutOptions(_);
+
  return (
    <div className='flex w-full flex-col items-center justify-center gap-2 rounded-2xl p-4'>
      <div className='flex w-full flex-col items-center gap-0.5'>
@@ -132,9 +231,40 @@ const TTSPanel = ({
        <button onClick={onForward} className='rounded-full p-1'>
          <MdFastForward size={iconSize32} />
        </button>
-        <button onClick={onStop} className='rounded-full p-1'>
-          <MdStop size={iconSize32} />
-        </button>
+        <div className='dropdown dropdown-top'>
+          <button className='flex flex-col items-center justify-center rounded-full p-1'>
+            <MdAlarm size={iconSize32} />
+            {timeoutCountdown && (
+              <span
+                className={clsx(
+                  'absolute bottom-0 left-1/2 w-12 translate-x-[-50%] translate-y-[80%] px-1',
+                  'bg-primary/80 text-base-100 rounded-full text-center text-xs',
+                )}
+              >
+                {timeoutCountdown}
+              </span>
+            )}
+          </button>
+          <ul
+            tabIndex={0}
+            className={clsx(
+              'dropdown-content bgcolor-base-200 no-triangle menu menu-vertical rounded-box absolute right-0 z-[1] shadow',
+              'mt-4 inline max-h-96 w-[250px] overflow-y-scroll',
+            )}
+          >
+            {timeoutOptions.map((option, index) => (
+              <li key={`${index}-${option.value}`} onClick={() => onSelectTimeout(option.value)}>
+                <div className='flex items-center px-2'>
+                  <span style={{ minWidth: `${defaultIconSize}px` }}>
+                    {timeoutOption === option.value && <MdCheck className='text-base-content' />}
+                  </span>
+                  <span className={clsx('text-base sm:text-sm')}>{option.label}</span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
        <div className='dropdown dropdown-top'>
          <button tabIndex={0} className='rounded-full p-1'>
            <RiVoiceAiFill size={iconSize32} />