@designcrowd/library.brand-page 5.15.2 → 5.15.3

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.stories.js

@@ -23,6 +23,7 @@ export const Sample = () => {
         canUsePremiumFontFamily: true,
         canUseRichTextEditor: false,
         maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
+        canUseGettyVideos: true,
     };
     const pinia = setupStoryPinia();
     const contentSettingsStore = useUiContentSettingsStore();

package/lib/src/shared/content-settings/models.d.ts

@@ -15,6 +15,7 @@ export interface FieldSettingsBase {
 export declare const ReplaceImageSettingsTabIds: {
     readonly ICON: "ICON";
     readonly IMAGE_LIBRARY: "IMAGE_LIBRARY";
+    readonly VIDEO_LIBRARY: "VIDEO_LIBRARY";
     readonly MY_UPLOADS: "MY_UPLOADS";
     readonly MY_DESIGNS: "MY_DESIGNS";
     readonly SHAPE_LIBRARY: "SHAPE_LIBRARY";

package/lib/src/shared/content-settings/models.js

@@ -1,6 +1,7 @@
 export const ReplaceImageSettingsTabIds = {
     ICON: 'ICON',
     IMAGE_LIBRARY: 'IMAGE_LIBRARY',
+    VIDEO_LIBRARY: 'VIDEO_LIBRARY',
     MY_UPLOADS: 'MY_UPLOADS',
     MY_DESIGNS: 'MY_DESIGNS',
     SHAPE_LIBRARY: 'SHAPE_LIBRARY',

package/lib/src/shared/models.d.ts

@@ -23,6 +23,7 @@ export interface Endpoints {
     getAllUserMediaEndpoint: string;
     userPolicyDataEndpoint: string;
     getUnsplashMediaRootEndpoint: string;
+    getGettyEndpoint: string;
 }
 export declare const UI_EVENT_SOURCES: {
     readonly contentSettings: "contentSettings";

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

@@ -12,6 +12,7 @@ const defaultUserEndpoints = {
     getAllUserMediaEndpoint: GET_ALL_USER_MEDIA_ENDPOINT,
     userPolicyDataEndpoint: USER_POLICY_DATA_ENDPOINT,
     getUnsplashMediaRootEndpoint: '',
+    getGettyEndpoint: '',
 };
 const supportedFileExtensions = ['jpg', 'png', 'gif'];
 const mediaType = 'favicon';

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -3104,6 +3104,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         canUsePremiumFontFamily: boolean;
         maxNumOfPages: number;
         canUseRichTextEditor: boolean;
+        canUseGettyVideos: boolean;
     }>;
     isAdmin: import("vue").ComputedRef<boolean>;
     isBrandSite: import("vue").ComputedRef<boolean>;

package/package.json

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

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -1461,6 +1461,7 @@ export const SampleImageUpload = (): any => {
         userPolicyDataEndpoint:
           'http://localhost:3600/maker/api/users/policy-data',
         getUnsplashMediaRootEndpoint: 'http://staging.brandcrowd.com',
+        getGettyEndpoint: 'http://staging.brandcrowd.com',
       },
     }),
   };

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -86,6 +86,7 @@ export const userFeatures: UserFeatures = {
   canUseRichTextEditor: true,
   canUsePremiumFontFamily: true,
   maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
+  canUseGettyVideos: false,
 };
 
 export const BRAND_PAGE: BrandPageData = {
@@ -2121,6 +2122,7 @@ export const INITIALISE_PAYLOAD: InitialisePayload = Object.freeze({
     canUseRichTextEditor: false,
     canUsePremiumFontFamily: true,
     maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
+    canUseGettyVideos: true,
   },
   logoDraftDesignAttributes: simpleLogoDesignAttributes,
   backUrl: '',

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -430,7 +430,7 @@ const shopReplaceImageSettings =
 
 const bannerSectionReplaceImageSettings =
   (): ContentReplaceImageSettings<BannerSectionContent> => ({
-    tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'SHAPE_LIBRARY'],
+    tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'VIDEO_LIBRARY', 'SHAPE_LIBRARY'],
     buttonTitleAdd: contentSettingsTr(`addImageButtonTitle`),
     titleAdd: contentSettingsTr(`addImageHeaderTitle`),
     titleReplace: contentSettingsTr(`imageReplaceTitle`),

package/src/brand-page-maker/constants/index.ts

@@ -43,6 +43,7 @@ export const DEFAULT_USER_ENDPOINTS: Readonly<Endpoints> = {
   getAllUserMediaEndpoint: GET_ALL_USER_MEDIA_ENDPOINT,
   userPolicyDataEndpoint: USER_POLICY_DATA_ENDPOINT,
   getUnsplashMediaRootEndpoint: '',
+  getGettyEndpoint: '',
 } as const;
 
 export const DEFAULT_ADMIN_ENDPOINTS: Readonly<Endpoints> = {
@@ -51,4 +52,5 @@ export const DEFAULT_ADMIN_ENDPOINTS: Readonly<Endpoints> = {
   getAllUserMediaEndpoint: GET_ALL_ADMIN_MEDIA_ENDPOINT,
   userPolicyDataEndpoint: ADMIN_POLICY_DATA_ENDPOINT,
   getUnsplashMediaRootEndpoint: '',
+  getGettyEndpoint: '',
 } as const;

package/src/brand-page-maker/stores/user/user-store.ts

@@ -29,6 +29,7 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
       canUseRichTextEditor: false,
       canUsePremiumFontFamily: false,
       maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
+      canUseGettyVideos: false,
     },
     emailAddress: '',
     hasBrandPagePremiumSubscription: false,

package/src/bundles/bundled-translations.de-DE.json

@@ -625,6 +625,7 @@
     "myUploads": "Meine Uploads",
     "myDesigns": "Meine Designs",
     "imageLibrary": "Bilderbibliothek",
+    "videoLibrary": "Videobibliothek",
     "shapeLibrary": "Formbibliothek"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Das gilt für alle Logos auf Ihrer Website.",
     "cancelLabel": "Abbrechen",
     "continueLabel": "Weiter"
+  },
+  "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/bundles/bundled-translations.es-ES.json

@@ -625,6 +625,7 @@
     "myUploads": "Mis subidas",
     "myDesigns": "Mis diseños",
     "imageLibrary": "Biblioteca de imágenes",
+    "videoLibrary": "Videoteca",
     "shapeLibrary": "Biblioteca de Formas"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Esto se aplicará a todos los logos de tu sitio web.",
     "cancelLabel": "Cancelar",
     "continueLabel": "Continuar"
+  },
+  "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/bundles/bundled-translations.fr-CA.json

