feat(video detail): ready

ymg-team · Feb 1, 2024 · 9ae7fe7 · 9ae7fe7
1 parent 4943a68
commit 9ae7fe7
Show file tree

Hide file tree

Showing 13 changed files with 7,095 additions and 125 deletions.
diff --git a/components/commons/boxs/BoxVideos/index.vue b/components/commons/boxs/BoxVideos/index.vue
@@ -1,20 +1,45 @@
 <template>
   <div class="p-t-lg p-blg">
-    <div class="row q-col-gutter-sm">
-      <div v-for="(n, key) in [1, 2, 3, 4]" class="col-md-6 col-sm-6 col-xs-6">
-        <card-video />
+    <div v-if="data?.result?.length > 0" class="row q-col-gutter-sm">
+      <div v-for="(n, key) in data.result" class="col-md-6 col-sm-6 col-xs-6">
+        <card-video :key="key" :data="n" />
       </div>
     </div>
+    <div
+      v-if="data?.message && (!data.result || data?.result?.length === 0)"
+      class="text-center text-grey q-pa-lg"
+    >
+      {{ data.message }}
+    </div>
+    <spinner v-if="!data.status || loading" />
   </div>
 </template>
 
 <script>
 import CardVideo from "@components/commons/cards/CardVideo";
+import Spinner from "@components/commons/loaders/GlobalSpiner";
 
 export default {
   name: "box-videos",
   components: {
     "card-video": CardVideo,
+    spinner: Spinner,
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
   },
 };
 </script>
diff --git a/components/commons/cards/CardVideo/index.vue b/components/commons/cards/CardVideo/index.vue
@@ -1,9 +1,6 @@
 <template>
   <q-card class="q-mb-lg" flat bordered>
-    <NuxtLink
-      style="position: relative"
-      to="/video/this-is-video-title-hjsdaf6234234"
-    >
+    <NuxtLink style="position: relative" :to="targetLink">
       <!-- play button absolute in center with zindex + 1 -->
       <q-img
         style="
@@ -20,11 +17,7 @@
       />
 
       <!-- video thumbnails -->
-      <q-img
-        height="200px"
-        alt="title"
-        src="https://res.cloudinary.com/dhjkktmal/image/upload/v1691150717/maucoding/2023/PyScript-Menjalankan-Python-di-HTML-Ada-Ada-Aja/2b144f828b23b1e9db4647ef7f11cc87.png.png"
-      />
+      <q-img height="200px" :alt="data.title" :src="data.thumbnails" />
     </NuxtLink>
 
     <!-- text under thumb -->
@@ -39,12 +32,17 @@
           -webkit-box-orient: vertical;
         "
       >
-        <NuxtLink to="/tag" class="text-orange-9 q-pr-sm">TAG 1</NuxtLink>
+        <NuxtLink
+          v-for="n in data.tags"
+          :to="`/videos?tag=${n}`"
+          class="text-orange-9 q-pr-sm"
+          >{{ n.toUpperCase() }}</NuxtLink
+        >
       </div>
       <NuxtLink :to="targetLink">
         <div
           style="
-            height: 35px;
+            height: 62px;
             overflow: hidden;
             display: -webkit-box;
             -webkit-line-clamp: 2;
@@ -53,13 +51,16 @@
           "
           class="text-h6 q-mt-sm q-mb-xs"
         >
-          <strong> Video Title</strong>
+          <strong>{{ data.title }}</strong>
         </div>
       </NuxtLink>
 
-      <q-item class="no-padding q-mt-lg">
+      <q-item class="no-padding q-mt-sm">
         <q-item-section>
-          <q-item-label caption>Posted 2 days ago • 60M Ditonton </q-item-label>
+          <q-item-label caption
+            >Uploaded {{ dayJS(data?.createdAt).fromNow() }} •
+            {{ data?.views | 1 }} views
+          </q-item-label>
         </q-item-section>
         <!-- <q-item-section side> 3 min ago </q-item-section> -->
       </q-item>
@@ -69,7 +70,28 @@
 </template>
 
 <script>
+import dayJS from "@helpers/dateTime";
+import { toSlug } from "string-manager";
+
 export default {
   name: "card-video",
+  data() {
+    return {
+      targetLink: `/video/${toSlug(
+        `${this.data.title.toLowerCase()}-${this.data._id}`
+      )}`,
+    };
+  },
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  methods: {
+    dayJS,
+  },
 };
 </script>
