@designcrowd/library.brand-page 5.15.3 → 5.15.4

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

@@ -1,374 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-{
-  "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

@@ -1,8 +0,0 @@
-{
-  "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

@@ -1,8 +0,0 @@
-{
-  "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

@@ -1,8 +0,0 @@
-{
-  "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

@@ -1,8 +0,0 @@
-{
-  "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

@@ -1,8 +0,0 @@
-{
-  "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

@@ -1,8 +0,0 @@
-{
-  "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."
-  }
-}