diff options
| -rw-r--r-- | lume/deno.lock | 5 | ||||
| -rw-r--r-- | 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> + </> + ); } |