Smart Lower Thirds 2.6.4

✨ Summary

This update focuses on visual polish, layout stability, and usability improvements across the Lower Thirds Gallery and Settings UI:

• Fixed stretched and uneven layouts in all settings panels.
• Introduced proper top-aligned content behavior inside full-height panels.
• Redesigned the Lower Thirds Marketplace cards for perfect full-width alignment.
• Removed unwanted borders and spacing artifacts.
• Center-aligned call-to-action buttons for a cleaner, more professional look.
• Improved browser source cache refresh logic and API fallback handling.
• Added robust CDN and offline-safe behavior for template loading.

---

Spoiler: UI / Layout Improvements

• All settings panels now keep controls packed at the top while the panel itself remains full height.
• Reworked layout structure using internal QVBoxLayout + QGridLayout + stretch pattern.
• Eliminated vertical control stretching in:
  • Content & Media panel
  • Style panel
  • Templates panel
• Introduced consistent column stretch rules for labels vs inputs.
• Improved overall visual density and professional alignment.

Spoiler: Lower Thirds Gallery (Marketplace)

• Removed unwanted right-side borders and frame artifacts.
• Forced each marketplace card to span the full available width (no empty gutter).
• Replaced StyledPanel frames with clean, modern card styling.
• Center-aligned the Get Template button both horizontally and vertically.
• Improved icon loading with disk + memory cache fallback.
• Added resize-safe behavior to keep cards aligned when dialog size changes.
• Improved hero header styling and spacing.

Spoiler: API & Offline Fallback Handling

• Added full API response logging for silent network failures.
• Implemented disk-cached fallback for:
  • Marketplace templates list
  • Template preview images
• Improved error reporting when:
  • Network is blocked
  • CDN is unreachable
  • API returns invalid JSON
• Ensured marketplace still displays cached templates when offline.

Spoiler: ⚡ Browser Source Refresh & Cache Busting

• Switched to timestamped HTML regeneration:
  • Code:

    lt-<timestamp>.html

• Added versioned CSS/JS loading:
  
  Code:

  <link rel="stylesheet" href="lt.css?v=TIMESTAMP">
  <script defer src="lt.js?v=TIMESTAMP"></script>

• Ensured refresh works without OBS restart.
• Removed dependency on filename renaming for CSS/JS.
• Implemented proper OBS Browser Source reload trigger.

Spoiler: Template Editor Enhancements

• Separated panels for:
  • Template Editors (HTML / CSS / JS)
  • Template Placeholders reference
• Both panels are now:
  • Independently sized
  • Top-aligned
  • Visually balanced
• Added expandable full-screen editor buttons.
• Improved monospace rendering and scroll behavior.

Spoiler: Internal & Code Quality

• Unified layout patterns across all settings pages.
• Replaced ad-hoc alignment hacks with proper Qt layout mechanics.
• Removed invalid API calls (
  Code:

  Align()

  on widgets).
• Improved size policy usage (
  Code:

  Expanding

  vs
  Code:

  Maximum

  vs
  Code:

  Fixed

  ).
• Optimized image loading threading and cache reuse.

Smart Lower Thirds – Changelog (Latest Release)

Spoiler: ✨ New Features

Managed Browser Source Selection
- Added a Browser Source selector in the dock, allowing you to choose exactly which Browser Source instance will display your lower thirds.
- Automatic detection and listing of all available Browser Sources via a combo box.

Advanced Template Lifecycle Hooks
- New awaited lifecycle hooks for custom templates:
• __slt_onShown – called after the “animate in” completes.
• __slt_beforeHide – called before the “animate out” starts.
- Enables precise timing control, chained animations, async logic, and event-based effects.

New Design & Animation Placeholders
- Added Radius and Opacity placeholders for advanced background styling.
- Added Text Size placeholders for responsive typography.

WebSocket Bridge Expansion
New events for automation and external control:
- CreateLowerThird
- CloneLowerThird
- DeleteLowerThird
- ReloadFromDisk (auto-reloads the dock when state is updated externally)

Custom Dock Labels
- New “Label” field to name Lower Thirds in the dock without affecting internal IDs.

Radio Mode (Exclusive Playback)
- Optional Auto-Exclusive mode ensures only one Lower Third is visible at a time.

