Files
scrying-pool/templates/directors-board.hbs
T
uberwald 7a0d935239 Story 5.2: Video Widget Width Customization
Implements configurable video widget widths for small and large dock layouts:
- Add widgetWidthSm and widgetWidthMd world settings (defaults: 83px, 150px)
- Add width dropdown selectors in Director's Board UI
- Apply width settings to participant avatars via CSS custom properties
- Update strip width/height calculations to use custom widths
- Add localization strings for widget width settings
- Add CSS styling for widget width dropdown controls
- Fix Handlebars template syntax for select element selected values

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
2026-05-25 12:57:24 +02:00

157 lines
8.0 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{{!-- Director's Board — GM camera-management overview window --}}
<div class="directors-board__inner">
{{!-- Drag grip --}}
<div class="directors-board__grip" data-action="drag-grip" aria-hidden="true">
<i class="fas fa-grip-lines"></i>
</div>
<button type="button"
class="directors-board__close-btn"
data-action="close"
aria-label="{{localize "scrying-pool.directorsBoard.close"}}"
data-tooltip="{{localize "scrying-pool.directorsBoard.close"}}">×</button>
<section class="scrying-pool directors-board__content"
role="list"
aria-label="{{localize "scrying-pool.directorsBoard.title"}}">
{{#unless isEmpty}}
{{#each participants}}
{{> "modules/scrying-pool/templates/participant-card.hbs"}}
{{/each}}
{{else}}
<p class="directors-board__empty" role="listitem">
{{localize "scrying-pool.directorsBoard.empty"}}
</p>
{{/unless}}
</section>
<div class="directors-board__bulk-bar">
<button type="button" class="directors-board__bulk-btn" data-action="show-all"
data-tooltip="{{localize "scrying-pool.directorsBoard.bulk.showAll"}}">
<i class="fas fa-eye" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.bulk.showAll"}}
</button>
<button type="button" class="directors-board__bulk-btn" data-action="hide-all"
data-tooltip="{{localize "scrying-pool.directorsBoard.bulk.hideAll"}}">
<i class="fas fa-eye-slash" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.bulk.hideAll"}}
</button>
{{#if hasUndo}}
<button type="button" class="directors-board__bulk-btn directors-board__bulk-btn--undo" data-action="undo"
data-tooltip="{{localize "scrying-pool.directorsBoard.bulk.undo"}}">
<i class="fas fa-undo" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.bulk.undo"}}
</button>
{{/if}}
{{#if hasRestore}}
<button type="button" class="directors-board__bulk-btn directors-board__bulk-btn--restore" data-action="restore-spotlight"
data-tooltip="{{localize "scrying-pool.directorsBoard.bulk.restore"}}">
<i class="fas fa-star" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.bulk.restore"}}
</button>
{{/if}}
<button type="button" class="directors-board__help-btn" data-action="open-shortcut-panel"
aria-label="{{localize "scrying-pool.directorsBoard.shortcuts.openPanel"}}"
data-tooltip="{{localize "scrying-pool.directorsBoard.shortcuts.openPanel"}}">?</button>
</div>
{{!-- Dock layout selector --}}
<div class="directors-board__dock-layout-bar" role="toolbar" aria-label="{{localize "scrying-pool.directorsBoard.dockLayout.label"}}">
<span class="directors-board__dock-layout-label">{{localize "scrying-pool.directorsBoard.dockLayout.label"}}</span>
<div class="directors-board__dock-layout-group">
{{#each dockLayouts}}
<button type="button"
class="directors-board__dock-layout-btn{{#if isActive}} is-active{{/if}}"
data-action="set-dock-layout"
data-layout="{{key}}"
data-tooltip="{{label}}">
<i class="fas {{icon}}" aria-hidden="true"></i>
<span class="directors-board__dock-layout-size">{{size}}</span>
</button>
{{#if sepAfter}}
<div class="directors-board__dock-layout-sep" role="separator" aria-hidden="true"></div>
{{/if}}
{{/each}}
</div>
</div>
{{!-- Story 5.2: Video widget width customization --}}
<div class="directors-board__widget-width-bar" role="toolbar" aria-label="{{localize 'scrying-pool.directorsBoard.widgetWidth.label'}}">
<span class="directors-board__widget-width-label">{{localize "scrying-pool.directorsBoard.widgetWidth.label"}}</span>
<div class="directors-board__widget-width-group">
<div class="directors-board__widget-width-row">
<span>{{localize "scrying-pool.directorsBoard.widgetWidth.small"}}</span>
<select class="directors-board__widget-width-select" data-action="set-widget-width-sm" data-selected="{{widgetWidthSm}}">
{{#each widthOptions}}
<option value="{{this.value}}">{{this.label}}</option>
{{/each}}
</select>
</div>
<div class="directors-board__widget-width-row">
<span>{{localize "scrying-pool.directorsBoard.widgetWidth.large"}}</span>
<select class="directors-board__widget-width-select" data-action="set-widget-width-md" data-selected="{{widgetWidthMd}}">
{{#each widthOptions}}
<option value="{{this.value}}">{{this.label}}</option>
{{/each}}
</select>
</div>
</div>
</div>
<footer class="directors-board__footer">
<div class="directors-board__footer-group directors-board__footer-group--presets">
<button type="button" class="directors-board__footer-btn" data-action="save-preset"
data-tooltip="{{localize "scrying-pool.directorsBoard.footer.savePreset"}}">
<i class="fas fa-save" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.footer.savePreset"}}
</button>
<button type="button" class="directors-board__footer-btn" data-action="load-preset"
data-tooltip="{{localize "scrying-pool.directorsBoard.footer.loadPreset"}}"
{{#unless hasPresets}}disabled{{/unless}}>
<i class="fas fa-folder-open" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.footer.loadPreset"}}
</button>
<button type="button" class="directors-board__footer-btn directors-board__footer-btn--secondary" data-action="export-presets"
data-tooltip="{{localize "scrying-pool.directorsBoard.footer.exportPresets"}}">
<i class="fas fa-file-export" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.footer.exportPresets"}}
</button>
<button type="button" class="directors-board__footer-btn directors-board__footer-btn--secondary" data-action="import-presets"
data-tooltip="{{localize "scrying-pool.directorsBoard.footer.importPresets"}}">
<i class="fas fa-file-import" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.footer.importPresets"}}
</button>
</div>
<div class="directors-board__footer-group directors-board__footer-group--controls">
<button type="button" class="directors-board__footer-btn directors-board__footer-btn--auto-apply" data-action="toggle-preset-panel"
data-tooltip="{{localize "scrying-pool.directorsBoard.footer.autoApplySettings"}}">
<i class="fas fa-magic" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.footer.autoApplySettings"}}
</button>
<div class="directors-board__footer-sep" role="separator" aria-hidden="true"></div>
<button type="button" class="directors-board__footer-btn directors-board__footer-btn--av{{#if avModeEnabled}} directors-board__footer-btn--av-active{{/if}}" data-action="toggle-av-mode"
data-tooltip="{{#if avModeEnabled}}{{localize "scrying-pool.directorsBoard.footer.avModeDisable"}}{{else}}{{localize "scrying-pool.directorsBoard.footer.avModeEnable"}}{{/if}}">
{{#if avModeEnabled}}
<i class="fas fa-video-slash" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.footer.avModeDisable"}}
{{else}}
<i class="fas fa-video" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.footer.avModeEnable"}}
{{/if}}
</button>
<button type="button" class="directors-board__footer-btn directors-board__footer-btn--av-config" data-action="open-av-config"
data-tooltip="{{localize "scrying-pool.directorsBoard.footer.avConfigTitle"}}">
<i class="fas fa-sliders-h" aria-hidden="true"></i>
{{localize "scrying-pool.directorsBoard.footer.avConfig"}}
</button>
</div>
</footer>
{{!-- Scene Preset Panel - rendered via JavaScript, not Handlebars --}}
{{!-- Panel is appended dynamically in DirectorsBoard._appendPresetPanel() --}}
</div>