@designcrowd/library.brand-page 5.16.34 → 5.16.36

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -51,6 +51,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             cachedTemplates: {},
             logoChangeWatcherInitialized: false,
             renderAsImage,
+            initialSearchTerm: undefined,
         };
     },
     actions: {
@@ -329,6 +330,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 });
             }
         },
+        setInitialSearchTerm(payload) {
+            this.initialSearchTerm = payload.initialSearchTerm;
+        },
         clearTemplates() {
             this.templates.splice(0);
             this.pageNo = 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.16.34",
+  "version": "5.16.36",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.5.12",
+    "@designcrowd/fe-shared-lib": "1.5.14",
     "@pinia/nuxt": "0.11.0",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "^2.14.0",

package/src/brand-page/components/page/Page.vue

@@ -9,7 +9,7 @@
     :media="viewModel.styles.backgroundStylesViewModel.mediaViewModel"
     :context="context"
     :img-classes="{
-      'tw-absolute tw-left-0 tw-top-0 tw-z-0 tw-w-full tw-h-full tw-object-cover': true,
+      'tw-absolute tw-left-0 tw-top-0 tw-z-0 tw-w-full tw-h-full tw-object-cover md:tw-fixed': true,
     }"
     :media-type="viewModel.styles.backgroundStylesViewModel.mediaViewModel.type"
     content-index="0"

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

