okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add missing button labels (fix for screen readers) (#1016)

Browse source
This commit is contained in:
Pedro Galhardo 2022-05-10 05:20:13 +01:00 • committed by GitHub
parent 45bbe4c9fb
commit 44160dc104
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 225 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/i18n/en_US.json
View file

@ -21,11 +21,13 @@
"term.accountSettings": "Account Settings",
"term.logout": "Logout",
"term.login": "Log In",
"term.quickNav": "Quick Nav",
"term.cast": "Cast",
"term.about": "About",
"term.privateSession": "Private Session",
"term.disablePrivateSession": "Disable Private Session",
"term.queue": "Queue",
"term.autoplay": "Autoplay",
"term.lyrics": "Lyrics",
"term.miniplayer": "MiniPlayer",
"term.history": "History",
@ -46,12 +48,19 @@
"term.createNewPlaylist": "Create New Playlist",
"term.createNewPlaylistFolder": "Create New Playlist Folder",
"term.deletePlaylist": "Are you sure you want to delete this playlist?",
"term.navigateBack": "Navigate back",
"term.navigateForward": "Navigate forward",
"term.play": "Play",
"term.pause": "Pause",
"term.previous": "Previous",
"term.next": "Next",
"term.shuffle": "Shuffle",
"term.enableShuffle": "Enable shuffle",
"term.disableShuffle": "Disable shuffle",
"term.repeat": "Repeat",
"term.enableRepeatOne": "Enable repeat one",
"term.disableRepeatOne": "Disable repeat one",
"term.disableRepeat": "Disable repeat",
"term.volume": "Volume",
"term.mute": "Mute",
"term.unmute": "Unmute",
@ -254,6 +263,7 @@
"action.newpreset": "New Preset...",
"action.deletepreset": "Delete Preset",
"action.open": "Open",
"action.close": "Close",
"action.relaunch.confirm": "Do you want to relaunch Cider?",
"action.cast.chromecast": "Chromecast",
"action.cast.todevices": "Cast to Devices",
@ -264,6 +274,7 @@
"action.cast.scanning": "Scanning...",
"action.createNew": "Create New...",
"action.openArtworkInBrowser": "Open artwork in browser",
"action.scrollToTop": "Scroll to top",
"menubar.options.about": "About",
"menubar.options.settings": "Settings",
"menubar.options.quit": "Quit Cider",

11
src/i18n/source/en_US.json
View file

@ -21,11 +21,13 @@
"term.accountSettings": "Account Settings",
"term.logout": "Logout",
"term.login": "Log In",
"term.quickNav": "Quick Nav",
"term.cast": "Cast",
"term.about": "About",
"term.privateSession": "Private Session",
"term.disablePrivateSession": "Disable Private Session",
"term.queue": "Queue",
"term.autoplay": "Autoplay",
"term.lyrics": "Lyrics",
"term.miniplayer": "MiniPlayer",
"term.history": "History",
@ -46,12 +48,19 @@
"term.createNewPlaylist": "Create New Playlist",
"term.createNewPlaylistFolder": "Create New Playlist Folder",
"term.deletePlaylist": "Are you sure you want to delete this playlist?",
"term.navigateBack": "Navigate back",
"term.navigateForward": "Navigate forward",
"term.play": "Play",
"term.pause": "Pause",
"term.previous": "Previous",
"term.next": "Next",
"term.shuffle": "Shuffle",
"term.enableShuffle": "Enable shuffle",
"term.disableShuffle": "Disable shuffle",
"term.repeat": "Repeat",
"term.enableRepeatOne": "Enable repeat one",
"term.disableRepeatOne": "Disable repeat one",
"term.disableRepeat": "Disable repeat",
"term.volume": "Volume",
"term.mute": "Mute",
"term.unmute": "Unmute",
@ -254,6 +263,7 @@
"action.newpreset": "New Preset...",
"action.deletepreset": "Delete Preset",
"action.open": "Open",
"action.close": "Close",
"action.relaunch.confirm": "Do you want to relaunch Cider?",
"action.cast.chromecast": "Chromecast",
"action.cast.todevices": "Cast to Devices",
@ -264,6 +274,7 @@
"action.cast.scanning": "Scanning...",
"action.createNew": "Create New...",
"action.openArtworkInBrowser": "Open artwork in browser",
"action.scrollToTop": "Scroll to top",
"menubar.options.about": "About",
"menubar.options.settings": "Settings",
"menubar.options.quit": "Quit Cider",

34
src/renderer/views/app/chrome-bottom.ejs
View file

@ -39,7 +39,8 @@
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions">
<button class="lcdMenu" @click="nowPlayingContextMenu">
<button class="lcdMenu" @click="nowPlayingContextMenu"
:title="$root.getLz('term.more')" v-b-tooltip.hover>
<div class="svg-icon"></div>
</button>
</div>
@ -55,27 +56,36 @@
<div class="app-chrome-playback-controls">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="prevButton()"></button>
<button class="playback-button previous" @click="prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="mk.play()" v-else
:title="$root.getLz('term.play')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button next" @click="skipToNextItem()"></button>
<button class="playback-button next" @click="skipToNextItem()"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
<div class="app-chrome-playback-duration">
@ -98,7 +108,9 @@
<div class="app-chrome--right">
<div class="app-chrome-item volume">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
:class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
v-b-tooltip.hover :title="formatVolumeTooltip()">

43
src/renderer/views/app/chrome-top.ejs
View file

@ -14,17 +14,20 @@
<button class="app-mainmenu"
@blur="mainMenuVisibility(false)"
@click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"></button>
:class="{active: chrome.menuOpened}"
:aria-label="$root.getLz('term.quickNav')"></button>
</div>
<template v-if="getThemeDirective('appNavigation') != 'seperate'">
<div class="vdiv display--large" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateBack()">
<button class="playback-button navigation" @click="navigateBack()"
:title="$root.getLz('term.navigateBack')" v-b-tooltip.hover>
<%- include('../svg/chevron-left.svg') %>
</button>
</div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateForward()">
<button class="playback-button navigation" @click="navigateForward()"
:title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
<%- include('../svg/chevron-right.svg') %>
</button>
</div>
@ -33,27 +36,36 @@
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button previous" @click="prevButton()"></button>
<button class="playback-button previous" @click="prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="mk.play()" v-else
:title="$root.getLz('term.play')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button next" @click="skipToNextItem()"></button>
<button class="playback-button next" @click="skipToNextItem()"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</template>
</div>
@ -113,7 +125,8 @@
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions">
<button class="lcdMenu" @click="nowPlayingContextMenu">
<button class="lcdMenu" @click="nowPlayingContextMenu"
:title="$root.getLz('term.more')" v-b-tooltip.hover>
<div class="svg-icon"></div>
</button>
</div>
@ -131,7 +144,9 @@
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item volume display--large">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
:class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
v-b-tooltip.hover :title="formatVolumeTooltip()">

38
src/renderer/views/app/sidebar.ejs
View file

@ -43,7 +43,7 @@
</sidebar-library-item>
</template>
<div class="app-sidebar-header-text"
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.library = !cfg.general.sidebarCollapsed.library"
:class="{collapsed: cfg.general.sidebarCollapsed.library}">
{{$root.getLz('term.library')}}
@ -65,7 +65,7 @@
</template>
<template v-if="getPlaylistFolderChildren('p.applemusic').length != 0">
<div class="app-sidebar-header-text"
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.amplaylists = !cfg.general.sidebarCollapsed.amplaylists"
@contextmenu="playlistHeaderContextMenu"
:class="{collapsed: cfg.general.sidebarCollapsed.amplaylists}">
@ -76,7 +76,7 @@
</sidebar-playlist>
</template>
</template>
<div class="app-sidebar-header-text"
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.playlists = !cfg.general.sidebarCollapsed.playlists"
@contextmenu="playlistHeaderContextMenu"
:class="{collapsed: cfg.general.sidebarCollapsed.playlists}">
@ -187,32 +187,44 @@
<div class="control-buttons">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover.righttop></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover.righttop></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="prevButton()"></button>
<button class="playback-button previous" @click="prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="mk.play()" v-else
:title="$root.getLz('term.play')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button next" @click="skipToNextItem()"></button>
<button class="playback-button next" @click="skipToNextItem()"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
<div class="app-chrome-item volume">
<div class="input-container">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
:class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input type="range" class="" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
:max="cfg.audio.maxVolume" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
@change="checkMuteChange()" v-b-tooltip.hover

4
src/renderer/views/components/add-to-playlist.ejs
View file

@ -3,7 +3,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
@ -25,7 +25,7 @@
v-model="searchQuery"
@input="search()"
class="search-input">
</div>
</div>
</div>
</div>
</div>

2
src/renderer/views/components/airplay-modal.ejs
View file

@ -3,7 +3,7 @@
<div class="modal-window airplay-modal">
<div class="modal-header">
<div class="modal-title">{{'Enter password'}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content" style="overflow-y: overlay; padding: 3%">
<input type="text" v-model="passcode"/>

2
src/renderer/views/components/audio-controls.ejs
View file

@ -4,7 +4,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('term.audioControls')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<div class="md-option-line">

2
src/renderer/views/components/audio-playbackrate.ejs
View file

@ -4,7 +4,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<div class="md-option-line">

2
src/renderer/views/components/audio-settings.ejs
View file

@ -4,7 +4,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<button class="playlist-item"

6
src/renderer/views/components/castmenu.ejs
View file

@ -3,7 +3,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{$root.getLz('action.cast.todevices')}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content" style="overflow-y: overlay; padding: 3%">
<div class="md-labeltext">{{$root.getLz('action.cast.chromecast')}}</div>
@ -111,11 +111,11 @@
},
setCast(device) {
CiderAudio.sendAudio();
this.activeCasts.push(device);
this.activeCasts.push(device);
ipcRenderer.send('performGCCast', device, "Cider", "Playing ...", "Test build", '');
},
setAirPlayCast(device) {
this.activeCasts.push(device);
this.activeCasts.push(device);
ipcRenderer.send("performAirplayPCM",device.host,device.port,null,"","","","",device.txt)
},
stopCasting() {

6
src/renderer/views/components/cider-modal.ejs
View file

@ -4,10 +4,10 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('action.addToLibrary')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
<button class="playlist-item"
:class="{ focused: playlist.id == focused }"
@click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">
<div class="icon"><%- include("../svg/playlist.svg") %></div>
@ -25,7 +25,7 @@
v-model="searchQuery"
@input="search()"
class="search-input">
</div>
</div>
</div>
</div>
</div>

8
src/renderer/views/components/equalizer.ejs
View file

@ -3,7 +3,7 @@
<div class="modal-window" >
<div class="modal-header">
<div class="modal-title">{{$root.getLz('term.equalizer')}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:220px;text-align:center;margin-right:245px" v-model="$root.cfg.audio.equalizer.preset" v-on:change="changePreset($root.cfg.audio.equalizer.preset)">
<optgroup :label="$root.getLz('term.userPresets')">
@ -50,7 +50,7 @@
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
<input type="number" class="eq-freq" orient="vertical" min="88" max="177" step="8" v-model="$root.cfg.audio.equalizer.frequencies[2]" @change="changeFreq(2)">
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">
</div>
<div class="input-container">
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
@ -95,8 +95,8 @@
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[9]" @change="changeQ(9)">
</div>
</div>
</div>
</div>
<div class="modal-lowercontent">
<div class="row">
<div class="col">

42
src/renderer/views/components/fullscreen.ejs
View file

@ -51,39 +51,49 @@
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
</div>
</div>
<div class="control-buttons">
<div class="control-buttons">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="app.mk.shuffleMode == 0"
@click="app.mk.shuffleMode = 1"></button>
@click="app.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover></button>
<button class="playback-button--small shuffle active" v-else
@click="app.mk.shuffleMode = 0"></button>
@click="app.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="app.prevButton()"></button>
<button class="playback-button previous" @click="app.prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="app.mk.pause()" v-if="app.mk.isPlaying"></button>
<button class="playback-button play" @click="app.mk.play()" v-else></button>
<button class="playback-button pause" @click="app.mk.pause()" v-if="app.mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="app.mk.play()" v-else
:title="$root.getLz('term.play')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button next" @click="app.skipToNextItem()"></button>
<button class="playback-button next" @click="app.skipToNextItem()"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="app.mk.repeatMode == 0"
@click="app.mk.repeatMode = 1"></button>
@click="app.mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="app.mk.repeatMode = 2"
v-else-if="app.mk.repeatMode == 1"></button>
v-else-if="app.mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="app.mk.repeatMode = 0"
v-else-if="app.mk.repeatMode == 2"></button>
v-else-if="app.mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
<div class="app-chrome-item volume display--large">
<div class="input-container">
<button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
<button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')" v-b-tooltip.hover></button>
<input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
</div>
</div>
</div>
</div>
</template>
@ -99,17 +109,17 @@
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view>
</div>
<div class="queue-col" v-if="tabMode == 'queue'">
<cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
<div class="queue-col" v-if="tabMode == 'queue'">
<cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
</div>
</div>
</div>
<div class="tab-toggles">
<div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
<div class="queue" :class="{active: tabMode == 'queue'}" @click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
</div>
</div>
</div>
</script>

2
src/renderer/views/components/inline-collection-list.ejs
View file

@ -18,7 +18,7 @@
</button>
</div>
<transition name="fabfade">
<button class="top-fab" v-show="showFab" @click="scrollToTop()">
<button class="top-fab" v-show="showFab" @click="scrollToTop()" :aria-label="app.getLz('action.scrollToTop')">
<%- include("../svg/arrow-up.svg") %>
</button>
</transition>

8
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -20,10 +20,10 @@
<div class="popular" v-if="!showInLibrary && item?.meta?.popularity != null && item?.meta?.popularity > 0.7"></div>
<div class="isLibrary" v-if="showLibraryStatus == true">
<div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">
<button @click="addToLibrary()" v-if="!addedToLibrary && (showIndex == false ||(showIndex == true && showIndexPlaylist != false))">
<button @click="addToLibrary()" v-if="!addedToLibrary && (showIndex == false ||(showIndex == true && showIndexPlaylist != false))" :aria-label="$root.getLz('action.addToLibrary')">
<div class="svg-icon addIcon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
</button>
<button v-else-if='!(showArtwork == true && (showIndex == false ||(showIndex == true && showIndexPlaylist != false)))' @click="playTrack()">
<button v-else-if='!(showArtwork == true && (showIndex == false ||(showIndex == true && showIndexPlaylist != false)))' @click="playTrack()" :aria-label="$root.getLz('term.play')">
<div class="svg-icon playIcon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/play.svg)'}"></div>
</button>
</div>
@ -42,7 +42,9 @@
:size="48"
:bgcolor="getBgColor()"
:type="item.type"></mediaitem-artwork>
<button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
<button class="overlay-play" @click="playTrack()" :aria-label="$root.getLz('term.play')">
<%- include("../svg/play.svg") %>
</button>
</div>
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
@dblclick="route()">

20
src/renderer/views/components/mediaitem-square.ejs
View file

@ -8,7 +8,7 @@
<div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
<div style="{'--spcolor': getBgColor()}"
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
<template>
<template>
<div class="artwork-container">
<div class="unavailable-overlay" v-if="unavailable">
<div class="codicon codicon-circle-slash"></div>
@ -24,9 +24,13 @@
:type="item.type"></mediaitem-artwork>
</div>
<button class="menu-btn" v-if="!nomenu.includes(item.type)"
@click="getContextMenu"><%- include("../svg/more.svg") %></button>
@click="getContextMenu" :aria-label="$root.getLz('term.more')">
<%- include("../svg/more.svg") %>
</button>
<button class="play-btn" v-if="!noplay.includes(item.type)"
@click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
@click="app.playMediaItem(item)" :aria-label="$root.getLz('term.play')">
<%- include("../svg/play.svg") %>
</button>
<div class="badge-container" v-if="itemBadges.length != 0">
<div class="socialBadge" v-for="badge in itemBadges.limit(1)">
<mediaitem-artwork
@ -39,7 +43,7 @@
<div class="title" :title="item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? '')" v-if="item.attributes.artistNames == null || kind!= 'card'" @click='app.routeView(item)'>
<div class="item-navigate text-overflow-elipsis">{{ item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? '') }}</div>
<div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "background-image: url(./assets/explicit.svg);height: 12px;width: 12px;filter: contrast(0);background-repeat: no-repeat;margin-top: 2.63px;margin-left: 4px;"></div>
</div>
</div>
<div :title="getSubtitle()" class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
v-if="getSubtitle() != ''">
{{ getSubtitle() }}
@ -242,9 +246,9 @@
let type = []
try{
type = this.item.type
}catch(e) {console.log('sd',this.item)}
if (this.kind != "") {
type = this.kind
}
@ -252,7 +256,7 @@
default:
return []
break;
case "editorial-elements":
case "editorial-elements":
case "card":
return ["mediaitem-card"]
break;
@ -265,7 +269,7 @@
case "music-videos":
case "uploadedVideo":
case "uploaded-videos":
case "library-music-videos":
case "library-music-videos":
return "mediaitem-video";
break;
}

6
src/renderer/views/components/moreinfo-modal.ejs
View file

@ -4,12 +4,12 @@
<div class="modal-header">
<div class="modal-title">{{data.title}}</div>
<div class="modal-subtitle modal-title">{{data.subtitle ?? ""}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<div class="content" v-html="data.content">
</div>
</div>
</div>
</div>
</div>
</script>
@ -31,7 +31,7 @@
self.timedelay = true
}, 1000);
})
},
methods: {
close() {

2
src/renderer/views/components/plugin-menu.ejs
View file

@ -3,7 +3,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{$root.getLz('term.pluginMenu')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<span class="playlist-item" v-if="!app.pluginInstalled">

10
src/renderer/views/components/qrcode-modal.ejs
View file

@ -3,11 +3,11 @@
<div class="modal-window" >
<div class="modal-header">
<div class="modal-title">{{`Web Remote QR : ` + url }}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<img class="qrimg" :src="src"/>
</div>
<img class="qrimg" :src="src"/>
</div>
</div>
</div>
</script>
@ -18,12 +18,12 @@
data: function () {
return {
app: this.$root,
}
},
props: ["src","url"],
mounted() {
},
methods: {
close() {

6
src/renderer/views/components/queue.ejs
View file

@ -5,7 +5,11 @@
<h3 class="queue-header-text">{{app.getLz('term.queue')}}</h3>
</div>
<div class="col-auto flex-center">
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"> <img class="infinity"></button>
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}"
@click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"
:title="app.getLz('term.autoplay')" v-b-tooltip.hover>
<img class="infinity">
</button>
</div>
</div>
<div class="queue-body" v-if="page == 'history'">

4
src/renderer/views/components/share-sheet.ejs
View file

@ -4,7 +4,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
@ -26,7 +26,7 @@
v-model="searchQuery"
@input="search()"
class="search-input">
</div>
</div>
</div>
</div>
</div>

10
src/renderer/views/components/spatial-properties.ejs
View file

@ -3,7 +3,7 @@
<div class="modal-window" v-if="ready">
<div class="modal-header">
<div class="modal-title">{{$root.getLz('spatial.spatialProperties')}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
</div>
<div class="modal-content">
<template v-if="roomEditType == 'dimensions'">
@ -15,7 +15,7 @@
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-3 flex-center">
{{$root.getLz('spatial.width')}}
@ -29,7 +29,7 @@
v-model="room_dimensions.width" step="1"/>
</div>
</div>
<div class="row">
<div class="col-3 flex-center">
{{$root.getLz('spatial.height')}}
@ -43,7 +43,7 @@
v-model="room_dimensions.height" step="1"/>
</div>
</div>
<div class="row">
<div class="col-3 flex-center">
{{$root.getLz('spatial.depth')}}
@ -80,7 +80,7 @@
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-3 flex-center">
X ({{$root.getLz('spatial.listener')}})

16
src/renderer/views/pages/artist.ejs
View file

@ -16,7 +16,7 @@
size="190" type="artists"></mediaitem-artwork>
<button class="overlay-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})">
})" :aria-label="app.getLz('term.play')">
<%- include("../svg/play.svg") %>
</button>
</div>
@ -26,11 +26,11 @@
>
<button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})"><%- include("../svg/play.svg") %></button>
})" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
<h1>{{ data.attributes.name }}</h1>
</div>
</div>
<button class="more-btn-round" @click="artistMenu" style="pointer-events: all;">
<button class="more-btn-round" @click="artistMenu" style="pointer-events: all;" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -43,13 +43,13 @@
<div class="col-auto flex-center">
<button class="artist-play" style="display:block;" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})"><%- include("../svg/play.svg") %></button>
})" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
</div>
<div class="col">
<h3>{{ data.attributes.name }}</h3>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" @click="artistMenu">
<button class="more-btn-round" @click="artistMenu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -79,10 +79,10 @@
<div class="mediaitem-list-item__grid">
<listitem-horizontal :items="data.views['top-songs'].data.limit(20)">
</listitem-horizontal>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row well">
@ -112,7 +112,7 @@
</template>
<div class="row">
<div class="col" v-if="data.attributes.artistBio">
<h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName": data.attributes.name}) }}</h3>
<h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName": data.attributes.name}) }}</h3>
<p v-html="data.attributes.artistBio"></p>
</div>
<div class="col">

