From 8eecbfa829848bf1f688365ae059d7a2c349fd08 Mon Sep 17 00:00:00 2001
From: Xe Iaso <me@xeiaso.net>
Date: Sat, 24 Feb 2024 22:49:25 -0500
Subject: lume/components/XeblogVideo: expose stream link

Signed-off-by: Xe Iaso <me@xeiaso.net>
---
 lume/deno.lock                       |  5 ++++
 lume/src/_components/XeblogVideo.tsx | 45 +++++++++++++++++++-----------------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/lume/deno.lock b/lume/deno.lock
index 3e276d2..fedc25d 100644
--- a/lume/deno.lock
+++ b/lume/deno.lock
@@ -13,6 +13,7 @@
       "npm:autoprefixer@10.4.16": "npm:autoprefixer@10.4.16_postcss@8.4.31",
       "npm:date-fns@2.30.0": "npm:date-fns@2.30.0",
       "npm:hls.js": "npm:hls.js@1.4.12",
+      "npm:js-sha256": "npm:js-sha256@0.11.0",
       "npm:markdown-it-attrs@4.1.6": "npm:markdown-it-attrs@4.1.6_markdown-it@13.0.2",
       "npm:markdown-it-deflist@2.1.0": "npm:markdown-it-deflist@2.1.0",
       "npm:markdown-it-deflist@3.0.0": "npm:markdown-it-deflist@3.0.0",
@@ -827,6 +828,10 @@
         "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
         "dependencies": {}
       },
+      "js-sha256@0.11.0": {
+        "integrity": "sha512-6xNlKayMZvds9h1Y1VWc0fQHQ82BxTXizWPEtEeGvmOUYpBRy4gbWroHLpzowe6xiQhHpelCQiE7HEdznyBL9Q==",
+        "dependencies": {}
+      },
       "js-tokens@4.0.0": {
         "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
         "dependencies": {}
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>
+    </>
+  );
 }
-- 
cgit v1.2.3