atmosphere explorer pds.ls
tool typescript atproto
437
fork

Configure Feed

Select the types of activity you want to include in your feed.

wrap media in full width div

juliet.paris 9ec50eb9 cbf7e783

verified
+45 -39
+45 -39
src/components/json.tsx
··· 209 209 ); 210 210 211 211 const blob: AtBlob = props.data as any; 212 + const canShowMedia = () => 213 + pds() && params.rkey && (blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"); 214 + 215 + const MediaDisplay = () => ( 216 + <div> 217 + <span class="group/media relative flex w-fit"> 218 + <Show when={!hide()}> 219 + <Show when={blob.mimeType.startsWith("image/")}> 220 + <img 221 + class="h-auto max-h-48 max-w-48 object-contain sm:max-h-64 sm:max-w-64" 222 + src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${blob.ref.$link}`} 223 + onLoad={() => setMediaLoaded(true)} 224 + /> 225 + </Show> 226 + <Show when={blob.mimeType === "video/mp4"}> 227 + <ErrorBoundary fallback={() => <span>Failed to load video</span>}> 228 + <VideoPlayer 229 + did={ctx.repo} 230 + cid={blob.ref.$link} 231 + onLoad={() => setMediaLoaded(true)} 232 + /> 233 + </ErrorBoundary> 234 + </Show> 235 + <Show when={mediaLoaded()}> 236 + <button 237 + onclick={() => setHide(true)} 238 + class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-900/70 p-1.5 text-white opacity-0 backdrop-blur-sm transition-opacity group-hover/media:opacity-100 hover:bg-neutral-900/80 active:bg-neutral-900/90 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100/80 dark:active:bg-neutral-100/90" 239 + > 240 + <span class="iconify lucide--eye-off text-base"></span> 241 + </button> 242 + </Show> 243 + </Show> 244 + <Show when={hide()}> 245 + <button 246 + onclick={() => setHide(false)} 247 + 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" 248 + > 249 + <span class="iconify lucide--eye text-base"></span> 250 + </button> 251 + </Show> 252 + </span> 253 + </div> 254 + ); 212 255 213 256 if (blob.$type === "blob") { 214 257 return ( 215 258 <> 216 - <Show when={pds() && params.rkey}> 217 - <Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}> 218 - <span class="group/media relative flex w-fit"> 219 - <Show when={!hide()}> 220 - <Show when={blob.mimeType.startsWith("image/")}> 221 - <img 222 - class="h-auto max-h-48 max-w-48 object-contain sm:max-h-64 sm:max-w-64" 223 - src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${blob.ref.$link}`} 224 - onLoad={() => setMediaLoaded(true)} 225 - /> 226 - </Show> 227 - <Show when={blob.mimeType === "video/mp4"}> 228 - <ErrorBoundary fallback={() => <span>Failed to load video</span>}> 229 - <VideoPlayer 230 - did={ctx.repo} 231 - cid={blob.ref.$link} 232 - onLoad={() => setMediaLoaded(true)} 233 - /> 234 - </ErrorBoundary> 235 - </Show> 236 - <Show when={mediaLoaded()}> 237 - <button 238 - onclick={() => setHide(true)} 239 - class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-900/70 p-1.5 text-white opacity-0 backdrop-blur-sm transition-opacity group-hover/media:opacity-100 hover:bg-neutral-900/80 active:bg-neutral-900/90 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100/80 dark:active:bg-neutral-100/90" 240 - > 241 - <span class="iconify lucide--eye-off text-base"></span> 242 - </button> 243 - </Show> 244 - </Show> 245 - <Show when={hide()}> 246 - <button 247 - onclick={() => setHide(false)} 248 - 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" 249 - > 250 - <span class="iconify lucide--eye text-base"></span> 251 - </button> 252 - </Show> 253 - </span> 254 - </Show> 259 + <Show when={canShowMedia()}> 260 + <MediaDisplay /> 255 261 </Show> 256 262 {rawObj} 257 263 </>