diff --git a/components/commons/navigations/GlobalHeader/index.vue b/components/commons/navigations/GlobalHeader/index.vue
@@ -31,7 +31,7 @@ export default {
   },
   watch: {
     $router(newVal, oldVal) {
-      console.log("newVal", newVal);
+      // console.log("newVal", newVal);
     },
     tab(newVal, oldVal) {
       return this.$router.push(newVal);

diff --git a/components/templates/PostLists/index.vue b/components/templates/PostLists/index.vue
@@ -69,7 +69,7 @@ const metaData = computed({
   },
 });
 
-// fetch post detail to api
+// fetch post list to api
 const fetchData = async (nextQuery) => {
   const query = { ...nextQuery, ...DEFAULT_QUERY };
   // if (query.page !== 0) query.page = DEFAULT_QUERY.limit * (query.page - 1);

diff --git a/components/templates/VideoLists/index.vue b/components/templates/VideoLists/index.vue
@@ -1,9 +1,10 @@
 <template>
   <DefaultLayout>
     <TitleMedium :title="metaData.title" />
-    <BoxVideos />
+    <BoxVideos :data="videoData" />
     <div class="col-12 q-pa-lg text-center">
       <q-btn
+        v-if="videoData?.value?.length"
         class="q-pl-md q-pr-md"
         size="large"
         label="Load More"
@@ -15,8 +16,31 @@
 </template>
 
 <script setup>
+import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
+
+// components
+import DefaultLayout from "@components/layouts/default-layout";
+import BoxVideos from "@components/commons/boxs/BoxVideos";
+import TitleMedium from "@components/commons/headings/title-medium";
+import Breadcrumb from "@components/commons/navigations/Breadcrumbs";
+
+// services
+import { fetchVideos } from "@services/videos";
+
+const route = useRoute();
+
 const DEFAULT_BREADCRUMB_DATA = [{ to: "/videos", label: "Videos" }];
 
+const DEFAULT_QUERY = {
+  limit: 9,
+  tag: route.params.tag || "",
+  draft: false,
+};
+
+// initiate refs
+const currentPage = ref(0);
+const videoData = ref({});
 const metaData = computed({
   get() {
     const newBreadcrumbData = [...DEFAULT_BREADCRUMB_DATA];
@@ -29,9 +53,36 @@ const metaData = computed({
   },
 });
 
-// components
-import DefaultLayout from "@components/layouts/default-layout";
-import BoxVideos from "@components/commons/boxs/BoxVideos";
-import TitleMedium from "@components/commons/headings/title-medium";
-import Breadcrumb from "@components/commons/navigations/Breadcrumbs";
+// initiate functions
+const fetchData = async (nextQuery) => {
+  const query = { ...nextQuery, ...DEFAULT_QUERY };
+  // if (query.page !== 0) query.page = DEFAULT_QUERY.limit * (query.page - 1);
+
+  const response = await fetchVideos({ query });
+  if (!query.lastupdatedon) {
+    videoData.value = response;
+  } else {
+    //do loadmore
+    videoData.value.message = response.message;
+    videoData.value.status = response.status;
+
+    if (response?.result?.length > 0) {
+      videoData.value.result = [...videoData.value.result, ...response.result];
+    }
+  }
+};
+
+// onMounted
+onMounted(() => {
+  fetchData({ page: currentPage.value });
+});
+
+// init functions
+const loadMoreHandler = () => {
+  const nextQuery = {};
+  // get lastupdateon to loadmore
+  nextQuery.lastcreatedon =
+    videoData.value.result[videoData.value.result.length - 1].createdAt;
+  return fetchData(nextQuery);
+};
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: false },
   devServer: {
-    port: 20231,
+    port: process.env.PORT || 20231,
   },
   // Global page headers: https://go.nuxtjs.dev/config-head
   app: {

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nuxt-app",
+  "name": "mcdg-v2",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -11,14 +11,14 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "@types/node": "^18.17.3",
-    "nuxt": "^3.6.5",
-    "nuxt-quasar-ui": "^2.0.5"
+    "@types/node": "18.17.3",
+    "nuxt": "3.6.5",
+    "nuxt-quasar-ui": "2.0.5"
   },
   "dependencies": {
-    "axios": "^1.5.0",
-    "dayjs": "^1.11.9",
-    "seal-middleware": "^0.1.2",
-    "string-manager": "^3.0.0"
+    "axios": "1.5.0",
+    "dayjs": "1.11.9",
+    "seal-middleware": "0.1.2",
+    "string-manager": "3.0.0"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -7,8 +7,8 @@
 
       <!-- latest videos box -->
       <TitleMedium :title="'Latest Videos'" />
-      <BoxVideos />
-      <div v-if="latestPostResponse.status === 200" class="row text-center">
+      <BoxVideos :data="latestVideoResponse" />
+      <div v-if="latestVideoResponse.status === 200" class="row text-center">
         <div class="col-12 q-pa-lg">
           <q-btn
             class="q-pl-md q-pr-md"
@@ -59,6 +59,7 @@ import { metaGeneratorObject } from "@helpers/metaGenerator";
 
 // services
 import { fetchPosts } from "@services/posts";
+import { fetchVideos } from "@services/videos";
 
 const DEFAULT_QUERY = {
   draft: false,
@@ -67,4 +68,5 @@ const DEFAULT_QUERY = {
 
 const title = `${DEFAULT_TITLE} - ${DEFAULT_DESCRIPTION}`;
 const latestPostResponse = await fetchPosts({ query: DEFAULT_QUERY });
+const latestVideoResponse = await fetchVideos({ query: DEFAULT_QUERY });
 </script>
diff --git a/pages/post/[title]/index.vue b/pages/post/[title]/index.vue
@@ -92,7 +92,6 @@ const metaData = ref({
   description: "Post by MauCoding",
 });
 const breadcrumbData = ref(DEFAULT_BREADCRUMB_DATA);
-const postData = ref({});
 
 const { data, error } = await useFetch(endpointGetPostDetail(postId.value), {
   headers: {