Normalize Loom share links for embeds

src/people/utils/LoomViewerRecorder.tsx

@@ -7,6 +7,23 @@ const PUBLIC_APP_ID = 'ded90c8e-92ed-496d-bfe3-f742d7fa9785';
 
 const BUTTON_ID = 'loom-record-sdk-button';
 
+const normalizeLoomEmbedUrl = (url: string) => {
+  try {
+    const parsedUrl = new URL(url);
+    const isLoomUrl = parsedUrl.hostname === 'loom.com' || parsedUrl.hostname.endsWith('.loom.com');
+    const [urlType, videoId] = parsedUrl.pathname.split('/').filter(Boolean);
+
+    if (isLoomUrl && urlType === 'share' && videoId) {
+      parsedUrl.pathname = `/embed/${videoId}`;
+      return parsedUrl.toString();
+    }
+  } catch {
+    return url;
+  }
+
+  return url;
+};
+
 export default function LoomViewerRecorder(props: LoomViewProps) {
   const { loomEmbedUrl, onChange, readOnly, style } = props;
   const [videoUrl, setVideoUrl] = useState(loomEmbedUrl || '');
@@ -45,15 +62,23 @@ export default function LoomViewerRecorder(props: LoomViewProps) {
     return null;
   }
 
-  const loomViewer = videoUrl && (
-    <div
-      dangerouslySetInnerHTML={{
-        __html: `<div class="lo-emb-vid"
-        style="position: relative; padding-bottom: 75%; height: 0;">
-        <iframe src="${videoUrl}"
-            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>`
-      }}
-    />
+  const normalizedVideoUrl = videoUrl ? normalizeLoomEmbedUrl(videoUrl) : '';
+  const loomViewer = normalizedVideoUrl && (
+    <div className="lo-emb-vid" style={{ position: 'relative', paddingBottom: '75%', height: 0 }}>
+      <iframe
+        src={normalizedVideoUrl}
+        title="Loom video"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%'
+        }}
+        frameBorder={0}
+        allowFullScreen
+      />
+    </div>
   );
 
   return (

src/people/utils/__tests__/LoomViewerRecorder.test.tsx

@@ -139,4 +139,23 @@ describe('LoomViewerRecorder', () => {
       expect(sdkButtonMock.on).toHaveBeenCalledTimes(2);
     });
   });
+
+  it('renders Loom share URLs as embeddable iframe URLs', () => {
+    (isSupported as jest.Mock).mockResolvedValue({
+      supported: false,
+      error: 'Browser not supported'
+    });
+
+    const { container } = render(
+      <LoomViewerRecorder
+        readOnly={true}
+        style={defaultStyle}
+        loomEmbedUrl="https://www.loom.com/share/abc123?sid=test"
+      />
+    );
+
+    const iframe = container.querySelector('iframe');
+    expect(iframe).toBeInTheDocument();
+    expect(iframe).toHaveAttribute('src', 'https://www.loom.com/embed/abc123?sid=test');
+  });
 });