···

       
120
       
120
       
 
       
  const [hide, setHide] = createSignal(

     

       
121
       
121
       
 
       
    localStorage.hideMedia === "true" || params.rkey === undefined,

     

       
122
       
122
       
 
       
  );

     

       
123
       
123
       
+
       
  const [mediaLoaded, setMediaLoaded] = createSignal(false);

     

       
123
       
124
       
 
       


     

       
124
       
125
       
 
       
  createEffect(() => {

     

       
125
       
126
       
 
       
    if (hideMedia()) setHide(hideMedia());

     
···

       
191
       
192
       
 
       
                  <img

     

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

     

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

     

       
195
       
195
       
+
       
                    onLoad={() => setMediaLoaded(true)}

     

       
194
       
196
       
 
       
                  />

     

       
195
       
197
       
 
       
                </Show>

     

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

     

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

     

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

     

       
200
       
200
       
+
       
                    <VideoPlayer did={props.repo} cid={blob.ref.$link} onLoad={() => setMediaLoaded(true)} />

     

       
199
       
201
       
 
       
                  </ErrorBoundary>

     

       
200
       
202
       
 
       
                </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>

     

       
203
       
203
       
+
       
                <Show when={mediaLoaded()}>

     

       
204
       
204
       
+
       
                  <button

     

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

     

       
206
       
206
       
+
       
                    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"

     

       
207
       
207
       
+
       
                  >

     

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

     

       
209
       
209
       
+
       
                  </button>

     

       
210
       
210
       
+
       
                </Show>

     

       
207
       
211
       
 
       
              </Show>

     

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

     

       
209
       
213
       
 
       
                <button