Skip to content

feat: make subtitles draggable and customizable #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BharadwajSrikaa wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: make subtitles draggable and customizable #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 16 additions & 1 deletion src/renderer/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import Background from "./components/canvas/background";
import WebSocketStatus from "./components/canvas/ws-status";
import Subtitle from "./components/canvas/subtitle";
import { ModeProvider, useMode } from "./context/mode-context";
import { useDraggable } from "@/hooks/electron/use-draggable";

function AppContent(): JSX.Element {
const [showSidebar, setShowSidebar] = useState(true);
Expand All @@ -37,6 +38,13 @@ function AppContent(): JSX.Element {
const isElectron = window.api !== undefined;
const live2dContainerRef = useRef<HTMLDivElement>(null);

const {
elementRef: subtitleRef,
handleMouseDown: handleSubtitleMouseDown,
handleMouseEnter: handleSubtitleMouseEnter,
handleMouseLeave: handleSubtitleMouseLeave,
} = useDraggable({ componentId: 'subtitle' });
Comment on lines +41 to +46

@coderabbitai coderabbitai Bot Jun 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift

Drag position still resets after refresh.

This wires in useDraggable, but the supplied src/renderer/src/hooks/electron/use-draggable.ts implementation only keeps position in refs and never loads/saves anything by componentId. After a reload the subtitle goes back to its default location, so the persistence part of the feature is still missing.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/renderer/src/App.tsx` around lines 41 - 46, The useDraggable hook
(use-draggable.ts) currently only keeps position in refs so positions reset
after reload; update useDraggable to load the saved position for the given
componentId on init and apply it to elementRef, and persist updates whenever the
user finishes dragging (e.g., on handleMouseDown/drag end) by saving the new
coordinates keyed by componentId (use localStorage or the project's electron
storage utility). Ensure the hook reads saved state when created, applies it to
the element's style/transform, and writes back the updated position whenever the
handlers (handleMouseDown → drag end) change the position so
elementRef/handleSubtitleMouseDown/handleSubtitleMouseEnter/handleSubtitleMouseLeave
reflect persisted coordinates across reloads.


useEffect(() => {
const handleResize = () => {
const vh = window.innerHeight * 0.01;
Expand Down Expand Up @@ -131,8 +139,15 @@ function AppContent(): JSX.Element {
transform="translateX(-50%)"
zIndex={10}
width="60%"
display="flex"
justifyContent="center"
>
<Subtitle />
<Subtitle
ref={subtitleRef}
onMouseDown={handleSubtitleMouseDown}
onMouseEnter={handleSubtitleMouseEnter}
onMouseLeave={handleSubtitleMouseLeave}
/>
</Box>
<Box
{...layoutStyles.footer}
Expand Down
44 changes: 36 additions & 8 deletions src/renderer/src/components/canvas/subtitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,64 @@
import { Box, Text } from '@chakra-ui/react';
import { memo } from 'react';
import { memo, forwardRef } from 'react';
import { canvasStyles } from './canvas-styles';
import { useSubtitleDisplay } from '@/hooks/canvas/use-subtitle-display';
import { useSubtitle } from '@/context/subtitle-context';

// Type definitions
interface SubtitleTextProps {
text: string
fontSize?: string
color?: string
fontFamily?: string
}

// Reusable components
const SubtitleText = memo(({ text }: SubtitleTextProps) => (
<Text {...canvasStyles.subtitle.text}>
const SubtitleText = memo(({ text, fontSize, color, fontFamily }: SubtitleTextProps) => (
<Text
{...canvasStyles.subtitle.text}
fontSize={fontSize || canvasStyles.subtitle.text.fontSize}
color={color || canvasStyles.subtitle.text.color}
fontFamily={fontFamily || canvasStyles.subtitle.text.fontFamily}
>
{text}
</Text>
));

SubtitleText.displayName = 'SubtitleText';

interface SubtitleProps {
onMouseDown?: (e: React.MouseEvent) => void
onMouseEnter?: () => void
onMouseLeave?: () => void
}

// Main component
const Subtitle = memo((): JSX.Element | null => {
const Subtitle = memo(forwardRef<HTMLDivElement, SubtitleProps>(({ onMouseDown, onMouseEnter, onMouseLeave }, ref): JSX.Element | null => {
const { subtitleText, isLoaded } = useSubtitleDisplay();
const { showSubtitle } = useSubtitle();
const { showSubtitle, subtitleConfig } = useSubtitle();

if (!isLoaded || !subtitleText || !showSubtitle) return null;

return (
<Box {...canvasStyles.subtitle.container}>
<SubtitleText text={subtitleText} />
<Box
ref={ref}
{...canvasStyles.subtitle.container}
backgroundColor={subtitleConfig.backgroundColor}
onMouseDown={onMouseDown}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
cursor="grab"
_active={{ cursor: 'grabbing' }}
>
<SubtitleText
text={subtitleText}
fontSize={subtitleConfig.fontSize}
color={subtitleConfig.color}
fontFamily={subtitleConfig.fontFamily}
/>
</Box>
);
});
}));

Subtitle.displayName = 'Subtitle';

Expand Down
31 changes: 31 additions & 0 deletions src/renderer/src/components/sidebar/setting/general.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ function General({ onSave, onCancel }: GeneralProps): JSX.Element {
handleCharacterPresetChange,
showSubtitle,
setShowSubtitle,
subtitleConfig,
setSubtitleConfig,
} = useGeneralSettings({
bgUrlContext,
confName,
Expand Down Expand Up @@ -99,6 +101,35 @@ function General({ onSave, onCancel }: GeneralProps): JSX.Element {
onChange={setShowSubtitle}
/>

{showSubtitle && (
<>
<InputField
label="Subtitle Font Size"
value={subtitleConfig.fontSize}
onChange={(value) => setSubtitleConfig({ fontSize: value as string })}
placeholder="e.g. 1.5rem, 24px"
/>
<InputField
label="Subtitle Color"
value={subtitleConfig.color}
onChange={(value) => setSubtitleConfig({ color: value as string })}
placeholder="e.g. white, #ffffff"
/>
<InputField
label="Subtitle Background Color"
value={subtitleConfig.backgroundColor}
onChange={(value) => setSubtitleConfig({ backgroundColor: value as string })}
placeholder="e.g. rgba(0, 0, 0, 0.7)"
/>
<InputField
label="Subtitle Font Family"
value={subtitleConfig.fontFamily}
onChange={(value) => setSubtitleConfig({ fontFamily: value as string })}
placeholder="e.g. Arial, sans-serif"
/>
Comment on lines +104 to +129

@coderabbitai coderabbitai Bot Jun 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Localize the new subtitle control labels and placeholders.

This block hardcodes English copy while the rest of the settings panel uses t(...). The new subtitle options will stay untranslated for non-English users.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/renderer/src/components/sidebar/setting/general.tsx` around lines 104 -
129, The new subtitle controls (rendered when showSubtitle is true) use
hardcoded English strings for labels and placeholders in the InputField props
(e.g., "Subtitle Font Size", "e.g. 1.5rem, 24px") — update each label and
placeholder to use the localization function t(...) instead, creating/using
appropriate i18n keys for "subtitle.fontSize.label",
"subtitle.fontSize.placeholder", "subtitle.color.label",
"subtitle.color.placeholder", "subtitle.backgroundColor.label",
"subtitle.backgroundColor.placeholder", and "subtitle.fontFamily.label" /
"subtitle.fontFamily.placeholder" and pass t('...') to the InputField label and
placeholder props while leaving value and onChange (subtitleConfig and
setSubtitleConfig) unchanged.

</>
)}

{!settings.useCameraBackground && (
<>
<SelectField
Expand Down
49 changes: 48 additions & 1 deletion src/renderer/src/context/subtitle-context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,17 @@ import {
createContext, useState, useMemo, useContext, memo,
} from 'react';

/**
* Subtitle styling configuration
* @interface SubtitleConfig
*/
export interface SubtitleConfig {
fontSize: string
color: string
backgroundColor: string
fontFamily: string
}

/**
* Subtitle context state interface
* @interface SubtitleState
Expand All @@ -18,6 +29,12 @@ interface SubtitleState {

/** Toggle subtitle visibility */
setShowSubtitle: (show: boolean) => void

/** Subtitle style configuration */
subtitleConfig: SubtitleConfig

/** Update subtitle style configuration */
setSubtitleConfig: (config: Partial<SubtitleConfig>) => void
}

/**
Expand All @@ -26,8 +43,16 @@ interface SubtitleState {
const DEFAULT_SUBTITLE = {
text: "Hi, I'm some random AI VTuber. Who the hell are ya? "
+ 'Ahh, you must be amazed by my awesomeness, right? right?',
config: {
fontSize: '1.5rem',
color: 'white',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
fontFamily: 'inherit',
},
};

const SUBTITLE_CONFIG_KEY = 'appSubtitleConfig';

/**
* Create the subtitle context
*/
Expand All @@ -45,15 +70,37 @@ export const SubtitleProvider = memo(({ children }: { children: React.ReactNode
const [subtitleText, setSubtitleText] = useState<string>(DEFAULT_SUBTITLE.text);
const [showSubtitle, setShowSubtitle] = useState<boolean>(true);

const [subtitleConfig, setSubtitleConfigState] = useState<SubtitleConfig>(() => {
const savedConfig = localStorage.getItem(SUBTITLE_CONFIG_KEY);
if (savedConfig) {
try {
return { ...DEFAULT_SUBTITLE.config, ...JSON.parse(savedConfig) };
} catch (e) {
console.error('Failed to parse subtitle config', e);
}
}
return DEFAULT_SUBTITLE.config;
});

const setSubtitleConfig = (config: Partial<SubtitleConfig>) => {
setSubtitleConfigState((prev) => {
const newConfig = { ...prev, ...config };
localStorage.setItem(SUBTITLE_CONFIG_KEY, JSON.stringify(newConfig));
return newConfig;
});
};

// Memoized context value
const contextValue = useMemo(
() => ({
subtitleText,
setSubtitleText,
showSubtitle,
setShowSubtitle,
subtitleConfig,
setSubtitleConfig,
}),
[subtitleText, showSubtitle],
[subtitleText, showSubtitle, subtitleConfig],
);

return (
Expand Down
9 changes: 8 additions & 1 deletion src/renderer/src/hooks/sidebar/setting/use-general-settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,12 @@ export const useGeneralSettings = ({
onSave,
onCancel,
}: UseGeneralSettingsProps) => {
const { showSubtitle, setShowSubtitle } = useSubtitle();
const {
showSubtitle,
setShowSubtitle,
subtitleConfig,
setSubtitleConfig,
} = useSubtitle();
Comment on lines +76 to +81

@coderabbitai coderabbitai Bot Jun 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Keep subtitle style edits in the save/cancel draft flow.

These values now bypass settings/originalSettings and go straight through setSubtitleConfig, which immediately persists in src/renderer/src/context/subtitle-context.tsx Lines 85-90. Pressing Cancel will restore other settings, but the new subtitle font/color/background changes remain applied and saved.

Also applies to: 264-265

const { setUseCameraBackground } = bgUrlContext || {};
const { startBackgroundCamera, stopBackgroundCamera } = useCamera();
const { configFiles, getFilenameByName } = useConfig();
Expand Down Expand Up @@ -256,5 +261,7 @@ export const useGeneralSettings = ({
handleCharacterPresetChange,
showSubtitle,
setShowSubtitle,
subtitleConfig,
setSubtitleConfig,
};
};