@@ -212,8 +212,6 @@ export default defineComponent({
 
     await this.brandPageMakerStore.initialise({
       brandPage,
-      emailAddress: this.viewModel.emailAddress,
-      features: this.viewModel.features,
       logoDraftDesignAttributes: this.viewModel.logoDraftDesignAttributes,
       unsplashApplicationName: this.viewModel.unsplashApplicationName,
       templateCategories: this.viewModel.templateCategories,

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

@@ -268,11 +268,14 @@ const InitialiseMakerStores = (options: {
     contextualUpgradeType: undefined,
     isContextualUpgradeModalVisible: false,
     gettyVideos: [],
+    templateSearchTerm: undefined,
   });
 
-  userStore.setIsAdmin({ isAdmin: options.isAdmin || false });
-  userStore.setHasBrandPagePremiumSubscription(false);
-  userStore.setBrandPageCommissionPercentage(0.1);
+  userStore.setUserState({
+    isAdmin: options.isAdmin,
+    hasPremiumSubscription: false,
+    brandPageCommissionPercentage: 0.1,
+  });
 };
 
 const FABRIC_RENDER_BASE_URL = 'https://localhost:6006/';
@@ -342,6 +345,7 @@ export const SampleDesktopManagePages = (): any => {
 
   const contentSettingsStore = useUiContentSettingsStore();
   const brandPageMakerStore = useBrandPageMakerStore();
+  const userStore = useBrandPageMakerUserStore();
 
   contentSettingsStore.pushMode({
     mode: CONTENT_SETTINGS_MODES.pages,
@@ -351,6 +355,12 @@ export const SampleDesktopManagePages = (): any => {
     viewport: VIEWPORTS.desktop,
   });
 
+  userStore.setUserState({
+    features: {
+      ...userFeatures,
+    },
+  });
+
   return defineComponent({
     components: {
       BrandPageMaker,
@@ -398,10 +408,6 @@ export const SampleDesktopManagePages = (): any => {
           isSaving: false,
           logoDraftDesignAttributes: simpleLogoDesignAttributes,
           logoVariationImageUrls,
-          features: {
-            ...userFeatures,
-            canAddMoreThanThreePages: true,
-          },
           templateCategories: TEMPLATE_CATEGORIES,
         },
       };
@@ -423,6 +429,7 @@ export const SampleBanner = (): any => {
 
   InitialiseMakerStores({});
   const brandPageMakerStore = useBrandPageMakerStore();
+  const userStore = useBrandPageMakerUserStore();
 
   const bannerContent = createInitialBannerSectionContent();
   bannerContent.description = 'Lorem ipsum dolor sit amet';
@@ -431,6 +438,12 @@ export const SampleBanner = (): any => {
     viewport: VIEWPORTS.desktop,
   });
 
+  userStore.setUserState({
+    features: {
+      ...userFeatures,
+    },
+  });
+
   return defineComponent({
     components: {
       BrandPageMaker,
@@ -452,10 +465,6 @@ export const SampleBanner = (): any => {
           isSaving: false,
           logoDraftDesignAttributes: simpleLogoDesignAttributes,
           logoVariationImageUrls,
-          features: {
-            ...userFeatures,
-            canAddMoreThanThreePages: true,
-          },
           templateCategories: TEMPLATE_CATEGORIES,
         },
       };
@@ -1009,6 +1018,7 @@ export const SamplePremiumUser = (): any => {
     },
     setup() {
       const containerStore = useBrandPageContainerStore();
+      const userStore = useBrandPageMakerUserStore();
 
       const logoStore = useLogoStore();
 
@@ -1024,6 +1034,18 @@ export const SamplePremiumUser = (): any => {
       containerStore.$patch({
         baseFabricRenderUrl: FABRIC_RENDER_BASE_URL,
       });
+
+      userStore.setUserState({
+        features: {
+          ...userFeatures,
+          showBrandCrowdLogo: false,
+          canAddVideoContents: true,
+          canUploadBackgroundImages: true,
+          canAddMapContents: true,
+          canAddContactFormContents: true,
+          canAddLibraryBackgroundImages: true,
+        },
+      });
     },
     data() {
       return {
@@ -1032,16 +1054,6 @@ export const SamplePremiumUser = (): any => {
           isSaving: false,
           logoVariationImageUrls,
           logoDraftDesignAttributes: gradientLogoDesignAttributes,
-          features: {
-            ...userFeatures,
-            showBrandCrowdLogo: false,
-            canAddVideoContents: true,
-            canUploadBackgroundImages: true,
-            canAddMapContents: true,
-            canAddContactFormContents: true,
-            canAddLibraryBackgroundImages: true,
-            canAddMoreThanThreePages: true,
-          },
           initialCategories: {},
         },
       };
@@ -1072,6 +1084,7 @@ export const SamplePremiumBContactUser = (): any => {
     },
     setup() {
       const containerStore = useBrandPageContainerStore();
+      const userStore = useBrandPageMakerUserStore();
 
       const logoStore = useLogoStore();
 
@@ -1087,6 +1100,18 @@ export const SamplePremiumBContactUser = (): any => {
       containerStore.$patch({
         baseFabricRenderUrl: FABRIC_RENDER_BASE_URL,
       });
+
+      userStore.setUserState({
+        features: {
+          ...userFeatures,
+          showBrandCrowdLogo: false,
+          canAddVideoContents: true,
+          canUploadBackgroundImages: true,
+          canAddMapContents: true,
+          canAddContactFormContents: true,
+          canAddLibraryBackgroundImages: true,
+        },
+      });
     },
     data() {
       return {
@@ -1095,16 +1120,6 @@ export const SamplePremiumBContactUser = (): any => {
           isSaving: false,
           logoVariationImageUrls,
           logoDraftDesignAttributes: gradientLogoDesignAttributes,
-          features: {
-            ...userFeatures,
-            showBrandCrowdLogo: false,
-            canAddVideoContents: true,
-            canUploadBackgroundImages: true,
-            canAddMapContents: true,
-            canAddContactFormContents: true,
-            canAddLibraryBackgroundImages: true,
-            canAddMoreThanThreePages: true,
-          },
           initialCategories: {},
         },
       };
@@ -1734,6 +1749,7 @@ export const TextStyleOptions = (): any => {
   const imageUrl = 'https://source.unsplash.com/random/400x225?1';
 
   const brandPageMakerStore = useBrandPageMakerStore();
+  const userStore = useBrandPageMakerUserStore();
 
   brandPageMakerStore.setSelectedTabName({
     tabName: SIDE_BAR_TAB_NAMES.STYLE_SETTINGS,
@@ -1836,6 +1852,12 @@ export const TextStyleOptions = (): any => {
     viewport: VIEWPORTS.desktop,
   });
 
+  userStore.setUserState({
+    features: {
+      ...userFeatures,
+    },
+  });
+
   return defineComponent({
     components: {
       BrandPageMaker,
@@ -1857,10 +1879,6 @@ export const TextStyleOptions = (): any => {
           isSaving: false,
           logoDraftDesignAttributes: simpleLogoDesignAttributes,
           logoVariationImageUrls,
-          features: {
-            ...userFeatures,
-            canAddMoreThanThreePages: true,
-          },
           templateCategories: TEMPLATE_CATEGORIES,
         },
       };

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

@@ -37,6 +37,7 @@ import type { UserFeatures } from '../../../stores';
 import type { AdminPreviewLogoTemplateModel } from '../../../stores/admin-logo-settings';
 import { v4 as uuid } from 'uuid';
 import { CONTENT_SETTINGS_CONFIGS } from '../../../constants';
+import type { UIUserFeatures } from 'src/constants/ui';
 
 export const storyEmailAddress = 'test@test.com';
 
@@ -2108,26 +2109,26 @@ export const brandPageCustom: BrandPageData = {
   },
 };
 
+export const USER_FEATURES: UIUserFeatures = Object.freeze({
+  showBrandCrowdLogo: true,
+  canAddImageContents: true,
+  canAddVideoContents: false,
+  canAddMapContents: false,
+  canAddLibraryBackgroundImages: true,
+  canAddRequestPaymentContents: true,
+  canAddShopContents: true,
+  canUploadBackgroundImages: false,
+  canAddContactFormContents: true,
+  canUseRichTextEditor: false,
+  canUsePremiumFontFamily: true,
+  maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
+  canUseGettyVideos: true,
+  canUseGoogleAdsense: false,
+  googleAdsenseEnabled: true,
+} as UIUserFeatures);
+
 export const INITIALISE_PAYLOAD: InitialisePayload = Object.freeze({
   brandPage: BRAND_PAGE,
-  emailAddress: storyEmailAddress,
-  features: {
-    showBrandCrowdLogo: true,
-    canAddImageContents: true,
-    canAddVideoContents: false,
-    canAddMapContents: false,
-    canAddLibraryBackgroundImages: true,
-    canAddRequestPaymentContents: true,
-    canAddShopContents: true,
-    canUploadBackgroundImages: false,
-    canAddContactFormContents: true,
-    canUseRichTextEditor: false,
-    canUsePremiumFontFamily: true,
-    maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
-    canUseGettyVideos: true,
-    canUseGoogleAdsense: false,
-    googleAdsenseEnabled: true,
-  },
   logoDraftDesignAttributes: simpleLogoDesignAttributes,
   backUrl: '',
   logoVariationImageUrls: [],

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -63,6 +63,7 @@ export const EVENTS = {
   WEBSITE_MAKER_AI_CLICK_SUGGESTED_PROMPT:
     'website_maker_ai_click_suggested_prompt',
   WEBSITE_MAKER_DOMAIN_UPSELL_MODAL: 'website_domain_upsell_modal',
+  WEBSITE_MAKER_GETTY_VIDEO: 'website_maker_getty_video',
 };
 
 export const SELECT_LOCATIONS = {
@@ -160,6 +161,24 @@ const _publishEvent = (
 };
 
 const useEventTracker = () => {
+  const gettyVideoEvents = {
+    sendGettyVideoAddEvent: () => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_GETTY_VIDEO, {
+        action: 'add',
+      });
+    },
+    sendGettyVideoReplaceEvent: () => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_GETTY_VIDEO, {
+        action: 'replace',
+      });
+    },
+    sendGettyVideoRemoveEvent: () => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_GETTY_VIDEO, {
+        action: 'remove',
+      });
+    },
+  };
+
   return {
     sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => {
       _publishEvent(
@@ -324,6 +343,7 @@ const useEventTracker = () => {
         continuation,
       });
     },
+    ...gettyVideoEvents,
   };
 };
 

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -37,6 +37,7 @@ import type { WebsiteSlugCheckResponse } from '../../../brand-page-maker/models/
 import { errorTr, constantsTr } from '../../../composables/useTranslate';
 import { findValuesByKey } from '../../../helpers/ts.helper';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
+import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 
 export type WebsiteContextUpgradeType =
   keyof typeof WEBSITE_UPGRADE_CONTEXT_TYPES;
@@ -112,6 +113,7 @@ export type InitialisePayload = Omit<
   logoTemplateAsset: LogoTemplateAsset | undefined;
   logoDraftAssets: LogoDraftAsset[];
   gettyVideos: GettyVideoEditorViewModelResponse[];
+  templateSearchTerm: string | undefined;
 };
 
 export const BRANDPAGE_STATUS = Object.freeze({
@@ -200,6 +202,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       }
 
       const brandPageMakerStore = useBrandPageMakerStore();
+      const templateSettingsStore = useUiTemplateSettingsStore();
 
       this.brandPageBaseUrl = payload.brandPageBaseUrl;
       this.baseFabricRenderUrl = localisedRouteStore.baseFabricRenderDomain;
@@ -242,6 +245,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         logoDraftAssets: payload.logoDraftAssets || [],
       });
 
+      templateSettingsStore.setInitialSearchTerm({
+        initialSearchTerm: payload.templateSearchTerm ?? '',
+      });
+
       brandPageMakerStore.setSelectedTemplateId({
         templateId: this.designTemplateToken,
       });

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -2,6 +2,7 @@ import { vi } from 'vitest';
 import {
   BRAND_PAGE,
   INITIALISE_PAYLOAD,
+  USER_FEATURES,
   userFeatures,
 } from '../../components/brand-page-maker/__fixtures__';
 import {
@@ -79,7 +80,7 @@ describe('brand page maker store module', () => {
     const store = useBrandPageMakerStore();
     const userStore = useBrandPageMakerUserStore();
 
-    userStore.setIsAdmin({ isAdmin: true });
+    userStore.setUserState({ isAdmin: true });
 
     await store.initialise(INITIALISE_PAYLOAD);
 
@@ -95,7 +96,7 @@ describe('brand page maker store module', () => {
     const store = useBrandPageMakerStore();
     const userStore = useBrandPageMakerUserStore();
 
-    userStore.setIsAdmin({ isAdmin: true });
+    userStore.setUserState({ isAdmin: true });
 
     await store.initialise(INITIALISE_PAYLOAD);
 
@@ -113,14 +114,18 @@ describe('brand page maker store module', () => {
     const userStore = useBrandPageMakerUserStore();
 
     // Act
-    await store.initialise({
-      ...INITIALISE_PAYLOAD,
+
+    userStore.setUserState({
       features: {
         ...userFeatures,
         showBrandCrowdLogo: false,
       },
     });
 
+    await store.initialise({
+      ...INITIALISE_PAYLOAD,
+    });
+
     // Assert
     expect(userStore.features.showBrandCrowdLogo).toBe(false);
   });
@@ -170,7 +175,7 @@ describe('brand page maker store module', () => {
     const store = useBrandPageMakerStore();
     const userStore = useBrandPageMakerUserStore();
 
-    userStore.setIsAdmin({ isAdmin: true });
+    userStore.setUserState({ isAdmin: true });
 
     const contactFormContent: ContactFormContent = {
       id: faker.datatype.uuid(),
@@ -497,7 +502,7 @@ describe('brand page maker store module', () => {
     // Arrange
     const userStore = useBrandPageMakerUserStore();
 
-    userStore.setIsAdmin({ isAdmin: true });
+    userStore.setUserState({ isAdmin: true });
 
     const templateId = faker.string.uuid();
 

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

@@ -114,8 +114,6 @@ export type SelectedCategoryPayload = InitialCategories;
 export interface InitialisePayload {
   brandPage: string | BrandPageData;
   brandPageType?: BrandPageType;
-  emailAddress: string;
-  features: UserFeatures;
   logoDraftDesignAttributes: LogoDesignAttributesModel;
   unsplashApplicationName: string;
   templateCategories: TemplateCategory[];
@@ -729,8 +727,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
     async initialise({
       brandPage,
       brandPageType,
-      emailAddress,
-      features,
       logoDraftDesignAttributes,
       unsplashApplicationName,
       templateCategories,
@@ -844,10 +840,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           templateType: brandPageTypeTemplateTypeMap[_brandPageType],
         });
 
-        userStore.setEmailAddress(emailAddress);
-
-        userStore.setFeatures(features);
-
         uiStore.setLogoTheme({
           logoTheme: parseLogoThemeToCssStyles(
             logoDraftDesignAttributes.logoTheme,
@@ -887,7 +879,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           pages: brandPageModel.pages,
         });
 
-        setContentSettingsAddContentOptions(features);
+        setContentSettingsAddContentOptions(userStore.features);
 
         if (logoImage) {
           const logoSettingsState: LogoSettingsState = {

package/src/brand-page-maker/stores/event-manager/event-manager-store.ts

@@ -82,12 +82,12 @@ const getBrandPageEventCategory = () => {
 
   if (
     process.env.NODE_ENV !== 'production' &&
-    typeof userStore.hasBrandPagePremiumSubscription !== 'boolean'
+    typeof userStore.hasPremiumSubscription !== 'boolean'
   ) {
-    console.error('hasBrandPagePremiumSubscription should be a boolean');
+    console.error('hasPremiumSubscription should be a boolean');
   }
 
-  return userStore.hasBrandPagePremiumSubscription
+  return userStore.hasPremiumSubscription
     ? BRAND_PAGE_ACTIVE
     : BRAND_PAGE_INACTIVE;
 };

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

@@ -12,7 +12,7 @@ describe('brand page user store module', () => {
     // Arrange
     const store = useBrandPageMakerUserStore();
 
-    store.setIsAdmin({ isAdmin: true });
+    store.setUserState({ isAdmin: true });
 
     // Act
 
@@ -24,7 +24,7 @@ describe('brand page user store module', () => {
     // Arrange
     const store = useBrandPageMakerUserStore();
 
-    store.setIsAdmin({ isAdmin: false });
+    store.setUserState({ isAdmin: false });
     // Act
 
     // Assert

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

@@ -7,7 +7,7 @@ export type UserFeatures = UIUserFeatures;
 export interface UserState extends UIUserState {
   features: UserFeatures;
   emailAddress: string;
-  hasBrandPagePremiumSubscription: boolean;
+  hasPremiumSubscription: boolean;
   brandPageCommissionPercentage: number | undefined;
   userToken?: string;
 }
@@ -35,29 +35,27 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
       googleAdsenseEnabled: false,
     },
     emailAddress: '',
-    hasBrandPagePremiumSubscription: false,
+    hasPremiumSubscription: false,
     brandPageCommissionPercentage: undefined,
     isAdmin: false, // this is currently used as way to identify admin maker mode
     userToken: undefined,
   }),
   actions: {
-    setEmailAddress(payload: string): void {
-      this.emailAddress = payload;
-    },
-    setFeatures(payload: Partial<UserFeatures>): void {
-      this.features = Object.assign({}, this.features, payload);
-    },
-    setHasBrandPagePremiumSubscription(payload: boolean): void {
-      this.hasBrandPagePremiumSubscription = payload;
-    },
-    setIsAdmin(payload: { isAdmin: boolean }): void {
-      this.isAdmin = payload.isAdmin;
-    },
-    setBrandPageCommissionPercentage(payload: number): void {
-      this.brandPageCommissionPercentage = payload;
-    },
-    setUserToken(payload: { userToken: string }): void {
-      this.userToken = payload.userToken;
+    setUserState(payload: {
+      emailAddress?: string;
+      userToken?: string;
+      isAdmin?: boolean;
+      hasPremiumSubscription?: boolean;
+      brandPageCommissionPercentage?: number;
+      features?: Partial<UserFeatures>;
+    }): void {
+      this.emailAddress = payload.emailAddress || '';
+      this.userToken = payload.userToken || '';
+      this.hasPremiumSubscription = payload.hasPremiumSubscription || false;
+      this.brandPageCommissionPercentage =
+        payload.brandPageCommissionPercentage || undefined;
+      this.isAdmin = payload.isAdmin || false;
+      this.features = Object.assign({}, this.features, payload.features);
     },
   },
 });

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

@@ -1,7 +1,14 @@
 import { defineStore } from 'pinia';
+import { useBrandPageMakerStore } from '../brandpage-maker';
+import cloneDeep from 'lodash.clonedeep';
+import { findValuesByKey } from '../../../helpers/ts.helper';
+import { useBrandPageMakerUserStore } from '../user';
+import { useBrandPageContainerStore } from '../brandpage-container';
 
 const CDN_GETTY_S3_URL_PREFIX = 'https://bc-getty-media.brandcrowd.com';
 
+export const GETTY_VIDEO_LIMIT_FOR_SITE = 5;
+
 export type VideoUrlData = {
   videoUrl: string;
   previewImageUrl: string;
@@ -54,5 +61,28 @@ export const useVideoStore = defineStore('video', {
         previewImageUrl: `${CDN_GETTY_S3_URL_PREFIX}/public/${state.gettyImagesKeyPrefix}/${token}/${token}_optimised_thumb`,
       };
     },
+    hasReachedLimitForVideo() {
+      // Looking through the bp maker store as the video-store isn't aware of removals
+      const brandPageMakerStore = useBrandPageMakerStore();
+      const brandPageData = cloneDeep(brandPageMakerStore.brandPageData);
+
+      const gettyAssetIds = findValuesByKey(brandPageData, 'gettyAssetId');
+
+      return gettyAssetIds.length >= GETTY_VIDEO_LIMIT_FOR_SITE;
+    },
+    canAddNewVideo() {
+      const userStore = useBrandPageMakerUserStore();
+      const brandPageContainerStore = useBrandPageContainerStore();
+
+      const canUseGettyVideos = userStore.features.canUseGettyVideos;
+      const isPrePurchase = brandPageContainerStore.isPrePurchase;
+
+      const hasPremiumSubscription = userStore.hasPremiumSubscription;
+
+      return (
+        canUseGettyVideos &&
+        (userStore.isAdmin || isPrePurchase || hasPremiumSubscription)
+      );
+    },
   },
 });

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

@@ -920,9 +920,22 @@
     "continueLabel": "Weiter"
   },
   "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/bundles/bundled-translations.es-ES.json

@@ -920,9 +920,22 @@
     "continueLabel": "Continuar"
   },
   "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."
   }
 }