@crystaldesign/content-item 24.7.0-beta.32 → 24.7.0-beta.34

package/build/esm/index.js

@@ -95,7 +95,8 @@ var Image = function Image(_ref) {
 };
 
 var videoClass = "videoClass-jg-N2";
-var css_248z$2 = ".videoClass-jg-N2 {\n  width: 100%;\n}\n";
+var youtubeThumb = "youtube-thumb-XJDvt";
+var css_248z$2 = ".videoClass-jg-N2 {\n  width: 100%;\n}\n\n.youtube-thumb-XJDvt {\n  background: center / 75% no-repeat url(\"data:image/svg+xml,%3Csvg fill%3D%22%23000000%22 height%3D%22800px%22 width%3D%22800px%22 version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 %09 viewBox%3D%220 0 49 49%22 xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%09%3Cg%3E%09%09%3Cpath d%3D%22M39.256%2C6.5H9.744C4.371%2C6.5%2C0%2C10.885%2C0%2C16.274v16.451c0%2C5.39%2C4.371%2C9.774%2C9.744%2C9.774h29.512%09%09%09c5.373%2C0%2C9.744-4.385%2C9.744-9.774V16.274C49%2C10.885%2C44.629%2C6.5%2C39.256%2C6.5z M47%2C32.726c0%2C4.287-3.474%2C7.774-7.744%2C7.774H9.744%09%09%09C5.474%2C40.5%2C2%2C37.012%2C2%2C32.726V16.274C2%2C11.988%2C5.474%2C8.5%2C9.744%2C8.5h29.512c4.27%2C0%2C7.744%2C3.488%2C7.744%2C7.774V32.726z%22%2F%3E%09%09%3Cpath d%3D%22M33.36%2C24.138l-13.855-8.115c-0.308-0.18-0.691-0.183-1.002-0.005S18%2C16.527%2C18%2C16.886v16.229%09%09%09c0%2C0.358%2C0.192%2C0.69%2C0.502%2C0.868c0.154%2C0.088%2C0.326%2C0.132%2C0.498%2C0.132c0.175%2C0%2C0.349-0.046%2C0.505-0.137l13.855-8.113%09%09%09c0.306-0.179%2C0.495-0.508%2C0.495-0.863S33.667%2C24.317%2C33.36%2C24.138z M20%2C31.37V18.63l10.876%2C6.371L20%2C31.37z%22%2F%3E%09%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  width: 100%;\n  height: 100%;\n}\n";
 styleInject(css_248z$2);
 
 var Video = function Video(_ref) {
@@ -103,11 +104,35 @@ var Video = function Video(_ref) {
     url = _ref$item.url,
     thumb = _ref$item.thumb;
   if (!url) return /*#__PURE__*/jsx(Fragment, {});
+  if (url.includes('youtube.com') || url.includes('youtu.be')) {
+    if (thumb) return /*#__PURE__*/jsx("div", {
+      className: youtubeThumb
+    });
+    var urlObject = new URL(url);
+    urlObject.searchParams.set('autoplay', '1');
+    urlObject.searchParams.set('modestbranding', '1');
+    urlObject.searchParams.set('rel', '0');
+    urlObject.searchParams.set('controls', '1');
+    urlObject.searchParams.set('amp', '');
+    return /*#__PURE__*/jsx("iframe", {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%'
+      },
+      src: urlObject.toString(),
+      referrerPolicy: "strict-origin-when-cross-origin",
+      allow: "autoplay; gyroscope; picture-in-picture"
+    });
+  }
   return /*#__PURE__*/jsx("video", {
     className: videoClass,
     "aria-disabled": thumb,
     disablePictureInPicture: thumb,
     controls: !thumb,
+    playsInline: true,
     autoPlay: !thumb,
     children: /*#__PURE__*/jsx("source", {
       src: url + (thumb ? '#t=2' : ''),
@@ -160,7 +185,6 @@ var Gallery = function Gallery(_ref) {
       },
       spaceBetween: 10,
       navigation: true,
-      loop: true,
       thumbs: {
         swiper: thumbsSwiper
       },

package/build/types/content-item/src/Components/Gallery/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Gallery/index.tsx"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM1C,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC;AAEnC,QAAA,MAAM,OAAO,yCAA0C,KAAK,gBA8C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Gallery/index.tsx"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM1C,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC;AAEnC,QAAA,MAAM,OAAO,yCAA0C,KAAK,gBA6C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build/types/content-item/src/Components/Video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Video/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,6BAA8B,KAAK,gBAQ7C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Video/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,6BAA8B,KAAK,gBA2B7C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/content-item",
-  "version": "24.7.0-beta.32",
+  "version": "24.7.0-beta.34",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -34,5 +34,5 @@
   },
   "module": "build/esm/index.js",
   "types": "./build/types/content-item/src/index.d.ts",
-  "gitHead": "41b44c3defda6d1e73b7d872d5d9a13aeafd6a0f"
+  "gitHead": "9070cc12a44993ee57345c847247ddfecd0e125c"
 }