deploy

components/dynamic-page/page-component/templates/articles/cards/Video.vue

@@ -74,7 +74,7 @@ const parseData = computed(() => {
                     class="article_video_thumb" 
                     :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
                 >
-                    <i class="ri-play-circle-line"></i>
+                  <Icon name="ri:play-circle-line" />
                 </div>
                 <div class="article_video_content">
                     <div>
@@ -85,20 +85,9 @@ const parseData = computed(() => {
                 </div>
             </div>
         </template>
-        <div v-else>
-            <div class="empty-box">
-                <div class="d-flex justify-content-center align-items-center flex-column empty-block" style="background-color: #409eff;">
-                    <i class="ri-play-circle-line text-white"></i>
-                </div>
-                <div class="empty-block">
-                    <div style="height: 8px"></div>
-                    <div style="height: 8px"></div>
-                </div>
-            </div>
-        </div>
     </div>
 
-    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+    <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
   </article>
 </template>
 
@@ -107,6 +96,7 @@ const parseData = computed(() => {
         .article_video_container {
             display: flex;
             align-items: center;
+            
             .article_video_thumb {
                 background-size: cover;
                 background-repeat: no-repeat;
@@ -116,8 +106,10 @@ const parseData = computed(() => {
                 width: 250px;
                 height: 140px;
                 border-radius: 2px;
-                margin: 10px;
                 text-align: center;
+                display: flex;
+                justify-content: center;
+                align-items: center;
                 &::after {
                     content: '';
                     position: absolute;
@@ -128,17 +120,18 @@ const parseData = computed(() => {
                     top: 0px;
                     left: 0px;
                 }
-                i {
+                svg {
                     font-size: 40px;
                     color: white;
                     position: relative;
                     z-index: 2;
                 }
             }
+
             .article_video_content {
                 position: relative;
                 z-index: 2;
-                margin: 10px 0px;
+                padding: 10px;
                 > div {
                     background: #ffffff;
                 }

components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
 import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+import  { getResource } from "@/utils/resourceHandler";
 
 const props = defineProps<{
   dataResult?: any;
@@ -20,6 +21,13 @@ const parseData = computed(() => {
   const result = getInputValue(props.dataResult, "OBJECT");
   return result;
 });
+
+const playVideo = ref<boolean>(false)
+
+onMounted(() => {
+  getResource(JSON.parse(props.dataResult).detail)
+  console.log()
+})
 </script>
 
 <template>
@@ -28,78 +36,37 @@ const parseData = computed(() => {
     :class="LAYOUT_PARSE['article_Class']"
     :style="LAYOUT_PARSE['article']"
   >
-    <!-- <div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
-      <template v-if="parseData">
-        <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
-      </template>
-      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
-    </div>
-    <div class="basic-article_content" :class="[!parseData && 'no-data']">
-      <template v-if="parseData?.topics && parseData?.topics.length > 0">
-        <nuxt-link class="article-card-default__topic" :to="`/${parseData?.topics[0].code}`" :style="LAYOUT_PARSE['topic']">
-          <h5>{{ parseData?.topics[0].title }}</h5>
-        </nuxt-link>
-      </template>
-      <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
-        <template v-if="parseData">
-          {{ parseData.title?.replace(/<[^>]+>/g, "") }}
-        </template>
-        <span v-else class="empty-block" style="height: 8px"></span>
-      </h3>
-      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE.layout === 'row'">
-        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
-          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
-        }}</span>
-        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
-      </div>
-      <p class="mb-0 line-clamp" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
-        <template v-if="parseData">
-          {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
-        </template>
-        <span v-else class="empty-block" style="height: 5px"></span>
-      </p>
-      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE?.layout !== 'row'" :style="LAYOUT_PARSE['metadata']">
-        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
-          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
-        }}</span>
-        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
-      </div>
-    </div>
-
-     -->
-
     <div class="article_video">
-        <template v-if="parseData">
+      <template v-if="parseData">
-            <div 
+          <div 
-                class="article_video_thumb" 
+            v-if="!playVideo"
-                :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
+            class="article_video_thumb h-full" 
-            >
+            :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
-                <div></div>
+          >
-                <div class="article_video_content">
+              <div></div>
-                    <span><i class="ri-play-circle-line"></i></span>
+              <div class="article_video_content">
-                    <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+                  <span><Icon name="ri:play-circle-line" class="text-white" /></span>
-                        {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+                  <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
-                    </h3>
+                      {{ parseData.title?.replace(/<[^>]+>/g, "") }}
-                    <p class="mb-0 line-clamp text-white" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+                  </h3>
-                        {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
+                  <p class="mb-0 line-clamp text-white" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
-                    </p>
+                      {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
-                </div>
+                  </p>
-            </div>
+              </div>
-        </template>
+          </div>
-        <div v-else class="empty-box">
+          <video src=""></video>
-            <div class="d-flex justify-content-center align-items-center flex-column">
+      </template>
-                <i class="ri-play-circle-line text-white"></i>
-            </div>
-        </div>
     </div>
 
-    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+    <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
   </article>
 </template>
 
 <style lang="scss" scoped>
     .article_video {
-        .article_video_thumb {
+      @apply min-h-465px;
+      .article_video_thumb {
+            @apply flex flex-col justify-end min-h-465px;
             background-size: cover;
             background-repeat: no-repeat;
             background-position: center;
@@ -107,7 +74,7 @@ const parseData = computed(() => {
             z-index: 0;
             padding: 120px 85px 60px 85px;
             border-radius: 2px;
-            margin: 10px;
+            overflow: hidden;
             cursor: pointer;
             &::after {
                 content: '';
@@ -136,19 +103,11 @@ const parseData = computed(() => {
                     font-weight: 400;
                 }
 
-                i {
+                svg {
                     font-size: 80px;
                     color: #ed1c24;
                 }
             }
         }
-        .empty-box {
-            background-color: #409eff;
-            margin: 10px;
-            min-height: 60px;
-            i {
-                font-size: 60px;
-            }
-        }
     }
 </style>

components/dynamic-page/page-component/templates/categories/categories/Vertical.vue

@@ -45,13 +45,11 @@ const mapActivesToItems = (index: number) => {
             <path d="M5.984 2.456V4.184H4.336V5.992H2.4V4.184H0.752V2.456H2.4V0.648H4.336V2.456H5.984Z" fill="black" />
           </svg>
 
-          <h3
+          <h3 :style="mapActivesToItems(index)['h3.categories']">
-            :style="mapActivesToItems(index)['h3.categories']"
-          >
             {{ component.title }}
           </h3>
         </div>
-        <div v-html="designObject.styleClasses"></div>
+        <div v-if="designObject.styleClasses" v-html="designObject.styleClasses"></div>
       </template>
     </div>
   </div>

components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue

@@ -4,7 +4,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
 </script>
 
 <template>
-  <footer id="footer" class="main-footer">
+  <footer id="footer" class="main-footer mt-20">
     <div class="main-footer-container">
       <div class="footer-centertab">
         <div>

utils/resourceHandler.ts

@@ -0,0 +1,27 @@
+import * as cherrio from 'cheerio'
+
+const getResource = (data: any) => {
+    const result = {
+        videoHightlight: null,
+        imageHightlight: null,
+        resources: [],
+    };
+    const $ = cherrio.load(`<div class="get-resource">${data}</div>`)
+    const html : any = $('.get-resource').html();
+    html.find('video, figure img, img').each((index : any, element: any) => {
+        // if (index === 0) result.videoHightlight = 
+    });
+
+    console.log(html)
+
+    // <div>
+    //     <video controls="controls" width="100%" height="auto" data-id="578" data-resource="https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/video/28thi-tot-nghiep-ptth-2024-1719829616.mp4" data-title="28thi-tot-nghiep-ptth-2024">
+    //         <source src="https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/video/28thi-tot-nghiep-ptth-2024-1719829616.mp4" type="video/mp4">
+    //     </video>
+    // </div>
+}
+
+
+export {
+    getResource
+}