groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-12 04:11:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

format the progress info into a table row

Browse source
This commit is contained in:
Shaun 2024-08-03 20:48:48 +10:00
parent 787c4e45a8
commit 53d3b619d0
2 changed files with 56 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

77
client/pages/item/_id/index.vue
View file

@ -72,18 +72,6 @@
</div>
</div>
<!-- Progress -->
<div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
<p v-if="progressPercent < 1" class="leading-6">{{ $strings.LabelYourProgress }}: {{ Math.round(progressPercent * 100) }}%</p>
<p v-else class="text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt, dateFormat) }}</p>
<p v-if="progressPercent < 1 && !useEBookProgress" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
<p class="text-gray-400 text-xs pt-1">{{ $strings.LabelStarted }} {{ $formatDate(userProgressStartedAt, dateFormat) }}</p>
<div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
<span class="material-symbols text-sm">close</span>
</div>
</div>
<!-- Icon buttons -->
<div class="flex items-center justify-center md:justify-start pt-4">
<ui-btn v-if="showPlayButton" :disabled="isStreaming" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="playItem">
@ -134,6 +122,32 @@
</button>
</div>
<!-- progress table -->
<div class="my-4 w-full" v-if="!isPodcast && progressPercent > 0">
<table class="text-sm tracksTable">
<tr>
<th class="text-left">{{ $strings.LabelProgress }}</th>
<th class="text-left" v-if="progressPercent < 1">{{ $strings.LabelCurrent }}</th>
<th class="text-left" v-if="progressPercent < 1">{{ $strings.LabelRemaining }}</th>
<th class="text-left">{{ $strings.LabelStarted }}</th>
<th class="text-left" v-if="progressPercent == 1">{{ $strings.LabelFinished }}</th>
<th class="text-left"></th>
</tr>
<tr>
<td>{{ Math.round(progressPercent * 100) }}%</td>
<td v-if="progressPercent < 1">{{ $elapsedPretty(userCurrentTime) }}</td>
<td v-if="progressPercent < 1">{{ $elapsedPretty(userTimeRemaining) }}</td>
<td class="px-4">{{ $formatDate(userProgressStartedAt, dateFormat) }} {{ $formatDate(userProgressStartedAt, timeFormat) }}</td>
<td v-if="progressPercent == 1" class="px-4">{{ $formatDate(userProgressFinishedAt, dateFormat) }} {{ $formatDate(userProgressFinishedAt, timeFormat) }}</td>
<td>
<div v-if="!resettingProgress" class="p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
<span class="material-symbols">close</span>
</div>
</td>
</tr>
</table>
</div>
<tables-chapters-table v-if="chapters.length" :library-item="libraryItem" class="mt-6" />
<tables-tracks-table v-if="tracks.length" :title="$strings.LabelStatsAudioTracks" :tracks="tracksWithAudioFile" :is-file="isFile" :library-item-id="libraryItemId" class="mt-6" />
@ -201,6 +215,9 @@ export default {
dateFormat() {
return this.$store.state.serverSettings.dateFormat
},
timeFormat() {
return this.$store.state.serverSettings.timeFormat
},
userIsAdminOrUp() {
return this.$store.getters['user/getIsAdminOrUp']
},
@ -345,6 +362,9 @@ export default {
const duration = this.userMediaProgress.duration || this.duration
return duration - this.userMediaProgress.currentTime
},
userCurrentTime() {
return this.userMediaProgress ? this.userMediaProgress.currentTime : 0
},
useEBookProgress() {
if (!this.userMediaProgress || this.userMediaProgress.progress) return false
return this.userMediaProgress.ebookProgress > 0
@ -624,20 +644,27 @@ export default {
},
clearProgressClick() {
if (!this.userMediaProgress) return
if (confirm(`Are you sure you want to reset your progress?`)) {
this.resettingProgress = true
this.$axios
.$delete(`/api/me/progress/${this.userMediaProgress.id}`)
.then(() => {
console.log('Progress reset complete')
this.$toast.success(`Your progress was reset`)
this.resettingProgress = false
})
.catch((error) => {
console.error('Progress reset failed', error)
this.resettingProgress = false
})
const payload = {
message: this.$strings.ResetProgressQuestion,
callback: (confirmed) => {
if (confirmed) {
this.resettingProgress = true
this.$axios
.$delete(`/api/me/progress/${this.userMediaProgress.id}`)
.then(() => {
console.log('Progress reset complete')
this.$toast.success(this.$strings.ResetProgressSuccess)
this.resettingProgress = false
})
.catch((error) => {
console.error('Progress reset failed', error)
this.resettingProgress = false
})
}
},
type: 'yesNo'
}
this.$store.commit('globals/setConfirmPrompt', payload)
},
clickRSSFeed() {
this.$store.commit('globals/setRSSFeedOpenCloseModal', {

5
client/strings/en-us.json
View file

@ -311,6 +311,7 @@
"LabelFilterByUser": "Filter by User",
"LabelFindEpisodes": "Find Episodes",
"LabelFinished": "Finished",
"LabelRemaining": "Remaining",
"LabelFolder": "Folder",
"LabelFolders": "Folders",
"LabelFontBold": "Bold",
@ -851,5 +852,7 @@
"ToastSortingPrefixesUpdateFailed": "Failed to update sorting prefixes",
"ToastSortingPrefixesUpdateSuccess": "Sorting prefixes updated ({0} items)",
"ToastUserDeleteFailed": "Failed to delete user",
"ToastUserDeleteSuccess": "User deleted"
"ToastUserDeleteSuccess": "User deleted",
"ResetProgressQuestion": "Are you sure you want to reset your progress?",
"ResetProgressSuccess": "Your progress was reset"
}