@@ -625,6 +625,7 @@
     "myUploads": "Mes importations",
     "myDesigns": "Mes créations",
     "imageLibrary": "Bibliothèque d’images",
+    "videoLibrary": "Vidéothèque",
     "shapeLibrary": "Bibliothèque de formes"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Cela s’appliquera à tous les logos de votre site Web.",
     "cancelLabel": "Annuler",
     "continueLabel": "Continuer"
+  },
+  "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/bundles/bundled-translations.fr-FR.json

@@ -625,6 +625,7 @@
     "myUploads": "Mes importations",
     "myDesigns": "Mes créations",
     "imageLibrary": "Bibliothèque d’images",
+    "videoLibrary": "Vidéothèque",
     "shapeLibrary": "Bibliothèque de formes"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Cela s’appliquera à tous les logos de votre site Web.",
     "cancelLabel": "Annuler",
     "continueLabel": "Continuer"
+  },
+  "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/bundles/bundled-translations.json

@@ -625,6 +625,7 @@
     "myUploads": "My Uploads",
     "myDesigns": "My Designs",
     "imageLibrary": "Image Library",
+    "videoLibrary": "Video Library",
     "shapeLibrary": "Shape Library"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "This will apply to all the logos in your website.",
     "cancelLabel": "Cancel",
     "continueLabel": "Continue"
+  },
+  "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/bundles/bundled-translations.pt-BR.json

@@ -625,6 +625,7 @@
     "myUploads": "Meus uploads",
     "myDesigns": "Meus designs",
     "imageLibrary": "Biblioteca de imagens",
+    "videoLibrary": "Biblioteca de vídeos",
     "shapeLibrary": "Biblioteca de formas"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Isso se aplicará a todos os logotipos do seu site.",
     "cancelLabel": "Cancelar",
     "continueLabel": "Continuar"
+  },
+  "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/bundles/bundled-translations.pt-PT.json

@@ -625,6 +625,7 @@
     "myUploads": "Os meus carregamentos",
     "myDesigns": "Os meus designs",
     "imageLibrary": "Biblioteca de imagens",
