.

src/assets/meta.json

@@ -1,4 +1,4 @@
 {
-    "version": 2,
+    "version": 7,
     "versionName": "1.0.0"
 }

src/components/PlayView.vue

@@ -25,7 +25,7 @@
                 @click="enterImmersive"
             >
                 <IonSpinner
-                    v-if="!series || !episode"
+                    v-if="!series || !episode || loading"
                     name="crescent"
                     class="absolute left-0 top-0 right-0 bottom-0 m-auto text-lg"
                 />
@@ -79,7 +79,7 @@
                             ref="progressBar"
                         >
                             <div
-                                v-if="loading"
+                                v-if="loading || videoLoading"
                                 class="loading bg-white h-[2px] rounded bg-opacity-80"
                             ></div>
                             <div
@@ -89,15 +89,17 @@
                             ></div>
                         </div>
                     </div>
-                    <div
-                        class="dive-into h-[44px] flex items-center text-xs bg-opacity-20 bg-black px-4 rounded"
-                        @click.stop="showEpisodesModal = true"
-                    >
-                        <IonIcon :icon="filter" class="text-base" />
-                        <div class="flex-1 ml-2 text-white text-opacity-80">
-                            {{ series?.totalEpisodes }} Episodes
+                    <div class="pb-4" style="padding-bottom: env(--ion-safe-area-bottom);">
+                        <div
+                            class="dive-into mb-4 h-[44px] flex items-center text-xs bg-opacity-20 bg-black px-4 rounded"
+                            @click.stop="showEpisodesModal = true"
+                        >
+                            <IonIcon :icon="filter" class="text-base" />
+                            <div class="flex-1 ml-2 text-white text-opacity-80">
+                                {{ series?.totalEpisodes }} Episodes
+                            </div>
+                            <IonIcon :icon="chevronForward" class="text-base" />
                         </div>
-                        <IonIcon :icon="chevronForward" class="text-base" />
                     </div>
                 </div>
 
@@ -262,6 +264,7 @@ const progress = computed(() => {
     return (currentTime.value / duration.value) * 100;
 });
 const loading = ref(false);
+const videoLoading = ref(false);
 const dragTarget = ref();
 const progressBar: Ref<HTMLElement | null> = ref(null);
 const draggingData = reactive({
@@ -320,22 +323,23 @@ const dragHandler = ({ movement: [x, y], dragging }: any) => {
     }
 };
 
-function getEpisode() {
+async function getEpisode() {
     if (!props.episode) return;
     loading.value = true;
     try {
-        http.get(`/episodes/${props.episode?.id}`).then((res) => {
-            if (res.playUrl) {
-                playUrl.value = res.playUrl;
-            } else {
-                needPay.value = true;
-            }
-            if (props.active) {
-                nextTick(() => {
-                    onPlay();
-                });
-            }
-        });
+        // await new Promise((resolve) => setTimeout(resolve, 1000000));
+        const res = await http.get(`/episodes/${props.episode?.id}`);
+        if (res.playUrl) {
+            needPay.value = false;
+            playUrl.value = res.playUrl;
+        } else {
+            needPay.value = true;
+        }
+        if (props.active) {
+            nextTick(() => {
+                onPlay();
+            });
+        }
     } catch (error) {
         console.error(error);
     }
@@ -395,6 +399,7 @@ async function onPlay() {
         }
     }
     if (playUrl.value) {
+        videoLoading.value = true;
         playing.value = true;
     } else if (needPay.value) {
         emit("pay");
@@ -426,6 +431,8 @@ function exitImmersive() {
 }
 
 function onVideoDidPlay() {
+    console.log("videoDidplay");
+    videoLoading.value = false;
     clearTimeout(videoPlayTimeout.value);
     videoPlayTimeout.value = setTimeout(enterImmersive, 3000);
 }
@@ -437,6 +444,7 @@ function onVideoDidPause() {
 watchThrottled(
     currentTime,
     () => {
+        videoLoading.value = false;
         emit("progress", {
             seriesId: props.series?.id,
             episodeId: props.episode?.id,

src/components/ShareModal.vue

@@ -42,6 +42,7 @@ import toast from "@/plugins/toast";
 import { saveAs } from "file-saver";
 import { useClipboard } from "@vueuse/core";
 import http from "@/plugins/http";
+import { format } from "date-fns";
 
 const userStore = useUserStore();
 const { user } = storeToRefs(userStore);
@@ -96,7 +97,7 @@ async function save() {
         //
         try {
             const savedFile = await Filesystem.writeFile({
-                path: "share.png",
+                path: `share_${format(new Date(), "yyyyMMddHHmmss")}.png`,
                 data: qrcode.value,
                 directory: Directory.Cache,
             });
@@ -108,7 +109,7 @@ async function save() {
             await Media.savePhoto({
                 path: savedFile.uri,
                 albumIdentifier: album?.identifier,
-                fileName: "share",
+                fileName: `share_${format(new Date(), "yyyyMMddHHmmss")}`,
             });
             toast("Saved", { type: "success" });
         } catch (e) {

src/views/SeriesView.vue

@@ -59,14 +59,14 @@
                     <div class="divide-y divide-neutral-600 text-white">
                         <div class="mb-6">
                             <div
-                                class="mt-6 text-center text-sm text-prim text-opacity-80"
+                                class="mt-6 text-center text-xs text-prim text-opacity-80"
                             >
                                 You haven't unlocked this episode yet
                             </div>
-                            <div class="text-center text-xl mt-2 font-bold">
+                            <div class="text-center text-base mt-2 font-bold">
                                 Join the Membership
                             </div>
-                            <div class="text-center text-sm mt-1 px-4">
+                            <div class="text-center text-xs mt-1 px-4">
                                 unlock and watch all our videos without any
                                 limit
                             </div>
@@ -85,12 +85,12 @@
                                 >
                                     Exclusive
                                 </div>
-                                <div class="mt-8 text-xl font-bold flex-1">
+                                <div class="mt-8 text-lg font-bold flex-1">
                                     {{ item.title }}
                                 </div>
                                 <div class="flex-1">
                                     <div
-                                        class="bg-prim bg-opacity-30 rounded-full px-3 py-1 text-opacity-50 text-sm"
+                                        class="bg-prim bg-opacity-30 rounded-full px-3 py-1 text-opacity-50 text-xs"
                                     >
                                         {{ item.desc }}
                                     </div>
@@ -109,7 +109,7 @@
                     <IonButton
                         color="tertiary"
                         expand="block"
-                        class="mx-4 mt-8 font-bold"
+                        class="mx-4 mt-8 font-bold text-sm"
                         @click="onClickPay"
                     >
                         ${{ plans[selectedPlan].price }} Pay Now
@@ -336,6 +336,6 @@ function saveHistory(e: {
 </script>
 <style lang="less" scoped>
 .pay-modal {
-    --height: 50vh;
+    --height: 460px;
 }
 </style>