commit 187dea587300b7eb9a1ec7cecd258696d28ee728 · pdsls.dev/pdsls

+31 -21
src/components/json.tsx
···

       1
       1
        
       import VideoPlayer from "./video-player";

     

       2
       2
       -
       import { createSignal, For } from "solid-js";

     

       2
       2
       +
       import { createSignal, For, Show } from "solid-js";

     

       3
       3
        
       import { A } from "@solidjs/router";

     

       4
       4
       +
       import { pds } from "./navbar";

     

       5
       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
       122
       -
         if (blob.$type === "blob" && blob.mimeType.startsWith("image/")) {

     

       123
       123
       -
           return (

     

       124
       124
       -
             <>

     

       125
       125
       -
               <a

     

       126
       126
       -
                 href={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}

     

       127
       127
       -
                 target="_blank"

     

       128
       128
       -
                 class="contents"

     

       129
       129
       -
               >

     

       130
       130
       -
                 <img

     

       131
       131
       -
                   class="max-h-[16rem] max-w-[16rem]"

     

       132
       132
       -
                   src={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}

     

       133
       133
       -
                 />

     

       134
       134
       -
               </a>

     

       135
       135
       -
               {rawObj}

     

       136
       136
       -
             </>

     

       137
       137
       -
           );

     

       138
       138
       -
         }

     

       139
       139
       -
       

     

       140
       140
       -
         if (blob.$type === "blob" && blob.mimeType === "video/mp4") {

     

       124
       124
       +
         if (blob.$type === "blob") {

     

       141
       125
        
           return (

     

       142
       126
        
             <>

     

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

     

       127
       127
       +
               <span class="flex gap-x-1">

     

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

     

       129
       129
       +
                   <a

     

       130
       130
       +
                     href={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}

     

       131
       131
       +
                     target="_blank"

     

       132
       132
       +
                     class="contents"

     

       133
       133
       +
                   >

     

       134
       134
       +
                     <img

     

       135
       135
       +
                       class="max-h-[16rem] max-w-[16rem]"

     

       136
       136
       +
                       src={`https://cdn.bsky.app/img/feed_thumbnail/plain/${repo}/${blob.ref.$link}@jpeg`}

     

       137
       137
       +
                     />

     

       138
       138
       +
                   </a>

     

       139
       139
       +
                 </Show>

     

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

     

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

     

       142
       142
       +
                 </Show>

     

       143
       143
       +
                 <Show when={pds()}>

     

       144
       144
       +
                   <a

     

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

     

       146
       146
       +
                     target="_blank"

     

       147
       147
       +
                   >

     

       148
       148
       +
                     <Tooltip text="Blob link">

     

       149
       149
       +
                       <div class="i-tabler-external-link" />

     

       150
       150
       +
                     </Tooltip>

     

       151
       151
       +
                   </a>

     

       152
       152
       +
                 </Show>

     

       153
       153
       +
               </span>

     

       144
       154
        
               {rawObj}

     

       145
       155
        
             </>

     

       146
       156
        
           );