@xuda.io/xuda-widget-plugin-xuda-drive 1.0.1 → 1.0.3

package/index.mjs

@@ -72,10 +72,11 @@ export const methods = {
         label: "Drive Folder",
         type: "string",
       },
-      upload_tags: {
-        label: "Upload Set Tags",
-        type: "string",
+      file_tags: {
+        label: "File Tags",
+        type: "array",
         tooltip: "Separate with commas",
+        render: "chips",
       },
       auto_tag_generator: {
         label: "Auto Tag Generator",
@@ -141,8 +142,8 @@ export const methods = {
     name: "Viewer",
     tooltip: "",
     fields: {
-      file_upload_mime_type_preset: {
-        label: "Mime Type",
+      default_view_type: {
+        label: "Default View Type",
         type: "string",
         render: "select",
         tooltip: "",
@@ -152,16 +153,16 @@ export const methods = {
             value: "",
           },
           {
-            label: "Video",
-            value: "video",
+            label: "Thumbnails",
+            value: "thumbnails",
           },
           {
-            label: "Audio",
-            value: "audio",
+            label: "List",
+            value: "list",
           },
           {
-            label: "Image",
-            value: "image",
+            label: "Slider",
+            value: "slider",
           },
         ],
       },
@@ -175,6 +176,38 @@ export const methods = {
         type: "string",
         tooltip: "Separate with commas",
       },
+      sort_by: {
+        label: "Sort By",
+        type: "string",
+        render: "select",
+        tooltip: "",
+        options: [
+          {
+            label: "File Name",
+            value: "",
+          },
+          {
+            label: "Date Modified",
+            value: "date",
+          },
+        ],
+      },
+      sort_order: {
+        label: "Sort Order",
+        type: "string",
+        render: "segment",
+        tooltip: "",
+        options: [
+          {
+            label: "Ascending",
+            value: "",
+          },
+          {
+            label: "Descending",
+            value: "descending",
+          },
+        ],
+      },
     },
     response: { uploaded_files: "" },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xuda.io/xuda-widget-plugin-xuda-drive",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Xuda Drive widget plugin",
   "scripts": {
     "pub": "npm version patch --force && npm publish  --access public"

package/runtime.mjs

@@ -325,6 +325,32 @@ export async function upload(fields, e) {
         formData.append("folder", fields.file_upload_folder);
         formData.append("public", fields.public_file);
 
+        let tags = [];
+
+        if (fields.file_tags) {
+          function csvToArray(csvString) {
+            // Split the string into rows (by newline)
+            const rows = csvString.split("\n");
+
+            // Map through each row and split by commas to create arrays for each row
+            return rows.map((row) => row.split(","));
+          }
+          tags = csvToArray(fields.upload_tags);
+        }
+
+        if (fields.auto_tag_generator) {
+          let identifier = fields.auto_tag_identifier || " ";
+          let file_tags = file.name.split(identifier);
+          if (fields.auto_tag_translations) {
+            for (let tag of file_tags) {
+              if (auto_tag_translations[tag]) {
+                tag = auto_tag_translations[tag];
+              }
+            }
+          }
+        }
+        formData.append("tags", [...tags, ...file_tags]);
+
         const request = new XMLHttpRequest();
 
         let _domain = e._session.domain;
@@ -510,7 +536,7 @@ export async function viewer(fields, e) {
     <!-- Gallery -->
     <section class="mt-8 pb-16" aria-labelledby="gallery-heading">
       <h2 id="gallery-heading" class="sr-only">Recently viewed</h2>
-      <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8 [&>li>div>img]:aspect-[3/2]">
         <li class="relative">
           <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 ring-2 ring-indigo-500 ring-offset-2" x-state:on="Current" x-state:off="Default" x-state-description='Current: "ring-2 ring-indigo-500 ring-offset-2", Default: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
             <img src="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover" x-state:on="Current" x-state:off="Default" x-state-description='Current: "", Default: "group-hover:opacity-75"' />
@@ -521,236 +547,7 @@ export async function viewer(fields, e) {
           <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4985.HEIC</p>
           <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
         </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1614926857083-7be149266cda?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_5214.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_5214.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1614705827065-62c3dc488f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_3851.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_3851.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.8 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_4278.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4278.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4.1 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1586348943529-beaae6c28db9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_6842.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_6842.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_3284.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_3284.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_4841.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4841.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.8 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1492724724894-7464c27d0ceb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_5644.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_5644.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1513682322455-ea8b2d81d418?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_4945.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4945.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1463107971871-fbac9ddb920f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_2156.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_2156.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4.1 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1552461871-ce4f9fb3b438?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_6945.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_6945.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4.2 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1446292532430-3e76f6ab6444?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_1846.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_1846.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.6 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1508669232496-137b159c1cdb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_4769.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4769.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.3 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1431512284068-4c4002298068?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_9513.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_9513.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1581320546160-0078de357255?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_8451.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_8451.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.4 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1541956628-68d338ae09d5?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_1298.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_1298.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4.1 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_6222.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_6222.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1582029133746-96031e5c8d00?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_7451.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_7451.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.8 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1575868053350-9fd87f68f984?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_9815.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_9815.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1588391051471-1a5283d5a625?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_1025.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_1025.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1575314146619-ec67b6213351?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_6010.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_6010.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.1 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1579874107960-e602329ef20a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_1004.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_1004.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">4.4 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/flagged/photo-1551385229-2925ed4eb53d?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_8499.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_8499.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.4 MB</p>
-        </li>
-        <li class="relative">
-          <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-            <img src="https://images.unsplash.com/photo-1498575637358-821023f27355?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
-            <button type="button" class="absolute inset-0 focus:outline-none">
-              <span class="sr-only">View details for IMG_2154.HEIC</span>
-            </button>
-          </div>
-          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_2154.HEIC</p>
-          <p class="pointer-events-none block text-sm font-medium text-gray-500">3.8 MB</p>
-        </li>
+       
       </ul>
     </section>
   </div>
@@ -759,4 +556,48 @@ export async function viewer(fields, e) {
 `;
 
   e.$containerP.html(html);
+
+  const fetchWithTimeout = (url, options = {}, timeout = 600000) => {
+    // 100 seconds
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    const timeoutPromise = new Promise((_, reject) =>
+      setTimeout(() => {
+        controller.abort();
+        reject(new Error("Request timed out"));
+      }, timeout)
+    );
+
+    const fetchPromise = fetch(url, { ...options, signal });
+
+    return Promise.race([fetchPromise, timeoutPromise]);
+  };
+
+  let opt = {};
+
+  try {
+    let domain =
+      e._session.engine_mode === "live_preview" ? `dev.xuda.io` : `xuda.io`;
+
+    const response = await fetchWithTimeout(
+      `https://${domain}/cpi/search_drive_files_workspace`,
+      {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+          "xu-gtp-token": e_session.gtp_token,
+          "xu-app-token": e_session.app_token,
+        },
+        body: JSON.stringify(opt),
+      }
+    );
+
+    if (!response.ok) {
+      throw response.status;
+    }
+    const json = await response.json();
+    return json;
+  } catch (err) {}
 }