mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Update
- resolved issues - added validation URL for custom instance - added theater - fixed efy_select component (show description, show recommendation, and autoloop) only saves localstorage to autoplay when switched - fixed chapter card model's width when thumbnail error
This commit is contained in:
SubTeno
parent
2e48c60f8e
commit
f85fbd6dc4
7 changed files with 81 additions and 29 deletions
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<NavBar />
|
||||
<div class="pp-base min-h-screen px-1vw reset" :class="[theme]">
|
||||
<div class="pp-base min-h-screen reset">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :max="5">
|
||||
<component :is="Component" :key="$route.fullPath" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
<label :class="[theme]">
|
||||
<label>
|
||||
<FooterComponent />
|
||||
</label>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<!-- desktop view -->
|
||||
<div v-if="!mobileLayout" class="pp-chapters flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden">
|
||||
<div
|
||||
v-if="!mobileLayout"
|
||||
:class="
|
||||
theater
|
||||
? 'pp-chapters flex-col overflow-y-scroll max-h-90vh min-h-64 lt-lg:hidden'
|
||||
: 'pp-chapters flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden'
|
||||
"
|
||||
>
|
||||
<h6 aria-label="chapters" title="chapters">{{ $t("video.chapters") }} - {{ chapters.length }}</h6>
|
||||
<div
|
||||
:key="chapter.start"
|
||||
|
|
@ -56,6 +63,10 @@ import { defineProps, defineEmits } from "vue";
|
|||
|
||||
const props = defineProps({
|
||||
chapters: Object,
|
||||
theater: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
mobileLayout: {
|
||||
type: Boolean,
|
||||
default: () => true,
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="text-center">
|
||||
<select v-model="selectedInstance">
|
||||
<option
|
||||
v-for="(instance, pointer) in custominstance"
|
||||
v-for="(instance, pointer) in customInstances"
|
||||
:key="pointer"
|
||||
:value="pointer"
|
||||
v-text="instance.name"
|
||||
|
|
@ -45,34 +45,45 @@
|
|||
|
||||
<script>
|
||||
import ModalComponent from "./ModalComponent.vue";
|
||||
const isUrl = string => {
|
||||
try {
|
||||
return Boolean(new URL(string));
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
custominstance: [],
|
||||
customInstances: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.testLocalStorage) {
|
||||
if (localStorage.getItem("custominstance") === null) {
|
||||
localStorage.setItem("custominstance", "[]");
|
||||
if (localStorage.getItem("custominstances") === null) {
|
||||
localStorage.setItem("custominstances", "[]");
|
||||
}
|
||||
this.custominstance = JSON.parse(localStorage.getItem("custominstance"));
|
||||
this.customInstances = JSON.parse(localStorage.getItem("custominstances"));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
if (this.testLocalStorage) {
|
||||
this.custominstance.push({
|
||||
if (!isUrl(this.url)) {
|
||||
alert("Not a valid URL");
|
||||
return;
|
||||
}
|
||||
this.customInstances.push({
|
||||
name: this.name,
|
||||
api_url: this.url,
|
||||
});
|
||||
localStorage.setItem("custominstance", JSON.stringify(this.custominstance));
|
||||
localStorage.setItem("custominstance", JSON.stringify(this.customInstances));
|
||||
}
|
||||
},
|
||||
remove() {
|
||||
if (this.testLocalStorage) {
|
||||
this.custominstance.splice(this.selectedInstance);
|
||||
localStorage.setItem("custominstance", JSON.stringify(this.custominstance));
|
||||
this.customInstances.splice(this.selectedInstance);
|
||||
localStorage.setItem("custominstance", JSON.stringify(this.customInstances));
|
||||
window.location = "/preferences";
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -399,7 +399,7 @@ export default {
|
|||
authInstance: false,
|
||||
selectedAuthInstance: null,
|
||||
instances: [],
|
||||
custominstances: [],
|
||||
customInstances: [],
|
||||
showmodal: false,
|
||||
sponsorBlock: true,
|
||||
skipSponsor: true,
|
||||
|
|
@ -483,12 +483,12 @@ export default {
|
|||
},
|
||||
async mounted() {
|
||||
if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
|
||||
this.custominstances = JSON.parse(localStorage.getItem("custominstance"));
|
||||
this.customInstances = JSON.parse(localStorage.getItem("custominstance"));
|
||||
this.fetchJson("https://piped-instances.kavin.rocks/")
|
||||
.then(resp => {
|
||||
this.instances = resp;
|
||||
if (this.custominstances != null)
|
||||
this.custominstances.forEach(cusinstance => {
|
||||
if (this.customInstances != null)
|
||||
this.customInstances.forEach(cusinstance => {
|
||||
this.instances.push(cusinstance);
|
||||
});
|
||||
if (this.instances.filter(instance => instance.api_url == this.apiUrl()).length == 0)
|
||||
|
|
@ -500,8 +500,8 @@ export default {
|
|||
});
|
||||
})
|
||||
.catch(() => {
|
||||
if (this.custominstances != null)
|
||||
this.custominstances.forEach(cusinstance => {
|
||||
if (this.customInstances != null)
|
||||
this.customInstances.forEach(cusinstance => {
|
||||
this.instances.push(cusinstance);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div
|
||||
ref="container"
|
||||
data-shaka-player-container
|
||||
class="w-full max-h-screen flex justify-center"
|
||||
class="w-full !max-h-full flex justify-center"
|
||||
:class="{ 'player-container': !isEmbed }"
|
||||
>
|
||||
<video ref="videoEl" class="w-full" data-shaka-player :autoplay="shouldAutoPlay" :loop="selectedAutoLoop" />
|
||||
|
|
|
|||
|
|
@ -16,7 +16,12 @@
|
|||
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
|
||||
|
||||
<div v-show="!video.error">
|
||||
<div :class="isMobile ? 'flex-col' : 'flex'">
|
||||
<div
|
||||
:class="[
|
||||
isMobile ? 'flex-col' : 'flex',
|
||||
showThea ? 'w-screen relative right-[10vw] max-h-[90vh]' : 'max-h-[75vh]',
|
||||
]"
|
||||
>
|
||||
<VideoPlayer
|
||||
ref="videoPlayer"
|
||||
:video="video"
|
||||
|
|
@ -32,6 +37,7 @@
|
|||
v-if="video?.chapters?.length > 0 && showChapters"
|
||||
:chapters="video.chapters"
|
||||
:player-position="currentTime"
|
||||
:theater="showThea"
|
||||
@seek="navigate"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -136,9 +142,11 @@
|
|||
<hr />
|
||||
|
||||
<div efy_select>
|
||||
<input id="showDesc" type="checkbox" v-model="showDesc" />
|
||||
<input v-if="!isMobile" id="showThea" type="checkbox" v-model="showThea" @change="onChange($event)" />
|
||||
<label v-if="!isMobile" for="showThea" v-t="'Theater'" />
|
||||
<input id="showDesc" type="checkbox" v-model="showDesc" @change="onChange($event)" />
|
||||
<label for="showDesc" v-t="'actions.show_description'" />
|
||||
<input id="showRecs" type="checkbox" v-model="showRecs" />
|
||||
<input id="showRecs" type="checkbox" v-model="showRecs" @change="onChange($event)" />
|
||||
<label for="showRecs" v-t="'actions.show_recommendations'" />
|
||||
<input id="chkAutoLoop" v-model="selectedAutoLoop" type="checkbox" @change="onChange($event)" />
|
||||
<label for="chkAutoLoop" v-text="`${$t('actions.loop_this_video')}`" />
|
||||
|
|
@ -150,7 +158,6 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-show="showDesc" class="break-words mb-2" v-html="purifyHTML(video.description)" />
|
||||
<div
|
||||
v-if="showDesc && sponsors && sponsors.segments"
|
||||
|
|
@ -235,6 +242,7 @@ export default {
|
|||
selectedAutoLoop: false,
|
||||
selectedAutoPlay: null,
|
||||
showDesc: true,
|
||||
showThea: false,
|
||||
showRecs: true,
|
||||
showChapters: true,
|
||||
comments: null,
|
||||
|
|
@ -273,7 +281,6 @@ export default {
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log("ASD");
|
||||
// check screen size
|
||||
if (window.innerWidth >= 1024) {
|
||||
this.isMobile = false;
|
||||
|
|
@ -325,9 +332,10 @@ export default {
|
|||
});
|
||||
},
|
||||
activated() {
|
||||
console.log("ASD");
|
||||
this.active = true;
|
||||
this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", false);
|
||||
this.selectedAutoLoop = this.getPreferenceBoolean("loop", false);
|
||||
this.showThea = this.getPreferenceBoolean("theater", false);
|
||||
this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
|
||||
this.showRecs = !this.getPreferenceBoolean("minimizeRecommendations", false);
|
||||
if (this.video.duration) {
|
||||
|
|
@ -361,8 +369,30 @@ export default {
|
|||
fetchComments() {
|
||||
return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
|
||||
},
|
||||
onChange() {
|
||||
this.setPreference("autoplay", this.selectedAutoPlay);
|
||||
onChange(event) {
|
||||
if (this.testLocalStorage) {
|
||||
switch (event.target.id) {
|
||||
case "showThea":
|
||||
this.setPreference("theater", this.showThea);
|
||||
scroll(0, 0);
|
||||
break;
|
||||
case "showDesc":
|
||||
this.setPreference("minimizeDescription", this.showDesc);
|
||||
break;
|
||||
case "showRecs":
|
||||
this.setPreference("minimizeRecommendations", this.showRecs);
|
||||
break;
|
||||
case "chkAutoplay":
|
||||
this.setPreference("autoplay", this.selectedAutoPlay);
|
||||
break;
|
||||
case "chkLoop":
|
||||
this.setPreference("loop", this.selectedAutoLoop);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
async getVideoData() {
|
||||
await this.fetchVideo()
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
/*End of EFY Template - Documentation on how to use it coming soon at https://efy.ooo/ui . Your own css starts bellow*/
|
||||
|
||||
/*Base*/ .pp-base {margin: 0 auto; width: 80%;}
|
||||
/*Base*/ .pp-base {margin: 0 auto; width: 80vw;}
|
||||
/*BG: Transparent*/ .video-grid div div, .pp-show-recs div div {background: transparent}
|
||||
/*BG 1*/ .comment, .video-grid div, .pp-show-recs div, .pp-mobile-nav a, .pp-mobile-nav p, .suggestion-selected, .pp-chapters .chapter:not(.pp-chapter-active, .chapter:hover), .pp-chapters [title=chapters] {background: var(--efy_bg1)}
|
||||
/*Bold*/ .btn {font-weight: bold}
|
||||
|
|
@ -89,7 +89,7 @@ tbody:nth-child(odd) {background: var(--efy_bg1)!important; box-shadow: inset 0
|
|||
table {margin-top: 0}
|
||||
|
||||
/*Chapters*/ .pp-chapters {margin-left: 15rem; max-width: 400rem; gap: 10rem; border-radius: var(--efy_radius)}
|
||||
.pp-chapters .chapter {padding: 10rem; border-radius: var(--efy_radius); border: 1.5rem solid var(--efy_color_border)}
|
||||
.pp-chapters .chapter {width: 100%; padding: 10rem; border-radius: var(--efy_radius); border: 1.5rem solid var(--efy_color_border)}
|
||||
.pp-chapters [title=chapters] {padding: 5rem 10rem; border-radius: var(--efy_radius); border: 1.5rem solid var(--efy_color_border)}
|
||||
.pp-chapters .chapter .flex {gap: 0 15rem}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue