flo-bit.dev
your personal website on atproto - mirror
blento.app
fix bluesky media, switch creation modal
+2
-1
src/lib/cards/core/LinkCard/CreateLinkCardModal.svelte
+2
-1
src/lib/cards/core/LinkCard/CreateLinkCardModal.svelte
+2
-1
src/lib/cards/core/MapCard/CreateMapCardModal.svelte
+2
-1
src/lib/cards/core/MapCard/CreateMapCardModal.svelte
+2
-1
src/lib/cards/media/AppleMusicCard/CreateAppleMusicCardModal.svelte
+2
-1
src/lib/cards/media/AppleMusicCard/CreateAppleMusicCardModal.svelte
···
1
<script lang="ts">
2
+
import { Alert, Button, Input, Subheading } from '@foxui/core';
3
+
import Modal from '$lib/components/modal/Modal.svelte';
4
import type { CreationModalComponentProps } from '../../types';
5
6
let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+17
-24
src/lib/cards/media/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte
+17
-24
src/lib/cards/media/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte
···
1
<script lang="ts">
2
-
import { Button, Input, Label, Modal, Subheading } from '@foxui/core';
3
import type { CreationModalComponentProps } from '../../types';
4
import { onMount } from 'svelte';
5
import { getDidContext } from '$lib/website/context';
···
17
onMount(async () => {
18
const authorFeed = await getAuthorFeed({ did });
19
20
for (let post of authorFeed?.feed ?? []) {
21
let images =
22
post.post.embed?.$type === 'app.bsky.embed.images#view' ? post.post.embed : undefined;
23
24
for (let image of images?.images ?? []) {
25
-
mediaList.push(image);
26
}
27
28
if (
···
30
post.post.embed.thumbnail &&
31
post.post.embed.playlist
32
) {
33
-
mediaList.push({
34
...post.post.embed,
35
isVideo: true,
36
fullsize: ''
···
38
}
39
}
40
41
isLoading = false;
42
});
43
44
-
let selected = $state();
45
</script>
46
47
<Modal
···
57
<Subheading>Select an image or video</Subheading>
58
59
<div
60
-
class="bg-base-100 dark:bg-base-950 grid h-[50dvh] grid-cols-2 gap-4 overflow-y-scroll rounded-2xl p-4 lg:grid-cols-3"
61
>
62
-
{#each mediaList as media (media.thumbnail || media.playlist)}
63
<button
64
onclick={() => {
65
-
selected = media;
66
if (media.isVideo) {
67
item.cardData = {
68
video: media
69
};
70
-
} else item.cardData.image = media;
71
}}
72
class="relative cursor-pointer"
73
>
74
<img
75
src={media.fullsize || media.thumbnail}
76
alt=""
77
-
class={[
78
-
'h-32 w-full rounded-xl object-cover',
79
-
selected === media
80
-
? 'outline-accent-500 opacity-100 outline-2 -outline-offset-2'
81
-
: 'opacity-80'
82
-
]}
83
/>
84
{#if media.isVideo}
85
<div class="absolute inset-0 inline-flex items-center justify-center">
···
106
{/if}
107
</div>
108
109
-
<Label class="mt-4">Link (optional):</Label>
110
-
<Input bind:value={item.cardData.href} />
111
-
112
-
<div class="mt-4 flex justify-end gap-2">
113
<Button
114
onclick={() => {
115
oncancel();
116
}}
117
variant="ghost">Cancel</Button
118
-
>
119
-
<Button
120
-
disabled={!selected}
121
-
onclick={async () => {
122
-
oncreate();
123
-
}}>Create</Button
124
>
125
</div>
126
</Modal>
···
1
<script lang="ts">
2
+
import { Button, Subheading } from '@foxui/core';
3
+
import Modal from '$lib/components/modal/Modal.svelte';
4
import type { CreationModalComponentProps } from '../../types';
5
import { onMount } from 'svelte';
6
import { getDidContext } from '$lib/website/context';
···
18
onMount(async () => {
19
const authorFeed = await getAuthorFeed({ did });
20
21
+
const collected: typeof mediaList = [];
22
for (let post of authorFeed?.feed ?? []) {
23
let images =
24
post.post.embed?.$type === 'app.bsky.embed.images#view' ? post.post.embed : undefined;
25
26
for (let image of images?.images ?? []) {
27
+
collected.push(image);
28
}
29
30
if (
···
32
post.post.embed.thumbnail &&
33
post.post.embed.playlist
34
) {
35
+
collected.push({
36
...post.post.embed,
37
isVideo: true,
38
fullsize: ''
···
40
}
41
}
42
43
+
mediaList = collected;
44
isLoading = false;
45
});
46
47
+
48
</script>
49
50
<Modal
···
60
<Subheading>Select an image or video</Subheading>
61
62
<div
63
+
class="bg-base-200 dark:bg-base-950/30 grid h-[50dvh] grid-cols-2 gap-4 overflow-y-scroll rounded-2xl p-4 lg:grid-cols-3"
64
>
65
+
{#each mediaList as media (media.fullsize || media.thumbnail || media.playlist)}
66
<button
67
onclick={() => {
68
if (media.isVideo) {
69
item.cardData = {
70
video: media
71
};
72
+
} else {
73
+
item.cardData = {
74
+
image: media
75
+
};
76
+
}
77
+
oncreate();
78
}}
79
class="relative cursor-pointer"
80
>
81
<img
82
src={media.fullsize || media.thumbnail}
83
alt=""
84
+
class="h-32 w-full rounded-xl object-cover opacity-80 hover:opacity-100"
85
/>
86
{#if media.isVideo}
87
<div class="absolute inset-0 inline-flex items-center justify-center">
···
108
{/if}
109
</div>
110
111
+
<div class="mt-4 flex justify-end">
112
<Button
113
onclick={() => {
114
oncancel();
115
}}
116
variant="ghost">Cancel</Button
117
>
118
</div>
119
</Modal>
+2
src/lib/cards/media/BlueskyMediaCard/index.ts
+2
src/lib/cards/media/BlueskyMediaCard/index.ts
···
1
import type { CardDefinition } from '../../types';
2
import BlueskyMediaCard from './BlueskyMediaCard.svelte';
3
import CreateBlueskyMediaCardModal from './CreateBlueskyMediaCardModal.svelte';
4
5
export const BlueskyMediaCardDefinition = {
6
type: 'blueskyMedia',
7
contentComponent: BlueskyMediaCard,
8
createNew: () => {},
9
creationModalComponent: CreateBlueskyMediaCardModal,
10
canHaveLabel: true,
11
12
keywords: ['bsky', 'atproto', 'media', 'feed'],
···
1
import type { CardDefinition } from '../../types';
2
import BlueskyMediaCard from './BlueskyMediaCard.svelte';
3
import CreateBlueskyMediaCardModal from './CreateBlueskyMediaCardModal.svelte';
4
+
import ImageCardSettings from '../../core/ImageCard/ImageCardSettings.svelte';
5
6
export const BlueskyMediaCardDefinition = {
7
type: 'blueskyMedia',
8
contentComponent: BlueskyMediaCard,
9
createNew: () => {},
10
creationModalComponent: CreateBlueskyMediaCardModal,
11
+
settingsComponent: ImageCardSettings,
12
canHaveLabel: true,
13
14
keywords: ['bsky', 'atproto', 'media', 'feed'],
+2
-1
src/lib/cards/media/EmbedCard/CreateEmbedCardModal.svelte
+2
-1
src/lib/cards/media/EmbedCard/CreateEmbedCardModal.svelte
···
1
<script lang="ts">
2
+
import { Alert, Button, Input, Subheading } from '@foxui/core';
3
+
import Modal from '$lib/components/modal/Modal.svelte';
4
import type { CreationModalComponentProps } from '../../types';
5
6
let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+2
-1
src/lib/cards/media/GIFCard/GiphySearchModal.svelte
+2
-1
src/lib/cards/media/GIFCard/GiphySearchModal.svelte
+2
-1
src/lib/cards/media/LastFMCard/CreateLastFMCardModal.svelte
+2
-1
src/lib/cards/media/LastFMCard/CreateLastFMCardModal.svelte
···
1
<script lang="ts">
2
+
import { Button, Input, Subheading } from '@foxui/core';
3
+
import Modal from '$lib/components/modal/Modal.svelte';
4
import type { CreationModalComponentProps } from '../../types';
5
6
let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+2
-1
src/lib/cards/media/PhotoGalleryCard/CreateGrainGalleryCardModal.svelte
+2
-1
src/lib/cards/media/PhotoGalleryCard/CreateGrainGalleryCardModal.svelte
···
1
<script lang="ts">
2
+
import { Alert, Button, Input, Subheading } from '@foxui/core';
3
+
import Modal from '$lib/components/modal/Modal.svelte';
4
import type { CreationModalComponentProps } from '../../types';
5
import { parseGrainGalleryUrl } from './helpers';
6
import { resolveHandle } from '$lib/atproto';
+2
-1
src/lib/cards/media/PlyrFMCard/CreatePlyrFMCardModal.svelte
+2
-1
src/lib/cards/media/PlyrFMCard/CreatePlyrFMCardModal.svelte
+2
-1
src/lib/cards/media/SpotifyCard/CreateSpotifyCardModal.svelte
+2
-1
src/lib/cards/media/SpotifyCard/CreateSpotifyCardModal.svelte
···
1
<script lang="ts">
2
+
import { Alert, Button, Input, Subheading } from '@foxui/core';
3
+
import Modal from '$lib/components/modal/Modal.svelte';
4
import type { CreationModalComponentProps } from '../../types';
5
6
let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+2
-1
src/lib/cards/media/YoutubeVideoCard/CreateYoutubeCardModal.svelte
+2
-1
src/lib/cards/media/YoutubeVideoCard/CreateYoutubeCardModal.svelte
+2
-1
src/lib/cards/visual/FluidTextCard/CreateFluidTextCardModal.svelte
+2
-1
src/lib/cards/visual/FluidTextCard/CreateFluidTextCardModal.svelte
···
1
<script lang="ts">
2
+
import { Button, Input, Subheading, Label } from '@foxui/core';
3
+
import Modal from '$lib/components/modal/Modal.svelte';
4
import type { CreationModalComponentProps } from '../../types';
5
6
let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+2
-1
src/lib/cards/visual/Model3DCard/CreateModel3DCardModal.svelte
+2
-1
src/lib/cards/visual/Model3DCard/CreateModel3DCardModal.svelte
···
1
<script lang="ts">
2
+
import { Alert, Button, Subheading } from '@foxui/core';
3
+
import Modal from '$lib/components/modal/Modal.svelte';
4
import type { CreationModalComponentProps } from '../../types';
5
6
let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();