119 lines
4.2 KiB
HTML
119 lines
4.2 KiB
HTML
|
{{#*inline "controlBar"}}
|
||
|
|
<nav class="control-bar bottom flexrow" aria-label="{{localize 'WEBRTC.NavLabel'}}">
|
||
|
|
<div class="volume-bar">
|
||
|
|
<i class="fas fa-volume-down fa-fw vol-min"></i>
|
||
|
|
<input class="webrtc-volume-slider" type="range" min="0" max="1" step="0.05" value="{{this.volume}}"/>
|
||
|
|
<i class="fas fa-volume-up fa-fw vol-max"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{#if (and local (not @root.hidden))}}
|
||
|
|
<a class="av-control toggle" data-action="toggle-dock">
|
||
|
|
<i class="far fa-fw"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a class="av-control toggle" data-action="toggle-players">
|
||
|
|
<i class="far fa-fw fa-rotate-270"></i>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
<a class="av-control toggle" data-action="toggle-video">
|
||
|
|
<i class="fas fa-fw"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a class="av-control toggle" data-action="toggle-audio">
|
||
|
|
<i class="fas fa-fw"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a class="av-control toggle" data-action="mute-peers">
|
||
|
|
<i class="fas fa-fw"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a class="av-control toggle" data-action="disable-video">
|
||
|
|
<i class="fas fa-fw"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
{{#if this.local}}
|
||
|
|
<a class="av-control" data-tooltip="{{localize 'WEBRTC.TooltipConfigure'}}" data-action="configure">
|
||
|
|
<i class="fas fa-cog"></i>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
</nav>
|
||
|
|
{{/inline}}
|
||
|
|
|
||
|
|
{{#*inline "cameraBox"}}
|
||
|
|
<div class="camera-view {{this.cameraViewClass}}" data-user="{{this.user.id}}"
|
||
|
|
{{#if @root.borderColors}}style="background: linear-gradient(to bottom, {{this.user.border.css}} 0%, {{this.user.color}} 100%);"{{/if}}>
|
||
|
|
<div class="video-container {{#if this.settings.popout}}camera-container-popout{{/if}}">
|
||
|
|
<img class="user-avatar" src="{{this.user.avatar}}"/>
|
||
|
|
<video class="user-camera {{#if this.local}}local-camera{{/if}}"
|
||
|
|
style="visibility:hidden; display: none;" autoplay="autoplay" playsinline="playsinline">
|
||
|
|
</video>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{!-- Left Control Bar --}}
|
||
|
|
<div class="control-bar left flexcol hidden">
|
||
|
|
<a class="av-control toggle global" data-action="block-video">
|
||
|
|
<i class="fas fa-fw"></i>
|
||
|
|
</a>
|
||
|
|
<a class="av-control toggle global" data-action="block-audio">
|
||
|
|
<i class="fas fa-fw"></i>
|
||
|
|
</a>
|
||
|
|
<a class="av-control toggle" data-action="hide-user">
|
||
|
|
<i class="fas fa-fw"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
{{#if this.settings.popout}}
|
||
|
|
<a class="av-control toggle" data-tooltip="{{localize 'WEBRTC.TooltipDock'}}" data-action="toggle-popout">
|
||
|
|
<i class="fas fa-external-link-square-alt fa-rotate-180"></i>
|
||
|
|
</a>
|
||
|
|
{{else}}
|
||
|
|
<a class="av-control toggle" data-tooltip="{{localize 'WEBRTC.TooltipPopout'}}" data-action="toggle-popout">
|
||
|
|
<i class="fas fa-external-link-alt"></i>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{!-- Bottom Control Bar --}}
|
||
|
|
{{#if (or @root.hidden (not local))}}
|
||
|
|
{{> controlBar}}
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
{{!-- Right Notification Bar --}}
|
||
|
|
<div class="notification-bar right flexcol">
|
||
|
|
<i class="fas fa-video-slash fa-fw status-hidden hidden"></i>
|
||
|
|
<i class="fas fa-microphone-slash fa-fw status-muted hidden"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="shadow"></div>
|
||
|
|
|
||
|
|
<h3 class="player-name noborder {{@root.nameplates.cssClass}}" style="color: {{this.user.border}};">
|
||
|
|
{{#if @root.nameplates.playerName}}
|
||
|
|
<span>{{this.user.name}}</span>
|
||
|
|
{{/if}}
|
||
|
|
{{#if @root.nameplates.charname}}
|
||
|
|
<span>{{#if this.charname}}{{this.charname}}{{else}}{{this.user.name}}{{/if}}</span>
|
||
|
|
{{/if}}
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
{{/inline}}
|
||
|
|
|
||
|
|
<div id="camera-views" class="app {{dockClass}}">
|
||
|
|
<div class="camera-container">
|
||
|
|
<div class="camera-grid">
|
||
|
|
{{#each users}}
|
||
|
|
{{#if this.settings.popout}}
|
||
|
|
<div id="camera-views-user-{{this.user.id}}" class="app camera-view-popout">
|
||
|
|
{{> cameraBox isGM=../self.isGM muteAll=../muteAll}}
|
||
|
|
</div>
|
||
|
|
{{else}}
|
||
|
|
{{> cameraBox isGM=../self.isGM muteAll=../muteAll dockClass=../dockClass}}
|
||
|
|
{{/if}}
|
||
|
|
{{/each}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="camera-view-width-control"></div>
|
||
|
|
<div class="user-controls" data-user="{{self.id}}">
|
||
|
|
{{> controlBar local=true}}
|
||
|
|
</div>
|
||
|
|
</div>
|