reorganize video list page

ymg-team · Feb 5, 2024 · cb150e8 · cb150e8
1 parent 9f37a92
commit cb150e8
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 deletions.
diff --git a/components/commons/boxs/BoxVideos/index.vue b/components/commons/boxs/BoxVideos/index.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="p-t-lg p-blg">
     <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">
+      <div
+        v-for="(n, key) in data.result"
+        :class="
+          size === 'small'
+            ? 'col-md-6 col-sm-6 col-xs-6'
+            : 'col-md-4 col-sm-6 col-xs-6'
+        "
+      >
         <card-video :key="key" :data="n" />
       </div>
     </div>

diff --git a/components/layouts/default-layout/index.vue b/components/layouts/default-layout/index.vue
@@ -33,7 +33,7 @@ import GlobalHeader from "@components/commons/navigations/GlobalHeader";
 import GlobalFooter from "@components/commons/navigations/GlobalFooter";
 import Sidebar from "@components/commons/navigations/GlobalSidebar";
 
-const ALWAYS_FULLSCREEN = ["/posts", "/tag", "/author"];
+const ALWAYS_FULLSCREEN = ["/posts", "/tag", "/author", "/videos"];
 
 export default {
   data() {

diff --git a/components/templates/PostLists/index.vue b/components/templates/PostLists/index.vue
@@ -15,7 +15,7 @@
           @click="loadMoreHandler()"
           class="q-pl-md q-pr-md"
           size="large"
-          label="Post Berikutnya"
+          label="Load More"
           outline
           color="purple"
         />

diff --git a/components/templates/VideoLists/index.vue b/components/templates/VideoLists/index.vue
@@ -1,10 +1,13 @@
 <template>
   <DefaultLayout>
     <TitleMedium :title="metaData.title" />
-    <BoxVideos :data="videoData" />
-    <div class="col-12 q-pa-lg text-center">
+    <BoxVideos :size="'large'" :data="videoData" :loading="isLoading" />
+    <div
+      v-if="!isLoading && videoData?.result?.length"
+      class="col-12 q-pa-lg text-center"
+    >
       <q-btn
-        v-if="videoData?.value?.length"
+        @click="fetchLoadMore"
         class="q-pl-md q-pr-md"
         size="large"
         label="Load More"
@@ -39,6 +42,7 @@ const DEFAULT_QUERY = {
 };
 
 // initiate refs
+const isLoading = ref(false);
 const currentPage = ref(0);
 const videoData = ref({});
 const metaData = computed({
@@ -72,6 +76,13 @@ const fetchData = async (nextQuery) => {
   }
 };
 
+const fetchLoadMore = async () => {
+  isLoading.value = true;
+  setTimeout(() => {
+    isLoading.value = false;
+  }, 2000);
+};
+
 // onMounted
 onMounted(() => {
   fetchData({ page: currentPage.value });

diff --git a/pages/video/[title]/index.vue b/pages/video/[title]/index.vue
@@ -55,6 +55,7 @@
         <article
           v-html="data?.description?.replace(/(?:\r\n|\r|\n)/g, '<br/>')"
         />
+        <br />
         <!-- end video caption -->
       </div>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,6 +55,7 @@ @@
             <article
               v-html="data?.description?.replace(/(?:\r\n|\r|\n)/g, '<br/>')"
             />
+            <br />
             <!-- end video caption -->
           </div>
         </div>
@@ Expand Down @@