lume/components/XeblogVideo: expose stream link

Signed-off-by: Xe Iaso <me@xeiaso.net>

1 files changed, 24 insertions, 21 deletions

diff --git a/lume/src/_components/XeblogVideo.tsx b/lume/src/_components/XeblogVideo.tsx
index 79e19da..872fff4 100644
--- a/lume/src/_components/XeblogVideo.tsx
+++ b/lume/src/_components/XeblogVideo.tsx
@@ -2,12 +2,7 @@
 // @jsxRuntime automatic
 
 import Hls from "npm:hls.js";
-
-function uuidv4() {
-  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
-    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
-  );
-}
+import { sha256 } from "npm:js-sha256";
 
 export interface VideoProps {
   path: string;
@@ -15,17 +10,16 @@ export interface VideoProps {
 }
 
 export default function Video({ path, vertical }: VideoProps) {
-  const streamURL =
-    `https://cdn.xeiaso.net/file/christine-static/${path}/index.m3u8`;
-  const id = uuidv4();
+  const streamURL = `https://cdn.xeiaso.net/file/christine-static/${path}/index.m3u8`;
+  const id = sha256(streamURL);
   const video = (
-      <video id={id} className="not-prose sm:max-h-[50vh]" controls>
-        <source src={streamURL} type="application/vnd.apple.mpegurl" />
-        <source
-          src="https://cdn.xeiaso.net/file/christine-static/blog/HLSBROKE.mp4"
-          type="video/mp4"
-        />
-      </video>
+    <video id={id} className="not-prose sm:max-h-[50vh] mx-auto" controls>
+      <source src={streamURL} type="application/vnd.apple.mpegurl" />
+      <source
+        src="https://cdn.xeiaso.net/file/christine-static/blog/HLSBROKE.mp4"
+        type="video/mp4"
+      />
+    </video>
   );
 
   const script = (
@@ -34,10 +28,19 @@ export default function Video({ path, vertical }: VideoProps) {
       
       execFor(${`'`}${id}${`'`}, ${`'`}${streamURL}${`'`});`}
     </script>
-  )
+  );
 
-  return <>
-    {video}
-    {script}
-  </>;
+  return (
+    <>
+      {video}
+      {script}
+      <div className="text-center">
+        Want to watch this in your video player of choice? Take this:
+        <br />
+        <a href={streamURL} rel="noreferrer">
+          {streamURL}
+        </a>
+      </div>
+    </>
+  );
 }