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>
|
||||
<!-- 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
|
||||
:class="
|
||||
!mobileLayout
|
||||
? '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'
|
||||
"
|
||||
: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
|
||||
v-if="mobileLayout && getPreferenceString('mobileChapterLayout') == 'Vertical'"
|
||||
class="flex flex-col overflow-y-scroll max-h-64"
|
||||
>
|
||||
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
|
||||
{{ $t("video.chapters") }} ({{ chapters.length }})
|
||||
@ -27,8 +47,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- old mobile view -->
|
||||
<!-- <div v-else class="flex overflow-x-auto">
|
||||
<!-- mobile Horizontal view -->
|
||||
<div v-if="getPreferenceString('mobileChapterLayout') == 'Horizontal' && mobileLayout" class="flex overflow-x-auto">
|
||||
<div
|
||||
:key="chapter.start"
|
||||
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)" />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
@ -126,6 +126,22 @@
|
||||
@change="onChange($event)"
|
||||
/>
|
||||
</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">
|
||||
<strong v-t="'actions.show_watch_on_youtube'" />
|
||||
<input
|
||||
@ -353,6 +369,7 @@ import ConfirmModal from "./ConfirmModal.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobileChapterLayout: "Vertical",
|
||||
selectedInstance: null,
|
||||
authInstance: false,
|
||||
selectedAuthInstance: null,
|
||||
@ -511,6 +528,10 @@ export default {
|
||||
this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false);
|
||||
this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false);
|
||||
this.hideWatched = this.getPreferenceBoolean("hideWatched", false);
|
||||
this.mobileChapterLayout = this.getPreferenceString(
|
||||
"mobileChapterLayout",
|
||||
localStorage.getItem("mobileChapterLayout") || "Vertical",
|
||||
);
|
||||
if (this.selectedLanguage != "en") {
|
||||
try {
|
||||
this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then(
|
||||
@ -568,6 +589,7 @@ export default {
|
||||
localStorage.setItem("disableLBRY", this.disableLBRY);
|
||||
localStorage.setItem("proxyLBRY", this.proxyLBRY);
|
||||
localStorage.setItem("hideWatched", this.hideWatched);
|
||||
localStorage.setItem("mobileChapterLayout", this.mobileChapterLayout);
|
||||
|
||||
if (shouldReload) window.location.reload();
|
||||
}
|
||||
|
@ -99,6 +99,7 @@
|
||||
"logout": "Logout from this device",
|
||||
"minimize_recommendations_default": "Minimize Recommendations 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",
|
||||
"invalidate_session": "Logout all devices",
|
||||
"different_auth_instance": "Use a different instance for authentication",
|
||||
@ -168,7 +169,10 @@
|
||||
"live": "{0} Live",
|
||||
"shorts": "Shorts",
|
||||
"all": "All",
|
||||
"category": "Category"
|
||||
"category": "Category",
|
||||
"chapters_horizontal": "Horizontal",
|
||||
"chapters_vertical": "Vertical"
|
||||
|
||||
},
|
||||
"search": {
|
||||
"did_you_mean": "Did you mean: {0}?",
|
||||
|
Loading…
Reference in New Issue
Block a user