@websolutespa/bom-mixer-ui 1.5.6 → 1.5.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.5.7
+
+### Patch Changes
+
+- Modified: Media added muted video caption support
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.5.10
+
 ## 1.5.6
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -4504,6 +4504,9 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       as = 'div'
     } = _a,
     props = __rest(_a, ["children", "item", "onClick", "className", "eager", "alt", "title", "as"]);
+  const {
+    locale
+  } = bomMixerHooks.useLayout();
   const {
     id,
     open
@@ -4516,6 +4519,7 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
     galleryId: id,
     alt,
     title,
+    locale,
     open
   }) : children;
   return jsxRuntime.jsx(StyledMedia$1, Object.assign({
@@ -4530,6 +4534,18 @@ MediaBase.displayName = 'Media';
 const Media = bomCore.withSchema(MediaBase, {
   Info: MediaInfo
 });
+const StyledVideo = styled__default.default('video')`
+  &.video {
+    &--muted {
+      &::cue {
+        background-color: transparent;
+        background-image: none;
+        color: transparent;
+        font-size: 0;
+      }
+    }
+  }
+`;
 function getMediaItems(itemOrItems, options) {
   if (options === void 0) {
     options = {};
@@ -4594,16 +4610,22 @@ function getMediaItems(itemOrItems, options) {
     }
     return props;
   };
-  return items.map((media, m) => bomCore.resolveMediaType(media) === 'video' ? jsxRuntime.jsx("video", Object.assign({
+  return items.map((media, m) => bomCore.resolveMediaType(media) === 'video' ? jsxRuntime.jsxs(StyledVideo, Object.assign({
+    className: "video video--muted",
     playsInline: true,
     autoPlay: true,
     muted: true,
     loop: true
   }, getMediaItemProps(media), {
-    children: jsxRuntime.jsx("source", {
+    children: [jsxRuntime.jsx("source", {
       src: media.src,
       type: "video/mp4"
-    })
+    }), options.locale && jsxRuntime.jsx("track", {
+      src: `/captions.vtt?locale=${options.locale}&title=${media.title}`,
+      kind: "captions",
+      srcLang: options.locale,
+      label: "Video Captions"
+    })]
   }), m) : jsxRuntime.jsx(MediaImage, Object.assign({}, media, {
     draggable: false
   }, getMediaItemProps(media)), m));