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

src/App.vue

@@ -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>

src/components/ChaptersBar.vue

@@ -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,

src/components/CustomInstanceModal.vue

@@ -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) {
+            if (localStorage.getItem("custominstances") === null) {
-                localStorage.setItem("custominstance", "[]");
+                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);
+                this.customInstances.splice(this.selectedInstance);
-                localStorage.setItem("custominstance", JSON.stringify(this.custominstance));
+                localStorage.setItem("custominstance", JSON.stringify(this.customInstances));
                 window.location = "/preferences";
             }
         },

src/components/PreferencesPage.vue

@@ -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)
+                if (this.customInstances != null)
-                    this.custominstances.forEach(cusinstance => {
+                    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)
+                if (this.customInstances != null)
-                    this.custominstances.forEach(cusinstance => {
+                    this.customInstances.forEach(cusinstance => {
                         this.instances.push(cusinstance);
                     });
             });

src/components/VideoPlayer.vue

@@ -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" />

src/components/WatchVideo.vue

@@ -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() {
+        onChange(event) {
-            this.setPreference("autoplay", this.selectedAutoPlay);
+            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()

src/piped.css

@@ -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}