dragon.gal
Multicolumn Bluesky client powered by Angular
1@if (snippet.type == LinkSnippetType) {
2 <a
3 [href]="external().uri"
4 target="_blank"
5 (click)="$event.stopPropagation()"
6 class="flex w-full bg-primary/2"
7 >
8 @if (external().thumb) {
9 <img
10 [ngSrc]="external().thumb"
11 alt="thumb"
12 width="1000"
13 height="1000"
14 class="h-16 w-16 shrink-0 object-cover"
15 />
16 } @else {
17 <div
18 class="h-16 w-16 flex items-center justify-center shrink-0 bg-primary/10"
19 >
20 <div
21 class="flex items-center justify-center h-10"
22 >
23 <span
24 class="material-icons !text-5xl"
25 >link</span>
26 </div>
27 </div>
28 }
29
30 <div
31 class="flex flex-col grow justify-evenly px-2 hover:bg-primary/2"
32 >
33 <span
34 class="font-semibold line-clamp-2 leading-[1.15]"
35 >{{ external().title }}</span>
36 <span
37 class="text-xs"
38 >{{ snippet.domain }}</span>
39 </div>
40 </a>
41}
42
43@if (snippet.type == BlueskyGifSnippetType) {
44 <video
45 #target
46 class="video-js vjs-show-big-play-button-on-pause"
47 (click)="$event.stopPropagation()"
48 ></video>
49}
50
51@if (snippet.type == IframeSnippetType) {
52 @if (snippet.source == YoutubeSnippetSource) {
53 <youtube-player
54 [videoId]="snippet.url"
55 class="block aspect-video w-full max-w-full min-w-0"
56 (click)="$event.stopPropagation()"
57 />
58 } @else {
59 <iframe
60 [src]="safeURL"
61 width="100%"
62 allow="fullscreen"
63 class="aspect-video"
64 (click)="$event.stopPropagation()"
65 ></iframe>
66 }
67}