pukaad-ui-lib 1.423.0 → 1.425.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.423.0",
+  "version": "1.425.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/card/card-content/card-content-video.vue

@@ -14,7 +14,7 @@
     />
 
     <div
-      class="absolute inset-x-0 bottom-0 flex h-[84px] flex-col justify-between bg-gradient-to-t from-black/70 to-transparent p-[8px]"
+      class="absolute inset-x-0 bottom-0 flex h-[84px] flex-col justify-end gap-1 bg-gradient-to-t from-black/70 to-transparent p-[8px]"
     >
       <p class="line-clamp-2 break-words font-title-small-prominent text-white">
         {{ props.item.title }}

package/dist/runtime/components/drawer/drawer-post-content.vue

@@ -159,11 +159,12 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, onBeforeUnmount, watch } from "vue";
 import { useNuxtApp } from "nuxt/app";
 import { useApi } from "../../composables/useApi";
 import { usePresignedUpload } from "../../composables/usePresignedUpload";
 import { CONTENT_COVER_COLORS } from "../../composables/useContentCard";
+import { createVideoThumbnail } from "../../utils/createVideoThumbnail";
 const emit = defineEmits(["success", "saveDraft"]);
 const { $toast, $alert } = useNuxtApp();
 const api = useApi();
@@ -188,6 +189,7 @@ const selectedColor = ref(colors[0].hex);
 const coverText = ref("");
 const coverFiles = ref([]);
 const posterFiles = ref([]);
+const generatedPoster = ref(null);
 const description = ref("");
 const fileColumns = ref(false);
 const selectedPlaces = ref([]);
@@ -227,6 +229,43 @@ watch(coverFileType, (type) => {
     posterFiles.value = [];
   }
 });
