feat(subtitles): add translation blur reveal option - #1448
Conversation
🦋 Changeset detectedLatest commit: c9794d1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
feat
contrib-trust:new
Contributor trust score20/100 — New contributor This score estimates contributor familiarity with Outcome
Score breakdown
Signals used
Policy
Updated automatically when the PR changes or when a maintainer reruns the workflow. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3c36fe5c25
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 38c4c49b32
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
0432c22 to
8eea6b3
Compare
|
@taiiiyang do you think we should add this feature now? |
5627d9a to
7cbc453
Compare
Includes state corrections when toggles are changed, refactoring of imports, and corresponding tests.
7cbc453 to
c9794d1
Compare
|
Maybe we can make it work like the translation display style, supporting multiple types of styles. Instead of using a single toggle, we can implement it in the form of a selector, like this: 
Blur is just one of the options. |
taiiiyang
left a comment
taiiiyang
left a comment
There was a problem hiding this comment.
Thank you for your contribution!
We would like to extend this blur feature into a general subtitle preset style system (similar to translationNodeStyle.preset in web translation), so the data structure and implementation approach need to be adjusted.
| const resetSubtitlesStyleConfig = () => { | ||
| void setVideoSubtitlesConfig(deepmerge(videoSubtitlesConfig, { | ||
| style: { | ||
| blurTranslation: DEFAULT_BLUR_TRANSLATION, |
There was a problem hiding this comment.
I would prefer to design it this way for future scalability.
Refer to the current configuration writing style of the preset styles for translation.
// src/types/config/subtitles.ts
export const subtitleStylePresetSchema = z.enum(SUBTITLE_STYLE_PRESET)
export type SubtitleStylePreset = z.infer<typeof subtitleStylePresetSchema>
export const subtitleTextStyleSchema = z.object({
preset: subtitleStylePresetSchema, // new
fontFamily: subtitlesFontFamilySchema,
fontScale: z.number().min(MIN_FONT_SCALE).max(MAX_FONT_SCALE),
color: z.string(),
fontWeight: z.number().min(MIN_FONT_WEIGHT).max(MAX_FONT_WEIGHT),
})
// src/utils/constants/subtitles.ts
export const SUBTITLE_STYLE_PRESET = [
"default", "blur"
] as const
export const DEFAULT_SUBTITLE_STYLE_PRESET = "default" as const| const [revealedForText, setRevealedForText] = useState(false) | ||
| const blurStyle = blurTranslation && !revealedForText | ||
| ? { filter: TRANSLATION_BLUR_FILTER, opacity: 0.75, transition: "none" } | ||
| : blurTranslation | ||
| ? { filter: "blur(0)", opacity: 1, transition: "filter 0.15s ease-in-out, opacity 0.15s ease-in-out" } | ||
| : undefined |
There was a problem hiding this comment.
This logic is too tightly coupled and can be refactored as follows.
import { cva } from "class-variance-authority"
export const subtitlePresetVariants = cva("", {
variants: {
preset: {
default: "",
blur: "blur-[0.25em] opacity-75 hover:blur-[0px] hover:opacity-100 transition-all duration-150",
},
},
defaultVariants: {
preset: "default",
},
})
export function TranslationSubtitle({ content, className }: SubtitleLineProps) {
const subtitle = useAtomValue(currentSubtitleAtom)
const { style } = useAtomValue(configFieldsAtomMap.videoSubtitles)
const language = useAtomValue(configFieldsAtomMap.language)
const text = content ?? subtitle?.translation ?? ""
const { dir, lang } = getLanguageDirectionAndLang(language.targetCode)
return (
<div
className={cn("subtitles-translation leading-tight text-xl", subtitlePresetVariants({ preset:
style.translation.preset }), className)}
style={getTextStyles(style.translation)}
dir={dir}
lang={lang}
>
{text}
</div>
)
|
@iuhoay @mengxi-ream @taiiiyang Hello, please take a look at #1554. How do you guys think about it? PrototypeI already made a prototype, as in #1558. |
I think @oskkas 's implementation is better, but may also follow @taiiiyang 's reviews |
To clarify, I think use keyboard to toggle blur effect is good. but this PR need to be merged first and we built the feature on the top of this PR. |
Thanks. Just to confirm the direction. Are you suggesting replacing the current toggle entirely with a preset selector inside the Translation Subtitles section (where "blur" is one of the options), or should the toggle stay as a quick access control alongside it? Also, regarding the refactor to pure CSS hover via |
|
This PR has been inactive for 14 days and is now marked as stale. |
4 participants
Type of Changes
Description
Adds an optional blur effect for translated video subtitles. When enabled, translated subtitle text is blurred by default, reveals on hover, and becomes blurred again when the subtitle changes.
This is useful because it keeps the focus on the original language, revealing the translation only when specifically needed. This also adds the setting to both subtitle style UIs, places it under Translation Subtitles, adds localized labels, and includes a config migration for existing users.
Related Issue
Closes #
How Has This Been Tested?
Screenshots
Checklist
Additional Information
Includes a changeset for
@read-frog/extension.