Skip to content

Commit cb33d2f

Browse files
committed
Add chapter subtitle for audiobooks
1 parent fad9aaa commit cb33d2f

File tree

4 files changed

+38
-20
lines changed

4 files changed

+38
-20
lines changed

src/layouts/default/PlayerOSD/PlayerFullscreen.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,14 @@
151151
{{ $t("off") }}
152152
</v-card-subtitle>
153153

154+
<!-- SUBTITLE: player powered off -->
155+
<v-card-subtitle
156+
v-if="store.curChapter"
157+
class="text-h6 text-md-h5 text-lg-h4"
158+
>
159+
{{ store.curChapter.name }}
160+
</v-card-subtitle>
161+
154162
<!-- live (stream) metadata (artist + title) -->
155163
<v-card-subtitle
156164
v-if="

src/layouts/default/PlayerOSD/PlayerTimeline.vue

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -93,27 +93,13 @@ const chapterTime = computed(() =>
9393
);
9494
9595
// computed properties
96-
const curChapter = computed(() => {
97-
if (store.curQueueItem?.media_item?.metadata?.chapters) {
98-
return store.curQueueItem.media_item.metadata.chapters.find((chapter) => {
99-
if (!store.activePlayerQueue?.elapsed_time) return null;
100-
if (!chapter.end) return null;
101-
return (
102-
chapter.start < store.activePlayerQueue?.elapsed_time &&
103-
chapter.end > store.activePlayerQueue?.elapsed_time
104-
);
105-
});
106-
}
107-
return null;
108-
});
109-
11096
const playerCurQueueItemDuration = computed(() => {
11197
if (
11298
chapterTime.value &&
11399
store.curQueueItem?.media_item?.media_type == MediaType.AUDIOBOOK
114100
) {
115-
if (!curChapter.value?.end) return 0;
116-
return curChapter.value?.end - curChapter.value?.start;
101+
if (!store.curChapter?.end) return 0;
102+
return store.curChapter?.end - store.curChapter?.start;
117103
}
118104
return store.curQueueItem?.duration;
119105
});
@@ -130,8 +116,8 @@ const curQueueItemTime = computed(() => {
130116
chapterTime.value &&
131117
store.curQueueItem?.media_item?.media_type == MediaType.AUDIOBOOK
132118
) {
133-
if (!curChapter.value?.start) return 0;
134-
return store.activePlayerQueue?.elapsed_time - curChapter.value?.start;
119+
if (!store.curChapter?.start) return 0;
120+
return store.activePlayerQueue?.elapsed_time - store.curChapter?.start;
135121
}
136122
return store.activePlayerQueue.elapsed_time;
137123
}
@@ -183,7 +169,7 @@ const stopDragging = () => {
183169
isDragging.value = false;
184170
if (!isDragging.value && store.activePlayer) {
185171
var seekTime = tempTime.value;
186-
if (curChapter.value?.start && chapterTime.value) seekTime = curChapter.value?.start + seekTime;
172+
if (store.curChapter?.start && chapterTime.value) seekTime = store.curChapter?.start + seekTime;
187173
api.playerCommandSeek(store.activePlayer.player_id, Math.round(seekTime));
188174
}
189175
};

src/layouts/default/PlayerOSD/PlayerTrackDetails.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,16 @@
164164
>
165165
{{ store.curQueueItem.media_item.podcast.name }}
166166
</div>
167+
<!-- audiobook - current chapter as subtitle -->
168+
<div
169+
v-else-if="
170+
store.curQueueItem?.media_item &&
171+
store.curQueueItem.media_item?.media_type == MediaType.AUDIOBOOK &&
172+
store.curChapter
173+
"
174+
>
175+
{{ store.curChapter.name }}
176+
</div>
167177
<!-- live (stream) metadata (artist + title) -->
168178
<div
169179
v-else-if="

src/plugins/store.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { computed, reactive } from "vue";
2-
import { MediaType, Player, PlayerQueue, QueueItem } from "./api/interfaces";
2+
import { MediaType, Player, PlayerQueue, QueueItem, MediaItemChapter } from "./api/interfaces";
33

44
import api from "./api";
55
import { StoredState } from "@/components/ItemsListing.vue";
@@ -42,6 +42,7 @@ interface Store {
4242
activePlayer?: Player;
4343
activePlayerQueue?: PlayerQueue;
4444
curQueueItem?: QueueItem;
45+
curChapter?: MediaItemChapter;
4546
globalSearchTerm?: string;
4647
globalSearchType?: MediaType;
4748
prevState?: StoredState;
@@ -99,6 +100,19 @@ export const store: Store = reactive({
99100
return store.activePlayerQueue.current_item;
100101
return undefined;
101102
}),
103+
curChapter: computed(() => {
104+
if (store.curQueueItem?.media_item?.metadata?.chapters) {
105+
return store.curQueueItem.media_item.metadata.chapters.find((chapter) => {
106+
if (!store.activePlayerQueue?.elapsed_time) return undefined;
107+
if (!chapter.end) return undefined;
108+
return (
109+
chapter.start < store.activePlayerQueue?.elapsed_time &&
110+
chapter.end > store.activePlayerQueue?.elapsed_time
111+
);
112+
});
113+
}
114+
return undefined;
115+
}),
102116
globalSearchTerm: undefined,
103117
globalSearchType: undefined,
104118
prevState: undefined,

0 commit comments

Comments
 (0)