Stop ok
All checks were successful
repod / nextcloud (push) Successful in 1m9s
repod / nodejs (push) Successful in 1m40s

This commit is contained in:
Michel Roux 2023-08-27 21:33:39 +02:00
parent 4a3358b9b7
commit a7b6c69ee2

View File

@ -13,7 +13,7 @@
@volumechange="volume = audio.volume" /> @volumechange="volume = audio.volume" />
<NcLoadingIcon v-if="loading" /> <NcLoadingIcon v-if="loading" />
<div v-if="!loading" <div v-if="!loading"
class="progress" class="pointer"
@click="(event) => audio.fastSeek(event.x * duration / event.target.offsetWidth)"> @click="(event) => audio.fastSeek(event.x * duration / event.target.offsetWidth)">
<NcProgressBar size="medium" :value="currentTime * 100 / duration" /> <NcProgressBar size="medium" :value="currentTime * 100 / duration" />
</div> </div>
@ -27,18 +27,39 @@
<i>{{ episode.podcastName }}</i> <i>{{ episode.podcastName }}</i>
</a> </a>
</div> </div>
<Pause v-if="!paused" :size="50" @click="() => audio.pause()" /> <PauseButton v-if="!paused"
<Play v-if="paused" :size="50" @click="() => audio.play()" /> class="pointer"
:size="50"
@click="() => audio.pause()" />
<PlayButton v-if="paused"
class="pointer"
:size="50"
@click="() => audio.play()" />
<StopButton class="pointer"
:size="30"
@click="stop" />
<div class="time"> <div class="time">
<span class="current">{{ formatTimer(new Date(currentTime*1000)) }}</span> <span class="current">{{ formatTimer(new Date(currentTime*1000)) }}</span>
<span class="divider">/</span> <span class="divider">/</span>
<span class="length">{{ formatTimer(new Date(duration*1000)) }}</span> <span class="length">{{ formatTimer(new Date(duration*1000)) }}</span>
</div> </div>
<div class="volume"> <div class="volume">
<VolumeHigh v-if="audio.volume > 0.7" :size="30" /> <VolumeHigh v-if="volume > 0.7"
<VolumeLow v-if="audio.volume > 0 && audio.volume <= 0.3" :size="30" /> class="pointer"
<VolumeMedium v-if="audio.volume > 0.3 && audio.volume <= 0.7" :size="30" /> :size="30"
<VolumeMute v-if="audio.volume == 0" :size="30" /> @click="mute" />
<VolumeLow v-if="volume > 0 && volume <= 0.3"
class="pointer"
:size="30"
@click="mute" />
<VolumeMedium v-if="volume > 0.3 && volume <= 0.7"
class="pointer"
:size="30"
@click="mute" />
<VolumeMute v-if="volume == 0"
class="pointer"
:size="30"
@click="unmute" />
</div> </div>
</div> </div>
</div> </div>
@ -46,8 +67,9 @@
<script> <script>
import { NcLoadingIcon, NcProgressBar } from '@nextcloud/vue' import { NcLoadingIcon, NcProgressBar } from '@nextcloud/vue'
import Pause from 'vue-material-design-icons/Pause.vue' import PauseButton from 'vue-material-design-icons/Pause.vue'
import Play from 'vue-material-design-icons/Play.vue' import PlayButton from 'vue-material-design-icons/Play.vue'
import StopButton from 'vue-material-design-icons/Stop.vue'
import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue' import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
import VolumeLow from 'vue-material-design-icons/VolumeLow.vue' import VolumeLow from 'vue-material-design-icons/VolumeLow.vue'
import VolumeMedium from 'vue-material-design-icons/VolumeMedium.vue' import VolumeMedium from 'vue-material-design-icons/VolumeMedium.vue'
@ -59,8 +81,9 @@ export default {
components: { components: {
NcLoadingIcon, NcLoadingIcon,
NcProgressBar, NcProgressBar,
Pause, PauseButton,
Play, PlayButton,
StopButton,
VolumeHigh, VolumeHigh,
VolumeLow, VolumeLow,
VolumeMedium, VolumeMedium,
@ -72,7 +95,8 @@ export default {
duration: 0, duration: 0,
loading: true, loading: true,
paused: true, paused: true,
volume: 0, volume: 1,
volumeMuted: 0,
} }
}, },
computed: { computed: {
@ -88,6 +112,16 @@ export default {
}, },
methods: { methods: {
formatTimer, formatTimer,
mute() {
this.volumeMuted = this.audio.volume
this.audio.volume = 0
},
stop() {
this.$store.commit('player/play', null)
},
unmute() {
this.audio.volume = this.volumeMuted
},
}, },
} }
</script> </script>
@ -107,16 +141,32 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 44%; width: 45%;
} }
.player { .player {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
height: calc(6rem - 6px); height: calc(6rem - 6px);
justify-content: space-between;
} }
.progress { .pointer {
cursor: pointer; cursor: pointer;
} }
.time, .volume {
align-items: center;
display: flex;
gap: 5px;
justify-content: center;
}
.time {
width: 25%;
}
.volume {
width: 10%;
}
</style> </style>