From dfdd550bc11a592ee45b545892e2ec9c29f7e6e9 Mon Sep 17 00:00:00 2001
From: lukasIO <mail@lukasseiler.de>
Date: Mon, 4 Dec 2023 17:57:25 +0100
Subject: [PATCH] Emit missing style warning on VideoConference when in
 development mode (#720)

---
 .changeset/slimy-flies-clean.md               |  6 ++++++
 .../src/hooks/useWarnAboutMissingStyles.ts    | 11 +++++++++++
 .../react/src/prefabs/AudioConference.tsx     |  3 +++
 packages/react/src/prefabs/PreJoin.tsx        |  3 +++
 .../react/src/prefabs/VideoConference.tsx     |  3 +++
 packages/react/src/utils.ts                   | 19 +++++++++++++++++++
 packages/styles/scss/components/_room.scss    |  1 +
 7 files changed, 46 insertions(+)
 create mode 100644 .changeset/slimy-flies-clean.md
 create mode 100644 packages/react/src/hooks/useWarnAboutMissingStyles.ts

diff --git a/.changeset/slimy-flies-clean.md b/.changeset/slimy-flies-clean.md
new file mode 100644
index 000000000..607053538
--- /dev/null
+++ b/.changeset/slimy-flies-clean.md
@@ -0,0 +1,6 @@
+---
+"@livekit/components-react": patch
+"@livekit/components-styles": patch
+---
+
+Emit missing style warning on VideoConference when in development mode
diff --git a/packages/react/src/hooks/useWarnAboutMissingStyles.ts b/packages/react/src/hooks/useWarnAboutMissingStyles.ts
new file mode 100644
index 000000000..98490a16b
--- /dev/null
+++ b/packages/react/src/hooks/useWarnAboutMissingStyles.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { warnAboutMissingStyles } from '../utils';
+
+/**
+ * @internal
+ */
+export function useWarnAboutMissingStyles() {
+  React.useEffect(() => {
+    warnAboutMissingStyles();
+  }, []);
+}
diff --git a/packages/react/src/prefabs/AudioConference.tsx b/packages/react/src/prefabs/AudioConference.tsx
index 4839a94a5..542b6f58a 100644
--- a/packages/react/src/prefabs/AudioConference.tsx
+++ b/packages/react/src/prefabs/AudioConference.tsx
@@ -7,6 +7,7 @@ import type { WidgetState } from '@livekit/components-core';
 import { Chat } from './Chat';
 import { ParticipantLoop } from '../components';
 import { useParticipants } from '../hooks';
+import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
 
 /** @public */
 export interface AudioConferenceProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -34,6 +35,8 @@ export function AudioConference({ ...props }: AudioConferenceProps) {
   });
   const participants = useParticipants();
 
+  useWarnAboutMissingStyles();
+
   return (
     <LayoutContextProvider onWidgetChange={setWidgetState}>
       <div className="lk-audio-conference" {...props}>
diff --git a/packages/react/src/prefabs/PreJoin.tsx b/packages/react/src/prefabs/PreJoin.tsx
index 5603abc90..60cef3797 100644
--- a/packages/react/src/prefabs/PreJoin.tsx
+++ b/packages/react/src/prefabs/PreJoin.tsx
@@ -19,6 +19,7 @@ import type { LocalUserChoices } from '@livekit/components-core';
 import { log } from '@livekit/components-core';
 import { ParticipantPlaceholder } from '../assets/images';
 import { useMediaDevices, usePersistentUserChoices } from '../hooks';
+import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
 
 const DEFAULT_USER_CHOICES: LocalUserChoices = {
   username: '',
@@ -369,6 +370,8 @@ export function PreJoin({
     }
   }
 
+  useWarnAboutMissingStyles();
+
   return (
     <div className="lk-prejoin" {...htmlProps}>
       <div className="lk-video-container">
diff --git a/packages/react/src/prefabs/VideoConference.tsx b/packages/react/src/prefabs/VideoConference.tsx
index 8d61ceb2d..0c7c774a7 100644
--- a/packages/react/src/prefabs/VideoConference.tsx
+++ b/packages/react/src/prefabs/VideoConference.tsx
@@ -22,6 +22,7 @@ import { useCreateLayoutContext } from '../context';
 import { usePinnedTracks, useTracks } from '../hooks';
 import { Chat } from './Chat';
 import { ControlBar } from './ControlBar';
+import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
 
 /**
  * @public
@@ -112,6 +113,8 @@ export function VideoConference({
     focusTrack?.publication?.trackSid,
   ]);
 
+  useWarnAboutMissingStyles();
+
   return (
     <div className="lk-video-conference" {...props}>
       {isWeb() && (
diff --git a/packages/react/src/utils.ts b/packages/react/src/utils.ts
index 9904946ff..24b4d6140 100644
--- a/packages/react/src/utils.ts
+++ b/packages/react/src/utils.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { mergeProps as mergePropsReactAria } from './mergeProps';
+import { log } from '@livekit/components-core';
 
 /** @internal */
 export function isProp<U extends HTMLElement, T extends React.HTMLAttributes<U>>(
@@ -31,3 +32,21 @@ export function cloneSingleChild(
     return child;
   });
 }
+
+/**
+ * @internal
+ */
+export function warnAboutMissingStyles(el?: HTMLElement) {
+  if (
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
+    (process?.env?.NODE_ENV === 'dev' || process?.env?.NODE_ENV === 'development') &&
+    typeof window !== 'undefined'
+  ) {
+    const target = el ?? document.querySelector('.lk-room-container');
+    if (target && !getComputedStyle(target).getPropertyValue('--lk-has-imported-styles')) {
+      log.warn(
+        "It looks like you're not using the `@livekit/components-styles package`. To render the UI with the default styling, please import it in your layout or page.",
+      );
+    }
+  }
+}
diff --git a/packages/styles/scss/components/_room.scss b/packages/styles/scss/components/_room.scss
index f2ac30a89..7a4786f5f 100644
--- a/packages/styles/scss/components/_room.scss
+++ b/packages/styles/scss/components/_room.scss
@@ -5,6 +5,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  --has-imported-styles: 'true'; // helper var used to warn users if they haven't imported the styles package
 
   *[class^='lk-'],
   *[class*=' lk-'] {