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

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

@@ -1,7 +1,6 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { BrandPageContext, ColorReplacement } from '../../models';
-import type { MediaViewModel } from '../../../lib';
 
 export default defineComponent({
   props: {
@@ -63,11 +62,6 @@ export default defineComponent({
       required: false,
       default: undefined,
     },
-    media: {
-      type: Object as PropType<MediaViewModel>,
-      required: false,
-      default: undefined,
-    },
   },
   data() {
     return {

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

@@ -5,22 +5,8 @@
       'tw-h-full tw-w-full': mediaType === 'shape',
     }"
   >
-    <Video
-      v-if="media && media.type === 'getty-video'"
-      :media="media"
-      :class="{ 'tw-flex tw-justify-center': size }"
-      :video-classes="imgClasses"
-      :display-style="displayStyle"
-      :context="context"
-      :content-index="contentIndex"
-    />
     <FallbackImage
-      v-if="
-        imageUrl &&
-        (mediaType === 'image' || !mediaType) &&
-        !isImageBroken &&
-        !media
-      "
+      v-if="imageUrl && (mediaType === 'image' || !mediaType) && !isImageBroken"
       :image-url="imageUrl"
       :alt="altText"
       :classes="imgClasses"
@@ -41,7 +27,7 @@
     />
     <Placeholder
       v-if="
-        (context.isPreview && !media && imageUrl === '') ||
+        (context.isPreview && imageUrl === '') ||
         (context.isPreview && isImageBroken)
       "
       class="tw-w-full"
@@ -56,10 +42,9 @@ import Shape from './Shape.vue';
 import MediaMixin from './Media.mixin.ts';
 import Placeholder from '../placeholder/Placeholder.vue';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
-import Video from './Video.vue';
 
 export default {
-  components: { Shape, Placeholder, FallbackImage, Video },
+  components: { Shape, Placeholder, FallbackImage },
   mixins: [MediaMixin],
 };
 </script>

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

@@ -33,7 +33,6 @@ const pages = brandPageModel.pages.map((p) => ({
       mapToViewModel(
         brandPageModel.styles,
         brandPageModel.brandPageType || BRAND_PAGE_TYPES.default,
-        {},
       ),
     )
     .filter((x) => x !== undefined) as ContentViewModel[],

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

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

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

@@ -413,7 +413,6 @@ export interface BannerSectionContent extends Content {
   overlayColor: BrandPageCssStyle;
   overlayOpacity: number;
   aspectRatio?: number | null;
-  media?: AbstractMedia;
 }
 
 export const MEDIA_TYPES = {
@@ -833,39 +832,6 @@ export abstract class AbstractPageFooterStyles {
   }
 }
 
-//jyao: START: Media related entities and classes
-export type MediaTypes = 'getty-video' | 'user-upload-video' | 'image';
-
-export abstract class AbstractMedia {
-  abstract type: MediaTypes;
-}
-
-type GettyVideoMediaType = Partial<GettyVideoMedia>;
-
-export class GettyVideoMedia extends AbstractMedia {
-  type: MediaTypes = 'getty-video';
-  gettyToken: string;
-  gettyAssetId: string;
-  mimeType: string;
-
-  settings: {
-    autoPlay?: boolean;
-  };
-
-  constructor(options: GettyVideoMediaType = {}) {
-    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: AbstractPageFooterStylesType = {}) {
     options = cloneDeep(options);

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

@@ -172,11 +172,7 @@ describe('view model util', () => {
     };
 
     // Act
-    const viewModel = mapToBannerSectionViewModel(
-      bannerContent,
-      pageStyles,
-      {},
-    );
+    const viewModel = mapToBannerSectionViewModel(bannerContent, pageStyles);
 
     // Assert
     const url = new URL(viewModel.imageUrl);
@@ -199,11 +195,7 @@ describe('view model util', () => {
     };
 
     // Act
-    const viewModel = mapToBannerSectionViewModel(
-      bannerContent,
-      pageStyles,
-      {},
-    );
+    const viewModel = mapToBannerSectionViewModel(bannerContent, pageStyles);
 
     // Assert
     const url = new URL(viewModel.imageUrl);

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

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

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

@@ -38,7 +38,6 @@ import type {
   CookieOptions,
   SensitiveContent,
   BookingSectionContent,
-  MediaTypes,
 } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 
@@ -172,29 +171,6 @@ 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,7 +265,6 @@ 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,7 +94,6 @@ 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,7 +37,6 @@ 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

@@ -25,7 +25,6 @@ import {
   applyLogoImageToBrandPageTemplateModel,
   applyLogoTemplateImageToBrandPageTemplateModel,
 } from '../../../brand-page/utils/logo.util';
-import { useVideoStore } from '../../../lib';
 
 const DEBOUNCE_IN_MS = 250;
 
@@ -144,7 +143,6 @@ export default defineComponent({
         options: {
           disableNavigationSideMenu: true,
           mediaSizes: MEDIA_SIZES.sizeThumb,
-          renderVideoAsImage: true,
         },
         isCapturingPreview: false,
       };
@@ -261,8 +259,6 @@ export default defineComponent({
     },
 
     async updateViewModel(forceUpdate = true) {
-      const videoStore = useVideoStore();
-
       let model = this.template.brandPageModel;
 
       if (this.logoImageBase64Url) {
@@ -294,10 +290,6 @@ export default defineComponent({
         model,
         undefined,
         false,
-        {
-          useOldLogoRenderSize: false,
-          getVideoUrls: videoStore.getS3VideoUrlsForToken,
-        },
       );
 
       if (forceUpdate) {

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

@@ -50,7 +50,6 @@ import {
   DEFAULT_SHAPE_SIZE,
   PAYMENT_OPTION_DISPLAY_TYPES,
   PAYMENT_OPTION_IMAGE_TYPES,
-  GettyVideoMedia,
 } from '../../brand-page';
 import type {
   ContentSettingsConfig,
@@ -169,7 +168,6 @@ 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',
@@ -430,13 +428,12 @@ 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(`addMediaTitle`),
-    titleAdd: contentSettingsTr(`addMediaTitle`),
-    titleReplace: contentSettingsTr(`replaceMediaTitle`),
+    buttonTitleAdd: contentSettingsTr(`addImageButtonTitle`),
+    titleAdd: contentSettingsTr(`addImageHeaderTitle`),
+    titleReplace: contentSettingsTr(`imageReplaceTitle`),
     contentMediaFieldName: MediaFieldNames.avatarImageUrl,
     openByDefault: false,
     mediaType: MEDIA_TYPES.image,
@@ -448,30 +445,13 @@ const bannerSectionReplaceImageSettings =
       content: BannerSectionContent,
       value: SetContentMediaPayload,
     ) => {
-      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;
-
-        // Note(jyao): Temporarily here until we move all images/shapes to media
-        content.media = undefined;
+      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 (isValidSvgUrl(content.imageUrl)) {
+        content.size = DEFAULT_SHAPE_SIZE;
+        content.mediaType = MEDIA_TYPES.shape;
+        content.colorReplacements = value.colorReplacements || [];
       }
     },
   });
@@ -2233,7 +2213,7 @@ export const BANNER_SECTION_SETTINGS_CONFIG =
       imageUrl: {
         type: 'image',
         replaceImageSettings: bannerSectionReplaceImageSettings(),
-        title: contentSettingsTr(`media`),
+        title: contentSettingsTr(`imageTitle`),
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
       },
       imageUrlOverride: {

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

@@ -6,7 +6,6 @@ import {
   useLocalisedRouteStore,
   useLogoStore,
   useUiStore,
-  useVideoStore,
   type LogoDraftAsset,
   type LogoTemplateAsset,
 } from '../../stores';
@@ -32,7 +31,6 @@ import {
 import { navigationTr } from '../../../composables/useTranslate';
 import type { WebsiteSlugCheckResponse } from '../../../brand-page-maker/models/api.model';
 import { errorTr, constantsTr } from '../../../composables/useTranslate';
-import { findValuesByKey } from '../../../helpers/ts.helper';
 
 export interface BrandPageContainerState {
   availableTaxes: any[];
@@ -81,18 +79,6 @@ export interface BrandPageContainerState {
   isSubsequentPublish: boolean;
 }
 
-export type GettyVideoEditorViewModelResponse = {
-  assetId: string;
-  token: string;
-  isGettyAsset: string;
-  videoPreviewAsset: {
-    uri: string;
-  };
-  imagePreviewAsset: {
-    uri: string;
-  };
-};
-
 export type InitialisePayload = Omit<
   BrandPageContainerState,
   'customDomain' | 'customDomainConfig'
@@ -102,7 +88,6 @@ export type InitialisePayload = Omit<
   isBrandPageCustomDomainEnabled: boolean;
   logoTemplateAsset: LogoTemplateAsset | undefined;
   logoDraftAssets: LogoDraftAsset[];
-  gettyVideos: GettyVideoEditorViewModelResponse[];
 };
 
 export const BRANDPAGE_STATUS = Object.freeze({
@@ -162,7 +147,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
   actions: {
     initialise(payload: InitialisePayload) {
       const localisedRouteStore = useLocalisedRouteStore();
-      const videoStore = useVideoStore();
 
       if (process.env.NODE_ENV !== 'production') {
         if (
@@ -240,15 +224,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       if (payload.logoDraftToken) {
         uiStore.setLogoDraftToken({ logoDraftToken: payload.logoDraftToken });
       }
-
-      payload?.gettyVideos?.forEach((video) =>
-        videoStore.setVideoUrlsWithToken(
-          video.token,
-          video.videoPreviewAsset.uri,
-          video.imagePreviewAsset.uri,
-          video.assetId,
-        ),
-      );
     },
 
     setDesignTemplateToken(payload) {
@@ -413,8 +388,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
       this.setIsPublishing({ isPublishing: true });
 
-      const gettyVideoIds: string[] = brandPageMakerStore.gettyVideoIds;
-
       try {
         const response = await brandPageClient.setBrandPageSlugAsync(
           brandPageMakerStore.brandPageType,
@@ -423,7 +396,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             slug,
             shouldPublish,
             brandPageContentTypes: this.brandPageContentTypes,
-            gettyVideoIds,
           },
         );
 
@@ -565,8 +537,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
         this.setBrandPageCustomDomain({ customDomain: customDomainResponse });
 
-        const gettyVideoIds: string[] = brandPageMakerStore.gettyVideoIds;
-
         if (customDomainResponse) {
           const response = await brandPageClient.setBrandPageSlugAsync(
             brandPageMakerStore.brandPageType,
@@ -575,7 +545,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
               slug: bpSlug,
               shouldPublish,
               brandPageContentTypes: this.brandPageContentTypes,
-              gettyVideoIds,
             },
           );
 
@@ -829,8 +798,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         );
       }
 
-      const gettyAssetIds = findValuesByKey(brandPageData, 'gettyAssetId');
-
       return {
         designTemplateToken: this.designTemplateToken,
         logoDraftToken: uiStore.logoDraftToken, // TODO: remove this property after the release as second release for smooth release transition use below `logoDraftTokens`
@@ -841,7 +808,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
           : undefined,
         brandPageContentTypes: this.brandPageContentTypes,
         shouldPublish: this.isPublished,
-        gettyAssetIds,
         ...prepurchaseExportData,
       };
     },
@@ -1042,26 +1008,15 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         throw new Error('saveTemplate is not allowed in non admin mode');
       }
 
-      const dataObject = brandPageMakerStore.brandPageTemplate;
-      const data = JSON.stringify(dataObject);
+      const data = JSON.stringify(brandPageMakerStore.brandPageTemplate);
 
       if (typeof (window?.parent as any)?.saveTemplate !== 'function') {
         throw new Error('required saveTemplate function is undefined');
       }
 
-      const gettyAssetIds = findValuesByKey(dataObject, 'gettyAssetId');
-
-      const exportedOptions = {
-        designAttributes: {
-          gettyAssetIds: gettyAssetIds,
-          hasGettyVideos: gettyAssetIds.length > 0,
-        },
-      };
-
       const success = await (window.parent as any).saveTemplate(
         !this.designTemplateToken,
         data,
-        exportedOptions,
       );
 
       if (success) {