load blobs from PDS, no more bsky CDN

package.json

···
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.3",
     "codemirror": "^6.0.2",
-    "hls.js": "^1.6.13",
     "solid-js": "^1.9.9"
   },
   "packageManager": "pnpm@10.12.2+sha512.a32540185b964ee30bb4e979e405adc6af59226b438ee4cc19f9e8773667a66d302f5bfee60a39d3cac69e35e4b96e708a71dd002b7e9359c4112a1722ac323f"

pnpm-lock.yaml

···
       codemirror:
         specifier: ^6.0.2
         version: 6.0.2
-      hls.js:
-        specifier: ^1.6.13
-        version: 1.6.13
       solid-js:
         specifier: ^1.9.9
         version: 1.9.9
···
 
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-
-  hls.js@1.6.13:
-    resolution: {integrity: sha512-hNEzjZNHf5bFrUNvdS4/1RjIanuJ6szpWNfTaX5I6WfGynWXGT7K/YQLYtemSvFExzeMdgdE4SsyVLJbd5PcZA==}
 
   html-entities@2.3.3:
     resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
···
   globals@15.15.0: {}
 
   graceful-fs@4.2.11: {}
-
-  hls.js@1.6.13: {}
 
   html-entities@2.3.3: {}
 

src/components/json.tsx

···
-import { A } from "@solidjs/router";
-import { createEffect, createSignal, For, Show } from "solid-js";
+import { A, useParams } from "@solidjs/router";
+import { createEffect, createSignal, ErrorBoundary, For, Show } from "solid-js";
 import { hideMedia } from "../views/settings";
 import { pds } from "./navbar";
 import Tooltip from "./tooltip";
···
 };
 
 const JSONObject = ({ data, repo }: { data: { [x: string]: JSONType }; repo: string }) => {
-  const [hide, setHide] = createSignal(localStorage.hideMedia === "true");
+  const params = useParams();
+  const [hide, setHide] = createSignal(
+    localStorage.hideMedia === "true" || params.rkey === undefined,
+  );
 
-  createEffect(() => setHide(hideMedia()));
+  createEffect(() => {
+    if (hideMedia()) setHide(hideMedia());
+  });
 
   const Obj = ({ key, value }: { key: string; value: JSONType }) => {
     const [show, setShow] = createSignal(true);
···
       <>
         <span class="flex gap-x-1">
           <Show when={blob.mimeType.startsWith("image/") && !hide()}>
-            <a
-              href={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}
-              target="_blank"
-            >
-              <img
-                class="max-h-[16rem] w-full max-w-[16rem]"
-                src={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}
-              />
-            </a>
+            <img
+              class="max-h-[16rem] w-fit max-w-[16rem]"
+              src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${repo}&cid=${blob.ref.$link}`}
+            />
           </Show>
           <Show when={blob.mimeType === "video/mp4" && !hide()}>
-            <VideoPlayer did={repo} cid={blob.ref.$link} />
+            <ErrorBoundary fallback={() => <span>Failed to load video</span>}>
+              <VideoPlayer did={repo} cid={blob.ref.$link} />
+            </ErrorBoundary>
           </Show>
           <span
-            classList={{ "flex items-center justify-between gap-1": true, "flex-col": !hide() }}
+            classList={{
+              "flex items-center justify-between gap-1": true,
+              "flex-col": !hide(),
+            }}
           >
             <Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}>
               <Tooltip text={hide() ? "Show" : "Hide"}>
···
               </Tooltip>
             </Show>
             <Show when={pds()}>
-              <Tooltip text="Blob PDS link">
+              <Tooltip text="Blob on PDS">
                 <a
                   href={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${repo}&cid=${blob.ref.$link}`}
                   target="_blank"

src/components/video-player.tsx

···
-// courtesy of the best 🐇, my lovely sister mary
-import Hls from "hls.js";
-import { createEffect, createSignal, onCleanup, Show } from "solid-js";
+import { onMount } from "solid-js";
+import { pds } from "./navbar";
 
 export interface VideoPlayerProps {
-  /** Expected to be static */
   did: string;
   cid: string;
 }
 
 const VideoPlayer = ({ did, cid }: VideoPlayerProps) => {
-  const [playing, setPlaying] = createSignal(false);
-  const [error, setError] = createSignal(false);
+  let video!: HTMLVideoElement;
 
-  const hls = new Hls({
-    capLevelToPlayerSize: true,
-    startLevel: 1,
-    xhrSetup(xhr, urlString) {
-      const url = new URL(urlString);
-
-      // Just in case it fails, we'll remove `session_id` everywhere
-      url.searchParams.delete("session_id");
-
-      xhr.open("get", url.toString());
-    },
+  onMount(async () => {
+    // thanks bf <3
+    const res = await fetch(`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`);
+    if (!res.ok) throw new Error(res.statusText);
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    if (video) video.src = url;
   });
 
-  onCleanup(() => hls.destroy());
-
-  hls.loadSource(`https://video.cdn.bsky.app/hls/${did}/${cid}/playlist.m3u8`);
-  hls.on(Hls.Events.ERROR, () => setError(true));
-
   return (
-    <div class="max-w-xs">
-      <Show when={!error()}>
-        <video
-          ref={(node) => {
-            hls.attachMedia(node);
-
-            createEffect(() => {
-              if (!playing()) {
-                return;
-              }
-
-              const observer = new IntersectionObserver(
-                (entries) => {
-                  const entry = entries[0];
-                  if (!entry.isIntersecting) {
-                    node.pause();
-                  }
-                },
-                { threshold: 0.5 },
-              );
-
-              onCleanup(() => observer.disconnect());
-
-              observer.observe(node);
-            });
-          }}
-          controls
-          playsinline
-          onPlay={() => setPlaying(true)}
-          onPause={() => setPlaying(false)}
-          onLoadedMetadata={(ev) => {
-            const video = ev.currentTarget;
-
-            const hasAudio =
-              // @ts-expect-error: Mozilla-specific
-              video.mozHasAudio ||
-              // @ts-expect-error: WebKit/Blink-specific
-              !!video.webkitAudioDecodedByteCount ||
-              // @ts-expect-error: WebKit-specific
-              !!(video.audioTracks && video.audioTracks.length);
-
-            video.loop = !hasAudio || video.duration <= 6;
-          }}
-        />
-      </Show>
-    </div>
+    <video ref={video} class="max-w-xs" controls playsinline>
+      <source type="video/mp4" />
+    </video>
   );
 };