4
src/renderer/views/pages/cider-playlist.ejs
View file

@ -94,7 +94,7 @@
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}}
</button>
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -145,7 +145,7 @@
</div>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>

2
src/renderer/views/pages/collection-list.ejs
View file

@ -18,7 +18,7 @@
</button>
</div>
<transition name="fabfade">
<button class="top-fab" v-show="showFab" @click="scrollToTop()">
<button class="top-fab" v-show="showFab" @click="scrollToTop()" :aria-label="app.getLz('action.scrollToTop')">
<%- include("../svg/arrow-up.svg") %>
</button>
</transition>

15
src/renderer/views/pages/library-albums.ejs
View file

@ -5,7 +5,8 @@
<h1 class="header-text">{{$root.getLz('term.albums')}}</h1>
</div>
<div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="$root.getLibraryAlbumsFull(true, 1)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
<button v-if="library.albums.downloadState == 2" @click="$root.getLibraryAlbumsFull(true, 1)"
class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<div class="row">
@ -49,11 +50,11 @@
</div>
</div>
<div class="well">
<div class="albums-square-container">
<div>
<div class="albums-square-container">
<div>
<mediaitem-square v-if="prefs.viewAs == 'covers'" :size="'300'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
</div>
</div>
</div>
<mediaitem-list-item v-if="prefs.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-list-item>
@ -72,9 +73,9 @@
}
},
mounted() {
this.$root.getLibraryAlbumsFull(null, 1);
this.$root.getAlbumSort();
this.$root.searchLibraryAlbums(1);
this.$root.getLibraryAlbumsFull(null, 1);
this.$root.getAlbumSort();
this.$root.searchLibraryAlbums(1);
this.$root.getLibrarySongsFull() ;
this.$root.searchLibraryAlbums(1);
},

