[web] Change cursor icon for stream volume when output is disabled

The cursor icon for the stream volume when the slider is inactive is now a Material Design Icon.
This commit is contained in:
Alain Nussbaumer 2023-06-29 19:18:55 +02:00
parent 523f88cc0b
commit c89aaa895f
2 changed files with 25 additions and 17 deletions

File diff suppressed because one or more lines are too long

View File

@ -178,7 +178,10 @@
:class="{ 'is-inactive': !playing }" :class="{ 'is-inactive': !playing }"
max="100" max="100"
type="range" type="range"
:style="{ '--ratio': stream_volume / 100 }" :style="{
'--ratio': stream_volume / 100,
'--cursor': $filters.cursor(this.cursor)
}"
@change="change_stream_volume" @change="change_stream_volume"
/> />
</div> </div>
@ -239,7 +242,7 @@
class="slider" class="slider"
max="100" max="100"
type="range" type="range"
:style="{ '--ratio': player.volume / 100 }" :style="{ '--ratio': player.volume }"
@change="change_volume" @change="change_volume"
/> />
</div> </div>
@ -297,7 +300,10 @@
:class="{ 'is-inactive': !playing }" :class="{ 'is-inactive': !playing }"
max="100" max="100"
type="range" type="range"
:style="{ '--ratio': stream_volume / 100 }" :style="{
'--ratio': stream_volume / 100,
'--cursor': $filters.cursor(this.cursor)
}"
@change="change_stream_volume" @change="change_stream_volume"
/> />
</div> </div>
@ -313,6 +319,7 @@
<script> <script>
import webapi from '@/webapi' import webapi from '@/webapi'
import _audio from '@/audio' import _audio from '@/audio'
import { mdiCancel } from '@mdi/js'
import NavbarItemLink from './NavbarItemLink.vue' import NavbarItemLink from './NavbarItemLink.vue'
import NavbarItemOutput from './NavbarItemOutput.vue' import NavbarItemOutput from './NavbarItemOutput.vue'
import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause.vue' import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause.vue'
@ -342,6 +349,7 @@ export default {
data() { data() {
return { return {
cursor: mdiCancel,
old_volume: 0, old_volume: 0,
playing: false, playing: false,
loading: false, loading: false,