@designcrowd/library.brand-page 5.6.2 → 5.6.3

package/lib/src/shared/my-uploads/MyMedia.mixin.d.ts

@@ -1,5 +1,6 @@
 import type { PropType } from 'vue';
 import type { UserMediaItemWithDimensions } from './models';
+import { UserMediaClient } from '../../clients/user-media-client';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isDeleteEnabled: {
         type: BooleanConstructor;
@@ -61,6 +62,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDeleting: boolean;
     selectedDeleteMediaItem: UserMediaItemWithDimensions | null;
     userMedia: UserMediaItemWithDimensions[];
+    userMediaClient: UserMediaClient | null;
     loading: boolean;
 }, {
     filteredUserMedia(): UserMediaItemWithDimensions[];
@@ -74,6 +76,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onMediaDeleteConfirmClick(image: UserMediaItemWithDimensions): Promise<void>;
     deleteSelectedDeleteMediaItem(): Promise<void>;
     isSvg(imageUrl: string | undefined): boolean;
+    onMediaStatusUpdatedToDone(data: any): Promise<void>;
+    isImageUploaded(image: any): boolean;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     isDeleteEnabled: {
         type: BooleanConstructor;

package/lib/src/shared/my-uploads/MyMedia.mixin.js

@@ -1,6 +1,6 @@
 import { UI_EVENTS } from '../../brand-page-maker/constants';
 import { computed, defineComponent } from 'vue';
-import { getInstance as getUserMediaClientInstance } from '../../clients/user-media-client';
+import { getInstance as getUserMediaClientInstance, UserMediaClient, } from '../../clients/user-media-client';
 import { preloadImage } from '../../brand-page/utils';
 import { useUiStore } from '../../brand-page-maker/stores';
 import { MEDIA_TYPES } from '../../brand-page/models/brand-page-context.model';
@@ -33,6 +33,7 @@ export default defineComponent({
             isDeleting: false,
             selectedDeleteMediaItem: null,
             userMedia: [],
+            userMediaClient: null,
             loading: false,
         };
     },
@@ -51,6 +52,7 @@ export default defineComponent({
         },
     },
     async mounted() {
+        this.userMediaClient = getUserMediaClientInstance(this.endpoints);
         await this.loadUserMedia();
         if (window) {
             window.addEventListener(UI_EVENTS.refreshUserMediaEvent, this.onRefreshMedia);
@@ -64,8 +66,7 @@ export default defineComponent({
     methods: {
         async loadUserMedia() {
             this.loading = true;
-            const userMediaClient = getUserMediaClientInstance(this.endpoints);
-            const images = await userMediaClient.getUserMediaAsync(this.supportedFileExtensions, true, this.mediaType);
+            const images = await this.userMediaClient.getUserMediaAsync(this.supportedFileExtensions, true, this.mediaType);
             if (Array.isArray(images)) {
                 await Promise.all(images.map(async (x) => {
                     const image = await preloadImage(x.thumbnailUrl || x.url);
@@ -114,8 +115,7 @@ export default defineComponent({
             }
             this.isDeleting = true;
             try {
-                const userMediaClient = getUserMediaClientInstance(this.endpoints);
-                const deleted = await userMediaClient.deleteUserMediaByUserMediaToken(this.selectedDeleteMediaItem.media.token);
+                const deleted = await this.userMediaClient.deleteUserMediaByUserMediaToken(this.selectedDeleteMediaItem.media.token);
                 if (deleted) {
                     this.selectedDeleteMediaItem = null;
                     await this.onRefreshMedia();
@@ -128,5 +128,24 @@ export default defineComponent({
         isSvg(imageUrl) {
             return imageUrl?.endsWith('.svg') || false;
         },
+        async onMediaStatusUpdatedToDone(data) {
+            const newMedia = this.userMedia.map((m) => {
+                if (m.media.token === data.media.token) {
+                    return {
+                        imagePreviewSrc: data.thumbnailUrl,
+                        imageSrc: data.url,
+                        ...data,
+                    };
+                }
+                return m;
+            });
+            this.userMedia = newMedia;
+        },
+        isImageUploaded(image) {
+            if (image.media && image.media.status) {
+                return image.media.status === 'done';
+            }
+            return true;
+        },
     },
 });

package/lib/src/shared/my-uploads/MyUploads.mixin.js

@@ -137,7 +137,7 @@ export default defineComponent({
         async onDropzoneImageUploaderSuccess(file) {
             const { mediaToken, name, type } = file;
             if (this.userMediaClient) {
-                await this.userMediaClient.insertUserMediaAsync(mediaToken, name, type, true, undefined, this.mediaType);
+                await this.userMediaClient.insertUserMediaAsync(mediaToken, name, type, true, undefined, this.mediaType, true);
             }
             this.dropzoneImageUploaderRef?.removeAllFiles();
             // Dispatch the refresh event in the dropzone success event handler

package/lib/src/shared/my-uploads/models.d.ts

@@ -4,6 +4,7 @@ interface UserMediaItemMedia {
     name: string;
     mimeType: string;
     createdOn: string;
+    status: string;
 }
 export interface UserMediaItem {
     url: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.6.2",
+  "version": "5.6.3",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/clients/user-media-client.ts

@@ -24,7 +24,7 @@ export class UserMediaClient {
 
     try {
       const response = await axios.get<PolicyData>(
-        `${this.endpoints.userPolicyDataEndpoint}?isPublic=${isPublic}`,
+        `${this.endpoints.userPolicyDataEndpoint}?isPublic=${isPublic}&isUpload=true`,
       );
 
       if (response.status !== 200) {
@@ -56,19 +56,21 @@ export class UserMediaClient {
     isPublic: boolean,
     relatedAssetToken: string | undefined,
     mediaType: string,
+    hasTriggeredProcessing: boolean,
   ): Promise<UserMediaItem | undefined> {
     try {
-      const response = await axios.put<UserMediaItem>(
-        `${this.endpoints.createUserMediaEndpoint}/${mediaToken}`,
-        {
-          mediaToken,
-          mimeType: type,
-          name,
-          isPublic,
-          relatedAssetToken,
-          mediaType,
-        },
-      );
+      const reqUrl = hasTriggeredProcessing
+        ? `${this.endpoints.createUserMediaEndpoint}/${mediaToken}?hasTriggeredProcessing=${hasTriggeredProcessing}`
+        : `${this.endpoints.createUserMediaEndpoint}/${mediaToken}`;
+
+      const response = await axios.put<UserMediaItem>(reqUrl, {
+        mediaToken,
+        mimeType: type,
+        name,
+        isPublic,
+        relatedAssetToken,
+        mediaType,
+      });
 
       return response.data;
     } catch (e) {
@@ -118,6 +120,7 @@ export class UserMediaClient {
       true,
       relatedAssetToken,
       file.mediaType,
+      false,
     );
 
     return newMedia?.url;
@@ -132,9 +135,7 @@ export class UserMediaClient {
 
     file.mediaToken = mediaToken;
 
-    const key = `${this.policyData.keyPrefix}${
-      file.mediaToken
-    }${getExtensionFromMimeType(file.type)}`;
+    const key = `${this.policyData.keyPrefix}${file.mediaToken}`;
 
     file.key = key;
     formData.append('key', key);
@@ -178,6 +179,22 @@ export class UserMediaClient {
     }
   }
 
+  async getUserMediaByTokenAsync(
+    mediaToken: string,
+  ): Promise<UserMediaItem | undefined> {
+    try {
+      const response = await axios.get(
+        `${this.endpoints.getAllUserMediaEndpoint}/${mediaToken}?isPublic=true`,
+      );
+
+      return response.data;
+    } catch (e) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(e);
+      }
+    }
+  }
+
   async deleteUserMediaByUserMediaToken(
     userMediaToken: string,
   ): Promise<boolean> {

package/src/shared/my-uploads/MyMedia.mixin.ts

@@ -2,7 +2,10 @@ import { UI_EVENTS } from '../../brand-page-maker/constants';
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
 import type { UserMediaItemWithDimensions } from './models';
-import { getInstance as getUserMediaClientInstance } from '../../clients/user-media-client';
+import {
+  getInstance as getUserMediaClientInstance,
+  UserMediaClient,
+} from '../../clients/user-media-client';
 import { preloadImage } from '../../brand-page/utils';
 import { useUiStore } from '../../brand-page-maker/stores';
 import { MEDIA_TYPES } from '../../brand-page/models/brand-page-context.model';
@@ -37,6 +40,7 @@ export default defineComponent({
       isDeleting: false as boolean,
       selectedDeleteMediaItem: null as UserMediaItemWithDimensions | null,
       userMedia: [] as UserMediaItemWithDimensions[],
+      userMediaClient: null as UserMediaClient | null,
       loading: false,
     };
   },
@@ -56,6 +60,8 @@ export default defineComponent({
     },
   },
   async mounted() {
+    this.userMediaClient = getUserMediaClientInstance(this.endpoints);
+
     await this.loadUserMedia();
 
     if (window) {
@@ -76,8 +82,7 @@ export default defineComponent({
   methods: {
     async loadUserMedia() {
       this.loading = true;
-      const userMediaClient = getUserMediaClientInstance(this.endpoints);
-      const images = await userMediaClient.getUserMediaAsync(
+      const images = await this.userMediaClient.getUserMediaAsync(
         this.supportedFileExtensions,
         true,
         this.mediaType,
@@ -142,11 +147,10 @@ export default defineComponent({
       this.isDeleting = true;
 
       try {
-        const userMediaClient = getUserMediaClientInstance(this.endpoints);
-
-        const deleted = await userMediaClient.deleteUserMediaByUserMediaToken(
-          this.selectedDeleteMediaItem.media.token,
-        );
+        const deleted =
+          await this.userMediaClient.deleteUserMediaByUserMediaToken(
+            this.selectedDeleteMediaItem.media.token,
+          );
 
         if (deleted) {
           this.selectedDeleteMediaItem = null;
@@ -161,5 +165,29 @@ export default defineComponent({
     isSvg(imageUrl: string | undefined): boolean {
       return imageUrl?.endsWith('.svg') || false;
     },
+
+    async onMediaStatusUpdatedToDone(data) {
+      const newMedia = this.userMedia.map((m) => {
+        if (m.media.token === data.media.token) {
+          return {
+            imagePreviewSrc: data.thumbnailUrl,
+            imageSrc: data.url,
+            ...data,
+          };
+        }
+
+        return m;
+      });
+
+      this.userMedia = newMedia as UserMediaItemWithDimensions[];
+    },
+
+    isImageUploaded(image) {
+      if (image.media && image.media.status) {
+        return image.media.status === 'done';
+      }
+
+      return true;
+    },
   },
 });

package/src/shared/my-uploads/MyMedia.vue

@@ -25,15 +25,12 @@
             class="c-media-btn tw-p-0 tw-border-none tw-cursor-pointer"
             @click="setSelectedMediaItem(image)"
           >
-            <img
-              :data-test-tag="`user-media-${idx}`"
-              :src="image.thumbnailUrl || image.url"
-              alt=""
-              class="c-media-btn__img hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500"
-              :class="{
-                'tw-bg-grayscale-600': isSvg(image.url),
-                'tw-bg-white': !isSvg(image.url),
-              }"
+            <!-- new image item here -->
+            <app-media-selection-item
+              :image-test-tag="`user-media-${idx}`"
+              :item="image"
+              :media-client="userMediaClient"
+              @on-media-done="onMediaStatusUpdatedToDone"
             />
           </button>
           <!-- End media image -->
@@ -70,7 +67,7 @@
           <!-- End media delete confirmation -->
           <!-- Start media delete button -->
           <button
-            v-else-if="isDeleteEnabled"
+            v-else-if="isDeleteEnabled && isImageUploaded(image)"
             class="tw-absolute tw-bottom-15 tw-right-2 tw-bg-white tw-rounded tw-p-1 tw-border-none tw-cursor-pointer"
             @click="onMediaDeleteButtonClick(image)"
           >
@@ -93,12 +90,14 @@
 <script>
 import { Button, Icon, Loader } from '@designcrowd/fe-shared-lib';
 import MyMediaMixin from './MyMedia.mixin.ts';
+import MyMediaSelectionItem from './MyMediaSelectionItem.vue';
 
 export default {
   components: {
     Button,
     Icon,
     Loader,
+    appMediaSelectionItem: MyMediaSelectionItem,
   },
   mixins: [MyMediaMixin],
   setup(props, context) {

package/src/shared/my-uploads/MyMediaSelectionItem.vue

@@ -0,0 +1,137 @@
+<template>
+  <img
+    v-if="isDone"
+    :data-test-tag="props.imageTestTag"
+    :src="previewSrc"
+    alt=""
+    class="c-media-btn__img hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500"
+    :class="{
+      'tw-bg-grayscale-600': isSvg(previewSrc),
+      'tw-bg-white': !isSvg(previewSrc),
+    }"
+  />
+  <div v-else class="tw-w-full tw-h-full">
+    <div
+      v-if="error"
+      class="tw-flex tw-h-full tw-justify-center tw-items-center"
+    >
+      <Icon
+        name="error"
+        size="lg"
+        color="secondary-300"
+        classes="tw-self-center"
+      />
+    </div>
+    <div v-else class="tw-flex tw-h-full tw-justify-center tw-items-center">
+      <Loader />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineProps, defineEmits } from 'vue';
+import { Icon, Loader } from '@designcrowd/fe-shared-lib';
+import type { UserMediaClient } from 'src/clients/user-media-client';
+import type { UserMediaItemWithDimensions } from './models';
+
+const MAX_POLL = 5;
+const EXTRA_WAIT_TIME_EVERY_10_POLL = 2000;
+const POLL_WAIT = 5000;
+
+const props = defineProps<{
+  imageTestTag: string;
+  item: UserMediaItemWithDimensions;
+  mediaClient: UserMediaClient;
+}>();
+
+const emit = defineEmits<{
+  (e: string, payload: any): void;
+}>();
+
+const isDone = ref(false);
+const previewSrc = ref<string>('');
+const error = ref(false);
+const currentPoll = ref(0);
+
+function isSvg(imageUrl: string | null): boolean {
+  return imageUrl?.endsWith('.svg') || false;
+}
+
+async function checkStatusAsync(): Promise<boolean> {
+  currentPoll.value += 1;
+
+  const data = await props.mediaClient.getUserMediaByTokenAsync(
+    props.item.media.token,
+  );
+
+  if (data) {
+    const status = data.media.status;
+
+    if (status === 'inprogress') {
+      return true;
+    }
+
+    if (status === 'done') {
+      emit('on-media-done', data);
+      previewSrc.value = data.thumbnailUrl ?? data.url ?? '';
+      isDone.value = true;
+    } else if (status === 'failed') {
+      error.value = true;
+    }
+  }
+
+  return false;
+}
+
+async function handleProgressAsync() {
+  let repeat = true;
+
+  try {
+    do {
+      repeat = await checkStatusAsync();
+
+      if (currentPoll.value >= MAX_POLL) {
+        error.value = true;
+        repeat = false;
+      }
+
+      // For every 10th poll, add extra wait time
+      const everyTenth = Math.floor(9 / 10);
+      const timeToWait = POLL_WAIT + everyTenth * EXTRA_WAIT_TIME_EVERY_10_POLL;
+
+      await new Promise((r) => setTimeout(r, timeToWait));
+    } while (repeat);
+  } catch {
+    error.value = true;
+  }
+}
+
+onMounted(() => {
+  const status = props.item.media.status;
+
+  if (status === 'inprogress') {
+    handleProgressAsync();
+  } else if (status === 'failed') {
+    error.value = true;
+  } else {
+    // If it's already done or has no status, just set up the image
+    previewSrc.value = props.item.thumbnailUrl ?? props.item.url ?? '';
+    isDone.value = true;
+  }
+});
+</script>
+
+<style scoped>
+.c-media-btn__img {
+  @apply tw-transition-shadow tw-duration-200 tw-ease-out tw-w-full tw-h-full tw-rounded-md tw-object-cover;
+}
+.c-media-btn__img:hover {
+  box-shadow: 0 0 0 3px rgb(0, 151, 215);
+}
+.tw-w-full {
+  width: 100%;
+}
+.tw-h-full {
+  height: 100%;
+}
+</style>

package/src/shared/my-uploads/MyUploads.mixin.ts

@@ -191,6 +191,7 @@ export default defineComponent({
           true,
           undefined,
           this.mediaType,
+          true,
         );
       }
 

package/src/shared/my-uploads/models.ts

@@ -4,6 +4,7 @@ interface UserMediaItemMedia {
   name: string;
   mimeType: string;
   createdOn: string;
+  status: string;
 }
 
 export interface UserMediaItem {