+let generatedPosterUrl = "";
+let thumbnailGeneration = 0;
+let thumbnailPromise = Promise.resolve();
+const clearGeneratedPoster = () => {
+  if (generatedPosterUrl) URL.revokeObjectURL(generatedPosterUrl);
+  generatedPosterUrl = "";
+  generatedPoster.value = null;
+};
+watch(
+  [() => coverFiles.value[0]?.file, () => posterFiles.value[0]],
+  ([videoFile, manualPoster]) => {
+    const generation = ++thumbnailGeneration;
+    clearGeneratedPoster();
+    if (manualPoster || typeof File === "undefined" || !(videoFile instanceof File) || !videoFile.type.startsWith("video/")) {
+      thumbnailPromise = Promise.resolve();
+      return;
+    }
+    thumbnailPromise = createVideoThumbnail(videoFile).then((thumbnail) => {
+      if (generation !== thumbnailGeneration) return;
+      generatedPosterUrl = URL.createObjectURL(thumbnail);
+      generatedPoster.value = {
+        file: thumbnail,
+        url: generatedPosterUrl,
+        mediaType: "image"
+      };
+    }).catch(() => {
+    });
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => {
+  thumbnailGeneration++;
+  clearGeneratedPoster();
+});
+const effectivePoster = computed(
+  () => posterFiles.value[0] ?? generatedPoster.value
+);
 const previewItem = computed(() => {
   if (hasCoverFile.value) {
     const file = coverFiles.value[0];
@@ -234,7 +273,7 @@ const previewItem = computed(() => {
       return {
         id: "preview",
         type: "video",
-        video: { src: file.url, poster: posterFiles.value[0]?.url },
+        video: { src: file.url, poster: effectivePoster.value?.url },
         title: description.value,
         location: previewLocation.value
       };
@@ -404,9 +443,12 @@ const submitContent = async (status) => {
   isSubmitting.value = true;
   try {
     const contentType = hasCoverFile.value ? coverFileType.value === "video" ? "video" : "image" : "post_it";
+    if (contentType === "video" && !posterFiles.value[0]) {
+      await thumbnailPromise;
+    }
     const [uploadedMedia, uploadedPoster] = await Promise.all([
       uploadFiles(coverFiles.value, "content-media"),
-      contentType === "video" ? uploadFiles(posterFiles.value, "content-media") : Promise.resolve([])
+      contentType === "video" && effectivePoster.value ? uploadFiles([effectivePoster.value], "content-media") : Promise.resolve([])
     ]);
     const media = uploadedMedia.map((item, index) => ({
       media_type: contentType === "video" ? "video" : "photo",

package/dist/runtime/components/input/input-mention.vue

@@ -44,8 +44,9 @@
                     />
                   </div>
                   <div v-if="post.type === 'video'" class="shrink-0">
-                    <div class="relative w-[40px] h-[40px] shrink-0">
+                    <div class="relative w-[40px] h-[40px] shrink-0 bg-black/20 rounded-[4px]">
                       <Image
+                        v-if="post.thumnail"
                         :src="post.thumnail"
                         :width="40"
                         :height="40"
@@ -185,8 +186,9 @@
           <Icon name="fa6-solid:message" size="24" class="text-primary" />
         </div>
         <div v-else-if="item.type === 'video'" class="shrink-0">
-          <div class="relative w-[40px] h-[40px] shrink-0">
+          <div class="relative w-[40px] h-[40px] shrink-0 bg-black/20 rounded-[4px]">
             <Image
+              v-if="item.thumnail"
               :src="item.thumnail"
               :width="40"
               :height="40"
@@ -243,7 +245,7 @@ const props = defineProps({
   label: { type: String, required: false, default: "\u0E01\u0E32\u0E23\u0E40\u0E2D\u0E48\u0E22\u0E16\u0E36\u0E07" },
   placeholder: { type: String, required: false, default: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E01\u0E32\u0E23\u0E40\u0E2D\u0E48\u0E22\u0E16\u0E36\u0E07" }
 });
-const api = useApi();
+const api = useApi({ includeProvince: false });
 const comboboxRef = ref();
 const selectedUsernames = ref([]);
 const isSelected = (id) => selectedUsernames.value.includes(id);
@@ -334,7 +336,7 @@ const mapContentToPostOption = (raw) => {
     type,
     title,
     image: type === "image" ? firstMedia?.url ?? null : null,
-    thumnail: type === "video" ? raw.video_poster_url || firstMedia?.url : void 0
+    thumnail: type === "video" ? raw.video_poster_url : void 0
   };
 };
 const mapBlogToOption = (raw) => ({

package/dist/runtime/composables/useApi.d.ts

@@ -1 +1,3 @@
-export declare const useApi: () => import("nitropack").$Fetch<unknown, import("nitropack").NitroFetchRequest>;
+export declare const useApi: (apiOptions?: {
+    includeProvince?: boolean;
+}) => import("nitropack").$Fetch<unknown, import("nitropack").NitroFetchRequest>;

package/dist/runtime/composables/useApi.js

@@ -1,5 +1,5 @@
 import { useRuntimeConfig, useCookie, useState } from "nuxt/app";
-export const useApi = () => {
+export const useApi = (apiOptions = {}) => {
   const config = useRuntimeConfig();
   const baseURL = config.public.BASE_URL_API;
   const provinceIdState = useState("pukaad:province-id", () => null);
@@ -20,7 +20,7 @@ export const useApi = () => {
         headers.set("Authorization", `Bearer ${secId.value}`);
       }
       const pid = provinceIdState.value ?? configProvinceId;
-      if (pid) {
+      if (apiOptions.includeProvince !== false && pid) {
         headers.set("X-Province-ID", String(pid));
       }
       if (businessProfileId.value) {

package/dist/runtime/utils/createVideoThumbnail.d.ts

@@ -0,0 +1 @@
+export declare const createVideoThumbnail: (file: File, atSecond?: number) => Promise<File>;

package/dist/runtime/utils/createVideoThumbnail.js

@@ -0,0 +1,47 @@
+export const createVideoThumbnail = (file, atSecond = 0.1) => new Promise((resolve, reject) => {
+  const video = document.createElement("video");
+  const objectUrl = URL.createObjectURL(file);
+  const timeout = window.setTimeout(fail, 1e4);
+  function cleanup() {
+    window.clearTimeout(timeout);
+    URL.revokeObjectURL(objectUrl);
+  }
+  function fail() {
+    cleanup();
+    reject(new Error("Failed to create video thumbnail"));
+  }
+  video.preload = "auto";
+  video.muted = true;
+  video.playsInline = true;
+  video.src = objectUrl;
+  video.addEventListener("error", fail, { once: true });
+  video.addEventListener(
+    "loadeddata",
+    () => {
+      const duration = Number.isFinite(video.duration) ? video.duration : 0;
+      const target = duration > 0 ? Math.min(atSecond, duration / 2) : 0;
+      if (target === 0) captureFrame();
+      else video.currentTime = target;
+    },
+    { once: true }
+  );
+  video.addEventListener("seeked", captureFrame, { once: true });
+  function captureFrame() {
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext("2d")?.drawImage(video, 0, 0);
+    canvas.toBlob(
+      (blob) => {
+        cleanup();
+        if (!blob)
+          return reject(new Error("Failed to create video thumbnail"));
+        resolve(
+          new File([blob], "video-thumbnail.jpg", { type: "image/jpeg" })
+        );
+      },
+      "image/jpeg",
+      0.85
+    );
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.423.0",
+  "version": "1.425.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",