@designcrowd/library.brand-page 5.16.34 → 5.16.36

package/src/bundles/bundled-translations.fr-CA.json

@@ -920,9 +920,22 @@
     "continueLabel": "Continuer"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aérien",
+      "beach": "Plage",
+      "business": "Activité",
+      "cities": "Villes",
+      "landscape": "Paysage",
+      "nature": "Nature",
+      "people": "Gens",
+      "plants": "Plantes",
+      "sky": "Ciel",
+      "sunrise": "Lever du soleil"
+    },
     "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."
+    "supported": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
+    "limitMessage": "Vous avez atteint la limite de vidéos. Chaque site prend en charge jusqu'à {{ videoLimit }} vidéos. Supprimez-en une pour en ajouter une autre."
   }
 }

package/src/bundles/bundled-translations.fr-FR.json

@@ -920,9 +920,22 @@
     "continueLabel": "Continuer"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aérien",
+      "beach": "Plage",
+      "business": "Activité",
+      "cities": "Villes",
+      "landscape": "Paysage",
+      "nature": "Nature",
+      "people": "Gens",
+      "plants": "Plantes",
+      "sky": "Ciel",
+      "sunrise": "Lever du soleil"
+    },
     "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."
+    "supported": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
+    "limitMessage": "Vous avez atteint la limite de vidéos. Chaque site prend en charge jusqu'à {{ videoLimit }} vidéos. Supprimez-en une pour en ajouter une autre."
   }
 }

package/src/bundles/bundled-translations.json

@@ -920,9 +920,22 @@
     "continueLabel": "Continue"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aerial",
+      "beach": "Beach",
+      "business": "Business",
+      "cities": "Cities",
+      "landscape": "Landscape",
+      "nature": "Nature",
+      "people": "People",
+      "plants": "Plants",
+      "sky": "Sky",
+      "sunrise": "Sunrise"
+    },
     "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."
+    "supported": "Sorry, your browser doesn't support embedded videos.",
+    "limitMessage": "You’ve reached the video limit. Each site supports up to {{ videoLimit }} videos - remove one to add another."
   }
 }

package/src/bundles/bundled-translations.pt-BR.json

@@ -920,9 +920,22 @@
     "continueLabel": "Continuar"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aéreo",
+      "beach": "Praia",
+      "business": "Negócio",
+      "cities": "Cidades",
+      "landscape": "Paisagem",
+      "nature": "Natureza",
+      "people": "Pessoas",
+      "plants": "Plantas",
+      "sky": "Céu",
+      "sunrise": "Nascer do sol"
+    },
     "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."
+    "supported": "Seu navegador não aceita vídeos incorporados.",
+    "limitMessage": "Você atingiu o limite de vídeos. Cada site permite até {{ videoLimit }} vídeos – remova um para adicionar outro."
   }
 }

package/src/bundles/bundled-translations.pt-PT.json

@@ -920,9 +920,22 @@
     "continueLabel": "Continuar"
   },
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aéreo",
+      "beach": "Praia",
+      "business": "Negócio",
+      "cities": "Cidades",
+      "landscape": "Paisagem",
+      "nature": "Nature",
+      "people": "Pessoas",
+      "plants": "Plantas",
+      "sky": "Céu",
+      "sunrise": "Nascer do sol"
+    },
     "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."
+    "supported": "Lamentamos, mas o seu navegador não suporta vídeos incorporados.",
+    "limitMessage": "Atingiu o limite de vídeos. Cada site permite até {{ videoLimit }} vídeos - remova um para adicionar outro."
   }
 }

package/src/composables/useTranslate.ts

@@ -203,7 +203,8 @@ const videoTr = (key, valuesToInterpolate = {}) =>
   tr(`video.${key}`, valuesToInterpolate);
 const confirmModalTr = (key, valuesToInterpolate = {}) =>
   tr(`confirmModal.${key}`, valuesToInterpolate);
