Xefir/repod
1
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 38 Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Discover/TopItem.vue
View File

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

83
src/components/Player/Bar.vue
View File

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