nandi.uk
This repository has no description
chore: unify plyrfm, spotify, youtube embeds
author
pdelfan
date
(Mar 5, 2026, 4:47 PM -0800)
commit
6f60343f
6f60343f7c9a5d67c7df902770da3c5062e4ffa3
parent
c2eedec9
c2eedec9182539b80e3b9b7aab95ab9f763305b2
+82
-152
+22
-6
src/webapp/features/cards/components/urlCardContent/UrlCardContent.tsx
+22
-6
src/webapp/features/cards/components/urlCardContent/UrlCardContent.tsx
···
8
8
import { Suspense } from 'react';
9
9
import { ErrorBoundary } from 'react-error-boundary';
10
10
import BlueskyPostSkeleton from '@/features/platforms/bluesky/components/blueskyPost/Skeleton.BlueskyPost';
11
-
import YoutubeVideo from '@/features/platforms/youtube/components/YoutubeVideo/YoutubeVideo';
12
-
import SpotifyEmbed from '@/features/platforms/spotify/components/SpotifyEmbed/SpotifyEmbed';
13
11
import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
14
-
import PlyrfmTrack from '@/features/platforms/plyrfm/components/plyrfmTrack/PlyrFmTrack';
12
+
import IframeEmbed from '@/features/platforms/common/components/IframeEmbed/IframeEmbed';
15
13
import UrlCardContentSkeleton from './Skeleton.UrlCardContent';
16
14
17
15
interface Props {
···
89
87
platform.type === SupportedPlatform.YOUTUBE_VIDEO &&
90
88
settings.cardView !== 'list'
91
89
) {
92
-
return <YoutubeVideo url={platform.url} cardContent={props.cardContent} />;
90
+
return (
91
+
<IframeEmbed
92
+
url={platform.url}
93
+
cardContent={props.cardContent}
94
+
aspectRatio={16 / 8}
95
+
/>
96
+
);
93
97
}
94
98
95
99
if (
96
100
platform.type === SupportedPlatform.SPOTIFY &&
97
101
settings.cardView !== 'list'
98
102
) {
99
-
return <SpotifyEmbed url={platform.url} cardContent={props.cardContent} />;
103
+
return (
104
+
<IframeEmbed
105
+
url={platform.url}
106
+
cardContent={props.cardContent}
107
+
height={200}
108
+
/>
109
+
);
100
110
}
101
111
102
112
if (
103
113
platform.type === SupportedPlatform.PLYRFM_TRACK &&
104
114
settings.cardView !== 'list'
105
115
) {
106
-
return <PlyrfmTrack url={platform.url} cardContent={props.cardContent} />;
116
+
return (
117
+
<IframeEmbed
118
+
url={platform.url}
119
+
cardContent={props.cardContent}
120
+
height={200}
121
+
/>
122
+
);
107
123
}
108
124
109
125
return (
+60
src/webapp/features/platforms/common/components/IframeEmbed/IframeEmbed.tsx
+60
src/webapp/features/platforms/common/components/IframeEmbed/IframeEmbed.tsx
···
1
+
import { getDomain } from '@/lib/utils/link';
2
+
import { Anchor, Text, Card, Stack, Tooltip, AspectRatio } from '@mantine/core';
3
+
import { UrlCard } from '@semble/types';
4
+
import Link from 'next/link';
5
+
import { Fragment } from 'react';
6
+
7
+
interface IframeEmbedProps {
8
+
url: string;
9
+
cardContent: UrlCard['cardContent'];
10
+
height?: number | string;
11
+
aspectRatio?: number;
12
+
}
13
+
14
+
export default function IframeEmbed(props: IframeEmbedProps) {
15
+
const domain = getDomain(props.url);
16
+
const height = props.height ?? 200;
17
+
18
+
const iframeElement = (
19
+
<Card p={0}>
20
+
<iframe
21
+
src={props.url}
22
+
height={props.aspectRatio ? '100%' : height}
23
+
allowFullScreen
24
+
style={{ border: 0 }}
25
+
/>
26
+
</Card>
27
+
);
28
+
29
+
return (
30
+
<Fragment>
31
+
<Stack gap={0} flex={1}>
32
+
<Tooltip label={props.cardContent.url}>
33
+
<Anchor
34
+
onClick={(e) => e.stopPropagation()}
35
+
component={Link}
36
+
href={props.cardContent.url}
37
+
target="_blank"
38
+
c={'gray'}
39
+
fz={'sm'}
40
+
lineClamp={1}
41
+
w={'fit-content'}
42
+
>
43
+
{domain}
44
+
</Anchor>
45
+
</Tooltip>
46
+
{props.cardContent.title && (
47
+
<Text c={'bright'} lineClamp={2} fw={500}>
48
+
{props.cardContent.title}
49
+
</Text>
50
+
)}
51
+
</Stack>
52
+
53
+
{props.aspectRatio ? (
54
+
<AspectRatio ratio={props.aspectRatio}>{iframeElement}</AspectRatio>
55
+
) : (
56
+
iframeElement
57
+
)}
58
+
</Fragment>
59
+
);
60
+
}
-48
src/webapp/features/platforms/plyrfm/components/plyrfmTrack/PlyrFmTrack.tsx
-48
src/webapp/features/platforms/plyrfm/components/plyrfmTrack/PlyrFmTrack.tsx
···
1
-
import { getDomain } from '@/lib/utils/link';
2
-
import { Anchor, Text, Card, Stack, Tooltip } from '@mantine/core';
3
-
import { UrlCard } from '@semble/types';
4
-
import Link from 'next/link';
5
-
import { Fragment } from 'react';
6
-
7
-
interface Props {
8
-
url: string;
9
-
cardContent: UrlCard['cardContent'];
10
-
}
11
-
12
-
export default function PlyrfmTrack(props: Props) {
13
-
const domain = getDomain(props.url);
14
-
15
-
return (
16
-
<Fragment>
17
-
<Stack gap={0} flex={1}>
18
-
<Tooltip label={props.cardContent.url}>
19
-
<Anchor
20
-
onClick={(e) => e.stopPropagation()}
21
-
component={Link}
22
-
href={props.cardContent.url}
23
-
target="_blank"
24
-
c={'gray'}
25
-
lineClamp={1}
26
-
w={'fit-content'}
27
-
>
28
-
{domain}
29
-
</Anchor>
30
-
</Tooltip>
31
-
{props.cardContent.title && (
32
-
<Text c={'bright'} lineClamp={2} fw={500}>
33
-
{props.cardContent.title}
34
-
</Text>
35
-
)}
36
-
</Stack>
37
-
38
-
<Card p={0}>
39
-
<iframe
40
-
src={props.url}
41
-
height={200}
42
-
allowFullScreen
43
-
style={{ border: 0 }}
44
-
/>
45
-
</Card>
46
-
</Fragment>
47
-
);
48
-
}
-48
src/webapp/features/platforms/spotify/components/SpotifyEmbed/SpotifyEmbed.tsx
-48
src/webapp/features/platforms/spotify/components/SpotifyEmbed/SpotifyEmbed.tsx
···
1
-
import { getDomain } from '@/lib/utils/link';
2
-
import { Anchor, Text, Card, Stack, Tooltip } from '@mantine/core';
3
-
import { UrlCard } from '@semble/types';
4
-
import Link from 'next/link';
5
-
import { Fragment } from 'react';
6
-
7
-
interface Props {
8
-
url: string;
9
-
cardContent: UrlCard['cardContent'];
10
-
}
11
-
12
-
export default function SpotifyEmbed(props: Props) {
13
-
const domain = getDomain(props.url);
14
-
15
-
return (
16
-
<Fragment>
17
-
<Stack gap={0} flex={1}>
18
-
<Tooltip label={props.cardContent.url}>
19
-
<Anchor
20
-
onClick={(e) => e.stopPropagation()}
21
-
component={Link}
22
-
href={props.cardContent.url}
23
-
target="_blank"
24
-
c={'gray'}
25
-
lineClamp={1}
26
-
w={'fit-content'}
27
-
>
28
-
{domain}
29
-
</Anchor>
30
-
</Tooltip>
31
-
{props.cardContent.title && (
32
-
<Text c={'bright'} lineClamp={2} fw={500}>
33
-
{props.cardContent.title}
34
-
</Text>
35
-
)}
36
-
</Stack>
37
-
38
-
<Card p={0}>
39
-
<iframe
40
-
src={props.url}
41
-
height={200}
42
-
allowFullScreen
43
-
style={{ border: 0 }}
44
-
/>
45
-
</Card>
46
-
</Fragment>
47
-
);
48
-
}
-50
src/webapp/features/platforms/youtube/components/YoutubeVideo/YoutubeVideo.tsx
-50
src/webapp/features/platforms/youtube/components/YoutubeVideo/YoutubeVideo.tsx
···
1
-
import { getDomain } from '@/lib/utils/link';
2
-
import { Anchor, AspectRatio, Card, Stack, Tooltip, Text } from '@mantine/core';
3
-
import { UrlCard } from '@semble/types';
4
-
import Link from 'next/link';
5
-
import { Fragment } from 'react';
6
-
7
-
interface Props {
8
-
url: string;
9
-
cardContent: UrlCard['cardContent'];
10
-
}
11
-
12
-
export default function YoutubeVideo(props: Props) {
13
-
const domain = getDomain(props.url);
14
-
15
-
return (
16
-
<Fragment>
17
-
<Stack gap={0} flex={1}>
18
-
<Tooltip label={props.cardContent.url}>
19
-
<Anchor
20
-
onClick={(e) => e.stopPropagation()}
21
-
component={Link}
22
-
href={props.cardContent.url}
23
-
target="_blank"
24
-
c={'gray'}
25
-
fz={'sm'}
26
-
lineClamp={1}
27
-
w={'fit-content'}
28
-
>
29
-
{domain}
30
-
</Anchor>
31
-
</Tooltip>
32
-
{props.cardContent.title && (
33
-
<Text c={'bright'} lineClamp={2} fw={500}>
34
-
{props.cardContent.title}
35
-
</Text>
36
-
)}
37
-
</Stack>
38
-
<AspectRatio ratio={16 / 8}>
39
-
<Card p={0}>
40
-
<iframe
41
-
src={props.url}
42
-
height={'100%'}
43
-
allowFullScreen
44
-
style={{ border: 0 }}
45
-
/>
46
-
</Card>
47
-
</AspectRatio>
48
-
</Fragment>
49
-
);
50
-
}