4
src/renderer/views/pages/library-recentlyadded.ejs
View file

@ -6,7 +6,7 @@
</div>
<div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)"
class="reload-btn"><%- include('../svg/redo.svg') %></button>
class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<div class="row">
@ -44,7 +44,7 @@
</div>
</div>
<div class="well">
<div class="albums-square-container">
<div class="albums-square-container">
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item"
v-for="item in library.albums.displayListing">
</mediaitem-square>

9
src/renderer/views/pages/library-songs.ejs
View file

@ -15,7 +15,7 @@
v-model="library.songs.search" class="search-input">
</div>
</div>
<div class="col-auto flex-center">
<div class="col-auto flex-center">
<div class="row">
<button class="col md-btn md-btn-primary md-btn-icon" style="min-width: 100px;margin-right: 3px;"
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
@ -24,7 +24,7 @@
<button class="col md-btn md-btn-primary md-btn-icon" style="min-width: 100px;margin-right: 3px;"
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
{{app.getLz('term.shuffle')}}
</button>
</button>
<div class="col">
<select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()">
<optgroup :label="app.getLz('term.sortBy')">
@ -51,8 +51,9 @@
</div>
</div>
<div class="col-auto flex-center">
<button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
<button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none">
<button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)"
class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
<button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none" :aria-label="app.getLz('menubar.options.reload')">
<div class="spinner"></div>
</button>
</div>

