From a3e20c944547b89a3f43c65f68690f5ead91c94b Mon Sep 17 00:00:00 2001
From: MoreStrive <minhnguyenyh2020@gmail.com>
Date: Sat, 6 Jul 2024 18:29:38 +0700
Subject: [PATCH] feat: select tag

---
 .../articles/cards/VideoBackground.vue        |  8 ++---
 utils/resourceHandler.ts                      | 34 +++++++------------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue b/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
index 01e21e1..3999a2b 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
@@ -23,10 +23,6 @@ const parseData = computed(() => {
 });
 
 const playVideo = ref<boolean>(false)
-
-onMounted(() => {
-  getResource(JSON.parse(props.dataResult).detail)
-})
 </script>
 
 <template>
@@ -41,6 +37,7 @@ onMounted(() => {
             v-if="!playVideo"
             class="article_video_thumb h-full" 
             :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
+            @click="playVideo = true"
           >
               <div></div>
               <div class="article_video_content">
@@ -53,7 +50,8 @@ onMounted(() => {
                   </p>
               </div>
           </div>
-          <video src=""></video>
+          <div v-else v-html="getResource('HIGHLIGHT_VIDEO', JSON.parse(props.dataResult).detail)">
+          </div>
       </template>
     </div>
 
diff --git a/utils/resourceHandler.ts b/utils/resourceHandler.ts
index 8574405..245d84b 100644
--- a/utils/resourceHandler.ts
+++ b/utils/resourceHandler.ts
@@ -1,27 +1,19 @@
 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>
+const getResource = (key: any, data: any) => {
+    const $ = cherrio.load(`<div class="">${data}</div>`)
+    let result = null;
+    switch (key) {
+        case 'HIGHLIGHT_VIDEO':
+            result = $('video').first().parent().html();
+            break;
+        default:
+            result = $.html();
+    }
+    console.log(result)
+    return result;
 }
 
-
 export {
     getResource
-}
\ No newline at end of file
+}