mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
feat: configurable chapters layout on mobile screen
This commit is contained in:
parent
ec4e2dba15
commit
ce2e3dbfb6
@ -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>
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
|
@ -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}?",
|
||||||
|
Loading…
Reference in New Issue
Block a user