forked from
pds.ls/pdsls
atproto explorer
add getBlob link
+31
-21
+31
-21
src/components/json.tsx
+31
-21
src/components/json.tsx
···
1
1
import VideoPlayer from "./video-player";
2
-
import { createSignal, For } from "solid-js";
2
+
import { createSignal, For, Show } from "solid-js";
3
3
import { A } from "@solidjs/router";
4
+
import { pds } from "./navbar";
5
+
import Tooltip from "./tooltip";
4
6
5
7
interface AtBlob {
6
8
$type: string;
···
119
121
120
122
const blob: AtBlob = data as any;
121
123
122
-
if (blob.$type === "blob" && blob.mimeType.startsWith("image/")) {
123
-
return (
124
-
<>
125
-
<a
126
-
href={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}
127
-
target="_blank"
128
-
class="contents"
129
-
>
130
-
<img
131
-
class="max-h-[16rem] max-w-[16rem]"
132
-
src={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}
133
-
/>
134
-
</a>
135
-
{rawObj}
136
-
</>
137
-
);
138
-
}
139
-
140
-
if (blob.$type === "blob" && blob.mimeType === "video/mp4") {
124
+
if (blob.$type === "blob") {
141
125
return (
142
126
<>
143
-
<VideoPlayer did={repo} cid={blob.ref.$link} />
127
+
<span class="flex gap-x-1">
128
+
<Show when={blob.mimeType.startsWith("image/")}>
129
+
<a
130
+
href={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}
131
+
target="_blank"
132
+
class="contents"
133
+
>
134
+
<img
135
+
class="max-h-[16rem] max-w-[16rem]"
136
+
src={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}
137
+
/>
138
+
</a>
139
+
</Show>
140
+
<Show when={blob.mimeType === "video/mp4"}>
141
+
<VideoPlayer did={repo} cid={blob.ref.$link} />
142
+
</Show>
143
+
<Show when={pds()}>
144
+
<a
145
+
href={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${repo}&cid=${blob.ref.$link}`}
146
+
target="_blank"
147
+
>
148
+
<Tooltip text="Blob link">
149
+
<div class="i-tabler-external-link" />
150
+
</Tooltip>
151
+
</a>
152
+
</Show>
153
+
</span>
144
154
{rawObj}
145
155
</>
146
156
);