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: