Implement Style Editor, Preview, and Settings Schema
This commit is contained in:
77
src/components/dashboard/PreviewFrame.tsx
Normal file
77
src/components/dashboard/PreviewFrame.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { OverlaySettings } from '@/lib/types';
|
||||
|
||||
interface PreviewFrameProps {
|
||||
settings: OverlaySettings;
|
||||
}
|
||||
|
||||
const MOCK_MESSAGES = [
|
||||
{ id: 1, user: 'StreamElements', color: '#5b99ff', text: 'Welcome to the stream! Enjoy your stay.', badges: ['moderator'] },
|
||||
{ id: 2, user: 'Viewer123', color: '#ff5b5b', text: 'PogChamp this overlay is amazing!', badges: ['subscriber'] },
|
||||
{ id: 3, user: 'Lurker', color: '#5bff89', text: 'Can I get a shoutout?', badges: [] },
|
||||
{ id: 4, user: 'ProGamer', color: '#ffb35b', text: 'What game are we playing today? kappa', badges: ['subscriber', 'turbo'] },
|
||||
];
|
||||
|
||||
export default function PreviewFrame({ settings }: PreviewFrameProps) {
|
||||
// Convert hex to rgb for background opacity
|
||||
const r = parseInt(settings.backgroundColor.slice(1, 3), 16);
|
||||
const g = parseInt(settings.backgroundColor.slice(3, 5), 16);
|
||||
const b = parseInt(settings.backgroundColor.slice(5, 7), 16);
|
||||
const rgbaBackground = `rgba(${r}, ${g}, ${b}, ${settings.backgroundOpacity})`;
|
||||
|
||||
const containerStyle: React.CSSProperties = {
|
||||
fontFamily: settings.fontFamily,
|
||||
backgroundColor: 'transparent', // The frame background is transparent, messages have their own bg or the container has it?
|
||||
// In many overlays, the messages themselves are transparent or the whole container has a background.
|
||||
// Based on the CSS generator: .chat-message has the background. Wait, no.
|
||||
// In generateOverlayCSS:
|
||||
// .chat-message { background-color: var(--chat-bg-color); ... }
|
||||
// So the background applies to individual messages.
|
||||
};
|
||||
|
||||
const messageStyle: React.CSSProperties = {
|
||||
backgroundColor: rgbaBackground,
|
||||
color: settings.textColor,
|
||||
textShadow: settings.textShadow,
|
||||
fontSize: settings.fontSize,
|
||||
marginBottom: settings.messageSpacing,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 bg-zinc-100 dark:bg-zinc-950 p-8 flex items-center justify-center h-full overflow-hidden">
|
||||
<div className="relative w-full max-w-md aspect-[9/16] bg-[url('/file.svg')] bg-cover bg-center border-4 border-zinc-800 rounded-xl shadow-2xl overflow-hidden bg-zinc-800">
|
||||
{/* Mock Stream Background (Optional) */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-indigo-900 to-purple-900 opacity-50"></div>
|
||||
|
||||
<div
|
||||
className="absolute inset-0 flex flex-col justify-end p-4"
|
||||
style={containerStyle}
|
||||
>
|
||||
{MOCK_MESSAGES.map((msg) => (
|
||||
<div key={msg.id} className="p-2 rounded mb-2 animate-in fade-in slide-in-from-bottom-2" style={messageStyle}>
|
||||
<div className="flex flex-wrap items-baseline">
|
||||
{settings.showBadges && msg.badges.length > 0 && (
|
||||
<span className="mr-2 inline-flex gap-1">
|
||||
{msg.badges.map(badge => (
|
||||
<span key={badge} className="w-4 h-4 bg-zinc-400 rounded-sm inline-block" title={badge}></span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className="font-bold mr-2"
|
||||
style={{ color: settings.usernameColor === 'twitch' ? msg.color : settings.textColor }}
|
||||
>
|
||||
{msg.user}:
|
||||
</span>
|
||||
<span>{msg.text}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-4 right-4 text-xs text-zinc-500">Live Preview</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
168
src/components/dashboard/StyleControls.tsx
Normal file
168
src/components/dashboard/StyleControls.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { OverlaySettings } from '@/lib/types';
|
||||
|
||||
interface StyleControlsProps {
|
||||
settings: OverlaySettings;
|
||||
updateSettings: (newSettings: Partial<OverlaySettings>) => void;
|
||||
}
|
||||
|
||||
export default function StyleControls({ settings, updateSettings }: StyleControlsProps) {
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value, type } = e.target;
|
||||
let newValue: string | number | boolean = value;
|
||||
|
||||
if (type === 'range') {
|
||||
newValue = parseFloat(value);
|
||||
} else if (type === 'checkbox') {
|
||||
newValue = (e.target as HTMLInputElement).checked;
|
||||
}
|
||||
|
||||
updateSettings({ [name]: newValue });
|
||||
};
|
||||
|
||||
const handleEmoteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = e.target;
|
||||
updateSettings({
|
||||
emotes: {
|
||||
...settings.emotes,
|
||||
[name]: checked,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-6 bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 h-full overflow-y-auto w-80 shrink-0">
|
||||
<h2 className="text-xl font-bold text-zinc-900 dark:text-white">Style Editor</h2>
|
||||
|
||||
{/* Font Family */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Font Family</label>
|
||||
<select
|
||||
name="fontFamily"
|
||||
value={settings.fontFamily}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white"
|
||||
>
|
||||
<option value="Inter, sans-serif">Inter</option>
|
||||
<option value="Roboto, sans-serif">Roboto</option>
|
||||
<option value="'Open Sans', sans-serif">Open Sans</option>
|
||||
<option value="Lato, sans-serif">Lato</option>
|
||||
<option value="Montserrat, sans-serif">Montserrat</option>
|
||||
<option value="'Press Start 2P', cursive">Pixel Art</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Font Size */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Font Size</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
name="fontSize"
|
||||
value={settings.fontSize}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Text Color */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Text Color</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
name="textColor"
|
||||
value={settings.textColor}
|
||||
onChange={handleChange}
|
||||
className="h-10 w-10 p-0 border-0 rounded overflow-hidden cursor-pointer"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="textColor"
|
||||
value={settings.textColor}
|
||||
onChange={handleChange}
|
||||
className="flex-1 p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white uppercase"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Background Color */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Background Color</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
name="backgroundColor"
|
||||
value={settings.backgroundColor}
|
||||
onChange={handleChange}
|
||||
className="h-10 w-10 p-0 border-0 rounded overflow-hidden cursor-pointer"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="backgroundColor"
|
||||
value={settings.backgroundColor}
|
||||
onChange={handleChange}
|
||||
className="flex-1 p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white uppercase"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Background Opacity */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300 flex justify-between">
|
||||
<span>Opacity</span>
|
||||
<span>{Math.round(settings.backgroundOpacity * 100)}%</span>
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
name="backgroundOpacity"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={settings.backgroundOpacity}
|
||||
onChange={handleChange}
|
||||
className="w-full accent-indigo-600 cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Toggles */}
|
||||
<div className="space-y-4 pt-4 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="showBadges"
|
||||
checked={settings.showBadges}
|
||||
onChange={handleChange}
|
||||
className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Show Badges</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="bttv"
|
||||
checked={settings.emotes.bttv}
|
||||
onChange={handleEmoteChange}
|
||||
className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">BTTV Emotes</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="seventv"
|
||||
checked={settings.emotes.seventv}
|
||||
onChange={handleEmoteChange}
|
||||
className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">7TV Emotes</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user