pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Handle 'not found' state in embed source selection
Adds a 'notFound' state to useEmbedScraping and updates SourceSelectingView, SourceSelectPart, and SelectableLink to display a distinct UI when an embed source is not found. This improves user feedback for unavailable sources and refines error handling logic.
+55
-19
+16
-2
src/components/player/atoms/settings/SourceSelectingView.tsx
+16
-2
src/components/player/atoms/settings/SourceSelectingView.tsx
···
39
39
return sourceMeta?.name ?? unknownEmbedName;
40
40
}, [props.embedId, unknownEmbedName]);
41
41
42
-
const { run, errored, loading } = useEmbedScraping(
42
+
const { run, errored, loading, notFound } = useEmbedScraping(
43
43
props.routerId,
44
44
props.sourceId,
45
45
props.url,
46
46
props.embedId,
47
47
);
48
48
49
+
let rightSide;
50
+
if (loading) {
51
+
rightSide = undefined; // Let SelectableLink handle loading
52
+
} else if (notFound) {
53
+
rightSide = (
54
+
<div className="flex items-center text-video-scraping-noresult">
55
+
<div className="w-4 h-4 rounded-full border-2 border-current bg-current flex items-center justify-center">
56
+
<div className="w-2 h-0.5 bg-background-main rounded-full" />
57
+
</div>
58
+
</div>
59
+
);
60
+
}
61
+
49
62
return (
50
63
<SelectableLink
51
64
loading={loading}
52
-
error={errored}
65
+
error={errored && !notFound}
53
66
onClick={run}
54
67
selected={props.embedId === currentEmbedId}
68
+
rightSide={rightSide}
55
69
>
56
70
<span className="flex flex-col">
57
71
<span>{embedName}</span>
+1
src/components/player/hooks/useSourceSelection.ts
+1
src/components/player/hooks/useSourceSelection.ts
+18
-15
src/components/player/internals/ContextMenu/Links.tsx
+18
-15
src/components/player/internals/ContextMenu/Links.tsx
···
169
169
disabled?: boolean;
170
170
error?: ReactNode;
171
171
box?: boolean;
172
+
rightSide?: ReactNode;
172
173
}) {
173
-
let rightContent;
174
-
if (props.selected) {
175
-
rightContent = (
176
-
<Icon
177
-
icon={Icons.CIRCLE_CHECK}
178
-
className="text-xl text-video-context-type-accent"
179
-
/>
180
-
);
174
+
let rightContent = props.rightSide; // Use custom rightSide if provided
175
+
if (!rightContent) {
176
+
if (props.selected) {
177
+
rightContent = (
178
+
<Icon
179
+
icon={Icons.CIRCLE_CHECK}
180
+
className="text-xl text-video-context-type-accent"
181
+
/>
182
+
);
183
+
}
184
+
if (props.error)
185
+
rightContent = (
186
+
<span className="flex items-center text-video-context-error">
187
+
<Icon className="ml-2" icon={Icons.WARNING} />
188
+
</span>
189
+
);
190
+
if (props.loading) rightContent = <Spinner className="text-lg" />; // should override selected and error
181
191
}
182
-
if (props.error)
183
-
rightContent = (
184
-
<span className="flex items-center text-video-context-error">
185
-
<Icon className="ml-2" icon={Icons.WARNING} />
186
-
</span>
187
-
);
188
-
if (props.loading) rightContent = <Spinner className="text-lg" />; // should override selected and error
189
192
190
193
return (
191
194
<Link
+20
-2
src/pages/parts/player/SourceSelectPart.tsx
+20
-2
src/pages/parts/player/SourceSelectPart.tsx
···
28
28
return sourceMeta?.name ?? unknownEmbedName;
29
29
}, [props.embedId, unknownEmbedName]);
30
30
31
-
const { run, errored, loading } = useEmbedScraping(
31
+
const { run, errored, loading, notFound } = useEmbedScraping(
32
32
props.routerId,
33
33
props.sourceId,
34
34
props.url,
35
35
props.embedId,
36
36
);
37
37
38
+
let rightSide;
39
+
if (loading) {
40
+
rightSide = undefined; // Let SelectableLink handle loading
41
+
} else if (notFound) {
42
+
rightSide = (
43
+
<div className="flex items-center text-video-scraping-noresult">
44
+
<div className="w-4 h-4 rounded-full border-2 border-current bg-current flex items-center justify-center">
45
+
<div className="w-2 h-0.5 bg-background-main rounded-full" />
46
+
</div>
47
+
</div>
48
+
);
49
+
}
50
+
38
51
return (
39
-
<SelectableLink loading={loading} error={errored} onClick={run}>
52
+
<SelectableLink
53
+
loading={loading}
54
+
error={errored && !notFound}
55
+
onClick={run}
56
+
rightSide={rightSide}
57
+
>
40
58
<span className="flex flex-col">
41
59
<span>{embedName}</span>
42
60
</span>