@bagelink/vue 1.2.141 → 1.2.143

package/dist/components/BglVideo.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BglVideo.vue.d.ts","sourceRoot":"","sources":["../../src/components/BglVideo.vue"],"names":[],"mappings":"AAuIA,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AACnC,UAAU,KAAK;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAcD,iBAAS,IAAI,SAEZ;AAED,iBAAS,KAAK,SAEb;;;;;;;;AAwID,wBASG"}
+{"version":3,"file":"BglVideo.vue.d.ts","sourceRoot":"","sources":["../../src/components/BglVideo.vue"],"names":[],"mappings":"AA2JA,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AACnC,UAAU,KAAK;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAsBD,iBAAS,IAAI,SAEZ;AAED,iBAAS,KAAK,SAEb;;;;;;;;AAiJD,wBASG"}

package/dist/components/lightbox/Lightbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.vue"],"names":[],"mappings":"AAsRA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAUpD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAK5D;AAED,iBAAS,KAAK,SAGb;;;;;AAikBD,wBAOG"}
+{"version":3,"file":"Lightbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.vue"],"names":[],"mappings":"AAyRA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAUpD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAK5D;AAED,iBAAS,KAAK,SAGb;;;;;AAkkBD,wBAOG"}

package/dist/index.cjs

@@ -1253,14 +1253,19 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
       var _a, _b, _c;
       return ((_c = (_b = (_a = props2.src) == null ? void 0 : _a.split(".").pop()) == null ? void 0 : _b.split("?").shift()) == null ? void 0 : _c.toLowerCase()) || "mp4";
     });
+    const videoContainer = vue.ref();
+    const isYoutubeShort = vue.computed(() => {
+      var _a;
+      return ((_a = props2.src) == null ? void 0 : _a.includes("youtube.com/shorts/")) || false;
+    });
     const aspectRatio = vue.computed(
       () => {
         var _a;
+        if (isYoutubeShort.value) return "9/16";
         return ((_a = props2.aspectRatio) == null ? void 0 : _a.replace(":", "/")) || "16/9";
       }
     );
     const video = vue.ref();
