mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-06-20 20:05:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Update Year in review icons, update some icons to be larger, fix read more/less, audio player use keyboard arrow down

Browse source
This commit is contained in:
advplyr 2025-04-05 17:14:43 -05:00
parent b1c4ceb40a
commit 1b0843d12e
13 changed files with 22 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/app/AudioPlayer.vue
View file

@ -4,7 +4,7 @@
<div class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-audio-player)" /> <div class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-audio-player)" />
<div class="top-4 left-4 absolute cursor-pointer"> <div class="top-4 left-4 absolute cursor-pointer">
<span class="material-symbols text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">arrow_drop_down</span> <span class="material-symbols text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">keyboard_arrow_down</span>
</div> </div>
<div v-show="showCastBtn" class="top-6 right-16 absolute cursor-pointer"> <div v-show="showCastBtn" class="top-6 right-16 absolute cursor-pointer">
<span class="material-symbols text-3xl" :class="coverBgIsLight ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span> <span class="material-symbols text-3xl" :class="coverBgIsLight ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>

2
components/connection/ServerConnectForm.vue
View file

@ -9,7 +9,7 @@
<p class="pl-3 pr-6 text-base text-fg">{{ config.name }}</p> <p class="pl-3 pr-6 text-base text-fg">{{ config.name }}</p>
<div class="absolute top-0 right-0 h-full px-4 flex items-center" @click.stop="editServerConfig(config)"> <div class="absolute top-0 right-0 h-full px-4 flex items-center" @click.stop="editServerConfig(config)">
<span class="material-symbols text-lg text-fg-muted">more_vert</span> <span class="material-symbols text-2xl text-fg-muted">more_vert</span>
</div> </div>
</div> </div>
<!-- warning message if server connection config is using an old user id --> <!-- warning message if server connection config is using an old user id -->

8
components/modals/SleepTimerModal.vue
View file

@ -13,9 +13,9 @@
<span class="material-symbols text-3xl">arrow_back</span> <span class="material-symbols text-3xl">arrow_back</span>
</div> </div>
<div class="flex my-2 justify-between"> <div class="flex my-2 justify-between">
<ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols">remove</span></ui-btn> <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">remove</span></ui-btn>
<p class="text-2xl font-mono text-center">{{ manualTimeoutMin }} min</p> <p class="text-2xl font-mono text-center">{{ manualTimeoutMin }} min</p>
<ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols">add</span></ui-btn> <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">add</span></ui-btn>
</div> </div>
<ui-btn @click="clickedOption(manualTimeoutMin)" class="w-full">{{ $strings.ButtonSetTimer }}</ui-btn> <ui-btn @click="clickedOption(manualTimeoutMin)" class="w-full">{{ $strings.ButtonSetTimer }}</ui-btn>
</div> </div>
@ -40,9 +40,9 @@
</ul> </ul>
<div v-else class="p-4"> <div v-else class="p-4">
<div class="flex my-2 justify-between"> <div class="flex my-2 justify-between">
<ui-btn @click="decreaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols">remove</span></ui-btn> <ui-btn @click="decreaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">remove</span></ui-btn>
<p class="text-2xl font-mono text-center">{{ timeRemainingPretty }}</p> <p class="text-2xl font-mono text-center">{{ timeRemainingPretty }}</p>
<ui-btn @click="increaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols">add</span></ui-btn> <ui-btn @click="increaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">add</span></ui-btn>
</div> </div>
<ui-btn @click="cancelSleepTimer" class="w-full">{{ isAuto ? $strings.ButtonDisableAutoTimer : $strings.ButtonCancelTimer }}</ui-btn> <ui-btn @click="cancelSleepTimer" class="w-full">{{ isAuto ? $strings.ButtonDisableAutoTimer : $strings.ButtonCancelTimer }}</ui-btn>

2
components/stats/YearInReview.vue
View file

