@bagelink/vue 1.4.62 → 1.4.64

package/package.json

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

package/src/components/BglVideo.vue

@@ -66,7 +66,7 @@ defineExpose({ play, pause })
 const embedType = $computed<'YouTube' | 'Vimeo' | undefined>(() => {
 	const youtubeRegex = /youtube\.com|youtu\.be/
 	if (youtubeRegex.test(props.src || '')) return 'YouTube'
-	const vimeoRegex = /vimeo\.com/
+	const vimeoRegex = /(?:player\.)?vimeo\.com/
 	if (vimeoRegex.test(props.src || '')) return 'Vimeo'
 })
 
@@ -90,10 +90,15 @@ const videoUrl = $computed(() => {
 			return `https://www.youtube.com/embed/${videoId}?${queryParams}`
 		}
 		if (embedType === 'Vimeo') {
-			const vimeoRegex
-			// eslint-disable-next-line regexp/no-unused-capturing-group
-				= /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/
-			const videoId = props.src?.match(vimeoRegex)?.[3]
+			// Handle both regular Vimeo URLs and player.vimeo.com embed URLs
+			const playerVimeoRegex = /player\.vimeo\.com\/video\/(\d+)/
+			const regularVimeoRegex = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/
+
+			const playerMatch = props.src?.match(playerVimeoRegex)
+			const regularMatch = props.src?.match(regularVimeoRegex)
+
+			const videoId = playerMatch?.[1] || regularMatch?.[3]
+			console.log(videoId, { playerMatch, regularMatch })
 			return `https://player.vimeo.com/video/${videoId}`
 		}
 	}
@@ -104,24 +109,13 @@ const videoUrl = $computed(() => {
 <template>
 	<div ref="videoContainer" class="bgl_vid" :class="{ vid_empty: !src, vid_short: isYoutubeShort }">
 		<iframe
-			v-if="embedType"
-			:src="videoUrl"
-			:style="{ aspectRatio }"
-			frameborder="0"
-			title="Video"
+			v-if="embedType" :src="videoUrl" :style="{ aspectRatio }" frameborder="0" title="Video"
 			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-			referrerpolicy="strict-origin-when-cross-origin"
-			allowfullscreen
+			referrerpolicy="strict-origin-when-cross-origin" allowfullscreen
 		/>
 		<video
-			v-else-if="src"
-			ref="video"
-			:autoplay="autoplay === true"
-			:muted="mute"
-			:loop="loop"
-			:style="{ aspectRatio }"
-			:controls="controls"
-			:playsinline="playsinline"
+			v-else-if="src" ref="video" :autoplay="autoplay === true" :muted="mute" :loop="loop"
+			:style="{ aspectRatio }" :controls="controls" :playsinline="playsinline"
 		>
 			<source :src="src" :type="`video/${videoFormat}`">
 		</video>
@@ -145,7 +139,8 @@ const videoUrl = $computed(() => {
 }
 
 .bgl_vid.vid_short {
-	max-width: 56.25vh; /* Limit width for shorts to maintain aspect ratio */
+	max-width: 56.25vh;
+	/* Limit width for shorts to maintain aspect ratio */
 	margin: 0 auto;
 }
 </style>