https://www.arda.or.th/assets/api/component/contenttemp3.js?v=1790289360

1let VdoData = [];
2flattenedArrayVdoData = [];
3const createVideoCard = (content, showMini) => {
4    // Guard against video_link being empty or not matching (e.g. youtu.be short links,
5    // malformed URLs) — String.match() returns null and .pop() on null crashed the template.
6    const _ytMatch = (content.video_link || "")
7        .match(/(?:youtube\.com.*(?:\?v=|\/embed\/)|youtu\.be\/)(.{11})/);
8    const youtube_video_id = _ytMatch ? _ytMatch.pop() : "";
9    const formattedDate = formatDateTH(content.content_public_date);
10    const language = languageTH(content.component_languages);
11    const description = descriptionTH(content.component_languages);
12
13    let video_thumbnail = `<img class="img-thumbnail" data-src=${youtube_video_id} data-title=${language} src="https://img.youtube.com/vi/${youtube_video_id}/0.jpg">`;
14
15    return `
16      <div class="col-lg-3 col-md-6 col-sm-12 mt-4">
17        <div class="card border-0">
18          <div class="popup">
19            <div class="video-temp3">
20              ${video_thumbnail}
21            </div>
22            <div class="card-body p-2">
23              <h5 class="card-title card-title-tp3 text-wrap-2">${language}</h5>
24              <p class="text-sky pe-2 p-0 pb-0 m-0"><i class="far fa-calendar pe-1"></i> ${formattedDate}</p>
25              <span class="text-sky pt-0 mt-0 pe-2">
26              <div id="social-btn"></div>
27              ${description}
28            </div>
29          </div>
30        </div>
31      </div>
32    `;
33};
34
35const createVideoRow = (videos, title) => `
36    <div class="row mt-3 content-video-1">
37        <h2 class="mt-3 mb-3 ms-2">${title}</h2>
38        <div class="row">${videos}</div>
39    </div>
40`;
41
42const contentTemp3 = (data) => {
43    const videoCards = data[0].components
44        .map((c) => createVideoCard(c, c.showMini))
45        .join("");
46    VdoData.push(data[0].components);
47    flattenedArrayVdoData = VdoData.flatMap((innerArray) => innerArray);
48    let title =
49        data[0].template_languages.find(
50            ({ language }) => language === pageLang
51        ) || {};
52    if (!title.title) {
53        title =
54            data[0].template_languages.find(({ language }) =>
55                (language === pageLang) === "TH" ? "EN" : "TH"
56            ) || {};
57    }
58
59    return createVideoRow(videoCards, title.title);
60};
61
62const languageTH = (data) => {
63    // let dataTemplates = data.find(i => i.language === "TH");
64    let title = data.find(({ language }) => language === pageLang) || {};
65    if (!title.title) {
66        title =
67            data.find(({ language }) =>
68                (language === pageLang) === "TH" ? "EN" : "TH"
69            ) || {};
70    }
71    return title.title;
72};
73
74const descriptionTH = (data) => {
75    let description = data.find(({ language }) => language === pageLang) || "";
76    if (!description.description) {
77        description =
78            data.find(({ language }) =>
79                (language === pageLang) === "TH" ? "EN" : "TH"
80            ) || "";
81    }
82    if (description.description != null) {
83        return description.description;
84    } else {
85        return "";
86    }
87};
88
89function extractVideoId(url) {
90    let videoId = url.split("v=")[1];
91    let ampersandIndex = videoId.indexOf("&");
92    if (ampersandIndex !== -1) {
93        videoId = videoId.substring(0, ampersandIndex);
94    }
95    return videoId;
96}
97
98$(document).on("change keyup", "[data-searcheVdo]", async function () {
99    countNumber = 0;
100    const searchValue = $("#searcheVdo").val().trim();
101    const searchData = flattenedArrayVdoData.filter((component) =>
102        component?.component_languages[0]?.title?.includes(searchValue)
103    );
104    console.log(searchData);
105
106    const searcheVdo = searchData
107        .map((c) => createVideoCard(c, c.showMini))
108        .join("");
109
110    if (searchValue.length > 0) {
111        if (searchData.length > 0) {
112            $(".content-video-2").html(searcheVdo, "vdo");
113            $("#content-video-2").removeClass("d-none");
114            $(".content-video-1").addClass("d-none");
115        } else {
116            $(".content-video-2").html("ไม่พบ VIDEO");
117            $("#content-video-2").removeClass("d-none");
118        }
119    } else if (searchValue.length <= 0) {
120        $(".content-video-1").removeClass("d-none");
121        $("#content-video-2").addClass("d-none");
122    }
123
124    // console.log();
125
126    // const content = await contentComponentFilelistsearch(searchData);
127    // $(".searchjob").html("");
128    // if (searchValue.length > 0) {
129    //     $(".search-results").text(`ผลลัพธ์การค้นหา ${countNumber} รายการ`);
130    //     $(".search-results").removeClass("d-none");
131    //     $(".original-data").addClass("d-none");
132    //     $(".searchjob").removeClass("d-none");
133    //     $(".searchjob").append(content);
134    // } else if (searchValue.length <= 0) {
135    //     $(".search-results").addClass("d-none");
136    //     $(".searchjob").addClass("d-none");
137    //     $(".original-data").removeClass("d-none");
138    // }
139});