+    "videoLibrary": "Videoteca",
     "shapeLibrary": "Biblioteca de Formas"
   },
   "shapeField": {
@@ -839,5 +840,11 @@
     "applyMessage": "Isto vai aplicar-se a todos os logótipos no seu website.",
     "cancelLabel": "Cancelar",
     "continueLabel": "Continuar"
+  },
+  "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/src/composables/useTranslate.ts

@@ -201,6 +201,7 @@ const videoTr = (key, valuesToInterpolate = {}) =>
   tr(`video.${key}`, valuesToInterpolate);
 const confirmModalTr = (key, valuesToInterpolate = {}) =>
   tr(`confirmModal.${key}`, valuesToInterpolate);
+const videoLibraryTr = (key) => tr(`videoLibrary.${key}`);
 const logoSwitchConfirmationModalTr = (key, valuesToInterpolate = {}) =>
   tr(`logoSwitchConfirmationModal.${key}`, valuesToInterpolate);
 const logoTemplateSearchModalTr = (key, valuesToInterpolate = {}) =>
@@ -299,6 +300,7 @@ export {
   videoTr,
   bookingUrlFieldTr,
   confirmModalTr,
+  videoLibraryTr,
   logoSwitchConfirmationModalTr,
   logoTemplateSearchModalTr,
 };

package/src/constants/ui.ts

@@ -11,6 +11,7 @@ export interface UIUserFeatures {
   canUsePremiumFontFamily: boolean;
   maxNumOfPages: number;
   canUseRichTextEditor: boolean;
+  canUseGettyVideos: boolean;
 }
 
 export const TEMPLATE_FIRST_PAGE_NO = 1;

package/src/shared/content-settings/components/content-settings/ContentSettings.stories.ts

@@ -29,6 +29,7 @@ export const Sample = (): any => {
     canUsePremiumFontFamily: true,
     canUseRichTextEditor: false,
     maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
+    canUseGettyVideos: true,
   };
 
   const pinia = setupStoryPinia();

package/src/shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.vue

@@ -52,10 +52,10 @@
           :is-delete-enabled="isDeleteEnabled"
           :media-type="mediaType"
           :supported-file-extensions="imageExtension"
-          :desired-width="mediaSettings.desiredWidth"
-          :desired-height="mediaSettings.desiredHeight"
-          :max-file-size="mediaSettings.maxFilesize"
-          :max-files="mediaSettings.maxFiles"
+          :desired-width="mediaSettings?.desiredWidth"
+          :desired-height="mediaSettings?.desiredHeight"
+          :max-file-size="mediaSettings?.maxFilesize"
+          :max-files="mediaSettings?.maxFiles"
           @on-select-image="onImageSelected"
           @on-delete-image="onDeleteImage"
         />
@@ -65,6 +65,9 @@
         <div v-if="tab.id === 'IMAGE_LIBRARY'">
           <UnsplashLibrary @on-select-image="onDesignSelected" />
         </div>
+        <div v-if="tab.id === 'VIDEO_LIBRARY'">
+          <VideoLibrary @on-select-video="onDesignSelected" />
+        </div>
         <div v-if="tab.id === 'SHAPE_LIBRARY'">
           <ShapeLibrary @on-select-image="onShapeSelected" />
         </div>
@@ -72,28 +75,221 @@
     </div>
   </div>
 </template>
-<script>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { Button } from '@designcrowd/fe-shared-lib';
 import MyUploads from '../../../my-uploads/MyUploads.vue';
 import MyDesigns from '../../../my-designs/MyDesigns.vue';
 import IconLibrary from '../icon-library/IconLibrary.vue';
-import ReplaceImageBaseSettings from './ReplaceImageBaseSettings.mixin';
 import UnsplashLibrary from '../../../unsplash-library/UnsplashLibrary.vue';
 import ShapeLibrary from '../../../shape-library/ShapeLibrary.vue';
