[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
crosspost fixes bugs
+149
-4
+22
-2
src/lib/state/modals.svelte.ts
+22
-2
src/lib/state/modals.svelte.ts
···
55
55
review: string | undefined;
56
56
rating: number | undefined;
57
57
title: string | undefined;
58
+
backdrop: string | undefined;
59
+
poster: string | undefined;
58
60
59
-
show: (uri: string, review: string, rating: number, title: string) => void;
61
+
show: (
62
+
uri: string,
63
+
review: string,
64
+
rating: number,
65
+
title: string,
66
+
backdrop: string,
67
+
poster: string
68
+
) => void;
60
69
hide: () => void;
61
70
} = $state({
62
71
showModal: false,
···
64
73
review: undefined,
65
74
rating: undefined,
66
75
title: undefined,
76
+
backdrop: undefined,
77
+
poster: undefined,
67
78
68
-
show: (uri: string, review: string, rating: number, title: string) => {
79
+
show: (
80
+
uri: string,
81
+
review: string,
82
+
rating: number,
83
+
title: string,
84
+
backdrop: string,
85
+
poster: string
86
+
) => {
69
87
crosspostModal.uri = uri;
70
88
crosspostModal.review = review;
71
89
crosspostModal.rating = rating;
72
90
crosspostModal.title = title;
91
+
crosspostModal.backdrop = backdrop;
92
+
crosspostModal.poster = poster;
73
93
crosspostModal.showModal = true;
74
94
},
75
95
+118
src/routes/crosspost-image.png/+server.ts
+118
src/routes/crosspost-image.png/+server.ts
···
1
+
// src/routes/og/+server.ts
2
+
import { ImageResponse } from '@ethercorps/sveltekit-og';
3
+
import { type RequestHandler } from '@sveltejs/kit';
4
+
5
+
const template = ({
6
+
backdrop,
7
+
poster,
8
+
avatar,
9
+
displayName,
10
+
title,
11
+
rating
12
+
}: {
13
+
backdrop: string;
14
+
poster: string;
15
+
avatar: string;
16
+
displayName: string;
17
+
title: string;
18
+
rating: number;
19
+
}) => {
20
+
return `
21
+
<div tw="bg-zinc-900 flex flex-col w-full h-full items-center justify-center">
22
+
<div tw="flex absolute bottom-0 left-0 right-0 top-0 bg-sky-400">
23
+
<img src="https://image.tmdb.org/t/p/w780${backdrop}" alt="" class="flex h-full w-full rounded-xl opacity-50" />
24
+
25
+
<div tw="flex absolute h-full w-full bg-black/80">
26
+
</div>
27
+
</div>
28
+
<div tw="flex flex-row w-full py-12 px-4 items-center justify-start p-8">
29
+
<div tw="flex h-auto aspect-[3/2] w-82">
30
+
<img src="https://image.tmdb.org/t/p/w500${poster}" alt=""
31
+
class="flex h-full w-full rounded-xl border-2 border-zinc-800" style="border-radius: 16px; border-width: 1px; border-color: #3f3f46;" />
32
+
</div>
33
+
34
+
<div tw="flex flex-col text-7xl font-bold text-zinc-100 text-left px-8 max-w-3xl">
35
+
<div tw="flex items-center">
36
+
${avatar ? `<img src=${avatar} tw="w-16 h-16 rounded-full" />` : ``}
37
+
<div tw="flex truncate text-4xl text-zinc-100 pl-4">
38
+
${displayName}
39
+
<span tw="flex truncate text-sky-500 pl-2">
40
+
reviewed
41
+
</span>
42
+
</div>
43
+
</div>
44
+
45
+
<span tw="flex tracking-tight mt-4">${title}</span>
46
+
47
+
${
48
+
rating
49
+
? `<div tw="flex items-center mt-8">
50
+
<div tw="flex items-center">
51
+
52
+
${new Array(5)
53
+
.fill(0)
54
+
.map(
55
+
(_, i) => `<svg
56
+
tw="w-20 h-20 flex ${i * 2 < (rating ?? 0) - 1 ? 'text-sky-400' : 'text-zinc-600'}"
57
+
viewBox="0 0 24 24"
58
+
fill="currentColor">
59
+
<path
60
+
fill-rule="evenodd"
61
+
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
62
+
clip-rule="evenodd"
63
+
/>
64
+
</svg>`
65
+
)
66
+
.join('')}
67
+
</div>
68
+
</div>`
69
+
: ``
70
+
}
71
+
</div>
72
+
</div>
73
+
74
+
<div tw="flex text-4xl text-sky-400 items-end justify-end w-full px-6 pb-4">
75
+
<div tw="flex">
76
+
skywatched.app
77
+
</div>
78
+
</div>
79
+
</div>`;
80
+
};
81
+
82
+
const host = import.meta.env.DEV ? 'http://localhost:5173' : 'https://skywatched.app';
83
+
const fontPath = `fonts/inter-latin-ext-400-normal.woff`;
84
+
const fontFile = await fetch(`${host}/${fontPath}`);
85
+
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
86
+
87
+
export const GET: RequestHandler = async ({ url }) => {
88
+
const backdrop = url.searchParams.get('backdrop');
89
+
const poster = url.searchParams.get('poster');
90
+
91
+
const avatar = url.searchParams.get('avatar');
92
+
const displayName = url.searchParams.get('displayName');
93
+
const title = url.searchParams.get('title');
94
+
const rating = url.searchParams.get('rating');
95
+
96
+
console.log(rating);
97
+
98
+
return new ImageResponse(
99
+
template({
100
+
backdrop: backdrop ?? '',
101
+
poster: poster ?? '',
102
+
avatar: avatar ?? '',
103
+
displayName: displayName ?? '',
104
+
title: title ?? '',
105
+
rating: rating ? parseInt(rating) * 2 : 0
106
+
}),
107
+
{
108
+
fonts: [
109
+
{
110
+
name: 'Inter Latin',
111
+
data: fontData,
112
+
weight: 400
113
+
}
114
+
]
115
+
},
116
+
{}
117
+
);
118
+
};
+1
-1
src/lib/Components/Modals/CrosspostModal.svelte
+1
-1
src/lib/Components/Modals/CrosspostModal.svelte
···
78
78
<p>Loading image...</p>
79
79
</div>
80
80
<img
81
-
src="/review/{encodeURIComponent(crosspostModal.uri ?? '')}/og.png"
81
+
src="/crosspost-image.png?backdrop={crosspostModal.backdrop}&poster={crosspostModal.poster}&avatar={user.avatar}&displayName={user.displayName}&title={crosspostModal.title}&rating={crosspostModal.rating}"
82
82
alt="crosspost"
83
83
class="absolute inset-0 h-full w-full object-cover"
84
84
/>
+8
-1
src/lib/Components/Modals/RateMovieModal.svelte
+8
-1
src/lib/Components/Modals/RateMovieModal.svelte
···
46
46
if (settings.crosspostEnabled && review.length > 0) {
47
47
await new Promise((resolve) => setTimeout(resolve, 1000));
48
48
49
-
crosspostModal.show(data.uri, review, rating, rateMovieModal?.selectedItem?.title ?? '');
49
+
crosspostModal.show(
50
+
data.uri,
51
+
review,
52
+
rating,
53
+
rateMovieModal?.selectedItem?.title ?? '',
54
+
rateMovieModal?.selectedItem?.backdrop_path ?? '',
55
+
rateMovieModal?.selectedItem?.poster_path ?? ''
56
+
);
50
57
}
51
58
}
52
59