this repo has no description
0
fork

Configure Feed

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

overlay hide media button

Juliet 58b18caa c433fae1

+29 -31
+29 -31
src/components/json.tsx
··· 6 6 import { ATURI_RE } from "../utils/types/at-uri"; 7 7 import { hideMedia } from "../views/settings"; 8 8 import { pds } from "./navbar"; 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 - <span class="flex gap-x-1"> 189 - <Show when={blob.mimeType.startsWith("image/") && !hide()}> 190 - <img 191 - class="h-auto max-h-64 max-w-[16rem] object-contain" 192 - src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`} 193 - /> 194 - </Show> 195 - <Show when={blob.mimeType === "video/mp4" && !hide()}> 196 - <ErrorBoundary fallback={() => <span>Failed to load video</span>}> 197 - <VideoPlayer did={props.repo} cid={blob.ref.$link} /> 198 - </ErrorBoundary> 199 - </Show> 200 - <span 201 - classList={{ 202 - "flex items-center justify-between gap-1": true, 203 - "flex-col": !hide(), 204 - }} 205 - > 206 - <Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}> 207 - <Tooltip text={hide() ? "Show" : "Hide"}> 208 - <button 209 - onclick={() => setHide(!hide())} 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 - > 212 - <span 213 - class={`iconify text-base ${hide() ? "lucide--eye-off" : "lucide--eye"}`} 214 - ></span> 215 - </button> 216 - </Tooltip> 187 + <Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}> 188 + <span class="group/media relative flex w-fit"> 189 + <Show when={!hide()}> 190 + <Show when={blob.mimeType.startsWith("image/")}> 191 + <img 192 + class="h-auto max-h-64 max-w-[16rem] object-contain" 193 + src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`} 194 + /> 195 + </Show> 196 + <Show when={blob.mimeType === "video/mp4"}> 197 + <ErrorBoundary fallback={() => <span>Failed to load video</span>}> 198 + <VideoPlayer did={props.repo} cid={blob.ref.$link} /> 199 + </ErrorBoundary> 200 + </Show> 201 + <button 202 + onclick={() => setHide(true)} 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 + > 205 + <span class="iconify lucide--eye-off text-base"></span> 206 + </button> 207 + </Show> 208 + <Show when={hide()}> 209 + <button 210 + onclick={() => setHide(false)} 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 + > 213 + <span class="iconify lucide--eye text-base"></span> 214 + </button> 217 215 </Show> 218 216 </span> 219 - </span> 217 + </Show> 220 218 </Show> 221 219 {rawObj} 222 220 </>