@ -75,7 +75,7 @@ export default {
const addIcon = (icon, color, fontSize, x, y) => { const addIcon = (icon, color, fontSize, x, y) => {
ctx.fillStyle = color ctx.fillStyle = color
ctx.font = `${fontSize} Material Icons Outlined` ctx.font = `${fontSize} Material Symbols Rounded`
ctx.fillText(icon, x, y) ctx.fillText(icon, x, y)
} }

2
components/stats/YearInReviewShort.vue
View file

@ -66,7 +66,7 @@ export default {
const addIcon = (icon, color, fontSize, x, y) => { const addIcon = (icon, color, fontSize, x, y) => {
ctx.fillStyle = color ctx.fillStyle = color
ctx.font = `${fontSize} Material Icons Outlined` ctx.font = `${fontSize} Material Symbols Rounded`
ctx.fillText(icon, x, y) ctx.fillText(icon, x, y)
} }

2
components/tables/playlist/ItemTableRow.vue
View file

@ -22,7 +22,7 @@
</div> </div>
<div class="w-8 min-w-8 flex justify-center"> <div class="w-8 min-w-8 flex justify-center">
<button class="w-8 h-8 rounded-full flex items-center justify-center" @click.stop.prevent="showMore"> <button class="w-8 h-8 rounded-full flex items-center justify-center" @click.stop.prevent="showMore">
<span class="material-symbols">more_vert</span> <span class="material-symbols text-2xl">more_vert</span>
</button> </button>
</div> </div>
</nuxt-link> </nuxt-link>

2
pages/item/_id/index.vue
View file

@ -140,7 +140,7 @@
<div v-if="descriptionClamped" class="text-fg text-sm py-2" @click="showFullDescription = !showFullDescription"> <div v-if="descriptionClamped" class="text-fg text-sm py-2" @click="showFullDescription = !showFullDescription">
{{ showFullDescription ? $strings.ButtonReadLess : $strings.ButtonReadMore }} {{ showFullDescription ? $strings.ButtonReadLess : $strings.ButtonReadMore }}
<span class="material-symbols align-middle text-base -mt-px">{{ showFullDescription ? 'arrow_drop_down' : 'arrow_drop_up' }}</span> <span class="material-symbols !align-middle text-base -mt-px">{{ showFullDescription ? 'arrow_drop_up' : 'arrow_drop_down' }}</span>
</div> </div>
</div> </div>

2
pages/localMedia/folders/_id.vue
View file

@ -4,7 +4,7 @@
<p class="text-base font-semibold">{{ $strings.LabelFolder }}: {{ folderName }}</p> <p class="text-base font-semibold">{{ $strings.LabelFolder }}: {{ folderName }}</p>
<div class="flex-grow" /> <div class="flex-grow" />
<span v-if="dialogItems.length" class="material-symbols" @click="showDialog = true">more_vert</span> <span v-if="dialogItems.length" class="material-symbols text-2xl" @click="showDialog = true">more_vert</span>
</div> </div>
<p class="text-sm mb-4 text-fg-muted">{{ $strings.LabelMediaType }}: {{ mediaType }}</p> <p class="text-sm mb-4 text-fg-muted">{{ $strings.LabelMediaType }}: {{ mediaType }}</p>

2
pages/localMedia/folders/index.vue
View file

@ -4,7 +4,7 @@
<h1 class="text-base font-semibold px-2"> <h1 class="text-base font-semibold px-2">
{{ $strings.HeaderLocalFolders }} {{ $strings.HeaderLocalFolders }}
</h1> </h1>
<button type="button" class="material-symbols" @click.stop="showLocalFolderMoreInfo">info</button> <button type="button" class="material-symbols text-xl" @click.stop="showLocalFolderMoreInfo">info</button>
</div> </div>
<div v-if="!isIos" class="w-full max-w-full px-2 py-2"> <div v-if="!isIos" class="w-full max-w-full px-2 py-2">

6
pages/localMedia/item/_id.vue
View file

@ -8,7 +8,7 @@
<button v-if="audioTracks.length && !isPodcast" class="shadow-sm text-success flex items-center justify-center rounded-full mx-2" @click.stop="play"> <button v-if="audioTracks.length && !isPodcast" class="shadow-sm text-success flex items-center justify-center rounded-full mx-2" @click.stop="play">
<span class="material-symbols fill" style="font-size: 2rem">play_arrow</span> <span class="material-symbols fill" style="font-size: 2rem">play_arrow</span>
</button> </button>
<span class="material-symbols" @click="showItemDialog">more_vert</span> <span class="material-symbols text-2xl" @click="showItemDialog">more_vert</span>
</div> </div>
<p v-if="!isIos" class="px-2 text-sm mb-0.5 text-fg-muted">{{ $strings.LabelFolder }}: {{ folderName }}</p> <p v-if="!isIos" class="px-2 text-sm mb-0.5 text-fg-muted">{{ $strings.LabelFolder }}: {{ folderName }}</p>
@ -40,7 +40,7 @@
<p class="text-sm">{{ $elapsedPretty(track.duration) }}</p> <p class="text-sm">{{ $elapsedPretty(track.duration) }}</p>
</div> </div>
<div v-if="!isIos" class="w-12 h-12 flex items-center justify-center" style="min-width: 48px"> <div v-if="!isIos" class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
<span class="material-symbols" @click="showTrackDialog(track)">more_vert</span> <span class="material-symbols text-2xl" @click="showTrackDialog(track)">more_vert</span>
</div> </div>
</div> </div>
</template> </template>
@ -66,7 +66,7 @@
<p class="text-sm">{{ $elapsedPretty(episode.audioTrack.duration) }}</p> <p class="text-sm">{{ $elapsedPretty(episode.audioTrack.duration) }}</p>
</div> </div>
<div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px"> <div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
<span class="material-symbols" @click="showTrackDialog(episode)">more_vert</span> <span class="material-symbols text-2xl" @click="showTrackDialog(episode)">more_vert</span>
</div> </div>
</div> </div>
</template> </template>

14
pages/settings.vue
View file

@ -59,7 +59,7 @@
<ui-toggle-switch v-model="settings.enableMp3IndexSeeking" @input="saveSettings" /> <ui-toggle-switch v-model="settings.enableMp3IndexSeeking" @input="saveSettings" />
</div> </div>
<p class="pl-4">{{ $strings.LabelEnableMp3IndexSeeking }}</p> <p class="pl-4">{{ $strings.LabelEnableMp3IndexSeeking }}</p>
<span class="material-symbols ml-2" @click.stop="showConfirmMp3IndexSeeking">info</span> <span class="material-symbols text-xl ml-2" @click.stop="showConfirmMp3IndexSeeking">info</span>
</div> </div>
<div class="flex items-center py-3"> <div class="flex items-center py-3">
<div class="w-10 flex justify-center" @click="toggleAllowSeekingOnMediaControls"> <div class="w-10 flex justify-center" @click="toggleAllowSeekingOnMediaControls">
@ -76,7 +76,7 @@
<ui-toggle-switch v-model="settings.disableShakeToResetSleepTimer" @input="saveSettings" /> <ui-toggle-switch v-model="settings.disableShakeToResetSleepTimer" @input="saveSettings" />
</div> </div>
<p class="pl-4">{{ $strings.LabelDisableShakeToReset }}</p> <p class="pl-4">{{ $strings.LabelDisableShakeToReset }}</p>
<span class="material-symbols ml-2" @click.stop="showInfo('disableShakeToResetSleepTimer')">info</span> <span class="material-symbols text-xl ml-2" @click.stop="showInfo('disableShakeToResetSleepTimer')">info</span>
</div> </div>
<div v-if="!settings.disableShakeToResetSleepTimer" class="py-3 flex items-center"> <div v-if="!settings.disableShakeToResetSleepTimer" class="py-3 flex items-center">
<p class="pr-4 w-36">{{ $strings.LabelShakeSensitivity }}</p> <p class="pr-4 w-36">{{ $strings.LabelShakeSensitivity }}</p>
@ -90,7 +90,7 @@
<ui-toggle-switch v-model="settings.disableSleepTimerFadeOut" @input="saveSettings" /> <ui-toggle-switch v-model="settings.disableSleepTimerFadeOut" @input="saveSettings" />
</div> </div>
<p class="pl-4">{{ $strings.LabelDisableAudioFadeOut }}</p> <p class="pl-4">{{ $strings.LabelDisableAudioFadeOut }}</p>
<span class="material-symbols ml-2" @click.stop="showInfo('disableSleepTimerFadeOut')">info</span> <span class="material-symbols text-xl ml-2" @click.stop="showInfo('disableSleepTimerFadeOut')">info</span>
</div> </div>
<template v-if="!isiOS"> <template v-if="!isiOS">
<div class="flex items-center py-3"> <div class="flex items-center py-3">
@ -98,14 +98,14 @@
<ui-toggle-switch v-model="settings.disableSleepTimerResetFeedback" @input="saveSettings" /> <ui-toggle-switch v-model="settings.disableSleepTimerResetFeedback" @input="saveSettings" />
</div> </div>
<p class="pl-4">{{ $strings.LabelDisableVibrateOnReset }}</p> <p class="pl-4">{{ $strings.LabelDisableVibrateOnReset }}</p>
<span class="material-symbols ml-2" @click.stop="showInfo('disableSleepTimerResetFeedback')">info</span> <span class="material-symbols text-xl ml-2" @click.stop="showInfo('disableSleepTimerResetFeedback')">info</span>
</div> </div>
<div class="flex items-center py-3"> <div class="flex items-center py-3">
<div class="w-10 flex justify-center" @click="toggleAutoSleepTimer"> <div class="w-10 flex justify-center" @click="toggleAutoSleepTimer">
<ui-toggle-switch v-model="settings.autoSleepTimer" @input="saveSettings" /> <ui-toggle-switch v-model="settings.autoSleepTimer" @input="saveSettings" />
</div> </div>
<p class="pl-4">{{ $strings.LabelAutoSleepTimer }}</p> <p class="pl-4">{{ $strings.LabelAutoSleepTimer }}</p>
<span class="material-symbols ml-2" @click.stop="showInfo('autoSleepTimer')">info</span> <span class="material-symbols text-xl ml-2" @click.stop="showInfo('autoSleepTimer')">info</span>
</div> </div>
</template> </template>
<!-- Auto Sleep timer settings --> <!-- Auto Sleep timer settings -->
@ -128,7 +128,7 @@
<ui-toggle-switch v-model="settings.autoSleepTimerAutoRewind" @input="saveSettings" /> <ui-toggle-switch v-model="settings.autoSleepTimerAutoRewind" @input="saveSettings" />
</div> </div>
<p class="pl-4">{{ $strings.LabelAutoSleepTimerAutoRewind }}</p> <p class="pl-4">{{ $strings.LabelAutoSleepTimerAutoRewind }}</p>
<span class="material-symbols ml-2" @click.stop="showInfo('autoSleepTimerAutoRewind')">info</span> <span class="material-symbols text-xl ml-2" @click.stop="showInfo('autoSleepTimerAutoRewind')">info</span>
</div> </div>
<div v-if="settings.autoSleepTimerAutoRewind" class="py-3 flex items-center"> <div v-if="settings.autoSleepTimerAutoRewind" class="py-3 flex items-center">
<p class="pr-4 w-36">{{ $strings.LabelAutoRewindTime }}</p> <p class="pr-4 w-36">{{ $strings.LabelAutoRewindTime }}</p>
@ -158,7 +158,7 @@
<div class="py-3 flex items-center"> <div class="py-3 flex items-center">
<p class="pr-4 w-36">{{ $strings.LabelAndroidAutoBrowseLimitForGrouping }}</p> <p class="pr-4 w-36">{{ $strings.LabelAndroidAutoBrowseLimitForGrouping }}</p>
<ui-text-input type="number" v-model="settings.androidAutoBrowseLimitForGrouping" style="width: 145px; max-width: 145px" @input="androidAutoBrowseLimitForGroupingUpdated" /> <ui-text-input type="number" v-model="settings.androidAutoBrowseLimitForGrouping" style="width: 145px; max-width: 145px" @input="androidAutoBrowseLimitForGroupingUpdated" />
<span class="material-symbols ml-2" @click.stop="showInfo('androidAutoBrowseLimitForGrouping')">info</span> <span class="material-symbols text-xl ml-2" @click.stop="showInfo('androidAutoBrowseLimitForGrouping')">info</span>
</div> </div>
<div class="py-3 flex items-center"> <div class="py-3 flex items-center">
<p class="pr-4 w-36">{{ $strings.LabelAndroidAutoBrowseSeriesSequenceOrder }}</p> <p class="pr-4 w-36">{{ $strings.LabelAndroidAutoBrowseSeriesSequenceOrder }}</p>

BIN
static/fonts/MaterialIcons-Regular.ttf
View file

Binary file not shown.

BIN
static/fonts/MaterialIconsOutlined-Regular.otf
View file

Binary file not shown.