Upgrade to v2.0.0

package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@mdi/font": "^7.2.96",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vuetify": "^3.3.15"

src/App.vue

@@ -1,32 +1,18 @@
 <script setup>
-    import SearchBox from "@/components/SearchBox.vue";
+    import {VApp} from "vuetify/components";
+    import AppBar from "@/components/AppBar.vue";
+    import {VContainer} from "vuetify/components";
 </script>
 
 <template>
-    <section>
-        <h1>فری مووی</h1>
-        <h2>موتورجستجوی فیلم و سریال</h2>
-        <div class="spacer"></div>
-        <search-box text=""></search-box>
-    </section>
+    <v-app>
+        <app-bar></app-bar>
+        <v-container class="d-flex justify-center align-center h-screen flex-column">
+            <p>ویترین به زودی اضافه میشود ...</p>
+        </v-container>
+    </v-app>
 </template>
 
 <style scoped>
-    section {
-        height: 100vh;
-        width: 100vw;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-    section h1 {
-        font-size: 3.2rem;
-    }
-    section h2 {
-        font-size: 1.5rem;
-    }
-    .spacer {
-        padding: 25px;
-    }
+
 </style>

src/assets/main.css

@@ -13,4 +13,12 @@ html, body {
     margin: 0;
     padding: 0;
     direction: rtl;
+}
+
+.text-h1, .text-h2 {
+    font-family: Vazir !important;
+}
+
+.v-list-item__prepend {
+    width: 32px;
 }

src/components/AppBar.vue

@@ -0,0 +1,46 @@
+<script setup>
+    import {VAppBar, VAppBarTitle, VIcon, VNavigationDrawer, VList, VListItem, VDialog, VToolbar, VToolbarTitle, VBtn} from "vuetify/components";
+    import {ref} from "vue";
+
+    const drawer = ref(false)
+    const dialogDev = ref(false)
+</script>
+
+<template>
+    <v-dialog v-model="dialogDev" fullscreen :scrim="false" transition="dialog-bottom-transition">
+        <v-toolbar color="blue-darken-2">
+            <v-btn icon @click.stop="dialogDev = false"><v-icon>mdi-close</v-icon></v-btn>
+            <v-toolbar-title>توسعه دهنده</v-toolbar-title>
+        </v-toolbar>
+        <div class="h-100 bg-white pa-5">
+            <v-list>
+                <v-list-item prepend-icon="mdi-account">محمدعلی ارجمند</v-list-item>
+                <v-list-item prepend-icon="mdi-github"><a href="https://github.com/mohammadali-arjomand" target="_blank">گیت هاب</a></v-list-item>
+                <v-list-item prepend-icon="mdi-linkedin"><a href="https://www.linkedin.com/in/mohammad-ali-arjomand-b735b5279/" target="_blank">لینکدین</a></v-list-item>
+                <v-list-item prepend-icon="mdi-email-outline"><a href="mailto:[email protected]" target="_blank">ایمیل</a></v-list-item>
+            </v-list>
+        </div>
+    </v-dialog>
+    <v-navigation-drawer v-model="drawer" location="right">
+        <div class="bg-blue-darken-2 w-100 h-25 d-flex justify-end align-start pa-2 flex-column">
+            <p>فری مووی</p>
+            <small>موتورجستجوی فیلم و سریال</small>
+        </div>
+        <v-list>
+            <router-link to="/" style="color: #222; text-decoration: none"><v-list-item prepend-icon="mdi-home">صفحه اصلی</v-list-item></router-link>
+            <v-list-item prepend-icon="mdi-xml" @click.stop="dialogDev = true">توسعه دهنده</v-list-item>
+        </v-list>
+    </v-navigation-drawer>
+    <v-app-bar :elevation="2" color="blue-darken-2">
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer" variant="text"><v-icon>mdi-menu</v-icon></v-app-bar-nav-icon>
+        <v-app-bar-title>فری مووی</v-app-bar-title>
+        <router-link to="/search" style="color: white"><v-app-bar-nav-icon><v-icon>mdi-magnify</v-icon></v-app-bar-nav-icon></router-link>
+    </v-app-bar>
+</template>
+
+<style scoped>
+a {
+    text-decoration: none;
+    color: black;
+}
+</style>

src/components/LoadingCard.vue

@@ -0,0 +1,9 @@
+<script setup>
+    import {VSkeletonLoader} from "vuetify/labs/components";
+</script>
+
+<template>
+    <v-skeleton-loader class="mx-auto border mt-3" max-width="300" type="image, heading"></v-skeleton-loader>
+</template>
+
+<style scoped></style>

src/components/LoadingList.vue

@@ -0,0 +1,9 @@
+<script setup>
+import {VSkeletonLoader} from "vuetify/labs/components";
+</script>
+
+<template>
+    <v-skeleton-loader class="border mt-3 mx-5" type="heading"></v-skeleton-loader>
+</template>
+
+<style scoped></style>

src/components/Movie.vue

@@ -0,0 +1,139 @@
+<script setup>
+import {
+    VApp,
+    VContainer,
+    VToolbar,
+    VImg,
+    VRow,
+    VCol,
+    VBtn,
+    VCard,
+    VDialog,
+    VToolbarTitle,
+    VList,
+    VListItem,
+    VListSubheader,
+    VIcon
+} from "vuetify/components";
+    import AppBar from "@/components/AppBar.vue";
+import {ref} from "vue";
+import LoadingList from "@/components/LoadingList.vue";
+
+    const downloadDlg = ref(false)
+    const movie = localStorage.movie !== undefined ? JSON.parse(localStorage.movie) : null
+
+    const loaded = ref(true)
+    const seasons = ref([]);
+    if (movie.type === "movie") {
+        seasons.value = [
+            {
+                title: movie.title,
+                episodes: [
+                    {
+                        title: "دانلود",
+                        sources: movie.sources
+                    }
+                ]
+            }
+        ]
+    }
+    else {
+        loaded.value = false
+        fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(`http://winbedrives.com/api/season/by/serie/${movie.id}/4F5A9C3D9A86FA54EACEDDD63518`)}`)
+            .then(response => {
+                if (response.ok) return response.json()
+                throw new Error('Network response was not ok.')
+            })
+            .then(data => {
+                    seasons.value = JSON.parse(data.contents)
+                    loaded.value = true
+                }
+            );
+    }
+</script>
+
+<template>
+    <v-app>
+        <v-dialog v-model="downloadDlg" fullscreen :scrim="false" transition="dialog-bottom-transition">
+            <v-toolbar color="blue-darken-2">
+                <v-btn icon @click.stop="downloadDlg = false" variant="text"><v-icon>mdi-close</v-icon></v-btn>
+                <v-toolbar-title>دانلود</v-toolbar-title>
+            </v-toolbar>
+            <div v-if="loaded" class="download-box overflow-x-auto">
+                <v-list v-for="season of seasons">
+                        <h2 class="px-3">{{ season.title }}</h2>
+                        <div v-for="episode of season.episodes">
+                            <v-list-subheader>{{ episode.title }}</v-list-subheader>
+                            <a v-for="source of episode.sources" :href="source.url"><v-list-item>{{ source.quality === null || source.quality === "" ? "دانلود" : source.quality }}</v-list-item></a>
+                        </div>
+                </v-list>
+            </div>
+            <div v-else class="download-box overflow-x-auto">
+                <loading-list v-for="n in 10"></loading-list>
+            </div>
+        </v-dialog>
+        <app-bar></app-bar>
+        <br><br>
+        <v-container>
+            <p v-if="movie === null" class="msg">
+                ویدیوی موردنظر شما پیدا نشد
+            </p>
+            <div v-else class="mt-3">
+                <v-row>
+                    <v-col cols="5" md="3" lg="2">
+                        <v-img :src="movie.image" class="rounded"></v-img>
+                    </v-col>
+                    <v-col cols="7" md="9" lg="10">
+                        <h1>{{ movie.title }}</h1>
+                        <table>
+                            <tr>
+                                <td>سال ساخت:</td>
+                                <td>{{ movie.year }}</td>
+                            </tr>
+                            <tr>
+                                <td>کشور سازنده:</td>
+                                <td>{{ movie.country[0].title }}</td>
+                            </tr>
+                            <tr>
+                                <td>امتیاز IMDb:</td>
+                                <td>{{ movie.imdb }}</td>
+                            </tr>
+                        </table>
+                        <v-btn color="blue-darken-2" @click="downloadDlg = true">
+                            <v-icon>mdi-download</v-icon>
+                            <span>دانلود</span>
+                        </v-btn>
+                    </v-col>
+                </v-row>
+                <v-card class="mt-3 pa-3"><pre>{{ movie.description }}</pre></v-card>
+            </div>
+        </v-container>
+    </v-app>
+</template>
+
+<style scoped>
+    .msg {
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    pre {
+        font-family: Vazir;
+        text-align: justify;
+        overflow-x: auto;
+        white-space: pre-wrap;
+        white-space: -moz-pre-wrap;
+        white-space: -pre-wrap;
+        white-space: -o-pre-wrap;
+        word-wrap: break-word;
+    }
+    a {
+        color: #222222;
+        text-decoration: none;
+    }
+    .download-box {
+        height: 100%;
+        background-color: white;
+    }
+</style>

src/components/MovieCard.vue

@@ -1,64 +1,22 @@
 <script setup>
-    import TheButton from "@/components/TheButton.vue";
+import {VCard, VImg, VCardItem, VCardTitle} from "vuetify/components";
+import router from "@/router";
 
-    const props = defineProps(["title", "image", "imdb", "year", "countries", "sources", "type"])
+const props = defineProps(["movie"])
+
+function openMovie(movie) {
+    localStorage.movie = JSON.stringify(movie);
+    router.push("/movie");
+}
 </script>
 
 <template>
-    <section>
-        <img :src="image" :alt="title">
-        <div>
-            <h2>{{ title }}</h2>
-            <p>امتیاز: {{ imdb }}</p>
-            <p>سال ساخت: {{ year }}</p>
-            <p>
-                کشور سازنده:
-                <span v-for="country in countries">{{ country.title }}</span>
-            </p>
-            <p>{{ type === "movie" ? "فیلم" : "سریال" }}</p>
-            <div v-if="sources.length > 0" class="buttons">
-                <the-button v-for="source of sources"
-                            :url="source.url"
-                >{{ source.quality === '' ? "دانلود" : source.quality }}</the-button>
-            </div>
-            <p v-else class="blue">به زودی ...</p>
-        </div>
-    </section>
+    <v-card class="mt-3 h-100" @click="openMovie(movie)" dir="ltr">
+        <v-img :src="movie.image" class="d-block"></v-img>
+        <v-card-item>
+            <v-card-title width="50">{{ movie.title }}</v-card-title>
+        </v-card-item>
+    </v-card>
 </template>
 
-<style scoped>
-    section {
-        box-shadow: #ddd 0 0 4px 1px;
-        margin-top: 20px;
-        width: 80vw;
-        padding: 12px;
-        display: flex;
-        border-radius: 10px;
-        overflow: hidden;
-    }
-
-    section img {
-        height: 30vh;
-        border-radius: 10px;
-    }
-
-    section div {
-        display: flex;
-        flex-direction: column;
-        margin: 20px 10px;
-    }
-
-    section div h2 {
-        margin-bottom: 20px;
-    }
-
-    .buttons {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-
-    .blue {
-        color: royalblue;
-    }
-</style>
+<style scoped></style>