feat(cms-base): Improve CmsElementImage (#445)

* fix(cms-base): add missing attributes to CmsElementImage * feat(cms-base): add html video support --------- Co-authored-by: Marc Peternell <[email protected]>
shopware · Oct 30, 2023 · c264bf5 · c264bf5 · vercel · Oct 30, 2023
1 parent c5c13c9
commit c264bf5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/.changeset/popular-spies-raise.md b/.changeset/popular-spies-raise.md
@@ -0,0 +1,6 @@
+---
+"@shopware-pwa/composables-next": minor
+"@shopware-pwa/cms-base": minor
+---
+
+Adding the missing srcset attribute to the image tag in the CmsElementImage component. as well as adding support for HTML video elements as in Shopware management, it is possible for users to associate videos to any Cms image element.
diff --git a/packages/cms-base/components/public/cms/element/CmsElementImage.vue b/packages/cms-base/components/public/cms/element/CmsElementImage.vue
@@ -16,6 +16,8 @@ const {
   imageContainerAttrs,
   imageAttrs,
   imageLink,
+  isVideoElement,
+  mimeType,
 } = useCmsElementImage(props.content);
 
 const DEFAULT_THUMBNAIL_SIZE = 10;
@@ -51,16 +53,30 @@ const imageComputedContainerAttrs = computed(() => {
     :style="containerStyle"
     v-bind="imageComputedContainerAttrs"
   >
+    <video
+      v-if="isVideoElement"
+      controls
+      :class="{
+        'h-full w-full': true,
+        'absolute inset-0': ['cover', 'stretch'].includes(displayMode),
+        'object-cover': displayMode === 'cover',
+      }"
+    >
+      <source :src="imageAttrs.src" :type="mimeType" />
+      Your browser does not support the video tag.
+    </video>
     <img
+      v-else
       ref="imageElement"
       loading="lazy"
       :class="{
         'h-full w-full': true,
         'absolute inset-0': ['cover', 'stretch'].includes(displayMode),
         'object-cover': displayMode === 'cover',
       }"
-      alt="Image link"
+      :alt="imageAttrs.alt"
       :src="srcPath"
+      :srcset="imageAttrs.srcset"
     />
   </component>
 </template>
diff --git a/packages/composables/src/cms/useCmsElementImage.ts b/packages/composables/src/cms/useCmsElementImage.ts
@@ -27,6 +27,8 @@ export type UseCmsElementImage = {
   imageContainerAttrs: ComputedRef<ImageContainerAttrs>;
   imageLink: ComputedRef<{ newTab: boolean; url: string }>;
   displayMode: ComputedRef<DisplayMode>;
+  isVideoElement: ComputedRef<boolean>;
+  mimeType: ComputedRef<string>;
 };
 
 /**
@@ -77,12 +79,22 @@ export function useCmsElementImage(
     () => getConfigValue("displayMode") || "initial",
   );
 
+  const isVideoElement = computed(() => {
+    return !!element.data?.media?.mimeType?.includes("video");
+  });
+
+  const mimeType = computed(() => {
+    return element.data?.media?.mimeType;
+  });
+
   return {
     containerStyle,
     anchorAttrs,
     imageAttrs,
     imageContainerAttrs,
     imageLink,
     displayMode,
+    isVideoElement,
+    mimeType,
   };
 }