@designcrowd/library.brand-page 5.16.10 → 5.16.11

package/lib/src/shared/background-settings/components/background-shapes/BackgroundShapeSettings.mixin.d.ts

@@ -16,7 +16,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             aspectRatio?: string | undefined;
             width?: string | undefined;
             height?: string | undefined;
-            textAlign?: string | undefined;
             backgroundAttachment?: string | undefined;
             background?: string | undefined;
             backgroundImage?: string | undefined;
@@ -48,6 +47,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             overflowWrap?: string | undefined;
             paddingTop?: string | undefined;
             position?: string | undefined;
+            textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -60,7 +60,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             aspectRatio?: string | undefined;
             width?: string | undefined;
             height?: string | undefined;
-            textAlign?: string | undefined;
             backgroundAttachment?: string | undefined;
             background?: string | undefined;
             backgroundImage?: string | undefined;
@@ -92,6 +91,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             overflowWrap?: string | undefined;
             paddingTop?: string | undefined;
             position?: string | undefined;
+            textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -149,6 +149,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
         }[];
         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+        media?: {
+            type: import("../../../../brand-page").MediaTypes;
+        } | undefined;
     }>;
     userStore: import("pinia").Store<"brandPageMakerUser", import("../../../../brand-page-maker/stores").UserState, {}, {
         setEmailAddress(payload: string): void;
@@ -197,6 +200,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setBackgroundMode(payload: {
             backgroundMode: "images" | "edit";
         }): void;
+        setBackgroundMedia(payload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
+        removeBackgroundVideo(): void;
     }>;
 }, {}, {
     color(): string;

package/lib/src/shared/background-settings/store/background-settings-store.d.ts

@@ -2,6 +2,7 @@ import type { BackgroundShape, BackgroundStyle, BackgroundStyles, Personalisatio
 import { type BrandPageSettingsMode } from '../../../brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 import type { SetBackgroundShapeSettingsPayload, SetLogoColorsPayload, SetRecommendedLogoColorsPayload } from '../background-settings-models';
 import type { BackgroundSetStatePayload, BackgroundSettingsTabId } from '../models';
+import type { MediaBaseSelectedPayload } from '../../my-uploads/models';
 export interface BackgroundSettingsState {
     backgroundStyles: BackgroundStyles;
     logoColors: string[];
@@ -45,4 +46,6 @@ export declare const useUiBackgroundSettingsStore: import("pinia").StoreDefiniti
     setBackgroundMode(payload: {
         backgroundMode: BrandPageSettingsMode;
     }): void;
+    setBackgroundMedia(payload: MediaBaseSelectedPayload): void;
+    removeBackgroundVideo(): void;
 }>;

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

@@ -1,8 +1,8 @@
-import { PageStyles } from '../../../brand-page';
+import { GettyVideoMedia, PageStyles } from '../../../brand-page';
 import { BRANDPAGE_SETTINGS_MODES, } from '../../../brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 import { backgroundSettingsTabId } from '../models';
 import { defineStore } from 'pinia';
-import { useUiStore } from '../../../brand-page-maker/stores';
+import { useUiStore, useVideoStore } from '../../../brand-page-maker/stores';
 export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings', {
     state: () => ({
         backgroundStyles: {
@@ -10,6 +10,7 @@ export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings',
             backgroundShapeStyle: {},
             backgroundShapes: [],
             backgroundImageUrl: '',
+            media: undefined,
         },
         logoColors: [],
         recommendedLogoColors: [],
@@ -48,6 +49,10 @@ export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings',
         },
         setBackgroundImageUrl({ backgroundImageUrl, }) {
             this.backgroundStyles.backgroundImageUrl = backgroundImageUrl;
+            // Clear media
+            if (this.backgroundStyles?.media) {
+                this.backgroundStyles.media = undefined;
+            }
             this.setBackgroundStyle({
                 backgroundStyle: {
                     backgroundRepeat: 'no-repeat',
@@ -111,6 +116,12 @@ export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings',
             this.setBackgroundPersonalisationRole({
                 personalisationRole: backgroundStyles.personalisationRole,
             });
+            if (backgroundStyles.media) {
+                this.backgroundStyles.media = backgroundStyles.media;
+            }
+            else {
+                this.backgroundStyles.media = undefined;
+            }
             this.onBackgroundChanged();
         },
         setBackgroundShapeSettings(payload) {
@@ -130,5 +141,35 @@ export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings',
         setBackgroundMode(payload) {
             this.backgroundMode = payload.backgroundMode;
         },
+        setBackgroundMedia(payload) {
+            if (payload.type === 'getty-video') {
+                const gettyMedia = payload;
+                const videoStore = useVideoStore();
+                videoStore.setVideoUrlsWithToken(gettyMedia.token, gettyMedia.videoSrc, gettyMedia.imageSrc, gettyMedia.assetId);
+                this.backgroundStyles.media = new GettyVideoMedia({
+                    gettyToken: gettyMedia.token,
+                    gettyAssetId: gettyMedia.assetId,
+                    mimeType: gettyMedia.mimeType,
+                    settings: {
+                        autoPlay: gettyMedia.autoPlay,
+                    },
+                });
+                // Clear any existing background image/shape
+                this.backgroundStyles.backgroundImageUrl = '';
+                // Default background style for videos
+                this.setBackgroundStyle({
+                    backgroundStyle: {
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPosition: 'center center',
+                        backgroundSize: 'cover',
+                    },
+                });
+                this.onBackgroundChanged();
+            }
+        },
+        removeBackgroundVideo() {
+            this.backgroundStyles.media = undefined;
+            this.onBackgroundChanged();
+        },
     },
 });

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -853,6 +853,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         setBackgroundMode(payload: {
             backgroundMode: "images" | "edit";
         }): void;
+        setBackgroundMedia(payload: import("../../my-uploads/models").MediaBaseSelectedPayload): void;
+        removeBackgroundVideo(): void;
     }>;
     eventTracker: {
         sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;

package/package.json

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

package/src/brand-page/components/page/Page.mixin.ts

@@ -99,16 +99,21 @@ export default defineComponent({
 
     backgroundShapes(): BackgroundShape[] {
       const backgroundShapes: BackgroundShape[] = [
-        ...(this.viewModel?.styles?.backgroundStyles?.backgroundShapes || []),
+        ...(this.viewModel?.styles?.backgroundStylesViewModel
+          ?.backgroundShapes || []),
       ];
 
       // TODO: create style viewmodel object to include backgroundImageContent attribute only on viewmodel
       // p.s backgroundImageUrl can be url or SVG content string
-      if (this.viewModel.styles?.backgroundStyles?.backgroundImageUrl) {
+      if (
+        this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl
+      ) {
         backgroundShapes.splice(0, 0, {
-          name: this.viewModel.styles.backgroundStyles.backgroundImageUrl,
+          name: this.viewModel.styles.backgroundStylesViewModel
+            .backgroundImageUrl,
           style: {
-            ...this.viewModel.styles.backgroundStyles.backgroundShapeStyle,
+            ...this.viewModel.styles.backgroundStylesViewModel
+              .backgroundShapeStyle,
             width: `100%`,
             height: `100%`,
           },
@@ -122,11 +127,12 @@ export default defineComponent({
       let styles: BrandPageCssStyle = {};
 
       if (
-        !this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl &&
-        this.viewModel?.styles?.backgroundStyles?.style
+        !this.viewModel?.styles?.backgroundStylesViewModel
+          ?.backgroundImageUrl &&
+        this.viewModel?.styles?.backgroundStylesViewModel?.style
       ) {
         styles = {
-          ...this.viewModel?.styles?.backgroundStyles?.style,
+          ...this.viewModel?.styles?.backgroundStylesViewModel?.style,
         };
       }
 
@@ -150,37 +156,39 @@ export default defineComponent({
 
     rootBackgroundStyles(): BrandPageCssStyle {
       const styles: BrandPageCssStyle = {
-        ...(this.viewModel?.styles?.backgroundStyles?.style || {}),
+        ...(this.viewModel?.styles?.backgroundStylesViewModel?.style || {}),
       };
 
       delete styles.backgroundAttachment;
 
       if (
-        this.viewModel.styles?.backgroundStyles?.backgroundImageUrl &&
-        (this.viewModel.styles.backgroundStyles.backgroundImageUrl.endsWith(
+        this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl &&
+        (this.viewModel.styles.backgroundStylesViewModel.backgroundImageUrl.endsWith(
           `.svg`,
         ) ||
-          !this.viewModel.styles?.backgroundStyles?.backgroundImageUrl.startsWith(
+          !this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl.startsWith(
             'http',
           ))
       ) {
         // Any backgroundImageUrl that handles svg file, svg markup is handled as BackgroundShape object
         delete styles.backgroundImage;
-      } else if (this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl) {
+      } else if (
+        this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl
+      ) {
         // if background is a gradient
         if (
-          this.viewModel?.styles?.backgroundStyles?.style?.background?.startsWith(
+          this.viewModel?.styles?.backgroundStylesViewModel?.style?.background?.startsWith(
             'linear-gradient',
           )
         ) {
           // combine image and gradient into the `background` property
-          styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStyles?.style?.background}`;
+          styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStylesViewModel?.style?.background}`;
 
           delete styles.background;
         } else {
           // background is a solid color
           styles.backgroundColor = styles.background;
-          styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl})`;
+          styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl})`;
 
           delete styles.background;
         }

package/src/brand-page/components/page/Page.stories.ts

@@ -4,6 +4,7 @@ import type { ContentViewModel, BrandPageViewModel } from '../../view-models';
 import {
   mapToPageFooterViewModel,
   mapToPageHeaderViewModel,
+  mapToPageStyleViewModel,
   mapToViewModel,
 } from '../../utils';
 import {
@@ -41,7 +42,7 @@ const pages = brandPageModel.pages.map((p) => ({
 
 const viewModel: BrandPageViewModel = {
   showBrandCrowdLogo: true,
-  styles: brandPageModel.styles,
+  styles: mapToPageStyleViewModel(brandPageModel.styles, {}),
   headerViewModelDesktop: mapToPageHeaderViewModel(
     brandPageModel.pageHeaderDesktop,
     brandPageModel.styles,

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

@@ -1,5 +1,19 @@
 <template>
-  <div class="brand-page-root-background" :style="rootBackgroundStyles" />
+  <div
+    v-if="!viewModel.styles?.backgroundStylesViewModel?.mediaViewModel"
+    class="brand-page-root-background"
+    :style="rootBackgroundStyles"
+  />
+  <Media
+    v-if="viewModel.styles?.backgroundStylesViewModel?.mediaViewModel"
+    :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,
+    }"
+    :media-type="viewModel.styles.backgroundStylesViewModel.mediaViewModel.type"
+    content-index="0"
+  />
   <div
     class="brand-page-root"
     :style="rootElementStyles"
@@ -266,6 +280,7 @@ import PageFooter from '../page-footer/PageFooter.vue';
 import NavigationSideMenu from '../navigation/navigation-side-menu/NavigationSideMenu.vue';
 import BrandSiteNavigationLayout from './BrandSiteNavigationLayout.vue';
 import MediaQuery from '../media-query';
+import Media from '../media/Media.vue';
 
 export default {
   components: {
@@ -278,6 +293,7 @@ export default {
     PageHeader,
     PageFooter,
     BrandSiteNavigationLayout,
+    Media,
   },
   mixins: [PageMixin],
   setup(props) {

package/src/brand-page/models/index.ts

@@ -83,6 +83,7 @@ export class BackgroundStyles {
   public backgroundImageUrl: string;
   public backgroundShapes: BackgroundShape[];
   public personalisationRole?: PersonalisationRole;
+  public media?: AbstractMedia;
 
   constructor(option: Partial<BackgroundStyles> = {}) {
     this.backgroundImageUrl = option.backgroundImageUrl || '';
@@ -96,6 +97,7 @@ export class BackgroundStyles {
         background: '',
       };
     this.personalisationRole = option.personalisationRole;
+    this.media = option.media || undefined;
   }
 }
 

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -327,6 +327,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
           "background": "",
         },
         "backgroundShapes": [],
+        "media": undefined,
         "personalisationRole": undefined,
         "style": {
           "background": "logo-background-color",
@@ -744,6 +745,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
           "background": "",
         },
         "backgroundShapes": [],
+        "media": undefined,
         "personalisationRole": undefined,
         "style": {
           "background": "logo-background-color",
@@ -1168,6 +1170,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
           "background": "",
         },
         "backgroundShapes": [],
+        "media": undefined,
         "personalisationRole": undefined,
         "style": {
           "background": "logo-background-color",

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -365,6 +365,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "background": "",
         },
         "backgroundShapes": [],
+        "media": undefined,
         "personalisationRole": undefined,
         "style": {
           "background": "logo-background-color",

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -339,6 +339,7 @@ BrandPageModel {
         "background": "",
       },
       "backgroundShapes": [],
+      "media": undefined,
       "personalisationRole": undefined,
       "style": {
         "background": "#0000ff",
@@ -795,6 +796,7 @@ BrandPageModel {
         "background": "",
       },
       "backgroundShapes": [],
+      "media": undefined,
       "personalisationRole": undefined,
       "style": {
         "background": "#0000ff",

package/src/brand-page/utils/view-model.util.ts

@@ -40,6 +40,7 @@ import type {
   TextShapeItem,
   GettyVideoMedia,
   AbstractMedia,
+  BackgroundStyles,
 } from '../models';
 import { ButtonStyles, SENSITIVE_CONTENT_TYPES, VIEWPORTS } from '../models';
 import {
@@ -78,6 +79,8 @@ import type {
   ShopViewModel,
   BookingSectionViewModel,
   GettyVideoViewModel,
+  PageStylesViewModel,
+  BackgroundStylesViewModel,
 } from '../view-models';
 import { isHexTransparent, setRgbAlpha } from './color.util';
 import type { ContentTextStylePropertyKey } from '../constants';
@@ -985,6 +988,22 @@ export const mapToBookingSectionViewModel = (
   );
 };
 
+export const mapToPageStyleViewModel = (
+  pageStyles: PageStyles,
+  options: ViewModelMappingOptions,
+): PageStylesViewModel => {
+  return {
+    backgroundStylesViewModel: mapBackgroundStylesToViewModel(
+      pageStyles.backgroundStyles,
+      options,
+    ),
+    buttonStyles: pageStyles.buttonStyles,
+    logoStyles: pageStyles.logoStyles,
+    textStyles: pageStyles.textStyles,
+    galleryStyles: pageStyles.galleryStyles,
+  };
+};
+
 export const mapToPageHeaderViewModel = (
   pageHeader: PageHeaderDesktop | PageHeaderMobile,
   pageStyles: PageStyles,
@@ -1284,6 +1303,26 @@ interface ViewModelMappingOptions {
   ) => void;
 }
 
+const mapBackgroundStylesToViewModel = (
+  backgroundStyles: BackgroundStyles,
+  options: ViewModelMappingOptions,
+): BackgroundStylesViewModel => {
+  // TODO(jyao): These need to be mapped to a view model eventually
+  return {
+    style: backgroundStyles.style,
+    backgroundShapeStyle: backgroundStyles.backgroundShapeStyle,
+    backgroundImageUrl: backgroundStyles.backgroundImageUrl,
+    backgroundShapes: backgroundStyles.backgroundShapes,
+    personalisationRole: backgroundStyles.personalisationRole,
+    mediaViewModel: backgroundStyles.media
+      ? mapMediaToContentViewModel({
+          media: backgroundStyles.media,
+          options,
+        })
+      : undefined,
+  };
+};
+
 export const getBrandPageViewModelFromBrandPageModel = (
   model: BrandPageModel,
   brandPageToken: string | undefined,
@@ -1313,7 +1352,7 @@ export const getBrandPageViewModelFromBrandPageModel = (
     brandPageToken,
     pages,
     showBrandCrowdLogo,
-    styles: model.styles,
+    styles: mapToPageStyleViewModel(model.styles, options),
     headerViewModelDesktop: mapToPageHeaderViewModel(
       model.pageHeaderDesktop,
       model.styles,
@@ -1460,7 +1499,8 @@ export const getCriticalResourceURLs = (
     }
 
     // shapes
-    const bgShapeFullBg = viewModel.styles?.backgroundStyles.backgroundImageUrl;
+    const bgShapeFullBg =
+      viewModel.styles?.backgroundStylesViewModel.backgroundImageUrl;
 
     if (typeof bgShapeFullBg !== 'undefined' && isValidSvgUrl(bgShapeFullBg)) {
       shapes.push(String(bgShapeFullBg));

package/src/brand-page/view-models.ts

@@ -39,6 +39,10 @@ import type {
   SensitiveContent,
   BookingSectionContent,
   MediaTypes,
+  TextStyles,
+  BackgroundStyle,
+  BackgroundShape,
+  PersonalisationRole,
 } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 
@@ -280,10 +284,28 @@ export interface PageFooterViewModel
   logo: LogoViewModel;
 }
 
+export interface BackgroundStylesViewModel {
+  style: BackgroundStyle;
+  backgroundShapeStyle: BackgroundStyle;
+  backgroundImageUrl: string;
+  backgroundShapes: BackgroundShape[];
+  personalisationRole?: PersonalisationRole;
+  mediaViewModel?: MediaViewModel;
+}
+
+// Note(jyao): View model for page styles, we will need to create new view model mapping for each style here in future
+export interface PageStylesViewModel {
+  backgroundStylesViewModel: BackgroundStylesViewModel;
+  buttonStyles: ButtonStyles; // TODO(jyao): Convert to view model
+  logoStyles: LogoStyles; // TODO(jyao): Convert to view model
+  textStyles: TextStyles; // TODO(jyao): Convert to view model
+  galleryStyles: GalleryStyles; // TODO(jyao): Convert to view model
+}
+
 export interface BrandPageViewModel {
   brandPageToken?: string;
   showBrandCrowdLogo: boolean;
-  styles: PageStyles;
+  styles: PageStylesViewModel;
   pages: PageViewModel[];
   brandPageType: BrandPageType;
   headerViewModelDesktop: PageHeaderViewModel;

package/src/brand-page-maker/components/preview/Preview.stories.ts

@@ -17,6 +17,7 @@ import { setupStoryPinia } from '../brand-page-maker/__fixtures__/store-fixture'
 import {
   mapToPageFooterViewModel,
   mapToPageHeaderViewModel,
+  mapToPageStyleViewModel,
   mapToViewModel,
 } from '../../../brand-page/utils';
 
@@ -46,7 +47,7 @@ const pages = [
 
 const viewModel: BrandPageViewModel = {
   showBrandCrowdLogo: true,
-  styles: pageStyles,
+  styles: mapToPageStyleViewModel(pageStyles, {}),
   headerViewModelDesktop: mapToPageHeaderViewModel(
     new PageHeaderDesktop(),
     pageStyles,

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

@@ -297,7 +297,9 @@
     "addMedia": "Medien hinzufügen",
     "addImage": "Bild hinzufügen",
     "replaceImage": "Bild ersetzen",
-    "image": "Bild"
+    "image": "Bild",
+    "media": "Medien",
+    "replaceMedia": "Medien ersetzen"
   },
   "colorPicker": {
     "newColor": "Neue Farbe",

package/src/bundles/bundled-translations.es-ES.json

@@ -297,7 +297,9 @@
     "addMedia": "Añade elementos multimedia",
     "addImage": "Añadir imagen",
     "replaceImage": "Reemplazar imagen",
-    "image": "Imagen"
+    "image": "Imagen",
+    "media": "Redes sociales",
+    "replaceMedia": "Reemplazar elementos multimedia"
   },
   "colorPicker": {
     "newColor": "Nuevo color",

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

@@ -297,7 +297,9 @@
     "addMedia": "Ajouter un média",
     "addImage": "Ajouter une image",
     "replaceImage": "Remplacer l'image",
-    "image": "Image"
+    "image": "Image",
+    "media": "Médias",
+    "replaceMedia": "Remplacer le média"
   },
   "colorPicker": {
     "newColor": "Nouvelle couleur",

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

@@ -297,7 +297,9 @@
     "addMedia": "Ajouter un média",
     "addImage": "Ajouter une image",
     "replaceImage": "Remplacer l'image",
-    "image": "Image"
+    "image": "Image",
+    "media": "Réseaux",
+    "replaceMedia": "Remplacer un média"
   },
   "colorPicker": {
     "newColor": "Nouvelle couleur",

package/src/bundles/bundled-translations.json

@@ -297,7 +297,9 @@
     "addMedia": "Add Media",
     "addImage": "Add Image",
     "replaceImage": "Replace Image",
-    "image": "Image"
+    "image": "Image",
+    "media": "Media",
+    "replaceMedia": "Replace Media"
   },
   "colorPicker": {
     "newColor": "New Color",

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

@@ -297,7 +297,9 @@
     "addMedia": "Adicionar mídia",
     "addImage": "Adicionar imagem",
     "replaceImage": "Substitua a imagem",
-    "image": "Imagem"
+    "image": "Imagem",
+    "media": "Mídia",
+    "replaceMedia": "Substituir mídia"
   },
   "colorPicker": {
     "newColor": "Nova cor",

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

@@ -297,7 +297,9 @@
     "addMedia": "Adicionar multimédia",
     "addImage": "Adicionar imagem",
     "replaceImage": "Substitua a imagem",
-    "image": "Imagem"
+    "image": "Imagem",
+    "media": "Multimédia",
+    "replaceMedia": "Substituir multimédia"
   },
   "colorPicker": {
     "newColor": "Nova cor",