mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-12-26 13:49:38 +00:00
Improves chapter editing and adds bulk import
Adds chapter locking functionality, allowing users to lock individual chapters or all chapters at once to prevent accidental edits. Implements time increment buttons to precisely adjust chapter start times. Introduces bulk chapter import functionality, allowing users to quickly add multiple chapters using a detected numbering pattern. Adds elapsed time display during chapter playback for better user feedback. Updates UI tooltips and icons for improved clarity and user experience.
This commit is contained in:
Josh Vincent
parent
e669a8d378
commit
09397cf3de
4 changed files with 378 additions and 63 deletions
|
|
@ -53,51 +53,102 @@
|
|||
|
||||
<div class="flex text-xs uppercase text-gray-300 font-semibold mb-2">
|
||||
<div class="w-8 min-w-8 md:w-12 md:min-w-12"></div>
|
||||
<div class="w-24 min-w-24 md:w-32 md:min-w-32 px-2">{{ $strings.LabelStart }}</div>
|
||||
<div class="grow px-2">{{ $strings.LabelTitle }}</div>
|
||||
<div class="w-6 min-w-6 px-2">
|
||||
<ui-tooltip :text="allChaptersLocked ? $strings.TooltipUnlockAllChapters : $strings.TooltipLockAllChapters" direction="bottom">
|
||||
<button class="cursor-pointer transition-colors duration-150" :class="allChaptersLocked ? 'text-orange-400 hover:text-orange-300' : 'text-gray-300 hover:text-white'" @click="toggleAllChaptersLock">
|
||||
<span class="material-symbols text-base">{{ allChaptersLocked ? 'lock' : 'lock_open' }}</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
</div>
|
||||
<div class="w-32 min-w-32 md:w-40 md:min-w-40 px-1 pl-8">{{ $strings.LabelStart }}</div>
|
||||
<div class="grow px-1">{{ $strings.LabelTitle }}</div>
|
||||
<div class="w-32"></div>
|
||||
</div>
|
||||
<template v-for="chapter in newChapters">
|
||||
<div :key="chapter.id" class="flex py-1">
|
||||
<div class="w-8 min-w-8 md:w-12 md:min-w-12">#{{ chapter.id + 1 }}</div>
|
||||
<div class="w-24 min-w-24 md:w-32 md:min-w-32 px-1">
|
||||
<ui-text-input v-if="showSecondInputs" v-model="chapter.start" type="number" class="text-xs" @change="checkChapters" />
|
||||
<ui-time-picker v-else class="text-xs" v-model="chapter.start" :show-three-digit-hour="mediaDuration >= 360000" @change="checkChapters" />
|
||||
</div>
|
||||
<div class="grow px-1">
|
||||
<ui-text-input v-model="chapter.title" @change="checkChapters" class="text-xs min-w-52" />
|
||||
</div>
|
||||
<div class="w-32 min-w-32 px-2 py-1">
|
||||
<div class="flex items-center">
|
||||
<ui-tooltip :text="$strings.MessageRemoveChapter" direction="bottom">
|
||||
<button v-if="newChapters.length > 1" class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-error transform hover:scale-110 duration-150" @click="removeChapter(chapter)">
|
||||
<span class="material-symbols text-base">remove</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
|
||||
<ui-tooltip :text="$strings.MessageInsertChapterBelow" direction="bottom">
|
||||
<button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-success transform hover:scale-110 duration-150" @click="addChapter(chapter)">
|
||||
<span class="material-symbols text-lg">add</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
|
||||
<ui-tooltip :text="selectedChapterId === chapter.id && isPlayingChapter ? $strings.MessagePauseChapter : $strings.MessagePlayChapter" direction="bottom">
|
||||
<button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150" @click="playChapter(chapter)">
|
||||
<widgets-loading-spinner v-if="selectedChapterId === chapter.id && isLoadingChapter" />
|
||||
<span v-else-if="selectedChapterId === chapter.id && isPlayingChapter" class="material-symbols text-base">pause</span>
|
||||
<span v-else class="material-symbols text-base">play_arrow</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
|
||||
<ui-tooltip v-if="chapter.error" :text="chapter.error" direction="left">
|
||||
<button class="w-7 h-7 rounded-full flex items-center justify-center text-error">
|
||||
<span class="material-symbols text-lg">error_outline</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
</div>
|
||||
<div v-for="chapter in newChapters" :key="chapter.id" class="flex py-1">
|
||||
<div class="w-8 min-w-8 md:w-12 md:min-w-12">#{{ chapter.id + 1 }}</div>
|
||||
<div class="w-6 min-w-6 px-1 py-1">
|
||||
<div class="flex items-center">
|
||||
<ui-tooltip :text="lockedChapters.has(chapter.id) ? $strings.TooltipUnlockChapter : $strings.TooltipLockChapter" direction="bottom">
|
||||
<button class="w-6 h-6 rounded-full flex items-center justify-center transform hover:scale-110 duration-150 flex-shrink-0" :class="lockedChapters.has(chapter.id) ? 'text-orange-400 hover:text-orange-300' : 'text-gray-300 hover:text-white'" @click="toggleChapterLock(chapter, $event)">
|
||||
<span class="material-symbols text-sm">{{ lockedChapters.has(chapter.id) ? 'lock' : 'lock_open' }}</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="w-32 min-w-32 md:w-40 md:min-w-40 px-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<ui-tooltip :text="$strings.TooltipSubtractOneSecond" direction="bottom">
|
||||
<button
|
||||
class="w-6 h-6 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150 flex-shrink-0"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': chapter.id === 0 && chapter.start - timeIncrementAmount < 0 }"
|
||||
@click="incrementChapterTime(chapter, -timeIncrementAmount)"
|
||||
:disabled="chapter.id === 0 && chapter.start - timeIncrementAmount < 0"
|
||||
>
|
||||
<span class="material-symbols text-sm">remove</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<ui-text-input v-if="showSecondInputs" v-model="chapter.start" type="number" class="text-xs" @change="checkChapters" />
|
||||
<ui-time-picker v-else class="text-xs" v-model="chapter.start" :show-three-digit-hour="mediaDuration >= 360000" @change="checkChapters" />
|
||||
</div>
|
||||
|
||||
<ui-tooltip :text="$strings.TooltipAddOneSecond" direction="bottom">
|
||||
<button class="w-6 h-6 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150 flex-shrink-0" :class="{ 'opacity-50 cursor-not-allowed': chapter.start + timeIncrementAmount >= mediaDuration }" @click="incrementChapterTime(chapter, timeIncrementAmount)" :disabled="chapter.start + timeIncrementAmount >= mediaDuration">
|
||||
<span class="material-symbols text-sm">add</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow px-1">
|
||||
<ui-text-input v-model="chapter.title" @change="checkChapters" class="text-xs min-w-52" />
|
||||
</div>
|
||||
<div class="w-32 min-w-32 px-2 py-1">
|
||||
<div class="flex items-center">
|
||||
<ui-tooltip :text="$strings.MessageRemoveChapter" direction="bottom">
|
||||
<button v-if="newChapters.length > 1" class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-error transform hover:scale-110 duration-150" @click="removeChapter(chapter)">
|
||||
<span class="material-symbols text-base">delete</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
|
||||
<ui-tooltip :text="$strings.MessageInsertChapterBelow" direction="bottom">
|
||||
<button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-success transform hover:scale-110 duration-150" @click="addChapter(chapter)">
|
||||
<span class="material-symbols text-lg">add_row_below</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
<ui-tooltip :text="selectedChapterId === chapter.id && isPlayingChapter ? $strings.MessagePauseChapter : $strings.MessagePlayChapter" direction="bottom">
|
||||
<button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150" @click="playChapter(chapter)">
|
||||
<widgets-loading-spinner v-if="selectedChapterId === chapter.id && isLoadingChapter" />
|
||||
<span v-else-if="selectedChapterId === chapter.id && isPlayingChapter" class="material-symbols text-base">pause</span>
|
||||
<span v-else class="material-symbols text-base">play_arrow</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
|
||||
<!-- Elapsed time display -->
|
||||
<div v-if="selectedChapterId === chapter.id && (isPlayingChapter || isLoadingChapter)" class="ml-2 text-xs text-gray-300 font-mono min-w-10">{{ elapsedTime }}s</div>
|
||||
<ui-tooltip v-if="chapter.error" :text="chapter.error" direction="left">
|
||||
<button class="w-7 h-7 rounded-full flex items-center justify-center text-error">
|
||||
<span class="material-symbols text-lg">error_outline</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-4 mb-2">
|
||||
<div class="w-8 min-w-8 md:w-12 md:min-w-12"></div>
|
||||
<div class="w-6 min-w-6 px-1"></div>
|
||||
<div class="w-32 min-w-32 md:w-40 md:min-w-40 px-1"></div>
|
||||
<div class="flex items-center gap-2 grow px-1">
|
||||
<ui-text-input v-model="bulkChapterInput" :placeholder="$strings.PlaceholderBulkChapterInput" class="text-xs grow" @keyup.enter="handleBulkChapterAdd" />
|
||||
</div>
|
||||
<div class="w-32 min-w-32 px-1 py-1">
|
||||
<ui-tooltip :text="$strings.TooltipAddChapters" direction="bottom">
|
||||
<button class="w-8 h-8 rounded-full flex items-center justify-center text-gray-300 hover:text-success transform hover:scale-110 duration-150 flex-shrink-0" :class="{ 'opacity-50 cursor-not-allowed': !bulkChapterInput.trim() }" :disabled="!bulkChapterInput.trim()" @click="handleBulkChapterAdd">
|
||||
<span class="material-symbols text-lg">add</span>
|
||||
</button>
|
||||
</ui-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-xl py-4 px-2">
|
||||
|
|
@ -114,19 +165,15 @@
|
|||
<div class="w-20">{{ $strings.LabelDuration }}</div>
|
||||
<div class="w-20 hidden md:block text-center">{{ $strings.HeaderChapters }}</div>
|
||||
</div>
|
||||
<template v-for="track in audioTracks">
|
||||
<div :key="track.ino" class="flex items-center py-2" :class="currentTrackIndex === track.index && isPlayingChapter ? 'bg-success/10' : ''">
|
||||
<div class="grow max-w-[calc(100%-80px)] pr-2">
|
||||
<p class="text-xs truncate max-w-sm">{{ track.metadata.filename }}</p>
|
||||
</div>
|
||||
<div class="w-20" style="min-width: 80px">
|
||||
<p class="text-xs font-mono text-gray-200">{{ $secondsToTimestamp(Math.round(track.duration), false, true) }}</p>
|
||||
</div>
|
||||
<div class="w-20 hidden md:flex justify-center" style="min-width: 80px">
|
||||
<span v-if="(track.chapters || []).length" class="material-symbols text-success text-sm">check</span>
|
||||
</div>
|
||||
<div v-for="track in audioTracks" :key="track.ino" class="flex items-center py-2" :class="currentTrackIndex === track.index && isPlayingChapter ? 'bg-success/10' : ''">
|
||||
<div class="grow max-w-[calc(100%-80px)] pr-2">
|
||||
<p class="text-xs truncate max-w-sm">{{ track.metadata.filename }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<div class="w-20" style="min-width: 80px">
|
||||
<p class="text-xs font-mono text-gray-200">{{ $secondsToTimestamp(Math.round(track.duration), false, true) }}</p>
|
||||
</div>
|
||||
<div class="w-20 hidden md:flex justify-center" style="min-width: 80px"><span v-if="(track.chapters || []).length" class="material-symbols text-success text-sm">check</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -209,6 +256,33 @@
|
|||
</div>
|
||||
</div>
|
||||
</modals-modal>
|
||||
<modals-modal v-model="showBulkChapterModal" name="bulk-chapters" :width="400">
|
||||
<template #outer>
|
||||
<div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
|
||||
<p class="text-3xl text-white truncate pointer-events-none">{{ $strings.HeaderBulkChapterModal }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<div class="w-full h-full max-h-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative p-6">
|
||||
<div class="flex flex-col space-y-4">
|
||||
<p class="text-lg font-semibold">{{ $strings.HeaderBulkChapterModal }}</p>
|
||||
<p class="text-gray-300">{{ $strings.MessageBulkChapterPattern }}</p>
|
||||
<div v-if="detectedPattern" class="text-sm text-gray-400 bg-gray-800 p-2 rounded">
|
||||
<strong>{{ $strings.LabelDetectedPattern }}</strong> "{{ detectedPattern.before }}{{ detectedPattern.startingNumber }}{{ detectedPattern.after }}"
|
||||
<br />
|
||||
<strong>{{ $strings.LabelNextChapters }}</strong>
|
||||
"{{ detectedPattern.before }}{{ detectedPattern.startingNumber + 1 }}{{ detectedPattern.after }}", "{{ detectedPattern.before }}{{ detectedPattern.startingNumber + 2 }}{{ detectedPattern.after }}", etc.
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<label class="text-sm font-medium">{{ $strings.LabelNumberOfChapters }}</label>
|
||||
<ui-text-input v-model="bulkChapterCount" type="number" min="1" max="50" class="w-20" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 pt-4">
|
||||
<ui-btn color="bg-success" @click="addBulkChapters">{{ $strings.ButtonAddChapters }}</ui-btn>
|
||||
<ui-btn @click="showBulkChapterModal = false">{{ $strings.ButtonCancel }}</ui-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modals-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -265,7 +339,17 @@ export default {
|
|||
removeBranding: false,
|
||||
showSecondInputs: false,
|
||||
audibleRegions: ['US', 'CA', 'UK', 'AU', 'FR', 'DE', 'JP', 'IT', 'IN', 'ES'],
|
||||
hasChanges: false
|
||||
hasChanges: false,
|
||||
timeIncrementAmount: 1,
|
||||
elapsedTime: 0,
|
||||
playStartTime: null,
|
||||
elapsedTimeInterval: null,
|
||||
lockedChapters: new Set(),
|
||||
lastSelectedLockIndex: null,
|
||||
bulkChapterInput: '',
|
||||
showBulkChapterModal: false,
|
||||
bulkChapterCount: 1,
|
||||
detectedPattern: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -304,6 +388,9 @@ export default {
|
|||
},
|
||||
selectedChapterId() {
|
||||
return this.selectedChapter ? this.selectedChapter.id : null
|
||||
},
|
||||
allChaptersLocked() {
|
||||
return this.newChapters.length > 0 && this.newChapters.every((chapter) => this.lockedChapters.has(chapter.id))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -334,19 +421,27 @@ export default {
|
|||
|
||||
const amount = Number(this.shiftAmount)
|
||||
|
||||
const lastChapter = this.newChapters[this.newChapters.length - 1]
|
||||
if (lastChapter.start + amount > this.mediaDurationRounded) {
|
||||
this.$toast.error(this.$strings.ToastChaptersInvalidShiftAmountLast)
|
||||
// Check if any unlocked chapters would be affected negatively
|
||||
const unlockedChapters = this.newChapters.filter((chap) => !this.lockedChapters.has(chap.id))
|
||||
|
||||
if (unlockedChapters.length === 0) {
|
||||
this.$toast.warning(this.$strings.ToastChaptersAllLocked)
|
||||
return
|
||||
}
|
||||
|
||||
if (this.newChapters[1].start + amount <= 0) {
|
||||
this.$toast.error(this.$strings.ToastChaptersInvalidShiftAmountStart)
|
||||
if (unlockedChapters[0].id === 0 && unlockedChapters[0].end + amount <= 0) {
|
||||
this.$toast.error(this.$strings.ToastChapterInvalidShiftAmount)
|
||||
return
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.newChapters.length; i++) {
|
||||
const chap = this.newChapters[i]
|
||||
|
||||
// Skip locked chapters
|
||||
if (this.lockedChapters.has(chap.id)) {
|
||||
continue
|
||||
}
|
||||
|
||||
chap.end = Math.min(chap.end + amount, this.mediaDuration)
|
||||
if (i > 0) {
|
||||
chap.start = Math.max(0, chap.start + amount)
|
||||
|
|
@ -354,6 +449,96 @@ export default {
|
|||
}
|
||||
this.checkChapters()
|
||||
},
|
||||
incrementChapterTime(chapter, amount) {
|
||||
// Don't allow incrementing first chapter below 0
|
||||
if (chapter.id === 0 && chapter.start + amount < 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// Don't allow incrementing beyond media duration
|
||||
if (chapter.start + amount >= this.mediaDuration) {
|
||||
return
|
||||
}
|
||||
|
||||
// Find the previous chapter to ensure we don't go below it
|
||||
const previousChapter = this.newChapters[chapter.id - 1]
|
||||
if (previousChapter && chapter.start + amount <= previousChapter.start) {
|
||||
return
|
||||
}
|
||||
|
||||
// Find the next chapter to ensure we don't go above it
|
||||
const nextChapter = this.newChapters[chapter.id + 1]
|
||||
if (nextChapter && chapter.start + amount >= nextChapter.start) {
|
||||
return
|
||||
}
|
||||
|
||||
chapter.start = Math.max(0, chapter.start + amount)
|
||||
this.checkChapters()
|
||||
},
|
||||
startElapsedTimeTracking() {
|
||||
this.elapsedTime = 0
|
||||
this.playStartTime = Date.now()
|
||||
this.elapsedTimeInterval = setInterval(() => {
|
||||
this.elapsedTime = Math.floor((Date.now() - this.playStartTime) / 1000)
|
||||
}, 100) // Update every 100ms for smooth display
|
||||
},
|
||||
stopElapsedTimeTracking() {
|
||||
if (this.elapsedTimeInterval) {
|
||||
clearInterval(this.elapsedTimeInterval)
|
||||
this.elapsedTimeInterval = null
|
||||
}
|
||||
this.elapsedTime = 0
|
||||
this.playStartTime = null
|
||||
},
|
||||
toggleChapterLock(chapter, event) {
|
||||
const chapterId = chapter.id
|
||||
|
||||
// Handle shift-click for range selection
|
||||
if (event.shiftKey && this.lastSelectedLockIndex !== null) {
|
||||
const startIndex = Math.min(this.lastSelectedLockIndex, chapterId)
|
||||
const endIndex = Math.max(this.lastSelectedLockIndex, chapterId)
|
||||
|
||||
// Determine if we should lock or unlock based on the target chapter's current state
|
||||
const shouldLock = !this.lockedChapters.has(chapterId)
|
||||
|
||||
for (let i = startIndex; i <= endIndex; i++) {
|
||||
if (shouldLock) {
|
||||
this.lockedChapters.add(i)
|
||||
} else {
|
||||
this.lockedChapters.delete(i)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Single chapter toggle
|
||||
if (this.lockedChapters.has(chapterId)) {
|
||||
this.lockedChapters.delete(chapterId)
|
||||
} else {
|
||||
this.lockedChapters.add(chapterId)
|
||||
}
|
||||
}
|
||||
|
||||
this.lastSelectedLockIndex = chapterId
|
||||
|
||||
// Force reactivity update
|
||||
this.lockedChapters = new Set(this.lockedChapters)
|
||||
},
|
||||
lockAllChapters() {
|
||||
this.newChapters.forEach((chapter) => {
|
||||
this.lockedChapters.add(chapter.id)
|
||||
})
|
||||
this.lockedChapters = new Set(this.lockedChapters)
|
||||
},
|
||||
unlockAllChapters() {
|
||||
this.lockedChapters.clear()
|
||||
this.lockedChapters = new Set(this.lockedChapters)
|
||||
},
|
||||
toggleAllChaptersLock() {
|
||||
if (this.allChaptersLocked) {
|
||||
this.unlockAllChapters()
|
||||
} else {
|
||||
this.lockAllChapters()
|
||||
}
|
||||
},
|
||||
editItem() {
|
||||
this.$store.commit('showEditModal', this.libraryItem)
|
||||
},
|
||||
|
|
@ -451,6 +636,7 @@ export default {
|
|||
console.log('Audio playing')
|
||||
this.isLoadingChapter = false
|
||||
this.isPlayingChapter = true
|
||||
this.startElapsedTimeTracking()
|
||||
})
|
||||
audioEl.addEventListener('ended', () => {
|
||||
console.log('Audio ended')
|
||||
|
|
@ -473,6 +659,7 @@ export default {
|
|||
this.selectedChapter = null
|
||||
this.isPlayingChapter = false
|
||||
this.isLoadingChapter = false
|
||||
this.stopElapsedTimeTracking()
|
||||
},
|
||||
saveChapters() {
|
||||
this.checkChapters()
|
||||
|
|
@ -679,6 +866,86 @@ export default {
|
|||
this.saving = false
|
||||
})
|
||||
},
|
||||
handleBulkChapterAdd() {
|
||||
const input = this.bulkChapterInput.trim()
|
||||
if (!input) return
|
||||
|
||||
// Check if input contains any numbers and extract pattern info
|
||||
const numberMatch = input.match(/(\d+)/)
|
||||
|
||||
if (numberMatch) {
|
||||
// Extract the base pattern and number
|
||||
const foundNumber = parseInt(numberMatch[1])
|
||||
const numberIndex = numberMatch.index
|
||||
const beforeNumber = input.substring(0, numberIndex)
|
||||
const afterNumber = input.substring(numberIndex + numberMatch[1].length)
|
||||
|
||||
// Store pattern info for bulk creation
|
||||
this.detectedPattern = {
|
||||
before: beforeNumber,
|
||||
after: afterNumber,
|
||||
startingNumber: foundNumber
|
||||
}
|
||||
|
||||
// Show modal to ask for number of chapters
|
||||
this.bulkChapterCount = 1
|
||||
this.showBulkChapterModal = true
|
||||
} else {
|
||||
// Add single chapter with the entered title
|
||||
this.addSingleChapterFromInput(input)
|
||||
}
|
||||
},
|
||||
addSingleChapterFromInput(title) {
|
||||
// Find the last chapter to determine where to add the new one
|
||||
const lastChapter = this.newChapters[this.newChapters.length - 1]
|
||||
const newStart = lastChapter ? lastChapter.end : 0
|
||||
const newEnd = Math.min(newStart + 300, this.mediaDuration) // Default 5 minutes or media duration
|
||||
|
||||
const newChapter = {
|
||||
id: this.newChapters.length,
|
||||
start: newStart,
|
||||
end: newEnd,
|
||||
title: title
|
||||
}
|
||||
|
||||
this.newChapters.push(newChapter)
|
||||
this.bulkChapterInput = ''
|
||||
this.checkChapters()
|
||||
},
|
||||
|
||||
addBulkChapters() {
|
||||
const count = parseInt(this.bulkChapterCount)
|
||||
if (!count || count < 1 || count > 150) {
|
||||
this.$toast.error(this.$strings.ToastBulkChapterInvalidCount)
|
||||
return
|
||||
}
|
||||
|
||||
const { before, after, startingNumber } = this.detectedPattern
|
||||
const lastChapter = this.newChapters[this.newChapters.length - 1]
|
||||
const baseStart = lastChapter ? lastChapter.end : 0
|
||||
const defaultDuration = 300 // 5 minutes per chapter
|
||||
|
||||
// Add multiple chapters with the detected pattern
|
||||
for (let i = 0; i < count; i++) {
|
||||
const chapterNumber = startingNumber + i
|
||||
const newStart = baseStart + i * defaultDuration
|
||||
const newEnd = Math.min(newStart + defaultDuration, this.mediaDuration)
|
||||
|
||||
const newChapter = {
|
||||
id: this.newChapters.length,
|
||||
start: newStart,
|
||||
end: newEnd,
|
||||
title: `${before}${chapterNumber}${after}`
|
||||
}
|
||||
|
||||
this.newChapters.push(newChapter)
|
||||
}
|
||||
|
||||
this.bulkChapterInput = ''
|
||||
this.showBulkChapterModal = false
|
||||
this.detectedPattern = null
|
||||
this.checkChapters()
|
||||
},
|
||||
libraryItemUpdated(libraryItem) {
|
||||
if (libraryItem.id === this.libraryItem.id) {
|
||||
if (!!libraryItem.media.metadata.asin && this.mediaMetadata.asin !== libraryItem.media.metadata.asin) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue