123 lines
5.9 KiB
HTML
123 lines
5.9 KiB
HTML
{{#*inline "soundPartial"}}
|
|
<li class="sound flexrow {{sound.css}}" data-playlist-id="{{sound.playlistId}}" data-sound-id="{{sound._id}}">
|
|
<h4 class="sound-name">{{sound.name}}</h4>
|
|
<div class="sound-controls flexrow">
|
|
{{#if sound.isOwner}}
|
|
<a class="sound-control fa-solid fa-sync {{#unless sound.repeat}}inactive{{/unless}} {{sound.controlCSS}}"
|
|
data-action="sound-repeat" data-tooltip="PLAYLIST.SoundLoop"></a>
|
|
{{/if}}
|
|
{{#if sound.playing}}
|
|
<a class="sound-control {{sound.playIcon}} {{sound.controlCSS}}" data-action="sound-stop"
|
|
data-tooltip="PLAYLIST.SoundStop"></a>
|
|
{{else}}
|
|
<a class="sound-control {{sound.playIcon}} {{sound.controlCSS}}" data-action="sound-play"
|
|
data-tooltip="{{sound.playTitle}}"></a>
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if playback}}
|
|
<div class="sound-playback flexrow">
|
|
<div class="sound-timer">
|
|
<span class="current">{{sound.currentTime}}</span>
|
|
<span class="sep">/</span>
|
|
<span class="duration">{{sound.durationTime}}</span>
|
|
</div>
|
|
<i class="volume-icon fas fa-volume-down"></i>
|
|
<input class="sound-volume" type="range"
|
|
value="{{sound.lvolume}}" min="0" max="1" step="0.05" data-tooltip="{{sound.volumeTooltip}}">
|
|
<a class="sound-control pause {{sound.pauseIcon}} {{sound.controlCSS}} {{#if sound.isPaused}}disabled{{/if}}"
|
|
data-action="sound-pause" data-tooltip="PLAYLIST.SoundPause"></a>
|
|
</div>
|
|
{{/if}}
|
|
</li>
|
|
{{/inline}}
|
|
|
|
{{#*inline "playingPartial"}}
|
|
{{#if showPlaying}}
|
|
<div id="currently-playing" class="global-control flexrow {{currentlyPlaying.class}}">
|
|
<header class="playlist-header flexrow">
|
|
<h4>{{localize "PLAYLIST.CurrentlyPlaying"}}</h4>
|
|
<a class="pin fa-solid fa-caret-{{currentlyPlaying.pin.caret}}"
|
|
data-tooltip="{{localize currentlyPlaying.pin.label}}"></a>
|
|
</header>
|
|
<ol class="playlist-sounds">
|
|
{{#each playingSounds as |sound|}}
|
|
{{> soundPartial sound=sound playback=true}}
|
|
{{/each}}
|
|
</ol>
|
|
</div>
|
|
{{/if}}
|
|
{{/inline}}
|
|
|
|
<section class="{{cssClass}} directory flexcol" id="{{cssId}}" data-tab="{{tabName}}">
|
|
|
|
<!-- Directory Header -->
|
|
<header class="directory-header">
|
|
<div class="header-actions action-buttons flexrow">
|
|
{{#if canCreateEntry}}
|
|
<button class="create-document create-entry"><i class="{{sidebarIcon}}"></i> {{localize 'SIDEBAR.Create' type=label}}</button>
|
|
{{/if}}
|
|
{{#if canCreateFolder }}
|
|
<button class="create-folder"><i class="{{folderIcon}}"></i> {{localize 'FOLDER.Create'}}</button>
|
|
{{/if}}
|
|
</div>
|
|
<div class="header-search flexrow">
|
|
<a class="header-control toggle-search-mode" aria-label="{{localize searchTooltip}}" role="button" data-tooltip="{{localize searchTooltip}}"><i class="fas {{searchIcon}}"></i></a>
|
|
<input type="search" name="search" value="" placeholder="{{localize 'SIDEBAR.Search' types=labelPlural }}" autocomplete="off">
|
|
<a class="header-control toggle-sort" aria-label="{{localize sortTooltip}}" role="button" data-tooltip="{{localize sortTooltip}}"><i class="fa-solid {{sortIcon}}"></i></a>
|
|
<a class="header-control collapse-all" aria-label="{{localize 'FOLDER.Collapse'}}" role="button" data-tooltip="FOLDER.Collapse"><i class="fa-duotone fa-folder-tree"></i></a>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="global-volume" class="global-control flexrow {{#unless volumeExpanded}}collapsed{{/unless}}">
|
|
<header class="playlist-header flexrow">
|
|
<h4>{{localize "PLAYLIST.VOLUME.CONTROLS"}} <i class="collapse fa fa-angle-{{#if volumeExpanded}}down{{else}}up{{/if}}"></i></h4>
|
|
</header>
|
|
<ol class="playlist-sounds">
|
|
<li class="sound flexrow" data-tooltip="AUDIO.CHANNELS.MUSIC.tooltip">
|
|
<h4>{{localize "AUDIO.CHANNELS.MUSIC.label"}}</h4>
|
|
<i class="volume-icon fas fa-volume-down"></i>
|
|
<input class="global-volume-slider" name="globalPlaylistVolume" type="range"
|
|
value="{{playlistModifier}}" min="0" max="1" step="0.05" data-tooltip="{{playlistTooltip}}"
|
|
aria-label="{{localize 'AUDIO.CHANNELS.MUSIC.label'}}">
|
|
</li>
|
|
<li class="sound flexrow" data-tooltip="AUDIO.CHANNELS.ENVIRONMENT.tooltip">
|
|
<h4>{{localize "AUDIO.CHANNELS.ENVIRONMENT.label"}}</h4>
|
|
<i class="volume-icon fas fa-volume-down"></i>
|
|
<input class="global-volume-slider" name="globalAmbientVolume" type="range" value="{{ambientModifier}}"
|
|
min="0" max="1" step="0.05" data-tooltip="{{ambientTooltip}}"
|
|
aria-label="{{localize 'AUDIO.CHANNELS.ENVIRONMENT.label'}}">
|
|
</li>
|
|
<li class="sound flexrow" data-tooltip="AUDIO.CHANNELS.INTERFACE.tooltip">
|
|
<h4>{{localize "AUDIO.CHANNELS.INTERFACE.label"}}</h4>
|
|
<i class="volume-icon fas fa-volume-down"></i>
|
|
<input class="global-volume-slider" name="globalInterfaceVolume" type="range"
|
|
value="{{interfaceModifier}}" min="0" max="1" step="0.05" data-tooltip="{{interfaceTooltip}}"
|
|
aria-label="{{localize 'AUDIO.CHANNELS.INTERFACE.label'}}">
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
{{#if currentlyPlaying.location.top}}
|
|
{{> playingPartial}}
|
|
{{/if}}
|
|
|
|
<!-- Directories List -->
|
|
<ol class="directory-list">
|
|
{{~#each tree.children}}
|
|
{{> (lookup @root "folderPartial") node=this folder=this.folder}}
|
|
{{/each}}
|
|
{{#each tree.entries}}
|
|
{{> (lookup @root "entryPartial")}}
|
|
{{/each~}}
|
|
</ol>
|
|
|
|
{{#if currentlyPlaying.location.bottom}}
|
|
{{> playingPartial}}
|
|
{{/if}}
|
|
|
|
<!-- Directory Footer -->
|
|
<footer class="directory-footer"></footer>
|
|
</section>
|
|
|