22
src/renderer/views/pages/playlist-inline.ejs
View file

@ -101,7 +101,7 @@
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}}
</button>
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -145,7 +145,7 @@
</div>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="term.more">
<div class="svg-icon"></div>
</button>
</div>
@ -159,7 +159,7 @@
<div style="width:100%">
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
:showIndex="true"
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
@ -173,14 +173,14 @@
:showIndex="true"
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
:context-ext="buildContextMenu()"
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
</div>
</template>
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
</div>
</template>
</draggable>
</div>
</div>
<div class="friends-info" v-if="itemBadges.length != 0">
<div class="well">
@ -228,7 +228,7 @@
</div>
</b-tab>
</template>
</b-tabs>
</div>
</template>
@ -361,7 +361,7 @@
if (this.data.type.includes('albums')) {
let date = this.data.attributes.releaseDate;
if (date == null || date === "") return "";
return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
}
},
async isInLibrary() {

2
src/renderer/views/pages/podcasts.ejs
View file

@ -68,7 +68,7 @@
<transition name="wpfade">
<div class="podcasts-details" v-if="selected.id != -1">
<div class="podcasts-details-header">
<button class="close-btn" @click="selected.id = -1"></button>
<button class="close-btn" @click="selected.id = -1" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="podcast-artwork">
<mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>

10
src/web-remote/views/components/mediaitem-square.ejs
View file

@ -14,9 +14,13 @@
:type="item.type"></mediaitem-artwork>
</div>
<button class="menu-btn" v-if="!nomenu.includes(item.type)"
@click="contextMenu"><%- include("../svg/more.svg") %></button>
@click="contextMenu" :aria-label="$root.getLz('term.more')">
<%- include("../svg/more.svg") %>
</button>
<button class="play-btn" v-if="!noplay.includes(item.type)"
@click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
@click="app.playMediaItem(item)" :aria-label="$root.getLz('term.play')">
<%- include("../svg/play.svg") %>
</button>
<div class="badge-container" v-if="itemBadges.length != 0">
<div class="socialBadge" v-for="badge in itemBadges.limit(1)">
<mediaitem-artwork
@ -29,7 +33,7 @@
<div class="title" v-if="item.attributes.artistNames == null || kind!= 'card'" @click='app.routeView(item)'>
<div class="item-navigate text-overflow-elipsis">{{ item.attributes.name }}</div>
<div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "background-image: url(./assets/explicit.svg);height: 12px;width: 12px;filter: contrast(0);background-repeat: no-repeat;margin-top: 2.63px;margin-left: 4px;"></div>
</div>
</div>
<div class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
v-if="getSubtitle() != ''">
{{ getSubtitle() }}