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

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

@@ -1,62 +0,0 @@
-<template>
-  <video
-    v-if="!context.options?.renderVideoAsImage"
-    ref="videoElement"
-    :class="videoClasses"
-    :src="media?.videoUrl"
-    autoplay
-    muted
-    loop
-    :controls="false"
-    playsinline
-    preload="metadata"
-    @canplay="attemptAutoplay"
-  />
-  <FallbackImage
-    v-else
-    :image-url="media?.previewImageUrl || ''"
-    :classes="videoClasses"
-    :styles="displayStyle"
-    :context="context"
-    :content-index="contentIndex"
-    loading="lazy"
-  />
-</template>
-<script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue';
-import { type BrandPageContext, type GettyVideoViewModel } from '../../../lib';
-import FallbackImage from '../fallback-image/FallbackImage.vue';
-
-interface Props {
-  media: GettyVideoViewModel;
-  contentIndex: number;
-  context: BrandPageContext;
-  videoClasses?: string;
-  displayStyle?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  media: undefined,
-  videoClasses: '',
-  displayStyle: '',
-});
-
-const videoElement = ref<HTMLVideoElement>();
-
-const attemptAutoplay = async () => {
-  if (props.context.options?.renderVideoAsImage || !videoElement.value) {
-    return;
-  }
-
-  try {
-    await videoElement.value.play();
-  } catch (error) {
-    console.error('Autoplay failed:', error);
-  }
-};
-
-onMounted(async () => {
-  await nextTick();
-  attemptAutoplay();
-});
-</script>

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

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

package/src/brand-page-maker/stores/video/video-store.ts

@@ -1,47 +0,0 @@
-import { defineStore } from 'pinia';
-
-const CDN_GETTY_S3_URL_PREFIX = 'https://bc-getty-media.brandcrowd.com';
-
-export type VideoUrlData = {
-  videoUrl: string;
-  previewImageUrl: string;
-  assetId: string;
-};
-
-type VideoUrls = Record<string, VideoUrlData>;
-
-export interface videoStoreState {
-  videoUrls: VideoUrls;
-  gettyImagesKeyPrefix: string;
-}
-
-export const useVideoStore = defineStore('video', {
-  state: (): videoStoreState => ({
-    videoUrls: {},
-    gettyImagesKeyPrefix: '',
-  }),
-  actions: {
-    setVideoUrlsWithToken(
-      token: string,
-      videoUrl: string,
-      previewImageUrl: string,
-      assetId: string,
-    ) {
-      this.videoUrls[token] = { videoUrl, previewImageUrl, assetId };
-    },
-    setGettyImageKeyPrefix(prefix: string) {
-      this.gettyImagesKeyPrefix = prefix;
-    },
-  },
-  getters: {
-    getVideoUrlsForToken: (state) => (token: string) => {
-      return state.videoUrls[token];
-    },
-    getS3VideoUrlsForToken: (state) => (token: string) => {
-      return {
-        videoUrl: `${CDN_GETTY_S3_URL_PREFIX}/public/${state.gettyImagesKeyPrefix}/${token}/${token}_preview`,
-        previewImageUrl: `${CDN_GETTY_S3_URL_PREFIX}/public/${state.gettyImagesKeyPrefix}/${token}/${token}_preview_thumb`,
-      };
-    },
-  },
-});