MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-01 18:21:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Streamline source code

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-03-02 09:51:35 +01:00
parent 2319ca7cb8
commit 91ef635ff5
1 changed files with 79 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
web-src/src/components/NavbarBottom.vue
View File

@ -90,18 +90,13 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Playback controls -->
<hr class="my-3" /> <hr class="my-3" />
<div class="navbar-item is-justify-content-center"> <div class="navbar-item is-justify-content-center">
<div class="level"> <div class="buttons has-addons">
<div class="level-item"> <player-button-repeat class="button" />
<div class="buttons has-addons"> <player-button-shuffle class="button" />
<player-button-repeat class="button" /> <player-button-consume class="button" />
<player-button-shuffle class="button" /> <player-button-lyrics class="button" />
<player-button-consume class="button" />
<player-button-lyrics class="button" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -168,90 +163,86 @@
class="navbar-menu is-hidden-desktop" class="navbar-menu is-hidden-desktop"
:class="{ 'is-active': show_player_menu }" :class="{ 'is-active': show_player_menu }"
> >
<div class="navbar-start" /> <div class="navbar-item">
<div class="navbar-end"> <div class="buttons has-addons is-centered">
<!-- Repeat/shuffle/consume --> <player-button-repeat class="button" />
<div class="navbar-item"> <player-button-shuffle class="button" />
<div class="buttons has-addons is-centered"> <player-button-consume class="button" />
<player-button-repeat class="button" /> <player-button-lyrics class="button" />
<player-button-shuffle class="button" />
<player-button-consume class="button" />
<player-button-lyrics class="button" />
</div>
</div> </div>
<hr class="my-3" /> </div>
<!-- Outputs: master volume --> <hr class="my-3" />
<div class="navbar-item"> <!-- Outputs: master volume -->
<div class="level is-mobile"> <div class="navbar-item">
<div class="level-left is-flex-grow-1"> <div class="level is-mobile">
<div class="level-item is-flex-grow-0"> <div class="level-left is-flex-grow-1">
<a class="button is-white is-small" @click="toggle_mute_volume"> <div class="level-item is-flex-grow-0">
<mdicon <a class="button is-white is-small" @click="toggle_mute_volume">
class="icon" <mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'" class="icon"
size="18" :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
/> size="18"
</a> />
</div> </a>
<div class="level-item"> </div>
<div class="is-flex-grow-1"> <div class="level-item">
<p class="heading" v-text="$t('navigation.volume')" /> <div class="is-flex-grow-1">
<control-slider <p class="heading" v-text="$t('navigation.volume')" />
v-model:value="player.volume" <control-slider
:max="100" v-model:value="player.volume"
@change="change_volume" :max="100"
/> @change="change_volume"
</div> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr class="my-3" /> </div>
<!-- Outputs: speaker volumes --> <hr class="my-3" />
<navbar-item-output <!-- Outputs: speaker volumes -->
v-for="output in outputs" <navbar-item-output
:key="output.id" v-for="output in outputs"
:output="output" :key="output.id"
/> :output="output"
<!-- Outputs: stream volume --> />
<hr class="my-3" /> <!-- Outputs: stream volume -->
<div class="navbar-item mb-5"> <hr class="my-3" />
<div class="level is-mobile"> <div class="navbar-item mb-5">
<div class="level-left is-flex-grow-1"> <div class="level is-mobile">
<div class="level-item is-flex-grow-0"> <div class="level-left is-flex-grow-1">
<a <div class="level-item is-flex-grow-0">
class="button is-white is-small" <a
:class="{ class="button is-white is-small"
'has-text-grey-light': !playing && !loading, :class="{
'is-loading': loading 'has-text-grey-light': !playing && !loading,
}" 'is-loading': loading
@click="togglePlay" }"
><mdicon class="icon" name="radio-tower" size="16" /> @click="togglePlay"
</a> ><mdicon class="icon" name="radio-tower" size="16" />
</div> </a>
<div class="level-item"> </div>
<div class="is-flex-grow-1"> <div class="level-item">
<div <div class="is-flex-grow-1">
class="is-flex is-align-content-center" <div
:class="{ 'has-text-grey-light': !playing }" class="is-flex is-align-content-center"
> :class="{ 'has-text-grey-light': !playing }"
<p class="heading" v-text="$t('navigation.stream')" /> >
<a href="stream.mp3" class="heading ml-2" target="_blank" <p class="heading" v-text="$t('navigation.stream')" />
><mdicon <a href="stream.mp3" class="heading ml-2" target="_blank"
class="icon is-small" ><mdicon
name="open-in-new" class="icon is-small"
size="16" name="open-in-new"
/> size="16"
</a> />
</div> </a>
<control-slider
v-model:value="stream_volume"
:disabled="!playing"
:max="100"
:cursor="cursor"
@change="change_stream_volume"
/>
</div> </div>
<control-slider
v-model:value="stream_volume"
:disabled="!playing"
:max="100"
:cursor="cursor"
@change="change_stream_volume"
/>
</div> </div>
</div> </div>
</div> </div>