feat: configurable chapters layout on mobile screen

This commit is contained in:
Sai Karthik 2023-06-13 17:36:53 +05:30
parent ec4e2dba15
commit ce2e3dbfb6
No known key found for this signature in database
GPG Key ID: F5B9A961BF6EAF0E
3 changed files with 56 additions and 10 deletions

View File

@ -1,11 +1,31 @@
<template> <template>
<!-- desktop / mobile view --> <!-- desktop view -->
<div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-w-35vw max-h-75vh min-h-64 lt-lg:hidden">
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
{{ $t("video.chapters") }} ({{ chapters.length }})
</h2>
<div
:key="chapter.start"
v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)"
class="chapter-vertical"
:class="{ 'bg-red-500/50': isCurrentChapter(index) }"
>
<div class="flex">
<span class="mt-5 mr-2 text-current" v-text="index + 1" />
<img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
<div class="flex flex-col m-2">
<span class="text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div>
</div>
</div>
</div>
<!-- mobile vertical view -->
<div <div
:class=" v-if="mobileLayout && getPreferenceString('mobileChapterLayout') == 'Vertical'"
!mobileLayout class="flex flex-col overflow-y-scroll max-h-64"
? 'flex-col overflow-y-scroll max-w-35vw max-h-75vh min-h-64 lt-lg:hidden'
: 'flex flex-col overflow-y-scroll max-h-64'
"
> >
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters"> <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
{{ $t("video.chapters") }} ({{ chapters.length }}) {{ $t("video.chapters") }} ({{ chapters.length }})
@ -27,8 +47,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- old mobile view --> <!-- mobile Horizontal view -->
<!-- <div v-else class="flex overflow-x-auto"> <div v-if="getPreferenceString('mobileChapterLayout') == 'Horizontal' && mobileLayout" class="flex overflow-x-auto">
<div <div
:key="chapter.start" :key="chapter.start"
v-for="(chapter, index) in chapters" v-for="(chapter, index) in chapters"
@ -42,7 +62,7 @@
<span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" /> <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div> </div>
</div> </div>
</div> --> </div>
</template> </template>
<style> <style>

View File

@ -126,6 +126,22 @@
@change="onChange($event)" @change="onChange($event)"
/> />
</label> </label>
<!-- chapters layout on mobile -->
<label class="pref" for="chkMinimizeChapters">
<strong v-t="'actions.chapters_layout_mobile'" />
<select id="ddlDefaultHomepage" v-model="mobileChapterLayout" class="select w-auto" @change="onChange($event)">
<option v-t="'video.chapters_horizontal'" value="Horizontal" />
<option v-t="'video.chapters_vertical'" value="Vertical" />
</select>
<!-- <input
id="chkMinimizeChapters"
v-model="minimizeChapters"
class="checkbox"
type="checkbox"
@change="onChange($event)"
/> -->
</label>
<label class="pref" for="chkShowWatchOnYouTube"> <label class="pref" for="chkShowWatchOnYouTube">
<strong v-t="'actions.show_watch_on_youtube'" /> <strong v-t="'actions.show_watch_on_youtube'" />
<input <input
@ -353,6 +369,7 @@ import ConfirmModal from "./ConfirmModal.vue";
export default { export default {
data() { data() {
return { return {
mobileChapterLayout: "Vertical",
selectedInstance: null, selectedInstance: null,
authInstance: false, authInstance: false,
selectedAuthInstance: null, selectedAuthInstance: null,
@ -511,6 +528,10 @@ export default {
this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false); this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false);
this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false); this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false);
this.hideWatched = this.getPreferenceBoolean("hideWatched", false); this.hideWatched = this.getPreferenceBoolean("hideWatched", false);
this.mobileChapterLayout = this.getPreferenceString(
"mobileChapterLayout",
localStorage.getItem("mobileChapterLayout") || "Vertical",
);
if (this.selectedLanguage != "en") { if (this.selectedLanguage != "en") {
try { try {
this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then( this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then(
@ -568,6 +589,7 @@ export default {
localStorage.setItem("disableLBRY", this.disableLBRY); localStorage.setItem("disableLBRY", this.disableLBRY);
localStorage.setItem("proxyLBRY", this.proxyLBRY); localStorage.setItem("proxyLBRY", this.proxyLBRY);
localStorage.setItem("hideWatched", this.hideWatched); localStorage.setItem("hideWatched", this.hideWatched);
localStorage.setItem("mobileChapterLayout", this.mobileChapterLayout);
if (shouldReload) window.location.reload(); if (shouldReload) window.location.reload();
} }

View File

@ -99,6 +99,7 @@
"logout": "Logout from this device", "logout": "Logout from this device",
"minimize_recommendations_default": "Minimize Recommendations by default", "minimize_recommendations_default": "Minimize Recommendations by default",
"minimize_chapters_default": "Minimize Chapters by default", "minimize_chapters_default": "Minimize Chapters by default",
"chapters_layout_mobile": "Chapters Layout On Mobile",
"show_watch_on_youtube": "Show Watch on YouTube button", "show_watch_on_youtube": "Show Watch on YouTube button",
"invalidate_session": "Logout all devices", "invalidate_session": "Logout all devices",
"different_auth_instance": "Use a different instance for authentication", "different_auth_instance": "Use a different instance for authentication",
@ -168,7 +169,10 @@
"live": "{0} Live", "live": "{0} Live",
"shorts": "Shorts", "shorts": "Shorts",
"all": "All", "all": "All",
"category": "Category" "category": "Category",
"chapters_horizontal": "Horizontal",
"chapters_vertical": "Vertical"
}, },
"search": { "search": {
"did_you_mean": "Did you mean: {0}?", "did_you_mean": "Did you mean: {0}?",