diff --git a/.changeset/ai-subtitles-icon-tooltip.md b/.changeset/ai-subtitles-icon-tooltip.md new file mode 100644 index 000000000..2ae1063d3 --- /dev/null +++ b/.changeset/ai-subtitles-icon-tooltip.md @@ -0,0 +1,5 @@ +--- +"@read-frog/extension": patch +--- + +feat(subtitles): use the subtitles-AI icon and explain AI transcription in a tooltip diff --git a/src/entrypoints/subtitles.content/ui/subtitles-settings-panel/components/request-ai-subtitles-item.tsx b/src/entrypoints/subtitles.content/ui/subtitles-settings-panel/components/request-ai-subtitles-item.tsx index 356e9713d..e309d4334 100644 --- a/src/entrypoints/subtitles.content/ui/subtitles-settings-panel/components/request-ai-subtitles-item.tsx +++ b/src/entrypoints/subtitles.content/ui/subtitles-settings-panel/components/request-ai-subtitles-item.tsx @@ -1,9 +1,11 @@ -import { IconLoader2, IconSparkles } from "@tabler/icons-react" +import { IconExclamationCircle, IconLoader2, IconSubtitlesAi } from "@tabler/icons-react" import { useAtomValue } from "jotai" -import { useState } from "react" +import { use, useState } from "react" import { Button } from "@/components/ui/base-ui/button" +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/base-ui/tooltip" import { SUBTITLES_SOURCE } from "@/utils/constants/subtitles" import { i18n } from "@/utils/i18n" +import { ShadowWrapperContext } from "@/utils/react-shadow-host/create-shadow-host" import { cn } from "@/utils/styles/utils" import { ensureAiSubtitlesAccess } from "@/utils/subtitles/ai/access-guard" import { setAiSubtitlesToastAnchor } from "@/utils/subtitles/toast" @@ -14,6 +16,7 @@ import { SubtitlesSettingsItem } from "./subtitles-settings-item" export function RequestAiSubtitlesItem() { const [pending, setPending] = useState(false) const { requestAiSubtitles, supportsAiSubtitles } = useSubtitlesUI() + const shadowWrapper = use(ShadowWrapperContext) const source = useAtomValue(subtitlesSourceAtom, { store: subtitlesStore }) const isVisible = useAtomValue(subtitlesVisibleAtom, { store: subtitlesStore }) const buttonId = "read-frog-request-ai-subtitles" @@ -42,8 +45,23 @@ export function RequestAiSubtitlesItem() { return ( } - label={label} + icon={} + label={ + + {label} + + }> + + + + {i18n.t("subtitles.aiSubtitlesHint")} + + + + } labelFor={buttonId} > ) diff --git a/src/entrypoints/subtitles.content/ui/subtitles-ui-context.tsx b/src/entrypoints/subtitles.content/ui/subtitles-ui-context.tsx index 2e168bcd9..aae6415a9 100644 --- a/src/entrypoints/subtitles.content/ui/subtitles-ui-context.tsx +++ b/src/entrypoints/subtitles.content/ui/subtitles-ui-context.tsx @@ -2,6 +2,7 @@ import type { ControlsConfig } from "@/entrypoints/subtitles.content/platforms" import type { SubtitlesProvidersAdapter } from "@/entrypoints/subtitles.content/universal-adapter" import { Provider as JotaiProvider } from "jotai" import { createContext, use, useMemo } from "react" +import { TooltipProvider } from "@/components/ui/base-ui/tooltip" import { subtitlesStore } from "../atoms" interface SubtitlesUIContextValue { @@ -52,7 +53,9 @@ export function SubtitlesProviders({ return ( - {children} + + {children} + ) } diff --git a/src/locales/en.yml b/src/locales/en.yml index 6fef28663..64deeff52 100644 --- a/src/locales/en.yml +++ b/src/locales/en.yml @@ -1249,6 +1249,7 @@ shortcutKeySelector: placeholder: Please enter the shortcut subtitles: loadingAiSubtitles: Loading AI subtitles… (estimated 3 min) + aiSubtitlesHint: Accurate subtitles generated by advanced AI speech recognition — available even when no official subtitles exist. requestAiSubtitles: Request AI subtitles usingAiSubtitles: Using AI subtitles toggle: diff --git a/src/locales/es.yml b/src/locales/es.yml index 8fe823dfc..51996c0a4 100644 --- a/src/locales/es.yml +++ b/src/locales/es.yml @@ -1249,6 +1249,7 @@ shortcutKeySelector: placeholder: Introduce el atajo subtitles: loadingAiSubtitles: Cargando subtítulos con IA… (estimado 3 min) + aiSubtitlesHint: Subtítulos precisos generados por reconocimiento de voz con IA avanzada, disponibles incluso sin subtítulos oficiales. requestAiSubtitles: Solicitar subtítulos con IA usingAiSubtitles: Usando subtítulos con IA toggle: diff --git a/src/locales/ja.yml b/src/locales/ja.yml index aa675a3e1..ed461c00d 100644 --- a/src/locales/ja.yml +++ b/src/locales/ja.yml @@ -1133,6 +1133,7 @@ shortcutKeySelector: placeholder: ショートカットを入力してください subtitles: loadingAiSubtitles: AI字幕を読み込み中…(推定3分) + aiSubtitlesHint: 先進的なAI音声認識により正確な字幕を生成。公式字幕がない動画でも利用できます。 requestAiSubtitles: AI字幕をリクエスト usingAiSubtitles: AI字幕を使用中 toggle: diff --git a/src/locales/ko.yml b/src/locales/ko.yml index 446da4ba4..a4fbaec26 100644 --- a/src/locales/ko.yml +++ b/src/locales/ko.yml @@ -1133,6 +1133,7 @@ shortcutKeySelector: placeholder: 단축키를 입력해 주세요 subtitles: loadingAiSubtitles: AI 자막 불러오는 중… (예상 3분) + aiSubtitlesHint: 첨단 AI 음성 인식으로 정확한 자막을 생성하며, 공식 자막이 없어도 사용할 수 있습니다. requestAiSubtitles: AI 자막 요청 usingAiSubtitles: AI 자막 사용 중 toggle: diff --git a/src/locales/ru.yml b/src/locales/ru.yml index c58c84fa6..7e91f1894 100644 --- a/src/locales/ru.yml +++ b/src/locales/ru.yml @@ -1133,6 +1133,7 @@ shortcutKeySelector: placeholder: Пожалуйста, введите горячую клавишу subtitles: loadingAiSubtitles: Загрузка ИИ-субтитров… (ожидается 3 мин) + aiSubtitlesHint: Точные субтитры создаются с помощью передового ИИ-распознавания речи и доступны даже без официальных субтитров. requestAiSubtitles: Запросить ИИ-субтитры usingAiSubtitles: Используются ИИ-субтитры toggle: diff --git a/src/locales/tr.yml b/src/locales/tr.yml index 063b81c73..9e73f0db6 100644 --- a/src/locales/tr.yml +++ b/src/locales/tr.yml @@ -1133,6 +1133,7 @@ shortcutKeySelector: placeholder: Lütfen kısayolu girin subtitles: loadingAiSubtitles: Yapay zeka altyazıları yükleniyor… (tahmini 3 dk) + aiSubtitlesHint: Gelişmiş yapay zeka ses tanıma ile doğru altyazılar oluşturulur; resmi altyazı olmadığında da kullanılabilir. requestAiSubtitles: Yapay zeka altyazısı iste usingAiSubtitles: Yapay zeka altyazısı kullanılıyor toggle: diff --git a/src/locales/vi.yml b/src/locales/vi.yml index 0d4806d04..e14fb2df2 100644 --- a/src/locales/vi.yml +++ b/src/locales/vi.yml @@ -1133,6 +1133,7 @@ shortcutKeySelector: placeholder: Vui lòng nhập phím tắt subtitles: loadingAiSubtitles: Đang tải phụ đề AI… (dự kiến 3 phút) + aiSubtitlesHint: Phụ đề chính xác được tạo bằng công nghệ nhận dạng giọng nói AI tiên tiến, dùng được ngay cả khi không có phụ đề chính thức. requestAiSubtitles: Yêu cầu phụ đề AI usingAiSubtitles: Đang dùng phụ đề AI toggle: diff --git a/src/locales/zh-CN.yml b/src/locales/zh-CN.yml index 3949c9d3f..1656193c5 100644 --- a/src/locales/zh-CN.yml +++ b/src/locales/zh-CN.yml @@ -1249,6 +1249,7 @@ shortcutKeySelector: placeholder: 请输入快捷键 subtitles: loadingAiSubtitles: 正在加载 AI 字幕中(预计 3 分钟) + aiSubtitlesHint: 通过先进 AI 识别语音生成准确字幕,无官方字幕时依然可用。 requestAiSubtitles: 请求 AI 字幕 usingAiSubtitles: 正在使用 AI 字幕中 toggle: diff --git a/src/locales/zh-TW.yml b/src/locales/zh-TW.yml index df06860e0..6b599fa75 100644 --- a/src/locales/zh-TW.yml +++ b/src/locales/zh-TW.yml @@ -1249,6 +1249,7 @@ shortcutKeySelector: placeholder: 請輸入快速鍵 subtitles: loadingAiSubtitles: 正在載入 AI 字幕(預計 3 分鐘) + aiSubtitlesHint: 透過先進 AI 辨識語音生成準確字幕,無官方字幕時依然可用。 requestAiSubtitles: 請求 AI 字幕 usingAiSubtitles: 正在使用 AI 字幕 toggle: