Merge pull request #43 from cloudflare/allow-manual-src-url

Allow manual src URL

src/Stream.tsx

@@ -11,6 +11,7 @@ import React, {
 import { StreamPlayerApi, StreamProps, VideoDimensions } from "types";
 import { useStreamSDK, safelyAccessStreamSDK } from "./useStreamSDK";
 import { useIframeSrc } from "./useIframeSrc";
+import { validSrcUrl } from "./validSrcUrl";
 
 /**
  * Hook for syncing properties to the SDK api when they change
@@ -143,7 +144,7 @@ export const StreamEmbed: FC<StreamProps> = ({
 
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
-  const iframeSrc = useIframeSrc(src, {
+  const computedSrc = useIframeSrc(src, {
     muted,
     preload,
     loop,
@@ -155,6 +156,11 @@ export const StreamEmbed: FC<StreamProps> = ({
     defaultTextTrack,
   });
 
+  // While it's easier for most consumers to simply provide the video id
+  // or signed URL and have us compute the iframe's src for them, some
+  // consumers may need to manually specify the iframe's src.
+  const iframeSrc = validSrcUrl(src) ? src : computedSrc;
+
   useProperty("muted", ref, muted);
   useProperty("controls", ref, controls);
   useProperty("src", ref, src);

src/validSrcUrl.ts

@@ -0,0 +1,8 @@
+export function validSrcUrl(str: string) {
+  try {
+    const url = new URL(str);
+    return url.hostname.endsWith("videodelivery.net");
+  } catch {
+    return false;
+  }
+}