@designcrowd/library.brand-page 5.15.2 → 5.15.3

package/src/shared/video-library/VideoLibrary.vue

@@ -0,0 +1,374 @@
+<template>
+  <div>
+    <TextInput
+      v-model="searchString"
+      size="md"
+      icon="search"
+      class="tw-py-2 tw-mb-2"
+      :placeholder="commonTr('search')"
+      :enable-clear="true"
+      @input="onSearchText"
+      @on-clear="onClearSearch"
+    />
+    <div
+      v-if="!isLoading && hasVideoLibraryCategories"
+      class="tw-grid tw-gap-4 tw-grid-cols-2"
+    >
+      <figure
+        v-for="(videoCategory, idx) in videoLibraryCategories"
+        :key="videoCategory.categoryName"
+        class="tw-rounded-md"
+      >
+        <button
+          class="c-media-btn tw-p-0 tw-border-none tw-cursor-pointer tw-relative"
+          :data-test-video-library-category="videoCategory.categoryName"
+          @click="onCategoryClicked(videoCategory.categoryName)"
+        >
+          <div
+            class="c-media-btn__overlay c-media-btn__overlay--category tw-h-100 tw-flex tw-items-center tw-justify-center tw-mb-0.5 tw-capitalize"
+          >
+            {{ videoCategory.categoryName }}
+          </div>
+          <video
+            :data-test-tag="`video-category-${idx}`"
+            :src="getVideoPreview(videoCategory.videos.videos[0].displaySizes)"
+            loop
+            muted
+            playsinline
+            class="c-media-btn__img hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500"
+            @mouseenter="mouseOverPreview"
+            @mouseleave="mouseLeavePreview"
+          >
+            {{ videoLibraryTr('supported') }}
+          </video>
+        </button>
+      </figure>
+    </div>
+    <div v-if="videoLibrary" class="tw-grid tw-gap-4 tw-grid-cols-2">
+      <figure
+        v-for="(video, idx) in videoLibrary.videos"
+        :key="`${idx}-${video.id}`"
+        class="c-media-btn tw-p-0 tw-border-none tw-cursor-pointer tw-relative tw-group"
+      >
+        <div
+          class="c-media-btn__overlay c-media-btn__overlay--video"
+          :data-test-video-library-item="`${idx}-${video.id}`"
+          @click="onVideoLibraryItemClicked(video)"
+        />
+        <div
+          v-if="video.isLoading"
+          class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-black tw-bg-opacity-50 tw-rounded-md"
+        >
+          <Loader />
+        </div>
+        <img
+          v-if="isMobile"
+          :src="getImagePreview(video.displaySizes)"
+          alt=""
+          class="c-media-btn__img hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500"
+        />
+        <video
+          v-else
+          :src="getVideoPreview(video.displaySizes)"
+          loop
+          muted
+          playsinline
+          class="c-media-btn__img hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500"
+          @mouseenter="mouseOverPreview"
+          @mouseleave="mouseLeavePreview"
+        >
+          {{ videoLibraryTr('emptyState') }}
+        </video>
+      </figure>
+    </div>
+    <p v-if="!isLoading && !hasVideos" class="tw-text-xs">
+      {{ commonTr('emptySearchLabel') }}
+    </p>
+    <div
+      v-if="!isLoading && canLoadMoreResults"
+      class="tw-mt-4 tw-w-100 tw-text-center"
+    >
+      <Button
+        :label="videoLibraryTr('loadMoreVideos')"
+        variant="outline"
+        size="small-medium"
+        @on-click.stop="getNextPageOfResults"
+      />
+    </div>
+    <div v-if="isLoading" class="tw-flex tw-justify-center tw-my-8">
+      <Loader />
+    </div>
+    <p class="tw-mt-4 tw-text-xs tw-text-grayscale-600">
+      {{ videoLibraryTr('poweredBy') }}
+      <a
+        href="https://www.gettyimages.com"
+        class="maker-anchor tw-no-underline"
+        target="_blank"
+        >Getty Images</a
+      >
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import GettyImagesClient from '../../clients/gettyimages-client';
+import { commonTr, videoLibraryTr } from '../../composables/useTranslate';
+import { Button, Loader, TextInput } from '@designcrowd/fe-shared-lib';
+import { useUiStore } from '../../brand-page-maker/stores';
+
+interface VideoItem {
+  id: string;
+  isLoading?: boolean;
+  displaySizes: Array<{ name: string; uri: string }>;
+}
+
+interface VideoLibraryData {
+  videos: VideoItem[];
+  resultCount: number;
+}
+
+interface Props {
+  isMobile?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isMobile: false,
+});
+
+// Store access
+const uiStore = useUiStore();
+const endpoints = computed(() => uiStore.endpoints);
+
+// Reactive data
+const searchString = ref('');
+const gettyImagesClient = ref<GettyImagesClient | null>(null);
+const videoLibrary = ref<VideoLibraryData | null>(null);
+const currentVideoLibraryPage = ref(1);
+const videoLibraryCategories = ref<any[] | null>(null);
+const isLoading = ref(true);
+const isSearchReady = ref(false);
+const defaultLibrary = ref<VideoLibraryData | null>(null);
+const isCategorySearch = ref(false);
+const addVideosConcurrentlyLimit = ref(2);
+const numberOfVideosBeingAdded = ref(0);
+
+const SEARCH_DEBOUNCE_DELAY = 1500; // 1.5 seconds
+const MIN_SEARCH_LENGTH = 2;
+const VIDEOS_PER_PAGE = 10;
+
+const hasVideoLibraryCategories = computed(() => {
+  return (
+    !isLoading.value &&
+    !videoLibrary.value &&
+    videoLibraryCategories.value &&
+    videoLibraryCategories.value.length > 0
+  );
+});
+
+const hasVideos = computed(() => {
+  return (
+    videoLibrary.value &&
+    videoLibrary.value.videos &&
+    videoLibrary.value.videos.length > 0
+  );
+});
+
+const canLoadMoreResults = computed(() => {
+  return (
+    !isLoading.value &&
+    videoLibrary.value &&
+    currentVideoLibraryPage.value <=
+      videoLibrary.value.resultCount / VIDEOS_PER_PAGE
+  );
+});
+
+// Methods
+const onSearchText = () => {
+  if (searchString.value.length >= MIN_SEARCH_LENGTH) {
+    setTimeout(() => {
+      if (searchString.value.length >= MIN_SEARCH_LENGTH) {
+        searchVideos();
+      }
+    }, SEARCH_DEBOUNCE_DELAY);
+  }
+};
+
+const onClearSearch = () => {
+  resetSearch();
+};
+
+const onCategoryClicked = (categoryName: string) => {
+  searchVideos(categoryName, true);
+};
+
+const getNextPageOfResults = async (): Promise<void> => {
+  currentVideoLibraryPage.value += 1;
+
+  try {
+    isLoading.value = true;
+    const res = await gettyImagesClient.value!.searchVideosAsync(
+      searchString.value,
+      currentVideoLibraryPage.value,
+    );
+
+    if (res && res.videos && res.videos.length > 0) {
+      videoLibrary.value!.videos = [
+        ...videoLibrary.value!.videos,
+        ...res.videos,
+      ];
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const getCategories = async (): Promise<void> => {
+  try {
+    isLoading.value = true;
+    videoLibraryCategories.value =
+      await gettyImagesClient.value!.getDefaultCategoriesAsync();
+    console.log('videoLibraryCategories', videoLibraryCategories.value);
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const resetSearch = (): void => {
+  searchString.value = '';
+  videoLibrary.value = null;
+  getCategories();
+};
+
+const searchVideos = async (
+  str?: string,
+  isCategorySearchParam = false,
+): Promise<void> => {
+  try {
+    searchString.value = str || searchString.value;
+    currentVideoLibraryPage.value = 1;
+    isLoading.value = true;
+    isCategorySearch.value = isCategorySearchParam;
+
+    if (searchString.value) {
+      videoLibrary.value = null;
+      videoLibrary.value = await gettyImagesClient.value!.searchVideosAsync(
+        searchString.value,
+        1,
+      );
+    } else {
+      videoLibrary.value = defaultLibrary.value;
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const mouseOverPreview = (event: Event): void => {
+  const target = event.target as HTMLVideoElement;
+  target.play();
+};
+
+const mouseLeavePreview = (event: Event): void => {
+  const target = event.target as HTMLVideoElement;
+  target.pause();
+};
+
+const onVideoLibraryItemClicked = async (item: VideoItem): Promise<void> => {
+  if (item.isLoading) {
+    return;
+  }
+
+  if (numberOfVideosBeingAdded.value >= addVideosConcurrentlyLimit.value) {
+    window.alert(
+      `Maximum number of videos you can add is ${addVideosConcurrentlyLimit.value}`,
+    );
+    return;
+  }
+
+  setIsLoading(item, true);
+  const video = await gettyImagesClient.value!.getVideoByVideoIdAsync(item.id);
+  if (!video) {
+    window.alert('Error loading getty video, please try again');
+    setIsLoading(item, false);
+    return;
+  }
+
+  const gettyMediaObject = {
+    mediaData: {
+      provider: 'getty',
+      assetId: item.id,
+    },
+    imageSrc: video.imagePreviewAsset.uri,
+    videoSrc: video.videoPreviewAsset.uri,
+  };
+
+  // Emit the video selection event
+  emit('on-select-video', gettyMediaObject);
+
+  setIsLoading(item, false);
+};
+
+const setIsLoading = (item: VideoItem, loading: boolean): void => {
+  item.isLoading = loading;
+  numberOfVideosBeingAdded.value += loading ? 1 : -1;
+};
+
+const getVideoPreview = (
+  displaySizes: Array<{ name: string; uri: string }>,
+): string => {
+  return displaySizes.find((size) => size.name === 'preview')?.uri || '';
+};
+
+const getImagePreview = (
+  displaySizes: Array<{ name: string; uri: string }>,
+): string => {
+  return displaySizes.find((size) => size.name === 'comp_poster')?.uri || '';
+};
+
+const emit = defineEmits<{
+  'on-select-video': [video: any];
+}>();
+
+onMounted(async () => {
+  const gettySettings = {
+    mediaBaseUrl: endpoints.value.getGettyEndpoint,
+  };
+
+  gettyImagesClient.value = new GettyImagesClient(gettySettings);
+  await getCategories();
+
+  isSearchReady.value = true;
+});
+</script>
+<style scoped>
+.c-media-btn__img {
+  @apply tw-transition-shadow tw-duration-200 tw-ease-out tw-w-full tw-rounded-md;
+  aspect-ratio: 1;
+  object-fit: cover;
+  max-height: 150px;
+}
+
+.c-media-btn__overlay {
+  @apply tw-absolute tw-left-0 tw-bottom-0 tw-top-0 tw-right-0 tw-text-white tw-rounded-md tw-text-white tw-transition-all tw-duration-200;
+}
+
+.c-media-btn__overlay--category {
+  background-color: rgba(17, 21, 23, 0.66);
+}
+
+.c-media-btn__overlay--video:hover {
+  background-color: rgba(17, 21, 23, 0.33);
+}
+.c-media-btn {
+  @apply tw-w-full;
+  aspect-ratio: 1;
+  max-height: 150px;
+}
+</style>

package/src/shared/video-library/i18n/video-library.de-DE.json

@@ -0,0 +1,8 @@
+{
+  "videoLibrary" : {
+    "poweredBy" : "Powered by",
+    "emptyState" : "Ihr Browser unterstützt keine eingebetteten Videos.",
+    "loadMoreVideos" : "Weitere Videos laden",
+    "supported" : "Ihr Browser unterstützt keine eingebetteten Videos."
+  }
+}

package/src/shared/video-library/i18n/video-library.es-ES.json

@@ -0,0 +1,8 @@
+{
+  "videoLibrary" : {
+    "poweredBy" : "Desarrollado por",
+    "emptyState" : "Lo sentimos, tu navegador no admite vídeos incrustados.",
+    "loadMoreVideos" : "Carga más vídeos",
+    "supported" : "Lo sentimos, tu navegador no admite vídeos incrustados."
+  }
+}

package/src/shared/video-library/i18n/video-library.fr-CA.json

@@ -0,0 +1,8 @@
+{
+  "videoLibrary" : {
+    "poweredBy" : "Alimenté par",
+    "emptyState" : "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
+    "loadMoreVideos" : "Charger plus de vidéos",
+    "supported" : "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées."
+  }
+}

package/src/shared/video-library/i18n/video-library.fr-FR.json

@@ -0,0 +1,8 @@
+{
+  "videoLibrary" : {
+    "poweredBy" : "Alimenté par",
+    "emptyState" : "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
+    "loadMoreVideos" : "Charger plus de vidéos",
+    "supported" : "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées."
+  }
+}

package/src/shared/video-library/i18n/video-library.json

@@ -0,0 +1,8 @@
+{
+  "videoLibrary": {
+    "poweredBy": "Powered by",
+    "emptyState": "Sorry, your browser doesn't support embedded videos.",
+    "loadMoreVideos": "Load more videos",
+    "supported": "Sorry, your browser doesn't support embedded videos."
+  }
+}

package/src/shared/video-library/i18n/video-library.pt-BR.json

@@ -0,0 +1,8 @@
+{
+  "videoLibrary" : {
+    "poweredBy" : "Assegurado por",
+    "emptyState" : "Seu navegador não aceita vídeos incorporados.",
+    "loadMoreVideos" : "Carregar mais vídeos",
+    "supported" : "Seu navegador não aceita vídeos incorporados."
+  }
+}

package/src/shared/video-library/i18n/video-library.pt-PT.json

@@ -0,0 +1,8 @@
+{
+  "videoLibrary" : {
+    "poweredBy" : "Assegurado por",
+    "emptyState" : "Lamentamos, mas o seu navegador não suporta vídeos incorporados.",
+    "loadMoreVideos" : "Carregar mais vídeos",
+    "supported" : "Lamentamos, mas o seu navegador não suporta vídeos incorporados."
+  }
+}

package/lib/src/shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.mixin.d.ts

@@ -1,112 +0,0 @@
-import type { PropType } from 'vue';
-import type { Tab, ReplaceImageSettingsBase } from '../../models';
-import type { UserMediaItemWithDimensions } from '../../../my-uploads/models';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    mediaSettings: {
-        type: PropType<ReplaceImageSettingsBase>;
-        required: false;
-        default: undefined;
-    };
-    imageExtension: {
-        type: PropType<string[]>;
-        required: false;
-        default: () => string[];
-    };
-    mode: {
-        type: PropType<"images" | "edit">;
-        required: true;
-    };
-    isAdmin: {
-        type: BooleanConstructor;
-        required: true;
-        default: boolean;
-    };
-    activeTabs: {
-        type: PropType<("ICON" | "IMAGE_LIBRARY" | "MY_UPLOADS" | "MY_DESIGNS" | "SHAPE_LIBRARY")[]>;
-        required: true;
-    };
-    mediaType: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    sectionTitle: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    transparentBg: {
-        type: BooleanConstructor;
-        required: true;
-        default: boolean;
-    };
-    stickyBackBtn: {
-        type: BooleanConstructor;
-        required: true;
-        default: boolean;
-    };
-}>, {
-    isPrePurchase: import("vue").ComputedRef<boolean>;
-}, {
-    tabs: Tab[];
-}, {
-    enabledTabs(): Tab[];
-    isDeleteEnabled(): boolean;
-}, {
-    onBack(): void;
-    onImageSelected(image: Pick<UserMediaItemWithDimensions, 'url' | 'minimisedUrl' | 'width' | 'height'>): void;
-    onDeleteImage(image: Pick<UserMediaItemWithDimensions, 'url' | 'minimisedUrl' | 'width' | 'height'>): void;
-    onDesignSelected(image: UserMediaItemWithDimensions): void;
-    switchActiveTab(id: string): void;
-    onShapeSelected(image: UserMediaItemWithDimensions): Promise<void>;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    mediaSettings: {
-        type: PropType<ReplaceImageSettingsBase>;
-        required: false;
-        default: undefined;
-    };
-    imageExtension: {
-        type: PropType<string[]>;
-        required: false;
-        default: () => string[];
-    };
-    mode: {
-        type: PropType<"images" | "edit">;
-        required: true;
-    };
-    isAdmin: {
-        type: BooleanConstructor;
-        required: true;
-        default: boolean;
-    };
-    activeTabs: {
-        type: PropType<("ICON" | "IMAGE_LIBRARY" | "MY_UPLOADS" | "MY_DESIGNS" | "SHAPE_LIBRARY")[]>;
-        required: true;
-    };
-    mediaType: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    sectionTitle: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    transparentBg: {
-        type: BooleanConstructor;
-        required: true;
-        default: boolean;
-    };
-    stickyBackBtn: {
-        type: BooleanConstructor;
-        required: true;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    mediaType: string;
-    mediaSettings: ReplaceImageSettingsBase;
-    sectionTitle: string;
-    imageExtension: string[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.mixin.js

@@ -1,135 +0,0 @@
-import { computed, defineComponent } from 'vue';
-import { useBrandPageContainerStore, } from '../../../../brand-page-maker/stores';
-import axios from 'axios';
-import { getColorReplacementsFromSvgString } from '../../../../brand-page/utils/svg-color.util';
-import { tr } from '../../../../composables/useTranslate';
-const imageSettingTr = (key) => tr(`replaceImageSetting.${key}`);
-export default defineComponent({
-    props: {
-        mediaSettings: {
-            type: Object,
-            required: false,
-            default: undefined,
-        },
-        imageExtension: {
-            type: Array,
-            required: false,
-            default: () => ['.jpg', '.jpeg', '.png'],
-        },
-        mode: {
-            type: Object,
-            required: true,
-        },
-        isAdmin: {
-            type: Boolean,
-            required: true,
-            default: false,
-        },
-        activeTabs: {
-            type: Array,
-            required: true,
-        },
-        mediaType: {
-            type: String,
-            required: false,
-            default: '',
-        },
-        sectionTitle: {
-            type: String,
-            required: false,
-            default: '',
-        },
-        transparentBg: {
-            type: Boolean,
-            required: true,
-            default: false,
-        },
-        stickyBackBtn: {
-            type: Boolean,
-            required: true,
-            default: true,
-        },
-    },
-    setup() {
-        const containerStore = useBrandPageContainerStore();
-        return {
-            isPrePurchase: computed(() => containerStore.isPrePurchase),
-        };
-    },
-    data() {
-        return {
-            tabs: [
-                {
-                    id: 'ICON',
-                    label: imageSettingTr('icon'),
-                    active: false,
-                },
-                {
-                    id: 'MY_UPLOADS',
-                    label: imageSettingTr('myUploads'),
-                    active: false,
-                },
-                {
-                    id: 'MY_DESIGNS',
-                    label: imageSettingTr('myDesigns'),
-                    active: false,
-                },
-                {
-                    id: 'IMAGE_LIBRARY',
-                    label: imageSettingTr('imageLibrary'),
-                    active: false,
-                },
-                {
-                    id: 'SHAPE_LIBRARY',
-                    label: imageSettingTr('shapeLibrary'),
-                    active: false,
-                },
-            ],
-        };
-    },
-    computed: {
-        enabledTabs() {
-            const value = this.tabs
-                .filter((x) => x.id !== 'MY_DESIGNS' || !this.isAdmin)
-                .filter((x) => this.activeTabs.some((y) => y === x.id) &&
-                (!this.isPrePurchase || x.id !== 'MY_DESIGNS'));
-            return value;
-        },
-        isDeleteEnabled() {
-            return true;
-        },
-    },
-    created() {
-        if (this.enabledTabs.length > 0) {
-            this.enabledTabs[0].active = true;
-        }
-    },
-    methods: {
-        onBack() {
-            this.$emit('on-back');
-        },
-        onImageSelected(image) {
-            this.$emit('on-image-picked', image, this.mediaType);
-        },
-        onDeleteImage(image) {
-            this.$emit('on-image-removed', image);
-        },
-        onDesignSelected(image) {
-            this.$emit('on-design-selected', image);
-        },
-        switchActiveTab(id) {
-            this.tabs.forEach((tab) => tab.id === id ? (tab.active = true) : (tab.active = false));
-        },
-        async onShapeSelected(image) {
-            const svgResponse = await axios.get(image.url);
-            const colorReplacements = getColorReplacementsFromSvgString(svgResponse.data);
-            this.$emit('on-shape-selected', {
-                imageUrl: image.url,
-                width: image.width,
-                height: image.height,
-                colorReplacements,
-                aspectRatio: image.aspectRatio,
-            });
-        },
-    },
-});