@designcrowd/library.brand-page 5.15.5 → 5.15.6-getty-3

package/lib/src/{CreatedOnBrandCrowd-de-de-BxSRz5rV.js → CreatedOnBrandCrowd-de-de-BqBtYinU.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-NaxZd0H-.js";
+import { _ as t } from "./lib-CeUSV6Wj.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-bvRHsK4P.js → CreatedOnBrandCrowd-en-us-CKvgampI.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-NaxZd0H-.js";
+import { _ as t } from "./lib-CeUSV6Wj.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-B7UhGZ_i.js → CreatedOnBrandCrowd-es-es-DGn6o_T4.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-NaxZd0H-.js";
+import { _ as t } from "./lib-CeUSV6Wj.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DbrCnQfL.js → CreatedOnBrandCrowd-fr-ca-DwjTocXU.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-NaxZd0H-.js";
+import { _ as t } from "./lib-CeUSV6Wj.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DbrCnQfL.js → CreatedOnBrandCrowd-fr-fr-DwjTocXU.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-NaxZd0H-.js";
+import { _ as t } from "./lib-CeUSV6Wj.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DHBSkoHf.js → CreatedOnBrandCrowd-pt-br-DaCU-CcP.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-NaxZd0H-.js";
+import { _ as t } from "./lib-CeUSV6Wj.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-DHBSkoHf.js → CreatedOnBrandCrowd-pt-pt-DaCU-CcP.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-NaxZd0H-.js";
+import { _ as t } from "./lib-CeUSV6Wj.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-CJ5PfRgk.js → CreatedOnDcom-de-de-Ci8-WB33.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-NaxZd0H-.js";
+import { _ as e } from "./lib-CeUSV6Wj.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-CFgQcJsC.js → CreatedOnDcom-en-us-BmW9R2mS.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-NaxZd0H-.js";
+import { _ as e } from "./lib-CeUSV6Wj.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-2qGiWLwl.js → CreatedOnDcom-es-es-D2fkI_U1.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-NaxZd0H-.js";
+import { _ as e } from "./lib-CeUSV6Wj.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-BrBIvOOs.js → CreatedOnDcom-fr-ca-BQKfPaed.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-NaxZd0H-.js";
+import { _ as e } from "./lib-CeUSV6Wj.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-CrvtNu83.js → CreatedOnDcom-fr-fr-CvHbnSy5.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-NaxZd0H-.js";
+import { _ as e } from "./lib-CeUSV6Wj.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-BwnlmEkz.js → CreatedOnDcom-pt-br-BQTCVFRZ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-NaxZd0H-.js";
+import { _ as M } from "./lib-CeUSV6Wj.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-DMqOsUps.js → CreatedOnDcom-pt-pt-Bu-Vs8uA.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-NaxZd0H-.js";
+import { _ as M } from "./lib-CeUSV6Wj.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/media/Media.mixin.d.ts

@@ -1,5 +1,6 @@
 import type { PropType } from 'vue';
 import type { BrandPageContext, ColorReplacement } from '../../models';
+import type { GettyVideoViewModel } from '../../../lib';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     mediaType: {
         type: StringConstructor;
@@ -59,6 +60,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
+    media: {
+        type: PropType<GettyVideoViewModel>;
+        required: false;
+        default: undefined;
+    };
 }>, {}, {
     type: string | undefined;
     isImageBroken: boolean;
@@ -123,7 +129,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
+    media: {
+        type: PropType<GettyVideoViewModel>;
+        required: false;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
+    media: GettyVideoViewModel;
     colorReplacements: ColorReplacement[];
     mediaType: string;
     size: string;

package/lib/src/brand-page/components/media/Media.mixin.js

@@ -59,6 +59,11 @@ export default defineComponent({
             required: false,
             default: undefined,
         },
+        media: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
     },
     data() {
         return {

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

@@ -271,6 +271,7 @@ export interface BannerSectionContent extends Content {
     overlayColor: BrandPageCssStyle;
     overlayOpacity: number;
     aspectRatio?: number | null;
+    media?: AbstractMedia;
 }
 export declare const MEDIA_TYPES: {
     readonly image: "image";
@@ -493,6 +494,21 @@ export declare abstract class AbstractPageFooterStyles {
     logoImageWidth: string | undefined;
     protected constructor(options?: AbstractPageFooterStylesType);
 }
+export type MediaTypes = 'getty-video' | 'user-upload-video' | 'image';
+export declare abstract class AbstractMedia {
+    abstract type: MediaTypes;
+}
+type GettyVideoMediaType = Partial<GettyVideoMedia>;
+export declare class GettyVideoMedia extends AbstractMedia {
+    type: MediaTypes;
+    gettyToken: string;
+    gettyAssetId: string;
+    mimeType: string;
+    settings: {
+        autoPlay?: boolean;
+    };
+    constructor(options?: GettyVideoMediaType);
+}
 export declare class PageFooterDesktop extends AbstractPageFooterStyles {
     constructor(options?: AbstractPageFooterStylesType);
 }

package/lib/src/brand-page/models/index.js

@@ -351,6 +351,25 @@ export class AbstractPageFooterStyles {
         this.textFontFamily = options.textFontFamily;
     }
 }
+export class AbstractMedia {
+}
+export class GettyVideoMedia extends AbstractMedia {
+    type = 'getty-video';
+    gettyToken;
+    gettyAssetId;
+    mimeType;
+    settings;
+    constructor(options = {}) {
+        options = cloneDeep(options);
+        super();
+        this.type = 'getty-video';
+        this.gettyToken = options.gettyToken || '';
+        this.gettyAssetId = options.gettyAssetId || '';
+        this.mimeType = options.mimeType || '';
+        this.settings = options.settings || {};
+    }
+}
+//jyao: END of media related entities and classes
 export class PageFooterDesktop extends AbstractPageFooterStyles {
     constructor(options = {}) {
         options = cloneDeep(options);

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

@@ -5,15 +5,26 @@ export declare const mapToImageViewModel: (content: ImageContent) => ImageViewMo
 export declare const mapToImageGalleryViewModel: (content: ImageGalleryContent, globalStyles: GalleryStyles) => ImageGalleryViewModel;
 export declare const mapToProfileViewModel: (content: ProfileContent, styles: PageStyles) => ProfileViewModel;
 export declare const mapToTextViewModel: (content: TextContent, styles: PageStyles, brandPageType: BrandPageType) => TextViewModel;
-export declare const mapToBannerSectionViewModel: (content: BannerSectionContent, styles: PageStyles) => BannerSectionViewModel;
+export declare const mapToBannerSectionViewModel: (content: BannerSectionContent, styles: PageStyles, contentOptions?: {
+    getVideoUrls?: GetVideoUrls;
+}) => BannerSectionViewModel;
 export declare const mapToImagesSectionViewModel: (content: ImagesSectionContent, styles: PageStyles, brandPageType: BrandPageType) => TextImageSectionViewModel;
 export declare const mapToBookingSectionViewModel: (content: BookingSectionContent, styles: PageStyles) => BookingSectionViewModel;
 export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[], useOldLogoRenderSize?: boolean) => PageHeaderViewModel;
 export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles, useOldLogoRenderSize?: boolean) => PageFooterViewModel;
 export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType, options?: {
     useOldLogoRenderSize: boolean;
+    contentOptions?: {
+        getVideoUrls?: GetVideoUrls;
+    };
 }) => (content: Content) => ContentViewModel | undefined;
-export declare const getBrandPageViewModelFromBrandPageModel: (model: BrandPageModel, brandPageToken: string | undefined, showBrandCrowdLogo?: boolean, useOldLogoRenderSize?: boolean) => BrandPageViewModel;
+type GetVideoUrls = (token: string) => {
+    videoUrl: string;
+    previewImageUrl: string;
+} | undefined;
+export declare const getBrandPageViewModelFromBrandPageModel: (model: BrandPageModel, brandPageToken: string | undefined, showBrandCrowdLogo?: boolean, useOldLogoRenderSize?: boolean, contentOptions?: {
+    getVideoUrls?: GetVideoUrls;
+}) => BrandPageViewModel;
 export declare const isLogoViewModel: (viewModel: ContentViewModel) => viewModel is LogoViewModel;
 /** for service.brand-page website preview by logo draft token */
 export declare const applyLogoImageToBrandPageViewModel: (viewModel: BrandPageViewModel, logoImage: LogoImageModel) => BrandPageViewModel;
@@ -29,3 +40,4 @@ export interface CriticalResourceURLs {
  * For service.brand-page to preload critical resources
  */
 export declare const getCriticalResourceURLs: (viewModel: BrandPageViewModel) => CriticalResourceURLs;
+export {};

package/lib/src/brand-page/utils/view-model.util.js

@@ -391,7 +391,37 @@ const mapToContactFormViewModel = (content, styles, brandPageType) => {
             content.layoutStyle !== '',
     }, styles);
 };
-export const mapToBannerSectionViewModel = (content, styles) => {
+const mapGettyVideoToGettyVideoViewModel = (media, contentOptions) => {
+    const videoUrls = contentOptions?.getVideoUrls?.(media.gettyToken) || {
+        videoUrl: '',
+        previewImageUrl: '',
+    };
+    return {
+        type: 'getty-video',
+        gettyToken: media.gettyToken,
+        gettyAssetId: media.gettyAssetId,
+        mimeType: media.mimeType,
+        videoUrl: videoUrls.videoUrl,
+        previewImageUrl: videoUrls.previewImageUrl,
+        settings: {
+            autoPlay: media.settings?.autoPlay || false,
+        },
+    };
+};
+const mapMediaToContentViewModel = (media, displayStyle, contentOptions) => {
+    if (!media) {
+        return undefined;
+    }
+    switch (media.type) {
+        case 'getty-video':
+            return mapGettyVideoToGettyVideoViewModel(media, contentOptions);
+        case 'image':
+        // TODO(jyao): Implement later
+        default:
+            throw new Error(`Unsupported media type: ${media.type}`);
+    }
+};
+export const mapToBannerSectionViewModel = (content, styles, contentOptions) => {
     return applyViewModelTextStyles({
         ...content,
         role: content.type,
@@ -410,6 +440,7 @@ export const mapToBannerSectionViewModel = (content, styles) => {
         isFullWidth: true,
         imageUrl: mapToBannerSectionImageUrl(content),
         isBigImageType: isBigImageType(content.displayStyle),
+        mediaViewModel: mapMediaToContentViewModel(content.media, content.displayStyle, contentOptions),
     }, styles);
 };
 const mapToAboutSectionViewModel = (content, styles) => {
@@ -675,7 +706,7 @@ export const mapToViewModel = (styles, brandPageType, options) => (content) => {
         case 'contact-form':
             return mapToContactFormViewModel(content, styles, brandPageType);
         case 'banner-section':
-            return mapToBannerSectionViewModel(content, styles);
+            return mapToBannerSectionViewModel(content, styles, options?.contentOptions);
         case 'booking-section':
             return mapToBookingSectionViewModel(content, styles);
         case 'about-section':
@@ -709,10 +740,10 @@ export const mapToViewModel = (styles, brandPageType, options) => (content) => {
             assertUnreachable();
     }
 };
-export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, showBrandCrowdLogo = true, useOldLogoRenderSize = false) => {
+export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, showBrandCrowdLogo = true, useOldLogoRenderSize = false, contentOptions) => {
     const pages = model.pages.map((p) => {
         const contents = p.contents
-            .map(mapToViewModel(model.styles, model.brandPageType || BRAND_PAGE_TYPES.default, { useOldLogoRenderSize }))
+            .map(mapToViewModel(model.styles, model.brandPageType || BRAND_PAGE_TYPES.default, { useOldLogoRenderSize, contentOptions }))
             .filter((c) => c !== undefined);
         return {
             title: p.title,

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

@@ -1,4 +1,4 @@
-import type { PageStyles, ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent } from './models';
+import type { PageStyles, ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section';
 export interface ContentViewModel {
@@ -70,6 +70,24 @@ export interface BannerSectionViewModel extends ContentViewModel, Omit<BannerSec
     buttonViewModel: ButtonViewModel;
     isFullWidth: boolean;
     isBigImageType: boolean;
+    mediaViewModel?: MediaViewModel;
+}
+export interface MediaViewModel {
+    type: MediaTypes;
+}
+export interface GettyVideoViewModel extends MediaViewModel {
+    type: 'getty-video';
+    gettyToken: string;
+    gettyAssetId: string;
+    mimeType: string;
+    videoUrl: string;
+    previewImageUrl: string;
+    settings: {
+        autoPlay: boolean;
+    };
+}
+export interface ImageMediaViewModel extends MediaViewModel {
+    type: 'image';
 }
 export interface TextImageSectionViewModel {
     id: string;

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

@@ -746,6 +746,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             colorReplacements?: import("../../../brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
+        _setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../shared/my-uploads/models").MediaBaseSelectedPayload): void;
         _setItems({ items }: {
             items: import("../../../shared/content-settings/models").ContentItem<any>[];
         }): void;
@@ -821,6 +822,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             colorReplacements?: import("../../../brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
+        setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../shared/my-uploads/models").MediaBaseSelectedPayload): void;
         setItems(payload: {
             items: import("../../../shared/content-settings/models").ContentItem<import("../../../brand-page").Content>[];
         }): void;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.js

@@ -175,6 +175,7 @@ const InitialiseMakerStores = (options) => {
         triggerSaveSuccessMessage: false,
         abTests: {},
         isSubsequentPublish: false,
+        gettyVideos: [],
     });
     userStore.setIsAdmin({ isAdmin: options.isAdmin || false });
     userStore.setHasBrandPagePremiumSubscription(false);

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -408,6 +408,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             colorReplacements?: import("../../../brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
+        _setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../shared/my-uploads/models").MediaBaseSelectedPayload): void;
         _setItems({ items }: {
             items: ContentItem<any>[];
         }): void;
@@ -483,6 +484,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             colorReplacements?: import("../../../brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
+        setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../shared/my-uploads/models").MediaBaseSelectedPayload): void;
         setItems(payload: {
             items: ContentItem<Content>[];
         }): void;

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

@@ -1,4 +1,4 @@
-import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, } from '../../brand-page';
+import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '../../brand-page';
 import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, } from '../models';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '../../brand-page';
@@ -225,11 +225,12 @@ const shopReplaceImageSettings = () => ({
     desiredHeight: undefined,
     desiredWidth: undefined,
 });
+// TOOD(jyao): This should be reworked to bannerSectionReplaceMediaSettings
 const bannerSectionReplaceImageSettings = () => ({
     tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'VIDEO_LIBRARY', 'SHAPE_LIBRARY'],
-    buttonTitleAdd: contentSettingsTr(`addImageButtonTitle`),
-    titleAdd: contentSettingsTr(`addImageHeaderTitle`),
-    titleReplace: contentSettingsTr(`imageReplaceTitle`),
+    buttonTitleAdd: contentSettingsTr(`addMediaTitle`),
+    titleAdd: contentSettingsTr(`addMediaTitle`),
+    titleReplace: contentSettingsTr(`replaceMediaTitle`),
     contentMediaFieldName: MediaFieldNames.avatarImageUrl,
     openByDefault: false,
     mediaType: MEDIA_TYPES.image,
@@ -238,12 +239,25 @@ const bannerSectionReplaceImageSettings = () => ({
     desiredHeight: undefined,
     desiredWidth: undefined,
     setContentMedia: (content, value) => {
-        content.imageUrl = value.imageUrl;
-        content.mediaType = MEDIA_TYPES.image;
-        if (isValidSvgUrl(content.imageUrl)) {
-            content.size = DEFAULT_SHAPE_SIZE;
-            content.mediaType = MEDIA_TYPES.shape;
-            content.colorReplacements = value.colorReplacements || [];
+        if (value.media && value.media.type === 'getty-video') {
+            const gettyMedia = value.media;
+            content.media = new GettyVideoMedia({
+                gettyToken: gettyMedia.token,
+                gettyAssetId: gettyMedia.assetId,
+                mimeType: gettyMedia.mimeType,
+                settings: {
+                    autoPlay: gettyMedia.autoPlay,
+                },
+            });
+        }
+        else {
+            content.imageUrl = value.imageUrl;
+            content.mediaType = MEDIA_TYPES.image;
+            if (isValidSvgUrl(content.imageUrl)) {
+                content.size = DEFAULT_SHAPE_SIZE;
+                content.mediaType = MEDIA_TYPES.shape;
+                content.colorReplacements = value.colorReplacements || [];
+            }
         }
     },
 });
@@ -1836,7 +1850,7 @@ export const BANNER_SECTION_SETTINGS_CONFIG = () => ({
         imageUrl: {
             type: 'image',
             replaceImageSettings: bannerSectionReplaceImageSettings(),
-            title: contentSettingsTr(`imageTitle`),
+            title: contentSettingsTr(`media`),
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
         },
         imageUrlOverride: {

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

@@ -48,12 +48,24 @@ export interface BrandPageContainerState {
     abTests: Record<string, string>;
     isSubsequentPublish: boolean;
 }
+type GettyVideoAdminEditorViewModelResponse = {
+    assetId: string;
+    token: string;
+    isGettyAsset: string;
+    videoPreviewAsset: {
+        uri: string;
+    };
+    imagePreviewAsset: {
+        uri: string;
+    };
+};
 export type InitialisePayload = Omit<BrandPageContainerState, 'customDomain' | 'customDomainConfig'> & {
     logoDraftToken?: string;
     brandPageCustomDomain?: CustomDomainModel;
     isBrandPageCustomDomainEnabled: boolean;
     logoTemplateAsset: LogoTemplateAsset | undefined;
     logoDraftAssets: LogoDraftAsset[];
+    gettyVideos: GettyVideoAdminEditorViewModelResponse[];
 };
 export declare const BRANDPAGE_STATUS: Readonly<{
     Published: "Published";
@@ -279,3 +291,4 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
         isCustomDomainEnabled: any;
     }): Promise<void>;
 }>;
+export {};

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

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import brandPageClient from '../../../clients/brand-page-client';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useLogoStore, useUiStore, } from '../../stores';
+import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useLogoStore, useUiStore, useVideoStore, } from '../../stores';
 import { SIDE_BAR_TAB_NAMES } from '../../constants';
 import { BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, getAbTestResults, getValueType, } from '../../../brand-page';
 import { isLogoContent } from '../../../brand-page/utils';
@@ -11,6 +11,7 @@ import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/sho
 import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '../../composables/useEventTracker';
 import { navigationTr } from '../../../composables/useTranslate';
 import { errorTr, constantsTr } from '../../../composables/useTranslate';
+import { findValuesByKey } from '../../../helpers/ts.helper';
 export const BRANDPAGE_STATUS = Object.freeze({
     Published: 'Published',
     Unpublished: 'Unpublished',
@@ -68,6 +69,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     actions: {
         initialise(payload) {
             const localisedRouteStore = useLocalisedRouteStore();
+            const videoStore = useVideoStore();
             if (process.env.NODE_ENV !== 'production') {
                 if (typeof localisedRouteStore.baseBrandPageDomain !== 'string') {
                     console.error('brandPageBaseUrl should not be undefined');
@@ -130,6 +132,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             if (payload.logoDraftToken) {
                 uiStore.setLogoDraftToken({ logoDraftToken: payload.logoDraftToken });
             }
+            payload?.gettyVideos?.map((video) => videoStore.setVideoUrlsWithToken(video.token, video.videoPreviewAsset.uri, video.imagePreviewAsset.uri, video.assetId));
         },
         setDesignTemplateToken(payload) {
             this.designTemplateToken = payload.designTemplateToken;
@@ -464,6 +467,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             const uiStore = useUiStore();
             const brandPageMakerStore = useBrandPageMakerStore();
             const shopSettingStore = useShopConfigStore();
+            const videoStore = useVideoStore();
             await brandPageMakerStore.validateContentItems();
             await brandPageMakerStore.validateBrandPageData();
             const brandPageData = cloneDeep(brandPageMakerStore.brandPageData);
@@ -516,6 +520,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                     .map((x) => x.logoImage.logoDraftToken)
                     .filter((x) => !!x));
             }
+            const gettyAssetIds = [];
+            if (videoStore.videoUrls) {
+                Object.values(videoStore.videoUrls).map((video) => gettyAssetIds.push(video.assetId));
+            }
             return {
                 designTemplateToken: this.designTemplateToken,
                 logoDraftToken: uiStore.logoDraftToken, // TODO: remove this property after the release as second release for smooth release transition use below `logoDraftTokens`
@@ -526,6 +534,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                     : undefined,
                 brandPageContentTypes: this.brandPageContentTypes,
                 shouldPublish: this.isPublished,
+                gettyAssetIds,
                 ...prepurchaseExportData,
             };
         },
@@ -659,11 +668,19 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             if (!userStore.isAdmin) {
                 throw new Error('saveTemplate is not allowed in non admin mode');
             }
-            const data = JSON.stringify(brandPageMakerStore.brandPageTemplate);
+            const dataObject = brandPageMakerStore.brandPageTemplate;
+            const data = JSON.stringify(dataObject);
             if (typeof window?.parent?.saveTemplate !== 'function') {
                 throw new Error('required saveTemplate function is undefined');
             }
-            const success = await window.parent.saveTemplate(!this.designTemplateToken, data);
+            const gettyAssetIds = findValuesByKey(dataObject, 'gettyAssetId');
+            const exportedOptions = {
+                designAttributes: {
+                    gettyAssetIds: gettyAssetIds,
+                    hasGettyVideos: gettyAssetIds.length > 0,
+                },
+            };
+            const success = await window.parent.saveTemplate(!this.designTemplateToken, data, exportedOptions);
             if (success) {
                 await brandPageMakerStore.enqueueSaveSuccessMessage({
                     description: 'Template saved',

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -31,6 +31,7 @@ import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { useConsent } from '../../../brand-page/composables/consent.composable';
 import { commonTr, errorTr } from '../../../composables/useTranslate';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
+import { useVideoStore } from '../video';
 const brandPageTypeTemplateTypeMap = {
     [BRAND_PAGE_TYPES.default]: 'Brand Page',
     [BRAND_PAGE_TYPES.brandSite]: 'Brand Site',
@@ -862,9 +863,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         brandPageViewModel() {
             const userStore = useBrandPageMakerUserStore();
             const uiStore = useUiStore();
+            const videoStore = useVideoStore();
             if (userStore.isAdmin && uiStore.logoTheme) {
                 const themedBrandPage = applyLogoThemeToBrandPageModel(uiStore.logoTheme, this.brandPageData).model;
-                return getBrandPageViewModelFromBrandPageModel(themedBrandPage, this.brandPageToken);
+                return getBrandPageViewModelFromBrandPageModel(themedBrandPage, this.brandPageToken, undefined, undefined, { getVideoUrls: videoStore.getVideoUrlsForToken });
             }
             const showBrandCrowdLogo = userStore.features.showBrandCrowdLogo;
             if (process.env.NODE_ENV !== 'production') {
@@ -872,9 +874,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 if (isModified) {
                     console.error('BrandPageData styles should not contain STYLE_THEME key(s) when in non-admin mode');
                 }
-                return getBrandPageViewModelFromBrandPageModel(model, this.brandPageToken, showBrandCrowdLogo);
+                return getBrandPageViewModelFromBrandPageModel(model, this.brandPageToken, showBrandCrowdLogo, undefined, { getVideoUrls: videoStore.getVideoUrlsForToken });
             }
-            return getBrandPageViewModelFromBrandPageModel(this.brandPageData, this.brandPageToken, showBrandCrowdLogo);
+            return getBrandPageViewModelFromBrandPageModel(this.brandPageData, this.brandPageToken, showBrandCrowdLogo, undefined, { getVideoUrls: videoStore.getVideoUrlsForToken });
         },
         isInteractivePreviewEnabled() {
             const uiStore = useUiStore();

package/lib/src/brand-page-maker/stores/index.d.ts

@@ -6,3 +6,4 @@ export * from './brandpage-container';
 export * from './event-manager';
 export * from './route';
 export * from './logo-store';
+export * from './video';

package/lib/src/brand-page-maker/stores/index.js

@@ -5,3 +5,4 @@ export * from './brandpage-container';
 export * from './event-manager';
 export * from './route';
 export * from './logo-store';
+export * from './video';

package/lib/src/brand-page-maker/stores/video/index.d.ts

@@ -0,0 +1 @@
+export * from './video-store';

package/lib/src/brand-page-maker/stores/video/index.js

@@ -0,0 +1 @@
+export * from './video-store';