.

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
     <application
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
@@ -8,7 +7,6 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/AppTheme">
-
         <activity
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
             android:name=".MainActivity"
@@ -16,12 +14,10 @@
             android:theme="@style/AppTheme.NoActionBarLaunch"
             android:launchMode="singleTask"
             android:exported="true">
-
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
-
         </activity>
 
         <provider
@@ -29,9 +25,7 @@
             android:authorities="${applicationId}.fileprovider"
             android:exported="false"
             android:grantUriPermissions="true">
-            <meta-data
-                android:name="android.support.FILE_PROVIDER_PATHS"
-                android:resource="@xml/file_paths"></meta-data>
+            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
         </provider>
     </application>
 

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <background>
+        <inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
+    </background>
+    <foreground>
+        <inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
+    </foreground>
 </adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <background>
+        <inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
+    </background>
+    <foreground>
+        <inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
+    </foreground>
 </adaptive-icon>

public/manifest.webmanifest

@@ -0,0 +1,46 @@
+{
+  "icons": [
+    {
+      "src": "../icons/icon-48.webp",
+      "type": "image/png",
+      "sizes": "48x48",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-72.webp",
+      "type": "image/png",
+      "sizes": "72x72",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-96.webp",
+      "type": "image/png",
+      "sizes": "96x96",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-128.webp",
+      "type": "image/png",
+      "sizes": "128x128",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-192.webp",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-256.webp",
+      "type": "image/png",
+      "sizes": "256x256",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-512.webp",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ]
+}

src/components/PlayView.vue

@@ -194,74 +194,6 @@
                 </div>
             </ion-content>
         </ion-modal>
-
-        <ion-modal
-            ref="modal"
-            class="pay-modal"
-            :is-open="showPayModal"
-            :initial-breakpoint="1"
-            :breakpoints="[0, 1]"
-            @ionModalDidDismiss="showPayModal = false"
-        >
-            <ion-content>
-                <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"
-                        >
-                            You haven't unlocked this episode yet
-                        </div>
-                        <div class="text-center text-xl mt-2 font-bold">
-                            Join the Membership
-                        </div>
-                        <div class="text-center text-sm mt-1 px-4">
-                            unlock and watch all our videos without any limit
-                        </div>
-                    </div>
-                    <div class="flex space-x-4 pt-6 px-4">
-                        <div
-                            v-for="(item, n) in plans"
-                            :key="n"
-                            class="h-44 bg-neutral-700 flex-1 rounded-lg flex flex-col items-center border-neutral-500 border-2 overflow-hidden relative"
-                            :class="{ '!border-prim': selectedPlan === n }"
-                            @click="selectedPlan = n"
-                        >
-                            <div
-                                class="absolute top-0 left-0 bg-prim rounded-br-lg text-xs px-2 py-1"
-                                v-if="n === 0"
-                            >
-                                Exclusive
-                            </div>
-                            <div class="mt-8 text-xl 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"
-                                >
-                                    {{ item.desc }}
-                                </div>
-                            </div>
-                            <div
-                                class="h-8 bg-neutral-500 self-stretch text-base font-bold flex items-center justify-center"
-                                :class="{ 'bg-prim': selectedPlan === n }"
-                            >
-                                <ion-label color="">
-                                    ${{ item.price }}
-                                </ion-label>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <IonButton
-                    color="tertiary"
-                    expand="block"
-                    class="mx-4 mt-8 font-bold"
-                >
-                    ${{ plans[selectedPlan].price }} Pay Now
-                </IonButton>
-            </ion-content>
-        </ion-modal>
     </div>
 </template>
 <script setup lang="ts">
@@ -298,7 +230,7 @@ const props = defineProps({
     episodes: Array<any>,
     saved: Boolean,
 });
-const emit = defineEmits(["chooseEpisode", "save", "ended"]);
+const emit = defineEmits(["chooseEpisode", "save", "ended", "pay"]);
 const router = useIonRouter();
 const video: Ref<HTMLVideoElement | null> = ref(null);
 const { playing, currentTime, duration, volume } = useMediaControls(video);
@@ -320,25 +252,6 @@ const draggingData = reactive({
 const playUrl = ref("");
 const needPay = ref(false);
 const showEpisodesModal = ref(false);
-const showPayModal = ref(false);
-const plans = [
-    {
-        title: "7 Days",
-        desc: "Unlimited",
-        price: 0.99,
-    },
-    {
-        title: "1 Month",
-        desc: "Unlimited",
-        price: 19.99,
-    },
-    {
-        title: "3 Months",
-        desc: "Unlimited",
-        price: 49.99,
-    },
-];
-const selectedPlan = ref(0);
 const immersive = ref(false);
 
 const showPlayBtn = computed(() => {
@@ -437,7 +350,7 @@ function onPlay() {
     if (playUrl.value) {
         playing.value = true;
     } else if (needPay.value) {
-        showPayModal.value = true;
+        emit("pay");
     }
 }
 

src/views/SeriesView.vue

@@ -38,15 +38,119 @@
                             @save="save"
                             @choose-episode="onChooseEpisode"
                             @ended="next"
+                            @pay="showPayModal = true"
                         />
                     </swiper-slide>
                 </VueSwiper>
             </div>
+
+            <ion-modal
+                ref="modal"
+                class="pay-modal"
+                :is-open="showPayModal"
+                :initial-breakpoint="1"
+                :breakpoints="[0, 1]"
+                @ionModalDidDismiss="showPayModal = false"
+            >
+                <ion-content>
+                    <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"
+                            >
+                                You haven't unlocked this episode yet
+                            </div>
+                            <div class="text-center text-xl mt-2 font-bold">
+                                Join the Membership
+                            </div>
+                            <div class="text-center text-sm mt-1 px-4">
+                                unlock and watch all our videos without any
+                                limit
+                            </div>
+                        </div>
+                        <div class="flex space-x-4 pt-6 px-4">
+                            <div
+                                v-for="(item, n) in plans"
+                                :key="n"
+                                class="h-44 bg-neutral-700 flex-1 rounded-lg flex flex-col items-center border-neutral-500 border-2 overflow-hidden relative"
+                                :class="{ '!border-prim': selectedPlan === n }"
+                                @click="selectedPlan = n"
+                            >
+                                <div
+                                    class="absolute top-0 left-0 bg-prim rounded-br-lg text-xs px-2 py-1"
+                                    v-if="n === 0"
+                                >
+                                    Exclusive
+                                </div>
+                                <div class="mt-8 text-xl 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"
+                                    >
+                                        {{ item.desc }}
+                                    </div>
+                                </div>
+                                <div
+                                    class="h-8 bg-neutral-500 self-stretch text-base font-bold flex items-center justify-center"
+                                    :class="{ 'bg-prim': selectedPlan === n }"
+                                >
+                                    <ion-label color="">
+                                        ${{ item.price }}
+                                    </ion-label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <IonButton
+                        color="tertiary"
+                        expand="block"
+                        class="mx-4 mt-8 font-bold"
+                    >
+                        ${{ plans[selectedPlan].price }} Pay Now
+                    </IonButton>
+                </ion-content>
+            </ion-modal>
+
+            <IonModal :isOpen="showCheckoutModal">
+                <IonHeader>
+                    <IonToolbar>
+                        <IonButtons slot="secondary">
+                            <IonButton @click="showCheckoutModal = false">
+                                <IonIcon :icon="chevronBack" />
+                            </IonButton>
+                        </IonButtons>
+                        <IonTitle>
+                            <IonLabel>Checkout</IonLabel>
+                        </IonTitle>
+                    </IonToolbar>
+                </IonHeader>
+                <IonContent>
+                    <iframe
+                        class="h-full w-full border-none"
+                        src="https://shorts.izouma.com/stripe-checkout"
+                    ></iframe>
+                </IonContent>
+            </IonModal>
         </ion-content>
     </ion-page>
 </template>
 <script setup lang="ts">
-import { IonPage, IonContent, useIonRouter, IonModal } from "@ionic/vue";
+import {
+    IonPage,
+    IonContent,
+    useIonRouter,
+    IonModal,
+    IonHeader,
+    IonButtons,
+    IonButton,
+    IonToolbar,
+    IonLabel,
+    IonBackButton,
+    IonTitle,
+    IonIcon,
+} from "@ionic/vue";
 import { Swiper as VueSwiper, SwiperSlide } from "swiper/vue";
 import { Swiper } from "swiper";
 import {
@@ -61,6 +165,7 @@ import { nextTick, onMounted, reactive, ref } from "vue";
 import { useElementBounding } from "@vueuse/core";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
+import { close, chevronBack } from "ionicons/icons";
 
 const el = ref<HTMLElement | null>(null);
 const { x, y, top, right, bottom, left, width, height } =
@@ -127,5 +232,25 @@ function next() {
         swiper.value?.slideTo(activeSlide.value + 1);
     }
 }
+const showPayModal = ref(false);
+const plans = [
+    {
+        title: "7 Days",
+        desc: "Unlimited",
+        price: 0.99,
+    },
+    {
+        title: "1 Month",
+        desc: "Unlimited",
+        price: 19.99,
+    },
+    {
+        title: "3 Months",
+        desc: "Unlimited",
+        price: 49.99,
+    },
+];
+const selectedPlan = ref(0);
+const showCheckoutModal = ref(true);
 </script>
 <style lang="less" scoped></style>