@designcrowd/library.brand-page 5.16.1 → 5.16.2-background-1

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;
@@ -194,6 +197,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: [],
@@ -130,5 +131,36 @@ export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings',
         setBackgroundMode(payload) {
             this.backgroundMode = payload.backgroundMode;
         },
+        setBackgroundMedia(payload) {
+            console.log('Here in the background settings store', 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/content-settings/components/image-field/ImageField.mixin.js

@@ -109,7 +109,9 @@ export default defineComponent({
             });
         },
         onRemove() {
-            this.content.media = undefined;
+            if (this.content?.media) {
+                this.content.media = undefined;
+            }
             this.imgValue = '';
             this.imageUrl = '';
         },

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

@@ -850,6 +850,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.1",
+  "version": "5.16.2-background-1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/media/Shape.vue

@@ -6,7 +6,7 @@
     >
       <object :style="objectStyle" :data="objectUrl" />
       <!-- Div overlay over object element so that clicks are registered on current dom rather than iframe in side object -->
-      <div :style="objectStyle" class="tw-absolute" />
+      <div :style="objectStyle" class="tw-absolute tw-pointer-events-none" />
     </div>
   </div>
 </template>

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,
         };
       }
 
@@ -149,38 +155,41 @@ export default defineComponent({
     },
 
     rootBackgroundStyles(): BrandPageCssStyle {
+      console.log('vm styles ', this.viewModel.styles);
       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
+    class="brand-page-root-background"
+    :style="rootbackgroundStylesViewModel"
+  />
+  {{ console.log('This is the styles: ', viewModel) }}
+  <Media
+    v-if="viewModel.styles?.backgroundStylesViewModel?.mediaViewModel"
+    :media="viewModel.styles.backgroundStylesViewModel.mediaViewModel"
+    :context="context"
+    :img-classes="{
+      'tw-w-full tw-h-full tw-object-cover tw-fixed tw-left-0 tw-top-0 tw-z-0': 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

@@ -29,6 +29,7 @@ import { EMPTY_LOGO_IMAGE_MODEL, LogoStyles } from './logo.model';
 import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
 import cloneDeep from 'lodash.clonedeep';
 import type { BrandPagePaymentConfig } from './payment.model';
+import type { MediaViewModel } from '../view-models';
 
 export * from './brand-page-context.model';
 export * from './payment.model';
@@ -83,6 +84,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 +98,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/brand-page-maker/stores/video/video-store.ts

@@ -19,7 +19,7 @@ export interface videoStoreState {
 export const useVideoStore = defineStore('video', {
   state: (): videoStoreState => ({
     videoUrls: {},
-    gettyImagesKeyPrefix: '',
+    gettyImagesKeyPrefix: 'uat2/getty-videos',
     shouldPlayVideos: true,
   }),
   actions: {

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/shared/background-settings/components/BackgroundSettings.vue

@@ -15,7 +15,7 @@
         {{ backgroundSettingsTr(`addMedia`) }}
       </h4>
 
-      <CollapsiblePanel :title="backgroundSettingsTr('image')">
+      <CollapsiblePanel :title="backgroundSettingsTr('media')">
         <ImageField
           id="background-image"
           name="backgroundImage"
@@ -24,7 +24,7 @@
           placeholder="Add background image"
           media-type="Content"
           @on-intent-image-replace="onIntentImageReplace"
-          @update:model-value="onBackgroundImageDeleted"
+          @update:model-value="onBackgroundMediaDeleted"
         />
       </CollapsiblePanel>
       <div
@@ -101,6 +101,7 @@ import {
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
   useUiStore,
+  useVideoStore,
 } from '../../../brand-page-maker/stores';
 import { useUiBackgroundSettingsStore } from '../store';
 import SideBarSettingsHeader from '../../common/SideBarSettingsHeader.vue';
@@ -109,7 +110,11 @@ import PersonalisationRoleField from '../../content-settings/components/personal
 import { computed, onMounted, reactive } from 'vue';
 import type { UserMediaItem } from '../../my-uploads/models';
 import type { UpdateItemValuePayload } from '../../content-settings/models';
-import { MEDIA_TYPES, type PersonalisationRole } from '../../../brand-page';
+import {
+  type GettyVideoMedia,
+  MEDIA_TYPES,
+  type PersonalisationRole,
+} from '../../../brand-page';
 import { backgroundSettingsTr } from '../../../composables/useTranslate';
 import ReplaceImageSettingsForBackgroundSettings from './ReplaceImageSettingsForBackgroundSettings.vue';
 
@@ -122,6 +127,8 @@ const uiStore = useUiStore();
 const backgroundStyles = computed(
   () => backgroundSettingsStore.backgroundStyles,
 );
+
+console.log('this is the background styles: ', backgroundStyles.value);
 const recommendedLogoColors = computed(
   () => backgroundSettingsStore.recommendedLogoColors,
 );
@@ -167,12 +174,19 @@ const personalisationRole = computed(() => {
 // This hides the shape in the image field as there will be a future thumbnail for shapes
 const imageFieldValue = computed(() => {
   const backgroundImageUrl = backgroundStyles.value.backgroundImageUrl || '';
+  const media = backgroundStyles.value.media as GettyVideoMedia;
 
   // If the background image is an SVG (shape), return empty string to hide it in the image field
   if (backgroundImageUrl.endsWith('.svg')) {
     return '';
   }
 
+  if (media && media.type === 'getty-video') {
+    const videoStore = useVideoStore();
+    const videoUrls = videoStore.getVideoUrlsForToken(media.gettyToken);
+    return videoUrls?.previewImageUrl || ''; // Show the video thumbnail
+  }
+
   return backgroundImageUrl;
 });
 
@@ -227,16 +241,22 @@ const onBackgroundImageSelected = (image: UserMediaItem) => {
   });
 };
 
-const onBackgroundImageDeleted = (payload: {
+const onBackgroundMediaDeleted = (payload: {
   id: string;
   name: string;
   value: string;
 }) => {
+  console.log('Here deleting');
   if (payload.value === '') {
     backgroundSettingsStore.setBackgroundImageUrl({
       backgroundImageUrl: '',
     });
   }
+
+  if (backgroundStyles.value?.media) {
+    console.log('Removing background video');
+    backgroundSettingsStore.removeBackgroundVideo();
+  }
 };
 
 const selectShapeTab = (tab: string) => {
@@ -265,10 +285,10 @@ const onIntentImageReplace = (payload: {
       errorMessage: '',
       isRequired: false,
       replaceImageSettings: {
-        tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY'],
-        buttonTitleAdd: backgroundSettingsTr(`addImage`),
-        titleAdd: backgroundSettingsTr(`addImage`),
-        titleReplace: backgroundSettingsTr(`replaceImage`),
+        tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'VIDEO_LIBRARY'],
+        buttonTitleAdd: backgroundSettingsTr(`addMedia`),
+        titleAdd: backgroundSettingsTr(`addMedia`),
+        titleReplace: backgroundSettingsTr(`replaceMedia`),
         contentMediaFieldName: payload.value ? 'backgroundImage' : '',
         openByDefault: false,
         mediaType: data.mediaType,