mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-04 18:24:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve track order detection, allow for excluding audio files from tracklist

Browse source
This commit is contained in:
Mark Cooper 2021-09-04 18:02:42 -05:00
parent 197012e662
commit e566c6c9d5
10 changed files with 114 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

68
client/pages/audiobook/_id/edit.vue
View file

@ -19,16 +19,15 @@
<div class="font-mono w-20 text-center">Duration</div>
<div class="font-mono text-center w-20">Status</div>
<div class="font-mono w-56">Notes</div>
<div class="font-book w-40">Include in Tracklist</div>
</div>
<draggable v-model="files" v-bind="dragOptions" class="list-group border border-gray-600" draggable=".item" tag="ul" @start="drag = true" @end="drag = false">
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
<li v-for="(audio, index) in files" :key="audio.path" class="w-full list-group-item item flex items-center">
<li v-for="(audio, index) in files" :key="audio.path" :class="audio.include ? 'item' : 'exclude'" class="w-full list-group-item flex items-center">
<div class="font-book text-center px-4 py-1 w-12">
{{ index + 1 }}
</div>
<div class="font-book text-center px-4 w-12">
{{ audio.index }}
{{ audio.include ? index - numExcluded + 1 : -1 }}
</div>
<div class="font-book text-center px-4 w-12">{{ audio.index }}</div>
<div class="font-book text-center px-2 w-32">
{{ audio.trackNumFromFilename }}
</div>
@ -51,6 +50,9 @@
<div class="font-sans text-xs font-normal w-56">
{{ audio.error }}
</div>
<div class="font-sans text-xs font-normal w-40 flex justify-center">
<ui-toggle-switch v-model="audio.include" :off-color="'error'" @input="includeToggled(audio)" />
</div>
</li>
</transition-group>
</draggable>
@ -77,10 +79,10 @@ export default {
console.error('No audiobook...', params.id)
return redirect('/')
}
let index = 0
return {
audiobook,
files: audiobook.audioFiles ? audiobook.audioFiles.map((af) => ({ ...af, index: ++index })) : []
files: audiobook.audioFiles ? audiobook.audioFiles.map((af) => ({ ...af, include: !af.exclude })) : []
// files: audiobook.audioFiles ? audiobook.audioFiles.map((af) => ({ ...af, index: ++index })) : []
}
},
data() {
@ -98,6 +100,13 @@ export default {
audioFiles() {
return this.audiobook.audioFiles || []
},
numExcluded() {
var count = 0
this.files.forEach((file) => {
if (!file.include) count++
})
return count
},
missingPartChunks() {
if (this.missingParts === 1) return this.missingParts[0]
var chunks = []
@ -164,15 +173,36 @@ export default {
}
},
methods: {
includeToggled(audio) {
var new_index = 0
if (audio.include) {
new_index = this.numExcluded
}
var old_index = this.files.findIndex((f) => f.ino === audio.ino)
if (new_index >= this.files.length) {
var k = new_index - this.files.length + 1
while (k--) {
this.files.push(undefined)
}
}
this.files.splice(new_index, 0, this.files.splice(old_index, 1)[0])
},
saveTracklist() {
console.log('Tracklist', this.files)
var orderedFileData = this.files.map((file) => {
return {
index: file.index,
filename: file.filename,
ino: file.ino,
exclude: !file.include
}
})
this.saving = true
this.$axios
.$patch(`/api/audiobook/${this.audiobook.id}/tracks`, { files: this.files })
.$patch(`/api/audiobook/${this.audiobook.id}/tracks`, { orderedFileData })
.then((data) => {
console.log('Finished patching files', data)
this.saving = false
// this.$router.go()
this.$toast.success('Tracks Updated')
this.$router.push(`/audiobook/${this.audiobookId}`)
})
@ -207,16 +237,26 @@ export default {
.list-group {
min-height: 30px;
}
.list-group-item {
.list-group-item:not(.exclude) {
cursor: n-resize;
}
.list-group-item:not(.ghost):hover {
.list-group-item.exclude {
cursor: not-allowed;
}
.list-group-item:not(.ghost):not(.exclude):hover {
background-color: rgba(0, 0, 0, 0.1);
}
.list-group-item:nth-child(even):not(.ghost) {
.list-group-item:nth-child(even):not(.ghost):not(.exclude) {
background-color: rgba(0, 0, 0, 0.25);
}
.list-group-item:nth-child(even):not(.ghost):hover {
.list-group-item:nth-child(even):not(.ghost):not(.exclude):hover {
background-color: rgba(0, 0, 0, 0.1);
}
.list-group-item.exclude:not(.ghost) {
background-color: rgba(255, 0, 0, 0.25);
}
.list-group-item.exclude:not(.ghost):hover {
background-color: rgba(223, 0, 0, 0.25);
}
</style>