-const videoLibraryTr = (key) => tr(`videoLibrary.${key}`);
+const videoLibraryTr = (key, valuesToInterpolate = {}) =>
+  tr(`videoLibrary.${key}`, valuesToInterpolate);
 const logoSwitchConfirmationModalTr = (key, valuesToInterpolate = {}) =>
   tr(`logoSwitchConfirmationModal.${key}`, valuesToInterpolate);
 const logoTemplateSearchModalTr = (key, valuesToInterpolate = {}) =>

package/src/shared/background-settings/components/BackgroundSettings.vue

@@ -91,7 +91,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { TabMenu, CollapsiblePanel, Button } from '@designcrowd/fe-shared-lib';
+import { TabMenu, CollapsiblePanel } from '@designcrowd/fe-shared-lib';
 import BackgroundColorSettings from './background-color/BackgroundColorSettings.vue';
 import BackgroundShapeSettings from './background-shapes/BackgroundShapeSettings.vue';
 import ImageField from '../../content-settings/components/image-field/ImageField.vue';
@@ -117,12 +117,14 @@ import {
 } from '../../../brand-page';
 import { backgroundSettingsTr } from '../../../composables/useTranslate';
 import ReplaceImageSettingsForBackgroundSettings from './ReplaceImageSettingsForBackgroundSettings.vue';
+import { useEventTracker } from '../../../brand-page-maker/composables/useEventTracker';
 
 const backgroundSettingsStore = useUiBackgroundSettingsStore();
 const userStore = useBrandPageMakerUserStore();
 const containerStore = useBrandPageContainerStore();
 const brandPageMakerStore = useBrandPageMakerStore();
 const uiStore = useUiStore();
