Player nearly ready
All checks were successful
repod / nextcloud (push) Successful in 1m14s
repod / nodejs (push) Successful in 1m37s

This commit is contained in:
Michel Roux 2023-08-27 20:01:26 +02:00
parent 5baaba5d50
commit 477ccfd387
2 changed files with 54 additions and 30 deletions

View File

@ -7,7 +7,6 @@
<script>
export default {
name: 'TopItem',
components: {},
props: {
author: {
type: String,

View File

@ -1,8 +1,21 @@
<template>
<fragment>
<div v-if="episode" class="footer">
<NcProgressBar size="medium" :value="60" />
<div class="player">
<audio id="audio-player"
autoplay
preload
:src="episode.episodeUrl"
@loadeddata="loading = false"
@pause="paused = audio.paused"
@play="paused = audio.paused"
@seeked="currentTime = audio.currentTime"
@volumechange="volume = audio.volume" />
<NcLoadingIcon v-if="loading" />
<div v-if="!loading"
class="progress"
@click="(event) => audio.fastSeek(event.x * audio.duration / event.target.offsetWidth)">
<NcProgressBar size="medium" :value="currentTime * 100 / audio.duration" />
</div>
<div v-if="!loading" class="player">
<img :src="episode.episodeImage">
<div class="infos">
<a :href="episode.episodeLink" target="_blank">
@ -12,10 +25,10 @@
<i>{{ episode.podcastName }}</i>
</a>
</div>
<Pause v-if="!audio.paused" :size="50" @click="() => audio.play()" />
<Play v-if="audio.paused" :size="50" @click="() => audio.pause()" />
<Pause v-if="!paused" :size="50" @click="() => audio.pause()" />
<Play v-if="paused" :size="50" @click="() => audio.play()" />
<div class="time">
<span class="current">0:00</span>
<span class="current">{{ currentTime }}</span>
<span class="divider">/</span>
<span class="length">{{ audio.duration }}</span>
</div>
@ -27,11 +40,10 @@
</div>
</div>
</div>
</fragment>
</template>
<script>
import { NcProgressBar } from '@nextcloud/vue'
import { NcLoadingIcon, NcProgressBar } from '@nextcloud/vue'
import Pause from 'vue-material-design-icons/Pause.vue'
import Play from 'vue-material-design-icons/Play.vue'
import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
@ -42,6 +54,7 @@ import VolumeMute from 'vue-material-design-icons/VolumeMute.vue'
export default {
name: 'Bar',
components: {
NcLoadingIcon,
NcProgressBar,
Pause,
Play,
@ -50,9 +63,17 @@ export default {
VolumeMedium,
VolumeMute,
},
data() {
return {
currentTime: 0,
loading: true,
paused: true,
volume: 0,
}
},
computed: {
audio() {
return new Audio(this.episode.episodeUrl)
return document.getElementById('audio-player')
},
episode() {
return this.$store.state.player.episode
@ -87,4 +108,8 @@ export default {
gap: 1rem;
height: calc(6rem - 6px);
}
.progress {
cursor: pointer;
}
</style>