Dynamic Browser Source Scaling
- Width and Height can now be changed live from the dock.

Lower Third Reordering
- Manual Up/Down controls to reorder Lower Thirds like OBS sources.

Lower Thirds Carousel System
- Create multiple independent carousels.
- Assign Lower Thirds exclusively to a carousel.
- Linear or Random order modes.
- Optional looping.
- Per-item visible duration.
- Configurable delay between items.
- Dock highlight colors for visual grouping.
- Carousel acts as a parent controller and overrides individual toggles.

Built-in Lower Thirds Library
- Integrated template library showcasing professional designs.

Template Development Enhancements
- Base script documentation bundled with JS templates.
- One-click open in your favorite code editor.
- New troubleshooting dialog.

Spoiler: Animation & CSS Pipeline Overhaul

- CSS system now safely extracts and merges all @keyframes and @-webkit-keyframes.
- Automatic deduplication and conflict resolution.
- Final unified keyframes appended once to lt-styles.css.
- Prevents animation name collisions and selector corruption.
- Fixed base script and base CSS fade handling for custom animations.

Spoiler: Improvements & Fixes

Settings & UX
- New tabbed Settings dialog layout.
- Dialog is now non-modal (Qt::NonModal).
- Save & Apply closes instantly (no blocking confirmation popup).
- Fixed modal opening glitch.

Browser Source Handling
- Fixed Browser Sources not loading correctly on OBS startup.
- Added automatic refresh when Browser Sources are created or removed.

File & Asset Management
- Added Delete button for profile images.
- Confirmation dialog before deletion.
- Physical file removal and profile cleanup.
- Fixed file mismatch when cloning or deleting profile pictures.

Lower Third Behavior
- Removed forced auto-fade on newly created Lower Thirds.
- Cleaned and refined default template.
- Fixed custom animation fade logic.
- Wired background radius and opacity parameters.

Dock & Automation
- Added auto-refresh for Browser Source list.
- Fixed external state reload issues.
- Improved carousel ownership logic and dock highlighting.

Spoiler: Developer-Focused Additions

- Awaited lifecycle hooks for animation orchestration.
- Expanded WebSocket API.
- Keyframe-safe CSS scoping system.
- Editor integration for rapid template iteration.
- Full troubleshooting interface.

New Features
- Custom Dock Labels: Added a new "Label" field in the Settings dialog. You can now name your Lower Thirds (LTs) specifically for the dock display without affecting the underlying data name.
- Radio Mode (Auto-Exclusive Switching): Added a new checkbox in the dock. When enabled, activating a Lower Third will automatically deactivate any other active LTs, ensuring only one is on-screen at a time.
- Dynamic Browser Source Scaling: Added width and height settings directly to the dock. You can now adjust the dimensions of the browser source on the fly instead of relying on hardcoded values.
- LT Reordering: Added manual controls (Up/Down) to the Lower Thirds list. You can now organize the order of your LTs to match your workflow, similar to how OBS Sources are managed.

Improvements & Fixes
- Added a Delete button next to the image browse option.
- Implemented a safety confirmation dialog to prevent accidental deletion.
- The system now physically deletes the image file from storage and clears the profile string when confirmed.

Added two new position points for Bottom Center and Top Center. These positions are based on your current styling and, in some cases, may require manual adjustment.

To apply these changes, open a lower third and click Save & Apply. This will regenerate the base CSS and include the new position points.

A new version has been released addressing some issues and requests from the https://discord.gg/2yD6B2PTuQ community

- Added a source selector (you need to create a browser source and tell the plugin where to draw the lower thirds)
- Added a small automation to auto hide a lower third after X seconds

Added pocket edition for animate.css
Added a pocket edition websocket support where you can list / toggle the lower thirds remotely

• Dropped the built-in local webserver and switched to OBS Studio’s native Local File browser source for simpler and more reliable setup
• Added support for timed / auto-repeat lower thirds, allowing them to show every X seconds and stay visible for a configurable duration
• Cleaned up and simplified the dock UI for better usability
• Refined and reorganized the lower third settings window
• Added more built-in animations and improved animation handling
• Improved internal infrastructure and configuration handling
• General stability improvements and maintenance updates

Changed the name so it’s not creating confusion with the other lower thirds plugins