+const bpEventTracker = useEventTracker();
 
 const backgroundStyles = computed(
   () => backgroundSettingsStore.backgroundStyles,
@@ -245,15 +247,15 @@ const onBackgroundMediaDeleted = (payload: {
   name: string;
   value: string;
 }) => {
+  if (backgroundStyles.value?.media) {
+    bpEventTracker.sendGettyVideoRemoveEvent();
+  }
+
   if (payload.value === '') {
     backgroundSettingsStore.setBackgroundImageUrl({
       backgroundImageUrl: '',
     });
   }
-
-  if (backgroundStyles.value?.media) {
-    backgroundSettingsStore.removeBackgroundVideo();
-  }
 };
 
 const selectShapeTab = (tab: string) => {

package/src/shared/background-settings/components/ReplaceImageSettingsForBackgroundSettings.vue

@@ -20,8 +20,10 @@
 import { computed } from 'vue';
 import ReplaceImageBaseSettings from '../../../shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.vue';
 import {
+  GETTY_VIDEO_LIMIT_FOR_SITE,
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
+  useVideoStore,
 } from '../../../brand-page-maker/stores';
 import { useUiBackgroundSettingsStore } from '../store';
 import { BRANDPAGE_SETTINGS_MODES } from '../../../brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
@@ -34,6 +36,9 @@ import type {
   UserMediaItemWithDimensions,
 } from '../../my-uploads/models';
 import { MEDIA_TYPES } from '../../../brand-page/models/brand-page-context.model';
+import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
+import { videoLibraryTr } from '../../../composables/useTranslate';
+import { useEventTracker } from '../../../brand-page-maker/composables/useEventTracker';
 
 interface Props {
   mediaType?: string;
@@ -48,6 +53,9 @@ const imageExtension = ['.png', '.ico'];
 const brandPageMakerStore = useBrandPageMakerStore();
 const userStore = useBrandPageMakerUserStore();
 const backgroundSettingsStore = useUiBackgroundSettingsStore();
+const videoStore = useVideoStore();
+const contentSettingsStore = useUiContentSettingsStore();
+const bpEventTracker = useEventTracker();
 
 const backgroundMode = computed(() => backgroundSettingsStore.backgroundMode);
 const isAdmin = computed(() => userStore.isAdmin);
@@ -81,6 +89,10 @@ const mediaExtension = computed(() => {
   }
 });
 
+const backgroundMedia = computed(
+  () => backgroundSettingsStore.backgroundStyles?.media,
+);
+
 const onImageSelected = async (
   image: Pick<
     UserMediaItemWithDimensions,
@@ -122,7 +134,35 @@ const onDesignSelected = (image: UserMediaItemWithDimensions) => {
   });
 };
 
-const onVideoSelected = (videoPayload: MediaBaseSelectedPayload) => {
+const isCurrentlyVideoBackground = (): boolean => {
+  return backgroundMedia.value?.type === 'getty-video';
+};
+
+const onVideoSelected = async (videoPayload: MediaBaseSelectedPayload) => {
+  if (!isCurrentlyVideoBackground()) {
+    if (!videoStore.canAddNewVideo) {
+      await contentSettingsStore.triggerLockedContentClickedEvent({
+        type: 'getty_video',
+      });
+
+      return;
+    }
+
+    if (videoStore.hasReachedLimitForVideo) {
+      window.alert(
+        videoLibraryTr(`limitMessage`, {
+          videoLimit: GETTY_VIDEO_LIMIT_FOR_SITE,
+        }),
+      );
+
+      return;
+    }
+
+    bpEventTracker.sendGettyVideoAddEvent();
+  } else {
+    bpEventTracker.sendGettyVideoReplaceEvent();
+  }
+
   backgroundSettingsStore.setBackgroundMedia(videoPayload);
 
   backgroundSettingsStore.setBackgroundMode({

package/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.ts

@@ -14,13 +14,19 @@ import { useUiContentSettingsStore } from '../../store';
 import {
   useBrandPageMakerUserStore,
   useBrandPageMakerStore,
+  useVideoStore,
+  GETTY_VIDEO_LIMIT_FOR_SITE,
 } from '../../../../brand-page-maker/stores';
 import { UI_EVENT_SOURCES } from '../../../models';
 import type { PageSettingsStateSectionStyles } from '../../../page-settings/store';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import type { PageSection } from '../../../page-settings/models';
 import { MEDIA_TYPES } from '../../../../brand-page';
-import { contentSettingsTr } from '../../../../composables/useTranslate';
+import {
+  contentSettingsTr,
+  videoLibraryTr,
+} from '../../../../composables/useTranslate';
+import { useEventTracker } from '../../../../brand-page-maker/composables/useEventTracker';
 
 export default defineComponent({
   setup() {
@@ -28,6 +34,8 @@ export default defineComponent({
     const contentSettingsStore = useUiContentSettingsStore();
     const userStore = useBrandPageMakerUserStore();
     const pageSettingsStore = useUiPageSettingsStore();
+    const videoStore = useVideoStore();
+    const bpEventTracker = useEventTracker();
 
     return {
       items: computed(() => contentSettingsStore.items),
@@ -49,6 +57,8 @@ export default defineComponent({
       userStore,
       pageSettingsStore,
       brandPageMakerStore,
+      videoStore,
+      bpEventTracker,
       viewport: computed(() => brandPageMakerStore.viewport),
     };
   },
@@ -177,6 +187,11 @@ export default defineComponent({
         this.contentSettingsStore.popMode();
       }
     },
+    isCurrentlyVideoBackground() {
+      return (
+        this.selectedItem?.settings?.content?.media?.type === 'getty-video'
+      );
+    },
     onDesignSelected(image: UserMediaItemWithDimensions) {
       const imageUrl =
         this.contentType === 'banner-section' ? image.rawImageUrl : image.url;
@@ -240,7 +255,33 @@ export default defineComponent({
       });
       this.contentSettingsStore.popMode();
     },
-    onVideoSelected(videoPayload: MediaBaseSelectedPayload) {
+    async onVideoSelected(videoPayload: MediaBaseSelectedPayload) {
+      console.log('SELECTED ITEM: ', this.selectedItem);
+
+      if (!this.isCurrentlyVideoBackground()) {
+        if (!this.videoStore.canAddNewVideo) {
+          await this.contentSettingsStore.triggerLockedContentClickedEvent({
+            type: 'getty_video',
+          });
+
+          return;
+        }
+
+        if (this.videoStore.hasReachedLimitForVideo) {
+          window.alert(
+            videoLibraryTr(`limitMessage`, {
+              videoLimit: GETTY_VIDEO_LIMIT_FOR_SITE,
+            }),
+          );
+
+          return;
+        }
+
+        this.bpEventTracker.sendGettyVideoAddEvent();
+      } else {
+        this.bpEventTracker.sendGettyVideoReplaceEvent();
+      }
+
       this.contentSettingsStore.setSelectedItemMedia(
         this.selectedItemId,
         videoPayload,

package/src/shared/content-settings/components/image-field/ImageField.mixin.ts

@@ -6,6 +6,7 @@ import type { ContentItemFieldSettings } from '../../models';
 import { isURL } from '../../../../utils/validator.util';
 import { commonTr } from '../../../../composables/useTranslate';
 import { useVideoStore } from '../../../../brand-page-maker/stores/video/video-store';
+import { useEventTracker } from '../../../../brand-page-maker/composables/useEventTracker';
 
 const ACCEPTED_MIME_TYPES = 'image/png, image/jpeg, image/svg+xml';
 
@@ -122,8 +123,11 @@ export default defineComponent({
     },
 
     onRemove() {
+      const bpEventTracker = useEventTracker();
+
       if (this.content?.media) {
         this.content.media = undefined;
+        bpEventTracker.sendGettyVideoRemoveEvent();
       }
 
       this.imgValue = '';

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

@@ -36,6 +36,9 @@
           :attrs="{
             'data-test-tag': `${tab.id.toLowerCase()}_btn`,
           }"
+          :icon-left="
+            tab.id === 'VIDEO_LIBRARY' ? 'premium-content' : undefined
+          "
           @on-click.stop="switchActiveTab(tab.id)"
         />
       </div>
@@ -190,6 +193,7 @@ const userStore = useBrandPageMakerUserStore();
 
 const isPrePurchase = computed(() => containerStore.isPrePurchase);
 const canUseGettyVideos = computed(() => userStore.features.canUseGettyVideos);
+
 const isTabEnabled = ref(true);
 
 const tabs = ref<Tab[]>([
@@ -228,15 +232,12 @@ const tabs = ref<Tab[]>([
 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'),
-    );
+    )
+    .filter((x) => x.id !== 'VIDEO_LIBRARY' || canUseGettyVideos.value);
 });
 
 const isDeleteEnabled = computed(() => true);

package/src/shared/page-settings/store/page-settings-store.test.ts

@@ -8,9 +8,11 @@ import type { ContentItem } from '../../content-settings/models';
 import {
   UNLIMITED_MAX_NUM_OF_PAGES,
   useBrandPageMakerStore,
+  useBrandPageMakerUserStore,
 } from '../../../brand-page-maker/stores';
 import {
   INITIALISE_PAYLOAD,
+  USER_FEATURES,
   brandPageEmpty,
 } from '../../../brand-page-maker/components/brand-page-maker/__fixtures__';
 import { useUiPageSettingsStore } from './index';
@@ -67,11 +69,17 @@ describe('page store module', () => {
   test('setNewPageModalVisibility should not show new page modal when user doesnt have permissions', async () => {
     // Arrange
     const store = useBrandPageMakerStore();
+    const userStore = useBrandPageMakerUserStore();
     const pageSettingsStore = useUiPageSettingsStore();
 
     const payload = INITIALISE_PAYLOAD;
 
-    payload.features.maxNumOfPages = 3;
+    userStore.setUserState({
+      features: {
+        ...USER_FEATURES,
+        maxNumOfPages: 3,
+      },
+    });
 
     await store.initialise(payload);
 
@@ -91,11 +99,17 @@ describe('page store module', () => {
   test('setNewPageModalVisibility should show new page modal when user has permissions', async () => {
     // Arrange
     const store = useBrandPageMakerStore();
+    const userStore = useBrandPageMakerUserStore();
     const pageSettingsStore = useUiPageSettingsStore();
 
     const payload = INITIALISE_PAYLOAD;
 
-    payload.features.maxNumOfPages = UNLIMITED_MAX_NUM_OF_PAGES;
+    userStore.setUserState({
+      features: {
+        ...USER_FEATURES,
+        maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
+      },
+    });
 
     await store.initialise(payload);
 

package/src/shared/style-settings/components/StyleSettings.stories.ts

@@ -2,8 +2,11 @@ import { defineComponent } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 import StyleSettings from './StyleSettings.vue';
 import { setupStoryPinia } from '../../../brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture';
-import { useBrandPageMakerStore } from '../../../brand-page-maker/stores';
-import { INITIALISE_PAYLOAD } from '../../../brand-page-maker/components/brand-page-maker/__fixtures__';
+import {
+  useBrandPageMakerStore,
+  useBrandPageMakerUserStore,
+} from '../../../brand-page-maker/stores';
+import { INITIALISE_PAYLOAD, USER_FEATURES } from '../../../brand-page-maker/components/brand-page-maker/__fixtures__';
 
 export default {
   title: 'Components/BrandPageMaker/StyleSettings',
@@ -30,16 +33,20 @@ export const Sample = () => {
 export const HideBrandCrowdLogo = () => {
   const pinia = setupStoryPinia();
 
+  const userStore = useBrandPageMakerUserStore();
   const store = useBrandPageMakerStore();
 
-  store.initialise({
-    ...INITIALISE_PAYLOAD,
+  userStore.setUserState({
     features: {
-      ...INITIALISE_PAYLOAD.features,
+      ...USER_FEATURES,
       showBrandCrowdLogo: false,
     },
   });
 
+  store.initialise({
+    ...INITIALISE_PAYLOAD,
+  });
+
   return defineComponent({
     components: {
       StyleSettings,

package/src/shared/template-settings/components/TemplatesSettings.mixin.ts

@@ -50,6 +50,9 @@ export default defineComponent({
       pageCount: computed(() => templateSettingsStore.pageCount),
       selectedTab: computed(() => templateSettingsStore.selectedTab),
       searchTerm: computed(() => templateSettingsStore.searchTerm),
+      initialSearchTerm: computed(
+        () => templateSettingsStore.initialSearchTerm,
+      ),
       selectedCategory: computed(() => templateSettingsStore.selectedCategory),
       selectedTemplateId: computed(
         () => brandpageMakerStore.selectedTemplateId,
@@ -166,9 +169,14 @@ export default defineComponent({
 
     // load templates on mounted if it is not initialised
     if (!this.pageCount) {
-      await this.templateSettingsStore.loadPageNo({
-        pageNo: TEMPLATE_FIRST_PAGE_NO,
-      });
+      if (this.initialSearchTerm) {
+        this.searchTextValue = this.initialSearchTerm;
+        this.setSearchText();
+      } else {
+        await this.templateSettingsStore.loadPageNo({
+          pageNo: TEMPLATE_FIRST_PAGE_NO,
+        });
+      }
     }
   },
   created() {

package/src/shared/template-settings/store/template-settings-store.ts

@@ -62,6 +62,7 @@ export interface TemplatesSettingState {
   tabsWithTranslations: SelectedTabType[];
   logoChangeWatcherInitialized: boolean;
   renderAsImage: boolean;
+  initialSearchTerm: string | undefined;
 }
 
 export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
@@ -104,6 +105,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
       cachedTemplates: {},
       logoChangeWatcherInitialized: false,
       renderAsImage,
+      initialSearchTerm: undefined,
     };
   },
   actions: {
@@ -477,6 +479,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         });
       }
     },
+    setInitialSearchTerm(payload: { initialSearchTerm: string }) {
+      this.initialSearchTerm = payload.initialSearchTerm;
+    },
     clearTemplates() {
       this.templates.splice(0);
       this.pageNo = 0;

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

@@ -22,12 +22,16 @@
         <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)"
+          @click="
+            onCategoryClicked(
+              videoLibraryTr(`categories.${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 }}
+            {{ videoLibraryTr(`categories.${videoCategory.categoryName}`) }}
           </div>
           <video
             :data-test-tag="`video-category-${idx}`"
@@ -167,9 +171,6 @@ const defaultLibrary = ref<VideoLibraryData | null>(null);
 const isCategorySearch = ref(false);
 const isCategoryView = 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;
@@ -304,13 +305,6 @@ const onVideoLibraryItemClicked = async (item: VideoItem): Promise<void> => {
     return;
   }
 
-  if (numberOfVideosBeingAdded.value >= addVideosConcurrentlyLimit.value) {
-    window.alert(
-      `Maximum number of videos you can add is ${addVideosConcurrentlyLimit.value}`,
-    );
-    return;
-  }
-
   setIsLoading(item, true);
   const video: GettyVideoEditorViewModelResponse | null =
     await gettyImagesClient.value!.getVideoByVideoIdAsync(item.id);
@@ -338,7 +332,6 @@ const onVideoLibraryItemClicked = async (item: VideoItem): Promise<void> => {
 
 const setIsLoading = (item: VideoItem, loading: boolean): void => {
   item.isLoading = loading;
-  numberOfVideosBeingAdded.value += loading ? 1 : -1;
 };
 
 const getVideoPreview = (

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

@@ -1,8 +1,21 @@
 {
   "videoLibrary": {
+    "categories": {
+      "aerial": "Luftaufnahme",
+      "beach": "Strand",
+      "business": "Unternehmen",
+      "cities": "Städte",
+      "landscape": "Landschaft",
+      "nature": "Natur",
+      "people": "Menschen",
+      "plants": "Pflanzen",
+      "sky": "Himmel",
+      "sunrise": "Sonnenaufgang"
+    },
     "poweredBy": "Powered by",
     "emptyState": "Ihr Browser unterstützt keine eingebetteten Videos.",
     "loadMoreVideos": "Weitere Videos laden",
-    "supported": "Ihr Browser unterstützt keine eingebetteten Videos."
+    "supported": "Ihr Browser unterstützt keine eingebetteten Videos.",
+    "limitMessage": "Sie haben das Videolimit erreicht. Jede Seite unterstützt bis zu {{ videoLimit }} Videos. Entfernen Sie eines, um ein weiteres hinzuzufügen."
   }
 }

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

@@ -1,8 +1,21 @@
 {
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aéreo",
+      "beach": "Playa",
+      "business": "Negocio",
+      "cities": "Ciudades",
+      "landscape": "Paisaje",
+      "nature": "Naturaleza",
+      "people": "Personas",
+      "plants": "Plantas",
+      "sky": "Cielo",
+      "sunrise": "Amanecer"
+    },
     "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."
+    "supported": "Lo sentimos, tu navegador no admite vídeos incrustados.",
+    "limitMessage": "Has alcanzado el límite de vídeos. Cada sitio admite hasta {{ videoLimit }} vídeos; elimina uno para añadir otro."
   }
 }

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

@@ -1,8 +1,21 @@
 {
   "videoLibrary": {
+    "categories": {
+      "aerial": "Aérien",
+      "beach": "Plage",
+      "business": "Activité",
+      "cities": "Villes",
+      "landscape": "Paysage",
+      "nature": "Nature",
+      "people": "Gens",
+      "plants": "Plantes",
+      "sky": "Ciel",
+      "sunrise": "Lever du soleil"
+    },
     "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."
+    "supported": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
+    "limitMessage": "Vous avez atteint la limite de vidéos. Chaque site prend en charge jusqu'à {{ videoLimit }} vidéos. Supprimez-en une pour en ajouter une autre."
   }
 }