-import { commonTr } from '../../../../composables/useTranslate';
-
-export default {
-  components: {
-    Button,
-    MyDesigns,
-    MyUploads,
-    IconLibrary,
-    UnsplashLibrary,
-    ShapeLibrary,
+import VideoLibrary from '../../../video-library/VideoLibrary.vue';
+import type {
+  Tab,
+  ReplaceImageSettingsTabId,
+  ReplaceImageSettingsBase,
+} from '../../models';
+import type { UserMediaItemWithDimensions } from '../../../my-uploads/models';
+import {
+  useBrandPageContainerStore,
+  useBrandPageMakerUserStore,
+  type BrandPageSettingsMode,
+} from '../../../../brand-page-maker/stores';
+import axios from 'axios';
+import { getColorReplacementsFromSvgString } from '../../../../brand-page/utils/svg-color.util';
+import { commonTr, tr } from '../../../../composables/useTranslate';
+
+const imageSettingTr = (key: string) => tr(`replaceImageSetting.${key}`);
+
+// Props
+const props = defineProps({
+  mediaSettings: {
+    type: Object as PropType<ReplaceImageSettingsBase>,
+    required: false,
+    default: undefined,
+  },
+  imageExtension: {
+    type: Array as PropType<string[]>,
+    required: false,
+    default: () => ['.jpg', '.jpeg', '.png'],
+  },
+  mode: {
+    type: Object as PropType<BrandPageSettingsMode>,
+    required: true,
+  },
+  isAdmin: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  activeTabs: {
+    type: Array as PropType<ReplaceImageSettingsTabId[]>,
+    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,
+  },
+});
+
+// Emits
+const emit = defineEmits<{
+  'on-back': [];
+  'on-image-picked': [
+    image: Pick<
+      UserMediaItemWithDimensions,
+      'url' | 'minimisedUrl' | 'width' | 'height'
+    >,
+    mediaType: string,
+  ];
+  'on-image-removed': [
+    image: Pick<
+      UserMediaItemWithDimensions,
+      'url' | 'minimisedUrl' | 'width' | 'height'
+    >,
+  ];
+  'on-design-selected': [image: UserMediaItemWithDimensions];
+  'on-shape-selected': [
+    shape: {
+      imageUrl: string;
+      width: number;
+      height: number;
+      colorReplacements: any;
+      aspectRatio: number;
+    },
+  ];
+}>();
+
+const containerStore = useBrandPageContainerStore();
+const userStore = useBrandPageMakerUserStore();
+
+const isPrePurchase = computed(() => containerStore.isPrePurchase);
+const canUseGettyVideos = computed(() => userStore.features.canUseGettyVideos);
+
+const tabs = ref<Tab[]>([
+  {
+    id: 'ICON',
+    label: imageSettingTr('icon'),
+    active: false,
+  },
+  {
+    id: 'MY_UPLOADS',
+    label: imageSettingTr('myUploads'),
+    active: false,
+  },
+  {
+    id: 'MY_DESIGNS',
+    label: imageSettingTr('myDesigns'),
+    active: false,
   },
-  mixins: [ReplaceImageBaseSettings],
-  setup(props, context) {
-    return { ...ReplaceImageBaseSettings.setup(props, context), commonTr };
+  {
+    id: 'IMAGE_LIBRARY',
+    label: imageSettingTr('imageLibrary'),
+    active: false,
   },
+  {
+    id: 'VIDEO_LIBRARY',
+    label: imageSettingTr('videoLibrary'),
+    active: false,
+  },
+  {
+    id: 'SHAPE_LIBRARY',
+    label: imageSettingTr('shapeLibrary'),
+    active: false,
+  },
+]);
+
+const enabledTabs = computed(() => {
+  return tabs.value
+    .filter((x) => x.id !== 'MY_DESIGNS' || !props.isAdmin)
+    .filter(
+      (x) =>
+        x.id !== 'VIDEO_LIBRARY' || (canUseGettyVideos.value && props.isAdmin),
+    )
+    .filter(
+      (x) =>
+        props.activeTabs.some((y) => y === x.id) &&
+        (!isPrePurchase.value || x.id !== 'MY_DESIGNS'),
+    );
+});
+
+const isDeleteEnabled = computed(() => true);
+
+// Methods
+const onBack = () => {
+  emit('on-back');
+};
+
+const onImageSelected = (
+  image: Pick<
+    UserMediaItemWithDimensions,
+    'url' | 'minimisedUrl' | 'width' | 'height'
+  >,
+) => {
+  emit('on-image-picked', image, props.mediaType);
+};
+
+const onDeleteImage = (
+  image: Pick<
+    UserMediaItemWithDimensions,
+    'url' | 'minimisedUrl' | 'width' | 'height'
+  >,
+) => {
+  emit('on-image-removed', image);
 };
+
+const onDesignSelected = (image: UserMediaItemWithDimensions) => {
+  emit('on-design-selected', image);
+};
+
+const switchActiveTab = (id: string) => {
+  tabs.value.forEach((tab: Tab) => {
+    tab.active = tab.id === id;
+  });
+};
+
+const onShapeSelected = async (image: UserMediaItemWithDimensions) => {
+  try {
+    const svgResponse = await axios.get<string>(image.url);
+
+    const colorReplacements = getColorReplacementsFromSvgString(
+      svgResponse.data,
+    );
+
+    emit('on-shape-selected', {
+      imageUrl: image.url,
+      width: image.width,
+      height: image.height,
+      colorReplacements,
+      aspectRatio: image.aspectRatio || 1,
+    });
+  } catch (error) {
+    console.error('Failed to load shape:', error);
+  }
+};
+
+// Lifecycle
+onMounted(() => {
+  if (enabledTabs.value.length > 0) {
+    enabledTabs.value[0].active = true;
+  }
+});
 </script>

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.de-DE.json

@@ -4,6 +4,7 @@
     "myUploads" : "Meine Uploads",
     "myDesigns" : "Meine Designs",
     "imageLibrary" : "Bilderbibliothek",
+    "videoLibrary" : "Videobibliothek",
     "shapeLibrary" : "Formbibliothek"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.es-ES.json

@@ -4,6 +4,7 @@
     "myUploads" : "Mis subidas",
     "myDesigns" : "Mis diseños",
     "imageLibrary" : "Biblioteca de imágenes",
+    "videoLibrary" : "Videoteca",
     "shapeLibrary" : "Biblioteca de Formas"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.fr-CA.json

@@ -4,6 +4,7 @@
     "myUploads" : "Mes importations",
     "myDesigns" : "Mes créations",
     "imageLibrary" : "Bibliothèque d’images",
+    "videoLibrary" : "Vidéothèque",
     "shapeLibrary" : "Bibliothèque de formes"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.fr-FR.json

@@ -4,6 +4,7 @@
     "myUploads" : "Mes importations",
     "myDesigns" : "Mes créations",
     "imageLibrary" : "Bibliothèque d’images",
+    "videoLibrary" : "Vidéothèque",
     "shapeLibrary" : "Bibliothèque de formes"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.json

@@ -4,6 +4,7 @@
     "myUploads": "My Uploads",
     "myDesigns": "My Designs",
     "imageLibrary": "Image Library",
+    "videoLibrary": "Video Library",
     "shapeLibrary": "Shape Library"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.pt-BR.json

@@ -4,6 +4,7 @@
     "myUploads" : "Meus uploads",
     "myDesigns" : "Meus designs",
     "imageLibrary" : "Biblioteca de imagens",
+    "videoLibrary" : "Biblioteca de vídeos",
     "shapeLibrary" : "Biblioteca de formas"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.pt-PT.json

@@ -4,6 +4,7 @@
     "myUploads" : "Os meus carregamentos",
     "myDesigns" : "Os meus designs",
     "imageLibrary" : "Biblioteca de imagens",
+    "videoLibrary" : "Videoteca",
     "shapeLibrary" : "Biblioteca de Formas"
   }
 }

package/src/shared/content-settings/models.ts

@@ -28,6 +28,7 @@ export interface FieldSettingsBase {
 export const ReplaceImageSettingsTabIds = {
   ICON: 'ICON',
   IMAGE_LIBRARY: 'IMAGE_LIBRARY',
+  VIDEO_LIBRARY: 'VIDEO_LIBRARY',
   MY_UPLOADS: 'MY_UPLOADS',
   MY_DESIGNS: 'MY_DESIGNS',
   SHAPE_LIBRARY: 'SHAPE_LIBRARY',

package/src/shared/models.ts

@@ -27,6 +27,7 @@ export interface Endpoints {
   getAllUserMediaEndpoint: string;
   userPolicyDataEndpoint: string;
   getUnsplashMediaRootEndpoint: string;
+  getGettyEndpoint: string;
 }
 
 export const UI_EVENT_SOURCES = {

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

@@ -18,6 +18,7 @@ const defaultUserEndpoints: Endpoints = {
   getAllUserMediaEndpoint: GET_ALL_USER_MEDIA_ENDPOINT,
   userPolicyDataEndpoint: USER_POLICY_DATA_ENDPOINT,
   getUnsplashMediaRootEndpoint: '',
+  getGettyEndpoint: '',
 };
 
 const supportedFileExtensions = ['jpg', 'png', 'gif'];