uberwald
7a0d935239
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>
93 lines
3.9 KiB
Handlebars
93 lines
3.9 KiB
Handlebars
{{!-- ScryingPoolStrip — floating GM control strip --}}
|
||
<div class="scrying-pool scrying-pool-strip sp-layout-{{dockLayout}}{{#if isExpanded}} is-expanded{{/if}}"
|
||
role="complementary"
|
||
aria-label="Scrying Pool">
|
||
|
||
{{!-- Drag grip (top bar, replaces window header drag affordance) --}}
|
||
<div class="sp-strip__grip" data-action="drag-grip" aria-hidden="true">
|
||
<i class="fas fa-grip-lines"></i>
|
||
</div>
|
||
|
||
{{!-- Lightweight close button (top-right corner, replaces window header) --}}
|
||
<button class="sp-strip__close-btn" data-action="close-strip"
|
||
aria-label="Close Scrying Pool"
|
||
data-tooltip="Close">×</button>
|
||
|
||
{{!-- First-open tip (right-click affordance) --}}
|
||
{{#if showFirstOpenTip}}
|
||
<p class="sp-strip__first-tip">
|
||
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
||
Right-click a participant to hide them from the table.
|
||
</p>
|
||
{{/if}}
|
||
|
||
{{!-- Toolbar row: toggle + Director's Board side by side --}}
|
||
<div class="sp-strip__toolbar">
|
||
<button class="sp-strip__toggle" data-action="toggle-expanded"
|
||
aria-label="{{#if isExpanded}}Collapse Scrying Pool{{else}}Expand Scrying Pool{{/if}}"
|
||
aria-expanded="{{isExpanded}}"
|
||
data-tooltip="{{#if isExpanded}}Collapse{{else}}Expand{{/if}}">
|
||
<i class="fas fa-chevron-{{#if isExpanded}}left{{else}}right{{/if}}"></i>
|
||
</button>
|
||
|
||
{{#if isGM}}
|
||
<button class="sp-strip__directors-board-cta" data-action="open-directors-board"
|
||
aria-label="Open Director's Board"
|
||
data-tooltip="Director's Board">
|
||
<i class="fas fa-border-all" aria-hidden="true"></i>
|
||
<span>Director's Board</span>
|
||
</button>
|
||
{{/if}}
|
||
</div>
|
||
|
||
{{!-- Participant list --}}
|
||
<ul class="sp-strip__participants" role="list" style="--sp-widget-width: {{widgetWidth}}px;">
|
||
{{#if isEmpty}}
|
||
{{!-- EmptyStatePanel --}}
|
||
<li class="sp-strip__empty-state" role="listitem">
|
||
<i class="fas fa-eye sp-empty__icon" aria-hidden="true"></i>
|
||
<span class="sp-empty__text">No participants yet</span>
|
||
</li>
|
||
{{else}}
|
||
{{#each participants}}
|
||
<li class="sp-strip__participant-item" role="listitem">
|
||
{{!-- ParticipantAvatar (44×44px container) --}}
|
||
<button class="sp-participant-avatar sp-state-{{state}}{{#if hasPendingOp}} sp-state-pending{{/if}}"
|
||
data-user-id="{{userId}}"
|
||
data-action="open-popover"
|
||
role="button"
|
||
aria-label="{{name}} — {{stateLabel}}"
|
||
data-tooltip="{{name}} — {{stateLabel}}"
|
||
aria-pressed="false" style="width: {{../widgetWidth}}px; min-width: {{../widgetWidth}}px;">
|
||
|
||
{{!-- Video container for stream-access mode (full AV replacement) --}}
|
||
{{#if hasStreamAccess}}
|
||
<div class="sp-participant-video" aria-hidden="true"></div>
|
||
{{/if}}
|
||
|
||
{{!-- Avatar image (32px rounded) - shown as fallback when no video --}}
|
||
<img class="sp-avatar__img" src="{{avatarSrc}}" alt="" aria-hidden="true" />
|
||
|
||
{{!-- Corner badge (12px bottom-right) --}}
|
||
<span class="sp-avatar__corner-badge" aria-hidden="true"></span>
|
||
|
||
{{!-- Expanded view: name + state rows (vertical-md) --}}
|
||
{{#if ../isExpanded}}
|
||
<span class="sp-avatar__name">{{name}}</span>
|
||
<span class="sp-avatar__state-label">{{stateLabel}}</span>
|
||
{{else if ../showName}}
|
||
{{!-- Horizontal-md / mosaic-md: name below avatar --}}
|
||
<span class="sp-avatar__name">{{name}}</span>
|
||
{{/if}}
|
||
</button>
|
||
</li>
|
||
{{/each}}
|
||
{{/if}}
|
||
</ul>
|
||
|
||
{{!-- StripOverlayLayer — owns ActionPopover + ConfirmationBar --}}
|
||
<div class="sp-strip__overlay-layer"
|
||
aria-hidden="true"
|
||
style="position: absolute; inset: 0; pointer-events: none; overflow: visible;"></div>
|
||
</div>
|