date ok
All checks were successful
repod / nextcloud (push) Successful in 1m3s
repod / nodejs (push) Successful in 1m36s

This commit is contained in:
Michel Roux 2023-08-27 20:29:54 +02:00
parent 477ccfd387
commit 4a3358b9b7
5 changed files with 26 additions and 23 deletions

14
package-lock.json generated
View File

@ -14,7 +14,6 @@
"@nextcloud/l10n": "^2.2.0", "@nextcloud/l10n": "^2.2.0",
"@nextcloud/router": "^2.1.2", "@nextcloud/router": "^2.1.2",
"@nextcloud/vue": "8.0.0-beta.4", "@nextcloud/vue": "8.0.0-beta.4",
"date-format-parse": "^0.2.7",
"vue": "^2", "vue": "^2",
"vue-fragment": "^1.6.0", "vue-fragment": "^1.6.0",
"vue-material-design-icons": "^5.2.0", "vue-material-design-icons": "^5.2.0",
@ -8358,19 +8357,6 @@
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
}, },
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"hasInstallScript": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/function-bind": { "node_modules/function-bind": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",

View File

@ -23,7 +23,6 @@
"@nextcloud/l10n": "^2.2.0", "@nextcloud/l10n": "^2.2.0",
"@nextcloud/router": "^2.1.2", "@nextcloud/router": "^2.1.2",
"@nextcloud/vue": "8.0.0-beta.4", "@nextcloud/vue": "8.0.0-beta.4",
"date-format-parse": "^0.2.7",
"vue": "^2", "vue": "^2",
"vue-fragment": "^1.6.0", "vue-fragment": "^1.6.0",
"vue-material-design-icons": "^5.2.0", "vue-material-design-icons": "^5.2.0",

View File

@ -14,7 +14,7 @@
:url="episode.episodeImage" /> :url="episode.episodeImage" />
</template> </template>
<template #subname> <template #subname>
{{ format(new Date(episode.episodeDuration*1000), 'H:mm:ss') }} {{ formatTimer(new Date(episode.episodeDuration*1000)) }}
</template> </template>
<template #actions> <template #actions>
<NcActionButton @click="play(episode)"> <NcActionButton @click="play(episode)">
@ -31,10 +31,9 @@
<script> <script>
import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue' import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
import { formatTimeAgo, formatTimer } from '../../utils/time.js'
import Play from 'vue-material-design-icons/Play.vue' import Play from 'vue-material-design-icons/Play.vue'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import { format } from 'date-format-parse'
import { formatTimeAgo } from '../../utils/time.js'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs' import { showError } from '@nextcloud/dialogs'
@ -74,7 +73,7 @@ export default {
} }
}, },
methods: { methods: {
format, formatTimer,
formatTimeAgo, formatTimeAgo,
play(episode) { play(episode) {
this.$store.commit('player/play', episode) this.$store.commit('player/play', episode)

View File

@ -4,16 +4,18 @@
autoplay autoplay
preload preload
:src="episode.episodeUrl" :src="episode.episodeUrl"
@durationchange="duration = audio.duration"
@loadeddata="loading = false" @loadeddata="loading = false"
@pause="paused = audio.paused" @pause="paused = audio.paused"
@play="paused = audio.paused" @play="paused = audio.paused"
@seeked="currentTime = audio.currentTime" @seeked="currentTime = audio.currentTime"
@timeupdate="currentTime = audio.currentTime"
@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="progress"
@click="(event) => audio.fastSeek(event.x * audio.duration / event.target.offsetWidth)"> @click="(event) => audio.fastSeek(event.x * duration / event.target.offsetWidth)">
<NcProgressBar size="medium" :value="currentTime * 100 / audio.duration" /> <NcProgressBar size="medium" :value="currentTime * 100 / duration" />
</div> </div>
<div v-if="!loading" class="player"> <div v-if="!loading" class="player">
<img :src="episode.episodeImage"> <img :src="episode.episodeImage">
@ -28,9 +30,9 @@
<Pause v-if="!paused" :size="50" @click="() => audio.pause()" /> <Pause v-if="!paused" :size="50" @click="() => audio.pause()" />
<Play v-if="paused" :size="50" @click="() => audio.play()" /> <Play v-if="paused" :size="50" @click="() => audio.play()" />
<div class="time"> <div class="time">
<span class="current">{{ currentTime }}</span> <span class="current">{{ formatTimer(new Date(currentTime*1000)) }}</span>
<span class="divider">/</span> <span class="divider">/</span>
<span class="length">{{ audio.duration }}</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="audio.volume > 0.7" :size="30" />
@ -50,6 +52,7 @@ 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'
import VolumeMute from 'vue-material-design-icons/VolumeMute.vue' import VolumeMute from 'vue-material-design-icons/VolumeMute.vue'
import { formatTimer } from '../../utils/time.js'
export default { export default {
name: 'Bar', name: 'Bar',
@ -66,6 +69,7 @@ export default {
data() { data() {
return { return {
currentTime: 0, currentTime: 0,
duration: 0,
loading: true, loading: true,
paused: true, paused: true,
volume: 0, volume: 0,
@ -82,6 +86,9 @@ export default {
return atob(this.$route.params.url) return atob(this.$route.params.url)
}, },
}, },
methods: {
formatTimer,
},
} }
</script> </script>

View File

@ -25,3 +25,15 @@ export const formatTimeAgo = (date) => {
duration /= division.amount duration /= division.amount
} }
} }
export const formatTimer = (date) => {
const minutes = date.getUTCMinutes().toString().padStart(2, 0)
const seconds = date.getUTCSeconds().toString().padStart(2, 0)
let timer = `${minutes}:${seconds}`
if (date.getUTCHours()) {
timer = `${date.getUTCHours()}:${timer}`
}
return timer
}