TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-07-31 07:56:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2522 from kskarthik/master

Browse source 
refactor: vertical chapters layout for mobile screen
This commit is contained in:
Bnyro 2023-06-14 20:41:53 +02:00 committed by GitHub
commit c52eacb96a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 62 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -6,7 +6,7 @@
"serve": "vite",
"build": "vite build",
"preview": "vite preview",
"format": "prettier -w --ignore-path .gitignore **/**.{js,vue}",
"format": "prettier -w --ignore-path .gitignore **/**.{js,vue,json}",
"lint": "eslint --fix --color --ignore-path .gitignore --ext .js,.vue ."
},
"dependencies": {

39
renovate.json
View file

@ -1,26 +1,17 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"config:base",
"group:recommended"
],
"ignorePresets": [
":prHourlyLimit2"
],
"packageRules": [
{
"matchPackagePrefixes": [
"@unocss/"
],
"matchPackageNames": [
"unocss"
],
"groupName": "unocss"
}
],
"lockFileMaintenance": {
"enabled": true,
"automerge": true
},
"platformAutomerge": true
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": ["config:base", "group:recommended"],
"ignorePresets": [":prHourlyLimit2"],
"packageRules": [
{
"matchPackagePrefixes": ["@unocss/"],
"matchPackageNames": ["unocss"],
"groupName": "unocss"
}
],
"lockFileMaintenance": {
"enabled": true,
"automerge": true
},
"platformAutomerge": true
}

30
src/components/ChaptersBar.vue
View file

@ -21,8 +21,34 @@
</div>
</div>
</div>
<!-- mobile view -->
<div v-else class="flex overflow-x-auto">
<!-- 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 }})
</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 Horizontal view -->
<div v-if="getPreferenceString('mobileChapterLayout') == 'Horizontal' && mobileLayout" class="flex overflow-x-auto">
<div
:key="chapter.start"
v-for="(chapter, index) in chapters"

12
src/components/PreferencesPage.vue
View file

@ -126,6 +126,15 @@
@change="onChange($event)"
/>
</label>
<!-- chapters layout on mobile -->
<label class="lg:invisible 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>
</label>
<label class="pref" for="chkShowWatchOnYouTube">
<strong v-t="'actions.show_watch_on_youtube'" />
<input
@ -363,6 +372,7 @@ import ConfirmModal from "./ConfirmModal.vue";
export default {
data() {
return {
mobileChapterLayout: "Vertical",
selectedInstance: null,
authInstance: false,
selectedAuthInstance: null,
@ -523,6 +533,7 @@ 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", "Vertical");
if (this.selectedLanguage != "en") {
try {
this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then(
@ -581,6 +592,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();
}

2
src/components/WatchVideo.vue
View file

@ -148,7 +148,7 @@
v-t="`actions.${showDesc ? 'minimize_description' : 'show_description'}`"
/>
<span class="btn" v-show="video?.chapters?.length > 0">
<span class="btn ml-2" v-show="video?.chapters?.length > 0">
<input id="showChapters" type="checkbox" v-model="showChapters" />
<label class="ml-2" for="showChapters" v-t="'actions.show_chapters'" />
</span>

5
src/locales/en.json
View file

@ -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",
@ -169,7 +170,9 @@
"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}?",

2
src/utils/CountryMaps/es.json
View file

@ -172,7 +172,7 @@
{ "code": "CH", "name": "Suiza" },
{ "code": "SR", "name": "Surinam" },
{ "code": "TH", "name": "Tailandia" },
{ "code": "TW", "name": "Taiwán" },
{ "code": "TW", "name": "Taiwán" },
{ "code": "TZ", "name": "Tanzania" },
{ "code": "TJ", "name": "Tayikistán" },
{ "code": "TL", "name": "Timor Oriental" },