f7718f0e14
* Revamped and restored VCNarratorCustom with a new cloudflare worker api that's morre optimized for this plugin alone and unlikely to be shutdown hopefully
* fixed some linting erros
* Replaced <Forms.FormSection> with a React fragment <>
* Changed from children={[...]} prop to nesting the children between opening and closing tags
* Add Forms and UserStore imports to fakeNitro
* cleaned up the UI and comments a bit
* GIT CHANGES:
Refactored:
Extracted constants (VOICE_OPTIONS), string helpers (clean, formatText), and user map helpers from index.tsx to util.ts.
Moved basic TTS cache logic to util.ts.
New Features:
LRU Cache Eviction: util.ts now implements voices_meta store (DB v2) to track file size/access time and auto-delete old entries when cache exceeds 100MB.
Smoke Test: Created vcNarratorCustomSmokeTest.ts to verify API connectivity, helper logic, and browser storage (persistence/eviction).
UI: Added Divider component between troubleshooting and main settings.
* Removed redeined voicestatestore in favor oif an import from webpack
* made the smoke test more comprehensikve with clear out put of expectations anmd success/failure. that way someone savvy can diagnose if them plugin fails without my assisstance if needed.
index.tsx - only minor lint formatting changes
* Changed tiktoktts plugin to use the new endpoint and switcfhed it from universal channel reads to a context menu o ption on messages.
* removed smoke test from git files, will just keep a local copy
* replace inline styles with classNameFactory
140 lines
No EOL
2.3 KiB
CSS
140 lines
No EOL
2.3 KiB
CSS
/* Troubleshooting section */
|
|
.vc-narrator-troubleshooting {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.vc-narrator-divider {
|
|
margin: 24px 0 12px;
|
|
}
|
|
|
|
.vc-narrator-title {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.vc-narrator-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.vc-narrator-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.vc-narrator-cache-text {
|
|
margin: 0;
|
|
opacity: 0.85;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.vc-narrator-api-text {
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.vc-narrator-api-time {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.vc-narrator-api-status-success {
|
|
color: var(--text-positive);
|
|
}
|
|
|
|
.vc-narrator-api-status-error {
|
|
color: var(--text-danger);
|
|
}
|
|
|
|
.vc-narrator-api-status-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Voice select modal */
|
|
.vc-narrator-modal-title {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.vc-narrator-preview-hint {
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
margin-top: 12px;
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.vc-narrator-preview-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.vc-narrator-modal-footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Settings about component */
|
|
.vc-narrator-author-note {
|
|
padding: 10px 12px;
|
|
background: var(--background-secondary-alt);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--background-tertiary);
|
|
border-left: 3px solid var(--brand-experiment);
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.vc-narrator-author-avatar {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 999px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.vc-narrator-author-content {
|
|
min-width: 0;
|
|
}
|
|
|
|
.vc-narrator-author-title {
|
|
margin-bottom: 2px;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.vc-narrator-author-text {
|
|
font-size: 12px;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.vc-narrator-preview-section {
|
|
padding: 12px 16px;
|
|
background: var(--background-secondary-alt);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--background-tertiary);
|
|
}
|
|
|
|
.vc-narrator-preview-title {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.vc-narrator-preview-subtitle {
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.vc-narrator-preview-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
justify-content: center;
|
|
} |