@designcrowd/library.brand-page 5.15.21-ast-previews → 5.15.21-gettyfinal

package/lib/src/{CreatedOnBrandCrowd-de-de-B_xpayh-.js → CreatedOnBrandCrowd-de-de-K-AgT_7y.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-vUtxwgjD.js → CreatedOnBrandCrowd-en-us-DX-eOXIJ.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-F4XWuYlk.js → CreatedOnBrandCrowd-es-es-solPysq-.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Dp3p64Ng.js → CreatedOnBrandCrowd-fr-ca-DCdRbub4.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-Dp3p64Ng.js → CreatedOnBrandCrowd-fr-fr-DCdRbub4.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DbvlKcTH.js → CreatedOnBrandCrowd-pt-br-CWy-ZMjD.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DbvlKcTH.js → CreatedOnBrandCrowd-pt-pt-CWy-ZMjD.js}

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

package/lib/src/{CreatedOnDcom-de-de-CI0CBxU6.js → CreatedOnDcom-de-de-CZNGEnA1.js}

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

package/lib/src/{CreatedOnDcom-en-us-BeidG_AF.js → CreatedOnDcom-en-us-C9XDF01U.js}

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

package/lib/src/{CreatedOnDcom-es-es-PGD92ujM.js → CreatedOnDcom-es-es-BXZyfuHJ.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DDW5qahq.js → CreatedOnDcom-fr-ca-zOsQivrO.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-H9uwg24x.js → CreatedOnDcom-fr-fr-DAtyVaxQ.js}

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

package/lib/src/{CreatedOnDcom-pt-br-DXzuBtQ6.js → CreatedOnDcom-pt-br-aZ6Ws1mJ.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DPNC6h9-.js → CreatedOnDcom-pt-pt-DytMZG1X.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-C-Ho4Aiu.js";
+import { _ as M } from "./lib-Cwr-7uws.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 { MediaViewModel } 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<MediaViewModel>;
+        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<MediaViewModel>;
+        required: false;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
+    media: MediaViewModel;
     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/components/page/Page.stories.js

@@ -12,7 +12,7 @@ const pages = brandPageModel.pages.map((p) => ({
     ...p,
     isHidden: false,
     contents: p.contents
-        .map(mapToViewModel(brandPageModel.styles, brandPageModel.brandPageType || BRAND_PAGE_TYPES.default))
+        .map(mapToViewModel(brandPageModel.styles, brandPageModel.brandPageType || BRAND_PAGE_TYPES.default, {}))
         .filter((x) => x !== undefined),
 }));
 const viewModel = {

package/lib/src/brand-page/components/payment/__fixtures__/request-payment.d.ts

@@ -22,6 +22,7 @@ export declare const context: {
     options?: {
         disableNavigationSideMenu?: boolean | undefined;
         mediaSizes?: "size1x" | "size2x" | "sizeThumb" | undefined;
+        renderVideoAsImage?: boolean | undefined;
     } | undefined;
     abTests?: import("../../../models").AbTest | undefined;
     isCapturingPreview: boolean;

package/lib/src/brand-page/components/payment/__fixtures__/support-me.d.ts

@@ -22,6 +22,7 @@ export declare const context: {
     options?: {
         disableNavigationSideMenu?: boolean | undefined;
         mediaSizes?: "size1x" | "size2x" | "sizeThumb" | undefined;
+        renderVideoAsImage?: boolean | undefined;
     } | undefined;
     abTests?: import("../../../models").AbTest | undefined;
     isCapturingPreview: boolean;

package/lib/src/brand-page/models/brand-page-context.model.d.ts

@@ -69,6 +69,7 @@ export interface BrandPageContext {
     options?: {
         disableNavigationSideMenu?: boolean;
         mediaSizes?: MediaSizes;
+        renderVideoAsImage?: boolean;
     };
     abTests?: AbTest;
     /** Is brand page rendered for preview */

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,25 @@ 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, options: ViewModelMappingOptions) => 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;
-}) => (content: Content) => ContentViewModel | undefined;
-export declare const getBrandPageViewModelFromBrandPageModel: (model: BrandPageModel, brandPageToken: string | undefined, showBrandCrowdLogo?: boolean, useOldLogoRenderSize?: boolean) => BrandPageViewModel;
+export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType, options: ViewModelMappingOptions) => (content: Content) => ContentViewModel | undefined;
+interface ViewModelMappingOptions {
+    useOldLogoRenderSize?: boolean;
+    getVideoUrls?: (token: string) => {
+        videoUrl: string;
+        previewImageUrl: string;
+    };
+    getS3VideoUrls?: (token: string) => {
+        videoUrl: string;
+        previewImageUrl: string;
+    };
+    setVideoUrlsWithToken?: (token: string, videoUrl: string, previewImageUrl: string, assetId: string) => void;
+}
+export declare const getBrandPageViewModelFromBrandPageModel: (model: BrandPageModel, brandPageToken: string | undefined, showBrandCrowdLogo: boolean | undefined, options: ViewModelMappingOptions) => 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 +39,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,43 @@ const mapToContactFormViewModel = (content, styles, brandPageType) => {
             content.layoutStyle !== '',
     }, styles);
 };