-    const videoContainer = vue.ref();
     function play() {
       var _a;
       (_a = video.value) == null ? void 0 : _a.play();
@@ -1295,10 +1300,15 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
       if (vimeoRegex2.test(props2.src || "")) return "Vimeo";
     });
     const videoUrl = vue.computed(() => {
-      var _a, _b, _c, _d, _e2;
+      var _a, _b, _c, _d, _e2, _f, _g;
       if (embedType.value) {
         if (embedType.value === "YouTube") {
-          const videoId = (_c = (_b = (_a = props2.src) == null ? void 0 : _a.split(/v=|youtu\.be\//)[1]) == null ? void 0 : _b.split("&")) == null ? void 0 : _c[0];
+          let videoId = "";
+          if ((_a = props2.src) == null ? void 0 : _a.includes("youtube.com/shorts/")) {
+            videoId = ((_b = props2.src.split("/shorts/")[1]) == null ? void 0 : _b.split("?")[0]) || "";
+          } else {
+            videoId = ((_e2 = (_d = (_c = props2.src) == null ? void 0 : _c.split(/v=|youtu\.be\//)[1]) == null ? void 0 : _d.split("&")) == null ? void 0 : _e2[0]) || "";
+          }
           const queryParams = new URLSearchParams({
             autoplay: props2.autoplay ? "1" : "0",
             controls: "0",
@@ -1309,7 +1319,7 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
         }
         if (embedType.value === "Vimeo") {
           const vimeoRegex2 = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/;
-          const videoId = (_e2 = (_d = props2.src) == null ? void 0 : _d.match(vimeoRegex2)) == null ? void 0 : _e2[3];
+          const videoId = (_g = (_f = props2.src) == null ? void 0 : _f.match(vimeoRegex2)) == null ? void 0 : _g[3];
           return `https://player.vimeo.com/video/${videoId}`;
         }
       }
@@ -1319,7 +1329,7 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "videoContainer",
         ref: videoContainer,
-        class: vue.normalizeClass(["bgl_vid", { vid_empty: !_ctx.src }])
+        class: vue.normalizeClass(["bgl_vid", { vid_empty: !_ctx.src, vid_short: isYoutubeShort.value }])
       }, [
         embedType.value ? (vue.openBlock(), vue.createElementBlock("iframe", {
           key: 0,
@@ -1349,7 +1359,7 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-e5f32248"]]);
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-1c895c6c"]]);
 const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
   __name: "CalendarPopover",
   props: {
@@ -38484,7 +38494,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Lightbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9521a8a8"]]);
+const Lightbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1fd40019"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {

package/dist/index.mjs

@@ -1251,14 +1251,19 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
       var _a, _b, _c;
       return ((_c = (_b = (_a = props2.src) == null ? void 0 : _a.split(".").pop()) == null ? void 0 : _b.split("?").shift()) == null ? void 0 : _c.toLowerCase()) || "mp4";
     });
+    const videoContainer = ref();
+    const isYoutubeShort = computed(() => {
+      var _a;
+      return ((_a = props2.src) == null ? void 0 : _a.includes("youtube.com/shorts/")) || false;
+    });
     const aspectRatio = computed(
       () => {
         var _a;
+        if (isYoutubeShort.value) return "9/16";
         return ((_a = props2.aspectRatio) == null ? void 0 : _a.replace(":", "/")) || "16/9";
       }
     );
     const video = ref();
-    const videoContainer = ref();
     function play() {
       var _a;
       (_a = video.value) == null ? void 0 : _a.play();
@@ -1293,10 +1298,15 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
       if (vimeoRegex2.test(props2.src || "")) return "Vimeo";
     });
     const videoUrl = computed(() => {
-      var _a, _b, _c, _d, _e2;
+      var _a, _b, _c, _d, _e2, _f, _g;
       if (embedType.value) {
         if (embedType.value === "YouTube") {
-          const videoId = (_c = (_b = (_a = props2.src) == null ? void 0 : _a.split(/v=|youtu\.be\//)[1]) == null ? void 0 : _b.split("&")) == null ? void 0 : _c[0];
+          let videoId = "";
+          if ((_a = props2.src) == null ? void 0 : _a.includes("youtube.com/shorts/")) {
+            videoId = ((_b = props2.src.split("/shorts/")[1]) == null ? void 0 : _b.split("?")[0]) || "";
+          } else {
+            videoId = ((_e2 = (_d = (_c = props2.src) == null ? void 0 : _c.split(/v=|youtu\.be\//)[1]) == null ? void 0 : _d.split("&")) == null ? void 0 : _e2[0]) || "";
+          }
           const queryParams = new URLSearchParams({
             autoplay: props2.autoplay ? "1" : "0",
             controls: "0",
@@ -1307,7 +1317,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
         }
         if (embedType.value === "Vimeo") {
           const vimeoRegex2 = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/;
-          const videoId = (_e2 = (_d = props2.src) == null ? void 0 : _d.match(vimeoRegex2)) == null ? void 0 : _e2[3];
+          const videoId = (_g = (_f = props2.src) == null ? void 0 : _f.match(vimeoRegex2)) == null ? void 0 : _g[3];
           return `https://player.vimeo.com/video/${videoId}`;
         }
       }
@@ -1317,7 +1327,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "videoContainer",
         ref: videoContainer,
-        class: normalizeClass(["bgl_vid", { vid_empty: !_ctx.src }])
+        class: normalizeClass(["bgl_vid", { vid_empty: !_ctx.src, vid_short: isYoutubeShort.value }])
       }, [
         embedType.value ? (openBlock(), createElementBlock("iframe", {
           key: 0,
@@ -1347,7 +1357,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-e5f32248"]]);
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-1c895c6c"]]);
 const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "CalendarPopover",
   props: {
@@ -38482,7 +38492,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Lightbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9521a8a8"]]);
+const Lightbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1fd40019"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {

package/dist/style.css

@@ -308,19 +308,23 @@ display: block;
 	display: inline;
 }
 
-.bgl_vid iframe[data-v-e5f32248],
-.bgl_vid video[data-v-e5f32248] {
+.bgl_vid iframe[data-v-1c895c6c],
+.bgl_vid video[data-v-1c895c6c] {
 	width: 100%;
 	height: auto;
 	display: block;
 	margin: auto;
 	border-radius: var(--input-border-radius);
 }
-.bgl_vid.vid_empty[data-v-e5f32248] {
+.bgl_vid.vid_empty[data-v-1c895c6c] {
 	padding-top: 56.25%;
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 }
+.bgl_vid.vid_short[data-v-1c895c6c] {
+	max-width: 56.25vh; /* Limit width for shorts to maintain aspect ratio */
+	margin: 0 auto;
+}
 
 .custom-popover[data-v-6f51f6b3] {
   position: fixed;
@@ -4545,22 +4549,25 @@ body>div:has(.spreadsheet) ::-webkit-scrollbar-track {
   -moz-user-drag: none;
 }
 
-.bgl-lightbox[data-v-9521a8a8]:has(.bgl_vid) {
+.bgl-lightbox[data-v-1fd40019]:has(.bgl_vid) {
 	width: 90vw;
 }
-.lightbox-image[data-v-9521a8a8]{
+.bgl-lightbox[data-v-1fd40019]:has(.vid_short) {
+	width: unset;
+}
+.lightbox-image[data-v-1fd40019]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-9521a8a8] {
+.bgl-lightbox-overlay[data-v-1fd40019] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-9521a8a8] {
+.bgl-lightbox[data-v-1fd40019] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-9521a8a8]{
-	animation: 500ms ease bgl-lightbox-load-9521a8a8;
+.bgl-lightbox-item[data-v-1fd40019]{
+	animation: 500ms ease bgl-lightbox-load-1fd40019;
 }
-@keyframes bgl-lightbox-load-9521a8a8 {
+@keyframes bgl-lightbox-load-1fd40019 {
 from {
     scale:0.7;
 }
@@ -4568,44 +4575,44 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-9521a8a8] * {
+.bgl-lightbox-item[data-v-1fd40019] * {
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-9521a8a8;
+	animation: 200ms ease bgl-lightbox-load-1fd40019;
 	transition: max-height 200ms ease;
 }
-.bgl-lightbox-item.zoomed[data-v-9521a8a8] * {
+.bgl-lightbox-item.zoomed[data-v-1fd40019] * {
 	max-height: calc(100vh - 90px);
 	height: calc(100vh - 90px);
 }
-.navigation[data-v-9521a8a8] {
+.navigation[data-v-1fd40019] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.thumbnail[data-v-9521a8a8] {
+.thumbnail[data-v-1fd40019] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-9521a8a8]:hover {
+.thumbnail[data-v-1fd40019]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-9521a8a8]:active {
+.thumbnail[data-v-1fd40019]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-9521a8a8] {
+.thumbnail.active[data-v-1fd40019] {
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info[data-v-9521a8a8]{
+.file-info[data-v-1fd40019]{
 	max-width: 420px
 }
 @media screen and (max-width: 910px) {
-.file-info[data-v-9521a8a8]{
+.file-info[data-v-1fd40019]{
 	max-width: 220px;
 	text-align: center !important;
 }
-.file-info[data-v-9521a8a8] *{
+.file-info[data-v-1fd40019] *{
 	text-align: center !important;
 	margin-inline: 0 !important;
 	max-width: 100% !important;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.141",
+  "version": "1.2.143",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/BglVideo.vue

@@ -18,12 +18,20 @@ const props = defineProps<Props>()
 
 const videoFormat = $computed(() => props.src?.split('.').pop()?.split('?').shift()?.toLowerCase() || 'mp4')
 
+const videoContainer = $ref<HTMLElement | null>()
+
+const isYoutubeShort = $computed(() => {
+	return props.src?.includes('youtube.com/shorts/') || false
+})
+
 const aspectRatio = $computed(
-	() => props.aspectRatio?.replace(':', '/') || '16/9',
+	() => {
+		if (isYoutubeShort) return '9/16' // Vertical aspect ratio for Shorts
+		return props.aspectRatio?.replace(':', '/') || '16/9'
+	}
 )
 
 const video = $ref<HTMLVideoElement | null>()
-const videoContainer = $ref<HTMLElement | null>()
 
 function play() {
 	video?.play()
@@ -35,7 +43,7 @@ function pause() {
 
 // Setup intersection observer for autoplay="visible"
 if (props.autoplay === 'visible') {
-	const { stop } = useIntersectionObserver(
+	useIntersectionObserver(
 		videoContainer,
 		([{ isIntersecting }]) => {
 			if (isIntersecting) {
@@ -65,7 +73,14 @@ const embedType = $computed<'YouTube' | 'Vimeo' | undefined>(() => {
 const videoUrl = $computed(() => {
 	if (embedType) {
 		if (embedType === 'YouTube') {
-			const videoId = props.src?.split(/v=|youtu\.be\//)[1]?.split('&')?.[0]
+			// Extract video ID from YouTube regular or Shorts URL
+			let videoId = ''
+			if (props.src?.includes('youtube.com/shorts/')) {
+				videoId = props.src.split('/shorts/')[1]?.split('?')[0] || ''
+			} else {
+				videoId = props.src?.split(/v=|youtu\.be\//)[1]?.split('&')?.[0] || ''
+			}
+
 			const queryParams = new URLSearchParams({
 				autoplay: props.autoplay ? '1' : '0',
 				controls: '0',
@@ -87,7 +102,7 @@ const videoUrl = $computed(() => {
 </script>
 
 <template>
-	<div ref="videoContainer" class="bgl_vid" :class="{ vid_empty: !src }">
+	<div ref="videoContainer" class="bgl_vid" :class="{ vid_empty: !src, vid_short: isYoutubeShort }">
 		<iframe
 			v-if="embedType"
 			:src="videoUrl"
@@ -127,4 +142,9 @@ const videoUrl = $computed(() => {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 }
+
+.bgl_vid.vid_short {
+	max-width: 56.25vh; /* Limit width for shorts to maintain aspect ratio */
+	margin: 0 auto;
+}
 </style>

package/src/components/lightbox/Lightbox.vue

@@ -200,6 +200,9 @@ defineExpose({ open, close })
 .bgl-lightbox:has(.bgl_vid) {
 	width: 90vw;
 }
+.bgl-lightbox:has(.vid_short) {
+	width: unset;
+}
 .lightbox-image{
 	object-fit: contain;
 }