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

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

@@ -38,6 +38,8 @@ import type {
   SensitiveContent,
   BookingSectionContent,
   TextShapeItem,
+  GettyVideoMedia,
+  AbstractMedia,
 } from '../models';
 import { ButtonStyles, SENSITIVE_CONTENT_TYPES, VIEWPORTS } from '../models';
 import {
@@ -75,6 +77,7 @@ import type {
   ShapesSectionViewModel,
   ShopViewModel,
   BookingSectionViewModel,
+  GettyVideoViewModel,
 } from '../view-models';
 import { isHexTransparent, setRgbAlpha } from './color.util';
 import type { ContentTextStylePropertyKey } from '../constants';
@@ -661,9 +664,69 @@ const mapToContactFormViewModel = (
   );
 };
 
+const mapGettyVideoToGettyVideoViewModel = (
+  media: GettyVideoMedia,
+  options: ViewModelMappingOptions,
+): GettyVideoViewModel => {
+  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,
+}: {
+  media?: AbstractMedia;
+  options: ViewModelMappingOptions;
+}) => {
+  if (!media) {
+    return undefined;
+  }
+
+  switch (media.type) {
+    case 'getty-video':
+      return mapGettyVideoToGettyVideoViewModel(
+        media as GettyVideoMedia,
+        options,
+      );
+    case 'image':
+    // TODO(jyao): Implement later
+    default:
+      throw new Error(`Unsupported media type: ${media.type}`);
+  }
+};
+
 export const mapToBannerSectionViewModel = (
   content: BannerSectionContent,
   styles: PageStyles,
+  options: ViewModelMappingOptions,
 ): BannerSectionViewModel => {
   return applyViewModelTextStyles(
     {
@@ -688,6 +751,10 @@ export const mapToBannerSectionViewModel = (
       isFullWidth: true,
       imageUrl: mapToBannerSectionImageUrl(content),
       isBigImageType: isBigImageType(content.displayStyle),
+      mediaViewModel: mapMediaToContentViewModel({
+        media: content.media,
+        options,
+      }),
     },
     styles,
   );
@@ -1064,7 +1131,7 @@ export const mapToViewModel =
   (
     styles: PageStyles,
     brandPageType: BrandPageType,
-    options?: { useOldLogoRenderSize: boolean },
+    options: ViewModelMappingOptions,
   ) =>
   (content: Content): ContentViewModel | undefined => {
     switch (content.type) {
@@ -1133,6 +1200,7 @@ export const mapToViewModel =
         return mapToBannerSectionViewModel(
           content as BannerSectionContent,
           styles,
+          options,
         );
 
       case 'booking-section':
@@ -1198,11 +1266,29 @@ export const mapToViewModel =
     }
   };
 
+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 const getBrandPageViewModelFromBrandPageModel = (
   model: BrandPageModel,
   brandPageToken: string | undefined,
   showBrandCrowdLogo = true,
-  useOldLogoRenderSize = false,
+  options: ViewModelMappingOptions,
 ): BrandPageViewModel => {
   const pages = model.pages.map((p) => {
     const contents = p.contents
@@ -1210,7 +1296,7 @@ export const getBrandPageViewModelFromBrandPageModel = (
         mapToViewModel(
           model.styles,
           model.brandPageType || BRAND_PAGE_TYPES.default,
-          { useOldLogoRenderSize },
+          options,
         ),
       )
       .filter((c) => c !== undefined) as ContentViewModel[];
@@ -1232,23 +1318,23 @@ export const getBrandPageViewModelFromBrandPageModel = (
       model.pageHeaderDesktop,
       model.styles,
       pages,
-      useOldLogoRenderSize,
+      options.useOldLogoRenderSize,
     ),
     headerViewModelMobile: mapToPageHeaderViewModel(
       model.pageHeaderMobile,
       model.styles,
       pages,
-      useOldLogoRenderSize,
+      options.useOldLogoRenderSize,
     ),
     footerViewModelDesktop: mapToPageFooterViewModel(
       model.pageFooterDesktop,
       model.styles,
-      useOldLogoRenderSize,
+      options.useOldLogoRenderSize,
     ),
     footerViewModelMobile: mapToPageFooterViewModel(
       model.pageFooterMobile,
       model.styles,
-      useOldLogoRenderSize,
+      options.useOldLogoRenderSize,
     ),
     brandPageType: model.brandPageType || BRAND_PAGE_TYPES.default,
     faviconUrl: model.faviconUrl,

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

@@ -38,6 +38,7 @@ import type {
   CookieOptions,
   SensitiveContent,
   BookingSectionContent,
+  MediaTypes,
 } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 
@@ -171,6 +172,29 @@ export interface BannerSectionViewModel
   buttonViewModel: ButtonViewModel;
   isFullWidth: boolean;
   isBigImageType: boolean;
+  mediaViewModel?: MediaViewModel;
+}
+
+export interface MediaViewModel {
+  type: MediaTypes;
+}
+
+// Note(jyao): We will construct the getty video url in the getty video vue component
+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';
+  // TODO(jyao): Add image stuff later
 }
 
 export interface TextImageSectionViewModel {

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

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

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

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

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

@@ -37,6 +37,7 @@ const pages = [
         mapToViewModel(
           pageStyles,
           brandPageData.brandPageType || BRAND_PAGE_TYPES.default,
+          {},
         ),
       )
       .filter((x) => x !== undefined) as ContentViewModel[],

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts

@@ -19,12 +19,16 @@ import type { TemplateSettingsTemplate } from '../../../shared/template-settings
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '../../constants';
-import { useBrandPageMakerStore } from '../../stores';
+import {
+  useBrandPageContainerStore,
+  useBrandPageMakerStore,
+} from '../../stores';
 import {
   applyLogoImageBase64UrlToBrandPageTemplateModel,
   applyLogoImageToBrandPageTemplateModel,
   applyLogoTemplateImageToBrandPageTemplateModel,
 } from '../../../brand-page/utils/logo.util';
+import { useVideoStore } from '../../../lib';
 
 const DEBOUNCE_IN_MS = 250;
 
@@ -40,18 +44,23 @@ interface TemplatePreviewData {
   renderHeight: number;
   renderWidth: number;
   rootStyles: BrandPageCssStyle;
+  imageLoadError: boolean;
+  imageLoading: boolean;
 }
 
 export default defineComponent({
   emits: ['template-selected'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
+    const brandPageContainerStore = useBrandPageContainerStore();
 
     return {
       selectedTemplateId: computed(
         () => brandPageMakerStore.selectedTemplateId,
       ),
+      isPrePurchase: computed(() => brandPageContainerStore.isPrePurchase),
       brandPageMakerStore,
+      brandPageContainerStore,
     };
   },
   props: {
@@ -110,6 +119,8 @@ export default defineComponent({
       renderWidth: 400,
       rootStyles: {},
       viewModel: undefined,
+      imageLoadError: false,
+      imageLoading: true,
     };
 
     return data;
@@ -143,6 +154,7 @@ export default defineComponent({
         options: {
           disableNavigationSideMenu: true,
           mediaSizes: MEDIA_SIZES.sizeThumb,
+          renderVideoAsImage: true,
         },
         isCapturingPreview: false,
       };
@@ -200,16 +212,41 @@ export default defineComponent({
 
       return cssVariables;
     },
+
+    previewImageUrl(): string {
+      return this.generatePreviewImageUrl();
+    },
   },
   watch: {
-    logoTheme: {
-      handler() {
+    template() {
+      if (this.isPrePurchase) {
         this.updateViewModel();
+      }
+    },
+    logoImage: {
+      handler() {
+        if (this.isPrePurchase) {
+          this.regeneratePreview();
+        }
       },
       deep: true,
     },
-    template() {
-      this.updateViewModel();
+    logoTemplateImage: {
+      handler() {
+        // Only regenerate preview in pre-purchase mode
+        if (this.isPrePurchase) {
+          this.regeneratePreview();
+        }
+      },
+      deep: true,
+    },
+    logoTheme: {
+      handler() {
+        if (this.isPrePurchase) {
+          this.updateViewModel();
+        }
+      },
+      deep: true,
     },
   },
   created() {
@@ -258,7 +295,54 @@ export default defineComponent({
       this.rootStyles = styles;
     },
 
+    onImageError() {
+      console.warn(
+        `Failed to load preview image for template ${this.template.id}`,
+      );
+      this.imageLoadError = true;
+      this.imageLoading = false;
+    },
+
+    onImageLoad() {
+      this.imageLoadError = false;
+      this.imageLoading = false;
+    },
+
+    generatePreviewImageUrl(): string {
+      const baseUrl = this.getPreviewBaseUrl();
+      const logoDraftToken =
+        this.logoImage?.logoDraftToken ||
+        '0B660926-D94A-4E29-99D1-F07E67AA6E49';
+
+      const deviceType =
+        this.brandPageMakerStore.brandPageType === 'brandSite'
+          ? 'desktop'
+          : 'mobile';
+
+      return `${baseUrl}/preview/template/${this.template.id}/${logoDraftToken}?deviceType=${deviceType}`;
+    },
+
+    getPreviewBaseUrl(): string {
+      const domainSuffix = '.brand.page';
+
+      const envPrefix = window.location.hostname.split('.')[0];
+
+      return `https://preview-${envPrefix}${domainSuffix}`;
+    },
+
+    regeneratePreview() {
+      this.imageLoadError = false;
+      this.imageLoading = true;
+      this.$forceUpdate();
+    },
+
     async updateViewModel(forceUpdate = true) {
+      if (!this.isPrePurchase) {
+        return;
+      }
+
+      const videoStore = useVideoStore();
+
       let model = this.template.brandPageModel;
 
       if (this.logoImageBase64Url) {
@@ -290,6 +374,10 @@ export default defineComponent({
         model,
         undefined,
         false,
+        {
+          useOldLogoRenderSize: false,
+          getVideoUrls: videoStore.getS3VideoUrlsForToken,
+        },
       );
 
       if (forceUpdate) {

package/src/brand-page-maker/components/template-preview/TemplatePreview.vue

@@ -18,8 +18,11 @@
           <span class="tw-sr-only">Select Template</span>
         </button>
         <!-- End Overlay-->
-        <!-- Start Page -->
-        <div class="template-preview__page" :style="cssVariablesStyle">
+        <div
+          v-if="isPrePurchase"
+          class="template-preview__page"
+          :style="cssVariablesStyle"
+        >
           <Page
             v-if="viewModel"
             :context="context"
@@ -29,7 +32,26 @@
             @on-set-preview-styles="onSetPreviewStyles"
           />
         </div>
-        <!-- End Page -->
+        <!-- Start Preview Image -->
+        <div v-else class="template-preview__image-container">
+          <!-- Loading spinner -->
+          <div
+            v-if="imageLoading"
+            class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-gray-50 tw-z-10"
+          >
+            <Loader />
+          </div>
+
+          <img
+            :src="previewImageUrl"
+            :alt="`Template ${template.id} preview`"
+            class="template-preview__image"
+            :class="{ 'tw-opacity-0': imageLoading }"
+            @error="onImageError"
+            @load="onImageLoad"
+          />
+        </div>
+        <!-- End Preview Image -->
         <!-- Start personalisation tag -->
         <div
           v-if="isPersonalisable"
@@ -45,12 +67,14 @@
 </template>
 <script>
 import { defineComponent } from 'vue';
+import { Loader } from '@designcrowd/fe-shared-lib';
 import TemplatePreviewMixin from './TemplatePreview.mixin.ts';
 import Page from '../../../brand-page/components/page/Page.vue';
 
 export default defineComponent({
   components: {
     Page,
+    Loader,
   },
   mixins: [TemplatePreviewMixin],
   setup(props, context) {
@@ -68,11 +92,23 @@ export default defineComponent({
   @apply tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-opacity-0 tw-cursor-pointer tw-w-full tw-h-full;
 }
 
-.template-preview__page {
+.template-preview__image-container {
   @apply tw-pointer-events-none;
+  @apply tw-w-full tw-h-full;
 }
 
+.template-preview__image {
+  @apply tw-w-full tw-h-full tw-object-fill;
+  transition: filter 0.2s ease;
+}
+
+.template-preview__page {
+  @apply tw-pointer-events-none;
+}
 .template-preview :deep(.c-shape-background) {
   @apply tw-absolute;
 }
+.template-preview__image :deep(.c-shape-background) {
+  @apply tw-absolute;
+}
 </style>

package/src/brand-page-maker/components/template-preview-with-state/TemplatePreviewWithState.vue

@@ -41,12 +41,10 @@ const pageSettingsStore = useUiPageSettingsStore();
 
 const logoTheme = computed(() => uiStore.logoTheme);
 
-const personalisationData = computed(() =>
-  uiStore.personalisationData?.length
-    ? uiStore.personalisationData[props.template.personalisationContentIndex]
-        .userPersonalisation
-    : undefined,
-);
+const personalisationData = computed(() => {
+  const index = props.template.personalisationContentIndex;
+  return uiStore.personalisationData?.[index]?.userPersonalisation;
+});
 
 const templateLogoImage = computed(() => {
   const desktopPageHeader =

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

@@ -50,6 +50,7 @@ import {
   DEFAULT_SHAPE_SIZE,
   PAYMENT_OPTION_DISPLAY_TYPES,
   PAYMENT_OPTION_IMAGE_TYPES,
+  GettyVideoMedia,
 } from '../../brand-page';
 import type {
   ContentSettingsConfig,
@@ -168,6 +169,7 @@ import {
   brandSiteTypeVisibilityAssessor,
 } from '../assessors/brand-page-type-visibility.assessor';
 import { contentSettingsTr } from '../../composables/useTranslate';
+import type { GettyVideoMediaSelectedPayload } from '../../shared/my-uploads/models';
 
 const MediaFieldNames = {
   aspectRatio: 'aspectRatio',
@@ -428,12 +430,13 @@ const shopReplaceImageSettings =
     desiredWidth: undefined,
   });
 
+// TOOD(jyao): This should be reworked to bannerSectionReplaceMediaSettings
 const bannerSectionReplaceImageSettings =
   (): ContentReplaceImageSettings<BannerSectionContent> => ({
     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,
@@ -445,13 +448,30 @@ const bannerSectionReplaceImageSettings =
       content: BannerSectionContent,
       value: SetContentMediaPayload,
     ) => {
-      content.imageUrl = value.imageUrl;
-      content.mediaType = MEDIA_TYPES.image;
+      if (value.media && value.media.type === 'getty-video') {
+        const gettyMedia = value.media as GettyVideoMediaSelectedPayload;
+
+        content.media = new GettyVideoMedia({
+          gettyToken: gettyMedia.token,
+          gettyAssetId: gettyMedia.assetId,
+          mimeType: gettyMedia.mimeType,
+          settings: {
+            autoPlay: gettyMedia.autoPlay,
+          },
+        });
+        content.imageUrl = '';
+      } 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 || [];
+        // Note(jyao): Temporarily here until we move all images/shapes to media
+        content.media = undefined;
+
+        if (isValidSvgUrl(content.imageUrl)) {
+          content.size = DEFAULT_SHAPE_SIZE;
+          content.mediaType = MEDIA_TYPES.shape;
+          content.colorReplacements = value.colorReplacements || [];
+        }
       }
     },
   });
@@ -2213,7 +2233,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: {