-export const mapToBannerSectionViewModel = (content, styles) => {
+const mapGettyVideoToGettyVideoViewModel = (media, options) => {
+    if (!options.getVideoUrls?.(media.gettyToken)) {
+        const s3Urls = options.getS3VideoUrls?.(media.gettyToken);
+        if (s3Urls && s3Urls?.videoUrl) {
+            options.setVideoUrlsWithToken?.(media.gettyToken, s3Urls.videoUrl, s3Urls.previewImageUrl, media.gettyAssetId);
+        }
+    }
+    const videoUrls = options.getVideoUrls?.(media.gettyToken) || {
+        videoUrl: undefined,
+        previewImageUrl: undefined,
+    };
+    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, options, }) => {
+    if (!media) {
+        return undefined;
+    }
+    switch (media.type) {
+        case 'getty-video':
+            return mapGettyVideoToGettyVideoViewModel(media, options);
+        case 'image':
+        // TODO(jyao): Implement later
+        default:
+            throw new Error(`Unsupported media type: ${media.type}`);
+    }
+};
+export const mapToBannerSectionViewModel = (content, styles, options) => {
     return applyViewModelTextStyles({
         ...content,
         role: content.type,
@@ -410,6 +446,10 @@ export const mapToBannerSectionViewModel = (content, styles) => {
         isFullWidth: true,
         imageUrl: mapToBannerSectionImageUrl(content),
         isBigImageType: isBigImageType(content.displayStyle),
+        mediaViewModel: mapMediaToContentViewModel({
+            media: content.media,
+            options,
+        }),
     }, styles);
 };
 const mapToAboutSectionViewModel = (content, styles) => {
@@ -675,7 +715,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);
         case 'booking-section':
             return mapToBookingSectionViewModel(content, styles);
         case 'about-section':
@@ -709,10 +749,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, options) => {
     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, options))
             .filter((c) => c !== undefined);
         return {
             title: p.title,
@@ -726,10 +766,10 @@ export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, s
         pages,
         showBrandCrowdLogo,
         styles: model.styles,
-        headerViewModelDesktop: mapToPageHeaderViewModel(model.pageHeaderDesktop, model.styles, pages, useOldLogoRenderSize),
-        headerViewModelMobile: mapToPageHeaderViewModel(model.pageHeaderMobile, model.styles, pages, useOldLogoRenderSize),
-        footerViewModelDesktop: mapToPageFooterViewModel(model.pageFooterDesktop, model.styles, useOldLogoRenderSize),
-        footerViewModelMobile: mapToPageFooterViewModel(model.pageFooterMobile, model.styles, useOldLogoRenderSize),
+        headerViewModelDesktop: mapToPageHeaderViewModel(model.pageHeaderDesktop, model.styles, pages, options.useOldLogoRenderSize),
+        headerViewModelMobile: mapToPageHeaderViewModel(model.pageHeaderMobile, model.styles, pages, options.useOldLogoRenderSize),
+        footerViewModelDesktop: mapToPageFooterViewModel(model.pageFooterDesktop, model.styles, options.useOldLogoRenderSize),
+        footerViewModelMobile: mapToPageFooterViewModel(model.pageFooterMobile, model.styles, options.useOldLogoRenderSize),
         brandPageType: model.brandPageType || BRAND_PAGE_TYPES.default,
         faviconUrl: model.faviconUrl,
         ogImageUrl: model.ogImageUrl,

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 | undefined;
+    previewImageUrl: string | undefined;
+    settings: {
+        autoPlay: boolean;
+    };
+}
+export interface ImageMediaViewModel extends MediaViewModel {
+    type: 'image';
 }
 export interface TextImageSectionViewModel {
     id: string;

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts

@@ -23,6 +23,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

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

@@ -66,6 +66,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;
@@ -752,6 +753,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;
@@ -827,6 +829,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

@@ -174,6 +174,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/brand-page-maker/BrandPageMakerTemplateSettings.mixin.d.ts

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../lib").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

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;
@@ -518,6 +520,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

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

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

package/lib/src/brand-page-maker/components/preview/Preview.mixin.js

@@ -77,6 +77,7 @@ export default defineComponent({
                 isServerRender: false,
                 options: {
                     mediaSizes: MEDIA_SIZES.size1x,
+                    renderVideoAsImage: true,
                 },
                 stripePublishableKey: undefined,
                 runtimeEnvironment: this.runtimeEnvironment,

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

@@ -15,7 +15,7 @@ const pages = [
         slug: '',
         isHidden: false,
         contents: brandPageData
-            .contents.map(mapToViewModel(pageStyles, brandPageData.brandPageType || BRAND_PAGE_TYPES.default))
+            .contents.map(mapToViewModel(pageStyles, brandPageData.brandPageType || BRAND_PAGE_TYPES.default, {}))
             .filter((x) => x !== undefined),
     },
 ];

package/lib/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.d.ts

@@ -257,6 +257,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

package/lib/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.d.ts

@@ -256,6 +256,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;

package/lib/src/brand-page-maker/components/social-share/SocialShare.mixin.d.ts

@@ -30,6 +30,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;