Skip to content

Commit 228200f

Browse files
thomasyuill-livekitthomasyuill-livekit
committed
don't show build/test instructions in sandbox environment
1 parent 7df8fa0 commit 228200f

File tree

5 files changed

+67
-48
lines changed

5 files changed

+67
-48
lines changed

‎components/embed-popup/agent-client.tsx‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,8 @@ function AgentClient({ appConfig }: EmbedFixedAgentClientProps) {
2929
return;
3030
}
3131

32+
setError(null);
3233
setPopupOpen((open) => !open);
33-
34-
if (error) {
35-
setError(null);
36-
}
3734
};
3835

3936
const handleDismissError = () => {
@@ -75,10 +72,14 @@ function AgentClient({ appConfig }: EmbedFixedAgentClientProps) {
7572
if (!popupOpen) {
7673
return;
7774
}
78-
if (room.state !== 'disconnected') {
75+
if (!connectionDetails) {
76+
setError({
77+
title: 'Error fetching connection details',
78+
description: 'Please try again later',
79+
});
7980
return;
8081
}
81-
if (!connectionDetails) {
82+
if (room.state !== 'disconnected') {
8283
return;
8384
}
8485

@@ -130,19 +131,21 @@ function AgentClient({ appConfig }: EmbedFixedAgentClientProps) {
130131
>
131132
<div className="bg-bg2 dark:bg-bg1 border-separator1 ml-auto h-[480px] w-full rounded-[28px] border drop-shadow-md md:max-w-[360px]">
132133
<div className="relative h-full w-full">
133-
<ErrorMessage error={error} handleDismissError={handleDismissError} />
134-
<PopupViewMotion
135-
initial={{ opacity: 1 }}
136-
animate={{ opacity: error === null ? 1 : 0 }}
137-
transition={{
138-
type: 'linear',
139-
duration: 0.2,
140-
}}
141-
disabled={!popupOpen}
142-
sessionStarted={popupOpen}
143-
onEmbedError={setError}
144-
className="absolute inset-0"
145-
/>
134+
<ErrorMessage error={error} />
135+
{!error && (
136+
<PopupViewMotion
137+
initial={{ opacity: 1 }}
138+
animate={{ opacity: error === null ? 1 : 0 }}
139+
transition={{
140+
type: 'linear',
141+
duration: 0.2,
142+
}}
143+
disabled={!popupOpen}
144+
sessionStarted={popupOpen}
145+
onEmbedError={setError}
146+
className="absolute inset-0"
147+
/>
148+
)}
146149
</div>
147150
</div>
148151
</motion.div>

‎components/embed-popup/error-message.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
import { XIcon } from '@phosphor-icons/react';
21
import { EmbedErrorDetails } from '@/lib/types';
32
import { cn } from '@/lib/utils';
4-
import { Button } from '../ui/button';
53

64
interface ErrorMessageProps {
75
error: EmbedErrorDetails | null;
8-
handleDismissError: () => void;
96
}
107

11-
export function ErrorMessage({ error, handleDismissError }: ErrorMessageProps) {
8+
export function ErrorMessage({ error }: ErrorMessageProps) {
129
return (
1310
<div
1411
inert={error === null}
@@ -24,14 +21,10 @@ export function ErrorMessage({ error, handleDismissError }: ErrorMessageProps) {
2421
<img src="/lk-logo-dark.svg" alt="LiveKit Logo" className="hidden size-6 dark:block" />
2522
</div>
2623

27-
<div className="flex w-full flex-col justify-center gap-1 overflow-auto px-4 text-center">
28-
<span className="text-sm font-medium">{error?.title}</span>
29-
<span className="text-xs">{error?.description}</span>
24+
<div className="flex w-full flex-col justify-center gap-4 overflow-auto px-4 text-center">
25+
<span className="mx-4 leading-tight font-medium text-pretty">{error?.title}</span>
26+
<span className="text-sm">{error?.description}</span>
3027
</div>
31-
32-
<Button variant="secondary" onClick={handleDismissError}>
33-
<XIcon /> Dismiss
34-
</Button>
3528
</div>
3629
);
3730
}

‎components/embed-popup/transcript.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function Transcript({ messages }: TranscriptProps) {
3737
<div
3838
ref={transcriptRef}
3939
className={cn(
40-
'scrollbar flex flex-1 flex-col overflow-x-hidden overflow-y-scroll py-2 pl-1',
40+
'scrollbar-on-hover flex flex-1 flex-col overflow-x-hidden overflow-y-scroll py-2 pl-1',
4141
'[mask-image:linear-gradient(0deg,rgba(0,0,0,0.2)_0%,rgba(0,0,0,1)_5%,rgba(0,0,0,1)_95%,rgba(0,0,0,0)_100%)]'
4242
)}
4343
>

‎components/welcome.tsx‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default function Welcome() {
1919
const selectedTab = tabParam ? (tabParam === 'popup' ? 'popup' : 'iframe') : 'iframe';
2020
const [, forceUpdate] = useState(0);
2121
const theme = (localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode) ?? 'dark';
22+
const IS_RUNNING_ON_VERCEL = process.env.VERCEL === '1';
2223

2324
const embedUrl = useMemo(() => {
2425
const url = new URL('/embed', window.location.origin);
@@ -102,7 +103,7 @@ export default function Welcome() {
102103
<h3 className="sr-only text-lg font-semibold">IFrame Style</h3>
103104
<div>
104105
<h4 className="text-fg0 mb-1 font-semibold">Embed code</h4>
105-
<pre className="border-separator2 bg-bg2 overflow-auto rounded-md border px-2 py-1">
106+
<pre className="border-separator2 bg-bg2 scrollbar-custom overflow-auto rounded-md border px-2 py-1">
106107
<code className="font-mono">
107108
{`<iframe\n src="`}
108109
<a
@@ -132,18 +133,30 @@ export default function Welcome() {
132133
<h3 className="sr-only text-lg font-semibold">Popup Style</h3>
133134
<div>
134135
<h4 className="text-fg0 mb-1 font-semibold">Embed code</h4>
135-
<pre className="border-separator2 bg-bg2 overflow-auto rounded-md border px-2 py-1">
136+
<pre className="border-separator2 bg-bg2 scrollbar-custom overflow-auto rounded-md border px-2 py-1">
136137
<code className="font-mono">{`<script src="${embedPopupUrl}"></script>`}</code>
137138
</pre>
138-
<p className="text-fg4 my-4 text-sm">
139-
To apply local changes, run{' '}
140-
<code className="text-fg0">pnpm build-embed-popup-script</code>.<br />
141-
Test your latest build at{' '}
142-
<a href="/popup" target="_blank" rel="noopener noreferrer" className="underline">
143-
{popupTestUrl}
144-
</a>
145-
.
146-
</p>
139+
{/* hide build/test instructions in sandbox environment on Vercel */}
140+
{!IS_RUNNING_ON_VERCEL && (
141+
<div className="my-4">
142+
<p className="text-fg4 overflow-hidden text-sm text-ellipsis whitespace-nowrap">
143+
To apply local changes, run{' '}
144+
<code className="text-fg0">pnpm build-embed-popup-script</code>.
145+
</p>
146+
<p className="text-fg4 overflow-hidden text-sm text-ellipsis whitespace-nowrap">
147+
Test your latest build at{' '}
148+
<a
149+
href="/popup"
150+
target="_blank"
151+
rel="noopener noreferrer"
152+
className="underline"
153+
>
154+
{popupTestUrl}
155+
</a>
156+
.
157+
</p>
158+
</div>
159+
)}
147160
</div>
148161
<div className="flex justify-center pt-8">
149162
<div className="text-fgAccent flex gap-1">

‎styles/globals.css‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -246,32 +246,42 @@
246246
}
247247
}
248248

249-
.scrollbar {
249+
.scrollbar-custom,
250+
.scrollbar-on-hover {
250251
scrollbar-width: thin;
251252
scrollbar-gutter: stable;
253+
scrollbar-color: var(--fg4) transparent;
254+
}
255+
256+
.scrollbar-on-hover {
252257
scrollbar-color: transparent transparent;
253258
transition: scrollbar-color 0.2s linear;
254259
}
255260

256-
.scrollbar:hover {
261+
.scrollbar-custom:hover,
262+
.scrollbar-on-hover:hover {
257263
scrollbar-color: var(--fg4) transparent;
258264
}
259265

260-
.scrollbar::-webkit-scrollbar {
266+
.scrollbar-custom::-webkit-scrollbar,
267+
.scrollbar-on-hover::-webkit-scrollbar {
261268
-webkit-appearance: none;
262269
width: 8px;
263270
}
264271

265-
.scrollbar::-webkit-scrollbar-thumb {
272+
.scrollbar-custom::-webkit-scrollbar-thumb,
273+
.scrollbar-on-hover::-webkit-scrollbar-thumb {
266274
background-color: transparent;
267275
transition: background-color 0.2s linear;
268276
}
269277

270-
.scrollbar:hover::-webkit-scrollbar-thumb {
278+
.scrollbar-custom:hover::-webkit-scrollbar-thumb,
279+
.scrollbar-on-hover:hover::-webkit-scrollbar-thumb {
271280
background-color: var(--fg4);
272281
}
273282

274-
.scrollbar::-webkit-scrollbar-track {
283+
.scrollbar-custom::-webkit-scrollbar-track,
284+
.scrollbar-on-hover::-webkit-scrollbar-track {
275285
background-color: transparent;
276286
}
277287
}

0 commit comments

Comments
 (0)