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