fix: vimeo + loom embed (backport #7018)

apps/web/lib/utils/video-upload.ts

@@ -26,7 +26,7 @@ export const checkForVimeoUrl = (url: string): boolean => {
 
     if (vimeoUrl.protocol !== "https:") return false;
 
-    const vimeoDomains = ["www.vimeo.com", "vimeo.com"];
+    const vimeoDomains = ["www.vimeo.com", "vimeo.com", "player.vimeo.com"];
     const hostname = vimeoUrl.hostname;
 
     return vimeoDomains.includes(hostname);

apps/web/modules/ui/components/file-input/lib/utils.ts

@@ -86,6 +86,10 @@ export const getAllowedFiles = async (
 };
 
 export const checkForYoutubePrivacyMode = (url: string): boolean => {
+  if (!url || typeof url !== "string" || url.trim() === "") {
+    return false;
+  }
+
   try {
     const parsedUrl = new URL(url);
     return parsedUrl.host === "www.youtube-nocookie.com";

packages/survey-ui/src/components/general/element-media.tsx

@@ -3,30 +3,18 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 import { checkForLoomUrl, checkForVimeoUrl, checkForYoutubeUrl, convertToEmbedUrl } from "@/lib/video";
 
-// Function to add extra params to videoUrls in order to reduce video controls
-const getVideoUrlWithParams = (videoUrl: string): string | undefined => {
-  // First convert to embed URL
-  const embedUrl = convertToEmbedUrl(videoUrl);
-  if (!embedUrl) return undefined;
-
+//Function to add extra params to videoUrls in order to reduce video controls
+const getVideoUrlWithParams = (videoUrl: string): string => {
   const isYoutubeVideo = checkForYoutubeUrl(videoUrl);
   const isVimeoUrl = checkForVimeoUrl(videoUrl);
   const isLoomUrl = checkForLoomUrl(videoUrl);
-
-  if (isYoutubeVideo) {
-    // For YouTube, add parameters to embed URL
-    const separator = embedUrl.includes("?") ? "&" : "?";
-    return `${embedUrl}${separator}controls=0`;
-  } else if (isVimeoUrl) {
-    // For Vimeo, add parameters to embed URL
-    const separator = embedUrl.includes("?") ? "&" : "?";
-    return `${embedUrl}${separator}title=false&transcript=false&speed=false&quality_selector=false&progress_bar=false&pip=false&fullscreen=false&cc=false&chromecast=false`;
-  } else if (isLoomUrl) {
-    // For Loom, add parameters to embed URL
-    const separator = embedUrl.includes("?") ? "&" : "?";
-    return `${embedUrl}${separator}hide_share=true&hideEmbedTopBar=true&hide_title=true`;
-  }
-  return embedUrl;
+  if (isYoutubeVideo) return videoUrl.concat("?controls=0");
+  else if (isVimeoUrl)
+    return videoUrl.concat(
+      "?title=false&transcript=false&speed=false&quality_selector=false&progress_bar=false&pip=false&fullscreen=false&cc=false&chromecast=false"
+    );
+  else if (isLoomUrl) return videoUrl.concat("?hide_share=true&hideEmbedTopBar=true&hide_title=true");
+  return videoUrl;
 };
 
 interface ElementMediaProps {

packages/survey-ui/src/lib/video.ts

@@ -84,7 +84,7 @@ const extractVimeoId = (url: string): string | null => {
 };
 
 const extractLoomId = (url: string): string | null => {
-  const regExp = /loom\.com\/share\/(?<videoId>[a-zA-Z0-9]+)/;
+  const regExp = /loom\.com\/(?:share|embed)\/(?<videoId>[a-zA-Z0-9]+)/;
   const match = regExp.exec(url);
 
   return match?.groups?.videoId ?? null;