···

       
6
       
6
       
 
       
import { ATURI_RE } from "../utils/types/at-uri";

     

       
7
       
7
       
 
       
import { hideMedia } from "../views/settings";

     

       
8
       
8
       
 
       
import { pds } from "./navbar";

     

       
9
       
9
       
-
       
import Tooltip from "./tooltip";

     

       
10
       
9
       
 
       
import VideoPlayer from "./video-player";

     

       
11
       
10
       
 
       


     

       
12
       
11
       
 
       
interface AtBlob {

     
···

       
185
       
184
       
 
       
    return (

     

       
186
       
185
       
 
       
      <>

     

       
187
       
186
       
 
       
        <Show when={pds() && params.rkey}>

     

       
188
       
188
       
-
       
          <span class="flex gap-x-1">

     

       
189
       
189
       
-
       
            <Show when={blob.mimeType.startsWith("image/") && !hide()}>

     

       
190
       
190
       
-
       
              <img

     

       
191
       
191
       
-
       
                class="h-auto max-h-64 max-w-[16rem] object-contain"

     

       
192
       
192
       
-
       
                src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`}

     

       
193
       
193
       
-
       
              />

     

       
194
       
194
       
-
       
            </Show>

     

       
195
       
195
       
-
       
            <Show when={blob.mimeType === "video/mp4" && !hide()}>

     

       
196
       
196
       
-
       
              <ErrorBoundary fallback={() => <span>Failed to load video</span>}>

     

       
197
       
197
       
-
       
                <VideoPlayer did={props.repo} cid={blob.ref.$link} />

     

       
198
       
198
       
-
       
              </ErrorBoundary>

     

       
199
       
199
       
-
       
            </Show>

     

       
200
       
200
       
-
       
            <span

     

       
201
       
201
       
-
       
              classList={{

     

       
202
       
202
       
-
       
                "flex items-center justify-between gap-1": true,

     

       
203
       
203
       
-
       
                "flex-col": !hide(),

     

       
204
       
204
       
-
       
              }}

     

       
205
       
205
       
-
       
            >

     

       
206
       
206
       
-
       
              <Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}>

     

       
207
       
207
       
-
       
                <Tooltip text={hide() ? "Show" : "Hide"}>

     

       
208
       
208
       
-
       
                  <button

     

       
209
       
209
       
-
       
                    onclick={() => setHide(!hide())}

     

       
210
       
210
       
-
       
                    class={`${!hide() ? "-mt-1 -ml-0.5" : ""} flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600`}

     

       
211
       
211
       
-
       
                  >

     

       
212
       
212
       
-
       
                    <span

     

       
213
       
213
       
-
       
                      class={`iconify text-base ${hide() ? "lucide--eye-off" : "lucide--eye"}`}

     

       
214
       
214
       
-
       
                    ></span>

     

       
215
       
215
       
-
       
                  </button>

     

       
216
       
216
       
-
       
                </Tooltip>

     

       
187
       
187
       
+
       
          <Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}>

     

       
188
       
188
       
+
       
            <span class="group/media relative flex w-fit">

     

       
189
       
189
       
+
       
              <Show when={!hide()}>

     

       
190
       
190
       
+
       
                <Show when={blob.mimeType.startsWith("image/")}>

     

       
191
       
191
       
+
       
                  <img

     

       
192
       
192
       
+
       
                    class="h-auto max-h-64 max-w-[16rem] object-contain"

     

       
193
       
193
       
+
       
                    src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`}

     

       
194
       
194
       
+
       
                  />

     

       
195
       
195
       
+
       
                </Show>

     

       
196
       
196
       
+
       
                <Show when={blob.mimeType === "video/mp4"}>

     

       
197
       
197
       
+
       
                  <ErrorBoundary fallback={() => <span>Failed to load video</span>}>

     

       
198
       
198
       
+
       
                    <VideoPlayer did={props.repo} cid={blob.ref.$link} />

     

       
199
       
199
       
+
       
                  </ErrorBoundary>

     

       
200
       
200
       
+
       
                </Show>

     

       
201
       
201
       
+
       
                <button

     

       
202
       
202
       
+
       
                  onclick={() => setHide(true)}

     

       
203
       
203
       
+
       
                  class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-900/70 p-1.5 text-white opacity-100 backdrop-blur-sm transition-opacity hover:bg-neutral-900/80 active:bg-neutral-900/90 sm:opacity-0 sm:group-hover/media:opacity-100 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100/80 dark:active:bg-neutral-100/90"

     

       
204
       
204
       
+
       
                >

     

       
205
       
205
       
+
       
                  <span class="iconify lucide--eye-off text-base"></span>

     

       
206
       
206
       
+
       
                </button>

     

       
207
       
207
       
+
       
              </Show>

     

       
208
       
208
       
+
       
              <Show when={hide()}>

     

       
209
       
209
       
+
       
                <button

     

       
210
       
210
       
+
       
                  onclick={() => setHide(false)}

     

       
211
       
211
       
+
       
                  class="flex items-center rounded-lg bg-neutral-200 p-1.5 transition-colors hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"

     

       
212
       
212
       
+
       
                >

     

       
213
       
213
       
+
       
                  <span class="iconify lucide--eye text-base"></span>

     

       
214
       
214
       
+
       
                </button>

     

       
217
       
215
       
 
       
              </Show>

     

       
218
       
216
       
 
       
            </span>

     

       
219
       
219
       
-
       
          </span>

     

       
217
       
217
       
+
       
          </Show>

     

       
220
       
218
       
 
       
        </Show>

     

       
221
       
219
       
 
       
        {rawObj}

     

       
222
       
220
       
 
       
      </>