From dd359f61556bcf07e672a7abed71fb85626f2a2b Mon Sep 17 00:00:00 2001
From: natalie <22222885+espeon@users.noreply.github.com>
Date: Mon, 18 Aug 2025 13:14:43 -0400
Subject: [PATCH] dash: widgets-based dashboard (#450)
* new live dashboard controls
* widgets :)
* remove padding of top bar
* accurate data in the panel
* bento updates + more accurate data
* delete unused files and add thumb backup for video player
* add options while not streaming
* Switch stream selection over to css framework
* Remove unused `useNewItemsPer` hook in chat panel
* redo live dashboard UI w color and style updates
* Replace Mod Actions with Information Widget in Bento Grid
* move to components dir
* add livestream panel back in
* improved state management in livestream panel
* Rewrite InformationWidget component and remove unused props
* remove unneeded props
* Update InformationWidget layout responsiveness
* misc style and layout improvements
---
.../components/live-dashboard/bento-grid.tsx | 244 +
.../live-dashboard/live-selector.tsx | 92 +-
.../live-dashboard/livestream-panel.tsx | 534 +
js/app/components/live-dashboard/problems.tsx | 107 -
.../components/live-dashboard/stream-key.tsx | 183 +-
.../live-dashboard/stream-monitor.tsx | 213 +
js/app/components/live-dashboard/waiting.tsx | 11 -
js/app/components/ui/button-selector.tsx | 75 +-
js/app/src/router.tsx | 12 +
js/app/src/screens/info-widget-embed.tsx | 28 +
js/app/src/screens/live-dashboard.tsx | 253 +-
js/components/src/assets/emoji-data.json | 19371 ++++++++++++++++
.../src/components/chat/chat-message.tsx | 36 +-
js/components/src/components/chat/chat.tsx | 27 +-
.../src/components/dashboard/chat-panel.tsx | 80 +
.../src/components/dashboard/header.tsx | 170 +
.../src/components/dashboard/index.tsx | 5 +
.../dashboard/information-widget.tsx | 526 +
.../src/components/dashboard/mod-actions.tsx | 133 +
.../src/components/dashboard/problems.tsx | 151 +
js/components/src/components/ui/button.tsx | 4 +-
js/components/src/components/ui/index.ts | 2 +
js/components/src/components/ui/info-box.tsx | 60 +
js/components/src/components/ui/info-row.tsx | 48 +
js/components/src/components/ui/toast.tsx | 110 +
js/components/src/index.tsx | 3 +
js/components/src/lib/theme/atoms.ts | 140 +-
js/components/src/lib/theme/tokens.ts | 297 +-
28 files changed, 22326 insertions(+), 589 deletions(-)
create mode 100644 js/app/components/live-dashboard/bento-grid.tsx
create mode 100644 js/app/components/live-dashboard/livestream-panel.tsx
delete mode 100644 js/app/components/live-dashboard/problems.tsx
create mode 100644 js/app/components/live-dashboard/stream-monitor.tsx
delete mode 100644 js/app/components/live-dashboard/waiting.tsx
create mode 100644 js/app/src/screens/info-widget-embed.tsx
create mode 100644 js/components/src/assets/emoji-data.json
create mode 100644 js/components/src/components/dashboard/chat-panel.tsx
create mode 100644 js/components/src/components/dashboard/header.tsx
create mode 100644 js/components/src/components/dashboard/index.tsx
create mode 100644 js/components/src/components/dashboard/information-widget.tsx
create mode 100644 js/components/src/components/dashboard/mod-actions.tsx
create mode 100644 js/components/src/components/dashboard/problems.tsx
create mode 100644 js/components/src/components/ui/info-box.tsx
create mode 100644 js/components/src/components/ui/info-row.tsx
diff --git a/js/app/components/live-dashboard/bento-grid.tsx b/js/app/components/live-dashboard/bento-grid.tsx
new file mode 100644
index 00000000..d7c56656
--- /dev/null
+++ b/js/app/components/live-dashboard/bento-grid.tsx
@@ -0,0 +1,244 @@
+import {
+ Dashboard,
+ useLivestreamStore,
+ usePlayerStore,
+ useProfile,
+ useSegment,
+ useSegmentTiming,
+ zero,
+} from "@streamplace/components";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Dimensions, Platform, ScrollView, View } from "react-native";
+import { useLiveUser } from "../../hooks/useLiveUser";
+import LivestreamPanel from "./livestream-panel";
+import StreamMonitor from "./stream-monitor";
+
+const { flex, p, gap, layout, bg } = zero;
+
+interface BentoGridProps {
+ userProfile: any;
+ isLive: boolean;
+ videoRef: any;
+}
+
+export default function BentoGrid({
+ userProfile,
+ isLive,
+ videoRef,
+}: BentoGridProps) {
+ const isWeb = Platform.OS === "web";
+
+ // Screen width state for responsive design
+ const [screenWidth, setScreenWidth] = useState(
+ isWeb ? window.innerWidth : Dimensions.get("window").width,
+ );
+
+ useEffect(() => {
+ if (isWeb) {
+ const handleResize = () => {
+ setScreenWidth(window.innerWidth);
+ };
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ } else {
+ const subscription = Dimensions.addEventListener(
+ "change",
+ ({ window }) => {
+ setScreenWidth(window.width);
+ },
+ );
+ return () => subscription?.remove();
+ }
+ }, [isWeb]);
+
+ const isDesktop = screenWidth >= 1200;
+
+ // Get data from hooks for Dashboard components
+ const profile = useProfile();
+ const viewers = useLivestreamStore((x) => x.viewers);
+ const chat = useLivestreamStore((x) => x.chat);
+ const segmentTiming = useSegmentTiming();
+ const seg = useSegment();
+ const ingestConnectionState = usePlayerStore((x) => x.ingestConnectionState);
+ const ingestStarted = usePlayerStore((x) => x.ingestStarted);
+ const userIsLive = useLiveUser();
+
+ // Calculate derived values
+ const isConnected = ingestConnectionState === "connected";
+ const canModerate = isLive && isConnected;
+
+ // Calculate uptime
+ const getUptime = useCallback((): string => {
+ if (!ingestStarted || !isLive) return "00:00:00";
+ const uptimeMs = Date.now() - ingestStarted;
+ const seconds = Math.floor(uptimeMs / 1000);
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ const secs = seconds % 60;
+ return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+ }, [ingestStarted, isLive]);
+
+ // Calculate bitrate
+ const getBitrate = useCallback((): string => {
+ if (!seg?.size || !seg?.duration) return "0 kbps";
+ const kbps =
+ (seg.size * 8) /
+ ((seg.duration || 1000000000) / 1000000000) /
+ 1000 /
+ 1000;
+ return `${kbps.toFixed(2)} mbps`;
+ }, [seg?.size, seg?.duration]);
+
+ // Map connection quality to status
+ const getConnectionStatus = useMemo(():
+ | "excellent"
+ | "good"
+ | "poor"
+ | "offline" => {
+ if (!isLive) return "offline";
+ switch (segmentTiming.connectionQuality) {
+ case "good":
+ return "excellent";
+ case "degraded":
+ return "good";
+ case "poor":
+ return "poor";
+ default:
+ return "offline";
+ }
+ }, [isLive, segmentTiming.connectionQuality]);
+
+ // Calculate messages per minute
+ const messagesPerMinute = useMemo((): number => {
+ const now = Date.now();
+ const oneMinuteAgo = now - 60 * 1000;
+ return (
+ chat?.filter(
+ (msg) =>
+ typeof msg.timestamp === "number" && msg.timestamp > oneMinuteAgo,
+ )?.length || 0
+ );
+ }, [chat]);
+
+ if (isDesktop) {
+ // Desktop layout (>= 1200px) - Original bento grid
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ {/* Header always at top */}
+
+
+
+
+ {/* Vertical scrolling content */}
+
+ {/* Stream Monitor Panel */}
+
+
+
+
+ {/* Chat Panel */}
+
+
+
+
+ {/* Livestream Panel */}
+
+
+
+
+
+ );
+}
diff --git a/js/app/components/live-dashboard/live-selector.tsx b/js/app/components/live-dashboard/live-selector.tsx
index 0e154808..fd8cbf32 100644
--- a/js/app/components/live-dashboard/live-selector.tsx
+++ b/js/app/components/live-dashboard/live-selector.tsx
@@ -1,66 +1,88 @@
+import { useNavigation } from "@react-navigation/native";
+import { Button, Text, View, zero } from "@streamplace/components";
+import { flex } from "@streamplace/components/src/ui";
import { Camera, FerrisWheel } from "@tamagui/lucide-icons";
-import AQLink, { Redirect } from "components/aqlink";
+import { Redirect } from "components/aqlink";
import Loading from "components/loading/loading";
import {
selectIsReady,
selectUserProfile,
} from "features/bluesky/blueskySlice";
-import React from "react";
+import React, { useState } from "react";
import { useAppSelector } from "store/hooks";
-import { H6, Text, View } from "tamagui";
+import { StreamKeyScreen } from "./stream-key";
+
+const { layout, gap } = zero;
+
const elems = [
{
- title: "Stream your camera!",
+ title: "Stream your camera",
Icon: Camera,
- to: "Webcam",
+ key: "webcam",
},
{
- title: "Stream from OBS!",
+ title: "Stream from OBS",
Icon: FerrisWheel,
- to: "StreamKey",
+ key: "streamkey",
},
];
export default function StreamScreen({ route }) {
+ const [selectedMode, setSelectedMode] = useState(null);
const isReady = useAppSelector(selectIsReady);
const userProfile = useAppSelector(selectUserProfile);
+ const navigation = useNavigation();
+
if (!isReady) {
return ;
}
if (!userProfile) {
return ;
}
+
+ if (selectedMode === "webcam") {
+ navigation.navigate("MobileGoLive");
+ }
+
+ if (selectedMode === "streamkey") {
+ return (
+
+
+
+
+ Stream from OBS
+
+
+
+
+
+ );
+ }
+
return (
-
-
- {elems.map(({ Icon, title, to }, i) => (
+
+
+ {elems.map(({ Icon, title, key }, i) => (
- setSelectedMode(key)}
+ variant="primary"
+ size="xl"
+ style={[{ flexGrow: 0 }, layout.flex.column]}
+ leftIcon={}
>
-
-
-
-
-
- {title}
-
-
-
- {i < elems.length - 1 && (
-
- OR
-
- )}
+ {title}
+
))}
diff --git a/js/app/components/live-dashboard/livestream-panel.tsx b/js/app/components/live-dashboard/livestream-panel.tsx
new file mode 100644
index 00000000..bf5fca88
--- /dev/null
+++ b/js/app/components/live-dashboard/livestream-panel.tsx
@@ -0,0 +1,534 @@
+import {
+ useCreateStreamRecord,
+ useLivestream,
+ useUpdateStreamRecord,
+ zero,
+} from "@streamplace/components";
+import { useToast } from "@streamplace/components/src/components/ui/toast";
+import { ImagePlus, X } from "lucide-react-native";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+ Image,
+ Platform,
+ ScrollView,
+ Text,
+ TouchableOpacity,
+ View,
+} from "react-native";
+import { Button } from "../../../components/src/components/ui/button";
+import { Textarea } from "../../../components/src/components/ui/textarea";
+import { selectUserProfile } from "../../features/bluesky/blueskySlice";
+import { useCaptureVideoFrame } from "../../hooks/useCaptureVideoFrame";
+import { useLiveUser } from "../../hooks/useLiveUser";
+import { useAppSelector } from "../../store/hooks";
+
+const { flex, p, px, py, gap, layout, bg, borders, text, r, w, typography } =
+ zero;
+
+const isWeb = Platform.OS === "web";
+
+const ButtonSelector = ({
+ values,
+ selectedValue,
+ setSelectedValue,
+ disabledValues = [],
+ style = [],
+}: {
+ values: { label: string; value: string }[];
+ selectedValue: string;
+ setSelectedValue: (value: string) => void;
+ disabledValues?: string[];
+ style?: any[];
+}) => (
+
+ {values.map(({ label, value }) => (
+
+ ))}
+
+);
+
+const ImageUploadComponent = ({
+ selectedImage,
+ onImageSelect,
+ onImageRemove,
+}: {
+ selectedImage?: string | File | Blob;
+ onImageSelect?: () => void;
+ onImageRemove?: () => void;
+}) => {
+ const imageUrl = useMemo(() => {
+ if (!selectedImage) return undefined;
+ if (selectedImage instanceof File || selectedImage instanceof Blob) {
+ return URL.createObjectURL(selectedImage);
+ }
+ return selectedImage;
+ }, [selectedImage]);
+
+ const containerStyle = useMemo(
+ () => [
+ borders.width.thin,
+ borders.color.neutral[600],
+ bg.neutral[800],
+ r.md,
+ layout.flex.center,
+ {
+ height: 200,
+ borderStyle: "dashed",
+ },
+ ],
+ [],
+ );
+
+ const imageStyle = useMemo(
+ () => [
+ r.md,
+ {
+ width: "100%",
+ height: 200,
+ resizeMode: "cover" as const,
+ },
+ ],
+ [],
+ );
+
+ const removeButtonStyle = useMemo(
+ () => [
+ {
+ position: "absolute" as const,
+ top: 8,
+ right: 8,
+ backgroundColor: "rgba(0, 0, 0, 0.7)",
+ borderRadius: 12,
+ width: 24,
+ height: 24,
+ },
+ layout.flex.center,
+ ],
+ [],
+ );
+
+ return (
+
+
+ Thumbnail (Optional)
+
+
+ {selectedImage ? (
+
+
+
+
+
+
+ ) : (
+
+
+
+ Add thumbnail image
+
+
+ Optional • JPG, PNG up to 975KB
+
+
+ )}
+
+ );
+};
+
+function LivestreamPanel() {
+ const { toastController, ToastComponent } = useToast();
+ const userIsLive = useLiveUser();
+ const captureFrame = useCaptureVideoFrame();
+ const profile = useAppSelector(selectUserProfile);
+ const livestream = useLivestream();
+ const createStreamRecord = useCreateStreamRecord();
+ const updateStreamRecord = useUpdateStreamRecord();
+
+ const [title, setTitle] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [selectedImage, setSelectedImage] = useState<
+ string | File | Blob | undefined
+ >();
+ const [mode, setMode] = useState<"create" | "edit">(
+ livestream ? "edit" : "create",
+ );
+ const [toastTimeoutId, setToastTimeoutId] = useState(
+ null,
+ );
+
+ const handleModeChange = useCallback((newMode: "create" | "edit") => {
+ setMode(newMode);
+ }, []);
+
+ const handleSubmit = useCallback(async () => {
+ if (!title.trim()) return;
+
+ setLoading(true);
+
+ try {
+ let thumbnailToUse = selectedImage;
+
+ // Auto-capture frame if no custom thumbnail and we have capture capability
+ if (!thumbnailToUse && mode === "create" && captureFrame && isWeb) {
+ try {
+ const capturedFrame = await captureFrame(1280, 0.85);
+ if (capturedFrame) {
+ thumbnailToUse = capturedFrame;
+ }
+ } catch (captureError) {
+ console.warn("Failed to capture video frame:", captureError);
+ }
+ }
+
+ if (mode === "create") {
+ await createStreamRecord(
+ title.trim(),
+ thumbnailToUse as Blob | undefined,
+ true,
+ );
+ } else {
+ await updateStreamRecord(
+ title.trim(),
+ livestream,
+ thumbnailToUse as Blob | undefined,
+ );
+ }
+
+ // Clear any existing timeout
+ if (toastTimeoutId) {
+ clearTimeout(toastTimeoutId);
+ }
+
+ // Show success message
+ const toastTitle =
+ mode === "create" ? "Livestream announced" : "Livestream updated";
+
+ toastController.show(toastTitle, title.trim(), { duration: 4 });
+
+ // Add manual timeout as fallback
+ const timeoutId = setTimeout(() => {
+ toastController.hide();
+ }, 4500);
+ setToastTimeoutId(timeoutId);
+
+ // Clear form on successful create
+ if (mode === "create") {
+ setTitle("");
+ setSelectedImage(undefined);
+ }
+ } catch (error) {
+ console.error("Error with livestream:", error);
+
+ try {
+ // Clear any existing timeout
+ if (toastTimeoutId) {
+ clearTimeout(toastTimeoutId);
+ }
+
+ // Truncate very long error messages
+ const errorMessage = String(error);
+ const truncatedError =
+ errorMessage.length > 200
+ ? errorMessage.substring(0, 200) + "..."
+ : errorMessage;
+
+ const errorTitle =
+ mode === "create"
+ ? "Error creating livestream"
+ : "Error updating livestream";
+
+ toastController.show(errorTitle, truncatedError, { duration: 5 });
+
+ // Add manual timeout as fallback
+ const timeoutId = setTimeout(() => {
+ toastController.hide();
+ }, 5500);
+ setToastTimeoutId(timeoutId);
+ } catch (toastError) {
+ console.error("Error showing toast:", toastError);
+ }
+ } finally {
+ setLoading(false);
+ }
+ }, [
+ title,
+ selectedImage,
+ mode,
+ captureFrame,
+ createStreamRecord,
+ updateStreamRecord,
+ livestream,
+ toastController,
+ ]);
+
+ const handleImageSelect = useCallback(() => {
+ // Default web file picker behavior
+ const input = document.createElement("input");
+ input.type = "file";
+ input.accept = "image/*";
+ input.onchange = (e) => {
+ const file = (e.target as HTMLInputElement).files?.[0];
+ if (file) {
+ setSelectedImage(file);
+ }
+ };
+ input.click();
+ }, []);
+
+ const handleImageRemove = useCallback(() => {
+ setSelectedImage(undefined);
+ }, []);
+
+ const noLivestream = mode === "edit" && !livestream;
+
+ const disabled = useMemo(
+ () => !userIsLive || loading || title.trim() === "" || noLivestream,
+ [userIsLive, loading, title, noLivestream],
+ );
+
+ const buttonText = useMemo(() => {
+ if (loading) return "Loading...";
+ if (!userIsLive) {
+ return mode === "create"
+ ? "Waiting for stream to start..."
+ : "Waiting for stream to start...";
+ }
+ return mode === "create" ? "Announce Livestream!" : "Update Livestream!";
+ }, [loading, userIsLive, mode]);
+
+ // Clean up toast and timeout on unmount
+ useEffect(() => {
+ return () => {
+ if (toastTimeoutId) {
+ clearTimeout(toastTimeoutId);
+ }
+ toastController.hide();
+ };
+ }, [toastController]);
+
+ return (
+ <>
+
+
+
+
+ Stream Settings
+
+
+
+
+ {mode === "edit" && (
+
+ Change your Current Livestream Title
+
+ )}
+
+ {noLivestream ? (
+
+
+ No active livestream to edit. Start a livestream first!
+
+
+ ) : (
+
+
+
+
+ Streamer
+
+
+ @{profile?.handle || "streamer"}
+
+
+
+
+ Title
+
+
+
+
+
+ {title.trim() === "" ? "Title is required" : ""}
+
+ 120 && { color: "#f59e0b" },
+ title.length >= 140 && { color: "#ef4444" },
+ ]}
+ >
+ {title.length}/140
+
+
+
+
+ {mode === "edit" && (
+
+
+
+ Updating will not send out notifications to viewers or
+ create a new social media post.
+
+
+
+ )}
+
+
+ {/* Image upload for create mode */}
+ {mode === "create" && (
+
+ )}
+
+
+
+ )}
+
+
+ {ToastComponent}
+
+ );
+}
+
+export default LivestreamPanel;
diff --git a/js/app/components/live-dashboard/problems.tsx b/js/app/components/live-dashboard/problems.tsx
deleted file mode 100644
index 4f008f4d..00000000
--- a/js/app/components/live-dashboard/problems.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useLivestreamStore } from "@streamplace/components";
-import { LivestreamProblem } from "@streamplace/components/src/livestream-store/livestream-state";
-import { ExternalLink } from "@tamagui/lucide-icons";
-import { useState } from "react";
-import { Linking, Pressable } from "react-native";
-import { Button, H3, Text, View } from "tamagui";
-
-const Problems = ({
- probs,
- onIgnore,
-}: {
- probs: LivestreamProblem[];
- onIgnore: () => void;
-}) => {
- return (
-
-
- Optimize Your Stream
-
- We’ve found a few things that could improve your stream’s reliability.
-
-
- {probs.map((p) => (
-
-
-
- {p.severity}
-
-
- {p.code}
-
- {p.message}
-
- {p.link && (
- p.link && Linking.openURL(p.link)}>
-
-
- Learn More
-
-
-
-
- )}
-
-
-
- ))}
-
-
-
- );
-};
-
-export const ProblemsWrapper = ({
- children,
-}: {
- children: React.ReactElement;
-}) => {
- const problems = useLivestreamStore((x) => x.problems);
- const [dismiss, setDismiss] = useState(false);
-
- return (
-
- {children}
- {problems.length > 0 && !dismiss && (
-
-
- setDismiss(true)} />
-
-
- )}
-
- );
-};
diff --git a/js/app/components/live-dashboard/stream-key.tsx b/js/app/components/live-dashboard/stream-key.tsx
index 8fe20955..6c36f54e 100644
--- a/js/app/components/live-dashboard/stream-key.tsx
+++ b/js/app/components/live-dashboard/stream-key.tsx
@@ -1,4 +1,4 @@
-import { useToastController } from "@tamagui/toast";
+import { Body, Button, Code, Row, View } from "@streamplace/components";
import { Redirect } from "components/aqlink";
import Loading from "components/loading/loading";
import {
@@ -9,94 +9,79 @@ import {
} from "features/bluesky/blueskySlice";
import { useEffect, useState } from "react";
import { useAppDispatch, useAppSelector } from "store/hooks";
-import { Button, Paragraph, Text, View } from "tamagui";
-const Row = ({ children }: { children: React.ReactNode }) => {
+
+const FormRow = ({ children }: { children: React.ReactNode }) => {
return (
-
+
{children}
-
+
);
};
-const Left = ({ children }: { children: React.ReactNode }) => {
+const Label = ({ children }: { children: React.ReactNode }) => {
return (
-
- {children}
+
+ {children}
);
};
-const Right = ({ children }: { children: React.ReactNode }) => {
+const Content = ({ children }: { children: React.ReactNode }) => {
return (
-
+
{children}
);
};
-export default function StreamKeyScreen() {
+export function StreamKeyScreen() {
const [protocol, setProtocol] = useState<"whip" | "rtmp">("rtmp");
const isReady = useAppSelector(selectIsReady);
+
if (!isReady) {
return ;
}
+
const userProfile = useAppSelector(selectUserProfile);
if (!userProfile) {
return ;
}
- const url = useAppSelector((state) => state.streamplace.url);
- if (!userProfile) {
- return ;
- }
+ const url = useAppSelector((state) => state.streamplace.url);
return (
-
-
-
+
+
+
-
+
+
{protocol === "whip" && }
{protocol === "rtmp" && }
-
-
- Output Settings
-
-
- Output mode: Advanced
-
- Keyframe Interval: 1s
-
-
- x264 Options: bframes=0
-
-
-
+
+
+
+
+ Output mode: Advanced
+
+ Keyframe Interval: 1s
+
+
+ x264 Options: bframes=0
+
+
+
);
@@ -105,30 +90,24 @@ export default function StreamKeyScreen() {
export function WHIPDescription({ url }: { url: string }) {
return (
<>
-
-
- Service
-
-
- WHIP
-
-
-
-
- Server
-
-
- {url}
-
-
-
-
- Bearer Token
-
-
+
+
+
+ WHIP
+
+
+
+
+
+ {url}
+
+
+
+
+
-
-
+
+
);
}
@@ -136,65 +115,67 @@ export function WHIPDescription({ url }: { url: string }) {
export function RTMPDescription({ url }: { url: string }) {
const u = new URL(url);
const rtmpUrl = `rtmps://${u.host}:1935/live`;
+
return (
<>
-
-
- Service
-
-
- Custom...
-
-
-
-
- Server
-
-
- {rtmpUrl}
-
-
-
-
- Stream Key
-
-
+
+
+
+ Custom...
+
+
+
+
+
+ {rtmpUrl}
+
+
+
+
+
-
-
+
+
);
}
+export default StreamKeyScreen;
+
export function StreamKey() {
const dispatch = useAppDispatch();
const [generating, setGenerating] = useState(false);
const newKey = useAppSelector((state) => state.bluesky.newKey);
- const toast = useToastController();
+
useEffect(() => {
if (!newKey) {
return;
}
+
(async () => {
try {
await navigator.clipboard.writeText(newKey.privateKey);
- toast.show("Copied!", {
- message: "Bearer token copied to clipboard",
- });
+ // TODO: Replace with custom toast implementation
+ console.log("Bearer token copied to clipboard");
} catch (e) {
// not allowed. oh well.
+ console.log("Could not copy to clipboard");
}
})();
+
return () => {
dispatch(clearStreamKeyRecord());
};
- }, [newKey]);
+ }, [newKey, dispatch]);
+
if (generating) {
return ;
}
+
if (newKey) {
- return {newKey.privateKey};
+ return {newKey.privateKey};
}
+
return (
+ );
+ })}
+
+
);
}
diff --git a/js/app/src/router.tsx b/js/app/src/router.tsx
index b942f659..67f9ed71 100644
--- a/js/app/src/router.tsx
+++ b/js/app/src/router.tsx
@@ -68,6 +68,7 @@ import AVSyncScreen from "./screens/av-sync";
import PopoutChat from "./screens/chat-popout";
import DownloadScreen from "./screens/download";
import EmbedScreen from "./screens/embed";
+import InfoWidgetEmbed from "./screens/info-widget-embed";
import LiveDashboard from "./screens/live-dashboard";
import MultiScreen from "./screens/multi";
import StreamScreen from "./screens/stream";
@@ -121,6 +122,7 @@ type RootStackParamList = {
Download: undefined;
PopoutChat: { user: string };
Embed: { user: string };
+ InfoWidgetEmbed: undefined;
LegacyStream: { user: string };
MobileGoLive: undefined;
};
@@ -157,6 +159,7 @@ const linking: LinkingOptions = {
Download: "download",
PopoutChat: "chat-popout/:user",
Embed: "embed/:user",
+ InfoWidgetEmbed: "info-widget",
LegacyStream: "legacy/:user",
MobileGoLive: "mobile-golive",
},
@@ -555,6 +558,15 @@ export function StreamplaceDrawer() {
headerShown: false,
}}
/>
+ null,
+ drawerItemStyle: { display: "none" },
+ headerShown: false,
+ }}
+ />
+
+
+
+
+ );
+}
diff --git a/js/app/src/screens/live-dashboard.tsx b/js/app/src/screens/live-dashboard.tsx
index 76f3a3ac..b5566a8a 100644
--- a/js/app/src/screens/live-dashboard.tsx
+++ b/js/app/src/screens/live-dashboard.tsx
@@ -1,260 +1,61 @@
-import { LivestreamProvider } from "@streamplace/components";
-import { Camera, FerrisWheel, X } from "@tamagui/lucide-icons";
+import {
+ LivestreamProvider,
+ PlayerProvider,
+ ThemeProvider,
+ zero,
+} from "@streamplace/components";
import { Redirect } from "components/aqlink";
-import CreateLivestream from "components/create-livestream";
-import UpdateLivestream from "components/edit-livestream";
-import StreamKeyScreen from "components/live-dashboard/stream-key";
-import Waiting from "components/live-dashboard/waiting";
+import BentoGrid from "components/live-dashboard/bento-grid";
import Loading from "components/loading/loading";
-import { Player } from "components/player/player";
-import Popup from "components/popup";
-import ButtonSelector from "components/ui/button-selector";
import { VideoElementProvider } from "contexts/VideoElementContext";
import {
- createServerSettingsRecord,
- getServerSettingsFromPDS,
selectIsReady,
- selectServerSettings,
selectUserProfile,
} from "features/bluesky/blueskySlice";
import { useLiveUser } from "hooks/useLiveUser";
-import React, { useCallback, useEffect, useState } from "react";
-import { useAppDispatch, useAppSelector } from "store/hooks";
-import { Button, H3, H6, isWeb, Text, View } from "tamagui";
-
-import { ProblemsWrapper } from "components/live-dashboard/problems";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
+import { useAppSelector } from "store/hooks";
-enum StreamSource {
- Start,
- Camera,
- StreamKey,
-}
+const { flex, bg } = zero;
export default function LiveDashboard() {
const isReady = useAppSelector(selectIsReady);
const userProfile = useAppSelector(selectUserProfile);
- const [streamSource, setStreamSource] = useState(StreamSource.Start);
- const serverSettings = useAppSelector(selectServerSettings);
const isLive = useLiveUser();
const [videoElement, setVideoElement] = useState(
null,
);
- const [gotSettings, setGotSettings] = useState(false);
- const dispatch = useAppDispatch();
- useEffect(() => {
- if (isReady) {
- (async () => {
- await dispatch(getServerSettingsFromPDS());
- setGotSettings(true);
- })();
- }
- }, [isReady]);
-
- let madeChoiceAboutDebugRecording = true;
- if (gotSettings && serverSettings?.debugRecording === undefined) {
- madeChoiceAboutDebugRecording = false;
- }
-
- const [page, setPage] = useState<"update" | "create">("create");
const videoRef = useCallback((node: HTMLVideoElement | null) => {
if (node !== null) {
setVideoElement(node);
}
}, []);
- if (!isReady) {
- return ;
- }
- if (!userProfile) {
- return ;
- }
- let topPane: React.ReactNode;
- let params = new URLSearchParams();
- if (isWeb) {
- params = new URLSearchParams(window.location.search);
- }
-
- if (isLive && streamSource !== StreamSource.Camera) {
- topPane = (
-
- );
- } else if (streamSource === StreamSource.Start) {
- topPane = ;
- } else if (streamSource === StreamSource.Camera) {
- topPane = (
-
- );
- } else if (streamSource === StreamSource.StreamKey) {
- topPane = ;
- } else {
- throw new Error("Invalid stream source");
- }
- let closeButton: React.ReactNode = <>;
- if (streamSource !== StreamSource.Start && !isLive) {
- closeButton = (
-
- );
- }
-
- return (
-
-
-
-
- {topPane}
- {closeButton}
-
-
-
- <>
-
- {page === "update" && isLive ? : null}
- {page === "create" ? : null}
-
-
-
- {madeChoiceAboutDebugRecording ? null : }
-
-
-
- );
-}
-const elems = [
- {
- title: "Stream your camera!",
- Icon: Camera,
- to: StreamSource.Camera,
- },
- {
- title: "Stream from OBS!",
- Icon: FerrisWheel,
- to: StreamSource.StreamKey,
- },
-];
-
-export function DebugRecordingPopup() {
- const dispatch = useAppDispatch();
- const serverSettings = useAppSelector(selectServerSettings) || {};
- const opt = (choice) => () =>
- dispatch(
- createServerSettingsRecord({
- ...serverSettings,
- debugRecording: choice,
- }),
- );
- return (
-
- Debug Recording
-
- Streamplace is beta software and it helps us to archive livestreams so
- we can later use them for debugging. Would you like to opt in to debug
- recording?
-
-
-
-
-
-
- );
-}
-
-export function StreamSourcePicker({
- onPick,
-}: {
- onPick: (source: StreamSource) => void;
-}) {
- const isReady = useAppSelector(selectIsReady);
- const userProfile = useAppSelector(selectUserProfile);
if (!isReady) {
return ;
}
+
if (!userProfile) {
return ;
}
+
return (
-
-
- {elems.map(({ Icon, title, to }, i) => (
-
- onPick(to)}
- flexGrow={0}
- flexBasis={75}
- >
-
-
-
-
- {title}
-
+
+
+
+
+
+
- {i < elems.length - 1 && (
-
- OR
-
- )}
-
- ))}
-
-
-
+
+
+
+
);
}
diff --git a/js/components/src/assets/emoji-data.json b/js/components/src/assets/emoji-data.json
new file mode 100644
index 00000000..cc56c247
--- /dev/null
+++ b/js/components/src/assets/emoji-data.json
@@ -0,0 +1,19371 @@
+{
+ "categories": [
+ {
+ "id": "people",
+ "emojis": [
+ "grinning",
+ "smiley",
+ "smile",
+ "grin",
+ "laughing",
+ "sweat_smile",
+ "rolling_on_the_floor_laughing",
+ "joy",
+ "slightly_smiling_face",
+ "upside_down_face",
+ "melting_face",
+ "wink",
+ "blush",
+ "innocent",
+ "smiling_face_with_3_hearts",
+ "heart_eyes",
+ "star-struck",
+ "kissing_heart",
+ "kissing",
+ "relaxed",
+ "kissing_closed_eyes",
+ "kissing_smiling_eyes",
+ "smiling_face_with_tear",
+ "yum",
+ "stuck_out_tongue",
+ "stuck_out_tongue_winking_eye",
+ "zany_face",
+ "stuck_out_tongue_closed_eyes",
+ "money_mouth_face",
+ "hugging_face",
+ "face_with_hand_over_mouth",
+ "face_with_open_eyes_and_hand_over_mouth",
+ "face_with_peeking_eye",
+ "shushing_face",
+ "thinking_face",
+ "saluting_face",
+ "zipper_mouth_face",
+ "face_with_raised_eyebrow",
+ "neutral_face",
+ "expressionless",
+ "no_mouth",
+ "dotted_line_face",
+ "face_in_clouds",
+ "smirk",
+ "unamused",
+ "face_with_rolling_eyes",
+ "grimacing",
+ "face_exhaling",
+ "lying_face",
+ "relieved",
+ "pensive",
+ "sleepy",
+ "drooling_face",
+ "sleeping",
+ "mask",
+ "face_with_thermometer",
+ "face_with_head_bandage",
+ "nauseated_face",
+ "face_vomiting",
+ "sneezing_face",
+ "hot_face",
+ "cold_face",
+ "woozy_face",
+ "dizzy_face",
+ "face_with_spiral_eyes",
+ "exploding_head",
+ "face_with_cowboy_hat",
+ "partying_face",
+ "disguised_face",
+ "sunglasses",
+ "nerd_face",
+ "face_with_monocle",
+ "confused",
+ "face_with_diagonal_mouth",
+ "worried",
+ "slightly_frowning_face",
+ "white_frowning_face",
+ "open_mouth",
+ "hushed",
+ "astonished",
+ "flushed",
+ "pleading_face",
+ "face_holding_back_tears",
+ "frowning",
+ "anguished",
+ "fearful",
+ "cold_sweat",
+ "disappointed_relieved",
+ "cry",
+ "sob",
+ "scream",
+ "confounded",
+ "persevere",
+ "disappointed",
+ "sweat",
+ "weary",
+ "tired_face",
+ "yawning_face",
+ "triumph",
+ "rage",
+ "angry",
+ "face_with_symbols_on_mouth",
+ "smiling_imp",
+ "imp",
+ "skull",
+ "skull_and_crossbones",
+ "hankey",
+ "clown_face",
+ "japanese_ogre",
+ "japanese_goblin",
+ "ghost",
+ "alien",
+ "space_invader",
+ "robot_face",
+ "wave",
+ "raised_back_of_hand",
+ "raised_hand_with_fingers_splayed",
+ "hand",
+ "spock-hand",
+ "rightwards_hand",
+ "leftwards_hand",
+ "palm_down_hand",
+ "palm_up_hand",
+ "ok_hand",
+ "pinched_fingers",
+ "pinching_hand",
+ "v",
+ "crossed_fingers",
+ "hand_with_index_finger_and_thumb_crossed",
+ "i_love_you_hand_sign",
+ "the_horns",
+ "call_me_hand",
+ "point_left",
+ "point_right",
+ "point_up_2",
+ "middle_finger",
+ "point_down",
+ "point_up",
+ "index_pointing_at_the_viewer",
+ "+1",
+ "-1",
+ "fist",
+ "facepunch",
+ "left-facing_fist",
+ "right-facing_fist",
+ "clap",
+ "raised_hands",
+ "heart_hands",
+ "open_hands",
+ "palms_up_together",
+ "handshake",
+ "pray",
+ "writing_hand",
+ "nail_care",
+ "selfie",
+ "muscle",
+ "mechanical_arm",
+ "mechanical_leg",
+ "leg",
+ "foot",
+ "ear",
+ "ear_with_hearing_aid",
+ "nose",
+ "brain",
+ "anatomical_heart",
+ "lungs",
+ "tooth",
+ "bone",
+ "eyes",
+ "eye",
+ "tongue",
+ "lips",
+ "biting_lip",
+ "baby",
+ "child",
+ "boy",
+ "girl",
+ "adult",
+ "person_with_blond_hair",
+ "man",
+ "bearded_person",
+ "man_with_beard",
+ "woman_with_beard",
+ "red_haired_man",
+ "curly_haired_man",
+ "white_haired_man",
+ "bald_man",
+ "woman",
+ "red_haired_woman",
+ "red_haired_person",
+ "curly_haired_woman",
+ "curly_haired_person",
+ "white_haired_woman",
+ "white_haired_person",
+ "bald_woman",
+ "bald_person",
+ "blond-haired-woman",
+ "blond-haired-man",
+ "older_adult",
+ "older_man",
+ "older_woman",
+ "person_frowning",
+ "man-frowning",
+ "woman-frowning",
+ "person_with_pouting_face",
+ "man-pouting",
+ "woman-pouting",
+ "no_good",
+ "man-gesturing-no",
+ "woman-gesturing-no",
+ "ok_woman",
+ "man-gesturing-ok",
+ "woman-gesturing-ok",
+ "information_desk_person",
+ "man-tipping-hand",
+ "woman-tipping-hand",
+ "raising_hand",
+ "man-raising-hand",
+ "woman-raising-hand",
+ "deaf_person",
+ "deaf_man",
+ "deaf_woman",
+ "bow",
+ "man-bowing",
+ "woman-bowing",
+ "face_palm",
+ "man-facepalming",
+ "woman-facepalming",
+ "shrug",
+ "man-shrugging",
+ "woman-shrugging",
+ "health_worker",
+ "male-doctor",
+ "female-doctor",
+ "student",
+ "male-student",
+ "female-student",
+ "teacher",
+ "male-teacher",
+ "female-teacher",
+ "judge",
+ "male-judge",
+ "female-judge",
+ "farmer",
+ "male-farmer",
+ "female-farmer",
+ "cook",
+ "male-cook",
+ "female-cook",
+ "mechanic",
+ "male-mechanic",
+ "female-mechanic",
+ "factory_worker",
+ "male-factory-worker",
+ "female-factory-worker",
+ "office_worker",
+ "male-office-worker",
+ "female-office-worker",
+ "scientist",
+ "male-scientist",
+ "female-scientist",
+ "technologist",
+ "male-technologist",
+ "female-technologist",
+ "singer",
+ "male-singer",
+ "female-singer",
+ "artist",
+ "male-artist",
+ "female-artist",
+ "pilot",
+ "male-pilot",
+ "female-pilot",
+ "astronaut",
+ "male-astronaut",
+ "female-astronaut",
+ "firefighter",
+ "male-firefighter",
+ "female-firefighter",
+ "cop",
+ "male-police-officer",
+ "female-police-officer",
+ "sleuth_or_spy",
+ "male-detective",
+ "female-detective",
+ "guardsman",
+ "male-guard",
+ "female-guard",
+ "ninja",
+ "construction_worker",
+ "male-construction-worker",
+ "female-construction-worker",
+ "person_with_crown",
+ "prince",
+ "princess",
+ "man_with_turban",
+ "man-wearing-turban",
+ "woman-wearing-turban",
+ "man_with_gua_pi_mao",
+ "person_with_headscarf",
+ "person_in_tuxedo",
+ "man_in_tuxedo",
+ "woman_in_tuxedo",
+ "bride_with_veil",
+ "man_with_veil",
+ "woman_with_veil",
+ "pregnant_woman",
+ "pregnant_man",
+ "pregnant_person",
+ "breast-feeding",
+ "woman_feeding_baby",
+ "man_feeding_baby",
+ "person_feeding_baby",
+ "angel",
+ "santa",
+ "mrs_claus",
+ "mx_claus",
+ "superhero",
+ "male_superhero",
+ "female_superhero",
+ "supervillain",
+ "male_supervillain",
+ "female_supervillain",
+ "mage",
+ "male_mage",
+ "female_mage",
+ "fairy",
+ "male_fairy",
+ "female_fairy",
+ "vampire",
+ "male_vampire",
+ "female_vampire",
+ "merperson",
+ "merman",
+ "mermaid",
+ "elf",
+ "male_elf",
+ "female_elf",
+ "genie",
+ "male_genie",
+ "female_genie",
+ "zombie",
+ "male_zombie",
+ "female_zombie",
+ "troll",
+ "massage",
+ "man-getting-massage",
+ "woman-getting-massage",
+ "haircut",
+ "man-getting-haircut",
+ "woman-getting-haircut",
+ "walking",
+ "man-walking",
+ "woman-walking",
+ "standing_person",
+ "man_standing",
+ "woman_standing",
+ "kneeling_person",
+ "man_kneeling",
+ "woman_kneeling",
+ "person_with_probing_cane",
+ "man_with_probing_cane",
+ "woman_with_probing_cane",
+ "person_in_motorized_wheelchair",
+ "man_in_motorized_wheelchair",
+ "woman_in_motorized_wheelchair",
+ "person_in_manual_wheelchair",
+ "man_in_manual_wheelchair",
+ "woman_in_manual_wheelchair",
+ "runner",
+ "man-running",
+ "woman-running",
+ "dancer",
+ "man_dancing",
+ "man_in_business_suit_levitating",
+ "dancers",
+ "men-with-bunny-ears-partying",
+ "women-with-bunny-ears-partying",
+ "person_in_steamy_room",
+ "man_in_steamy_room",
+ "woman_in_steamy_room",
+ "person_climbing",
+ "man_climbing",
+ "woman_climbing",
+ "fencer",
+ "horse_racing",
+ "skier",
+ "snowboarder",
+ "golfer",
+ "man-golfing",
+ "woman-golfing",
+ "surfer",
+ "man-surfing",
+ "woman-surfing",
+ "rowboat",
+ "man-rowing-boat",
+ "woman-rowing-boat",
+ "swimmer",
+ "man-swimming",
+ "woman-swimming",
+ "person_with_ball",
+ "man-bouncing-ball",
+ "woman-bouncing-ball",
+ "weight_lifter",
+ "man-lifting-weights",
+ "woman-lifting-weights",
+ "bicyclist",
+ "man-biking",
+ "woman-biking",
+ "mountain_bicyclist",
+ "man-mountain-biking",
+ "woman-mountain-biking",
+ "person_doing_cartwheel",
+ "man-cartwheeling",
+ "woman-cartwheeling",
+ "wrestlers",
+ "man-wrestling",
+ "woman-wrestling",
+ "water_polo",
+ "man-playing-water-polo",
+ "woman-playing-water-polo",
+ "handball",
+ "man-playing-handball",
+ "woman-playing-handball",
+ "juggling",
+ "man-juggling",
+ "woman-juggling",
+ "person_in_lotus_position",
+ "man_in_lotus_position",
+ "woman_in_lotus_position",
+ "bath",
+ "sleeping_accommodation",
+ "people_holding_hands",
+ "two_women_holding_hands",
+ "man_and_woman_holding_hands",
+ "two_men_holding_hands",
+ "couplekiss",
+ "woman-kiss-man",
+ "man-kiss-man",
+ "woman-kiss-woman",
+ "couple_with_heart",
+ "woman-heart-man",
+ "man-heart-man",
+ "woman-heart-woman",
+ "family",
+ "man-woman-boy",
+ "man-woman-girl",
+ "man-woman-girl-boy",
+ "man-woman-boy-boy",
+ "man-woman-girl-girl",
+ "man-man-boy",
+ "man-man-girl",
+ "man-man-girl-boy",
+ "man-man-boy-boy",
+ "man-man-girl-girl",
+ "woman-woman-boy",
+ "woman-woman-girl",
+ "woman-woman-girl-boy",
+ "woman-woman-boy-boy",
+ "woman-woman-girl-girl",
+ "man-boy",
+ "man-boy-boy",
+ "man-girl",
+ "man-girl-boy",
+ "man-girl-girl",
+ "woman-boy",
+ "woman-boy-boy",
+ "woman-girl",
+ "woman-girl-boy",
+ "woman-girl-girl",
+ "speaking_head_in_silhouette",
+ "bust_in_silhouette",
+ "busts_in_silhouette",
+ "people_hugging",
+ "footprints",
+ "smiley_cat",
+ "smile_cat",
+ "joy_cat",
+ "heart_eyes_cat",
+ "smirk_cat",
+ "kissing_cat",
+ "scream_cat",
+ "crying_cat_face",
+ "pouting_cat",
+ "see_no_evil",
+ "hear_no_evil",
+ "speak_no_evil",
+ "kiss",
+ "love_letter",
+ "cupid",
+ "gift_heart",
+ "sparkling_heart",
+ "heartpulse",
+ "heartbeat",
+ "revolving_hearts",
+ "two_hearts",
+ "heart_decoration",
+ "heavy_heart_exclamation_mark_ornament",
+ "broken_heart",
+ "heart_on_fire",
+ "mending_heart",
+ "heart",
+ "orange_heart",
+ "yellow_heart",
+ "green_heart",
+ "blue_heart",
+ "purple_heart",
+ "brown_heart",
+ "black_heart",
+ "white_heart",
+ "100",
+ "anger",
+ "boom",
+ "dizzy",
+ "sweat_drops",
+ "dash",
+ "hole",
+ "bomb",
+ "speech_balloon",
+ "eye-in-speech-bubble",
+ "left_speech_bubble",
+ "right_anger_bubble",
+ "thought_balloon",
+ "zzz"
+ ]
+ },
+ {
+ "id": "nature",
+ "emojis": [
+ "monkey_face",
+ "monkey",
+ "gorilla",
+ "orangutan",
+ "dog",
+ "dog2",
+ "guide_dog",
+ "service_dog",
+ "poodle",
+ "wolf",
+ "fox_face",
+ "raccoon",
+ "cat",
+ "cat2",
+ "black_cat",
+ "lion_face",
+ "tiger",
+ "tiger2",
+ "leopard",
+ "horse",
+ "racehorse",
+ "unicorn_face",
+ "zebra_face",
+ "deer",
+ "bison",
+ "cow",
+ "ox",
+ "water_buffalo",
+ "cow2",
+ "pig",
+ "pig2",
+ "boar",
+ "pig_nose",
+ "ram",
+ "sheep",
+ "goat",
+ "dromedary_camel",
+ "camel",
+ "llama",
+ "giraffe_face",
+ "elephant",
+ "mammoth",
+ "rhinoceros",
+ "hippopotamus",
+ "mouse",
+ "mouse2",
+ "rat",
+ "hamster",
+ "rabbit",
+ "rabbit2",
+ "chipmunk",
+ "beaver",
+ "hedgehog",
+ "bat",
+ "bear",
+ "polar_bear",
+ "koala",
+ "panda_face",
+ "sloth",
+ "otter",
+ "skunk",
+ "kangaroo",
+ "badger",
+ "feet",
+ "turkey",
+ "chicken",
+ "rooster",
+ "hatching_chick",
+ "baby_chick",
+ "hatched_chick",
+ "bird",
+ "penguin",
+ "dove_of_peace",
+ "eagle",
+ "duck",
+ "swan",
+ "owl",
+ "dodo",
+ "feather",
+ "flamingo",
+ "peacock",
+ "parrot",
+ "frog",
+ "crocodile",
+ "turtle",
+ "lizard",
+ "snake",
+ "dragon_face",
+ "dragon",
+ "sauropod",
+ "t-rex",
+ "whale",
+ "whale2",
+ "dolphin",
+ "seal",
+ "fish",
+ "tropical_fish",
+ "blowfish",
+ "shark",
+ "octopus",
+ "shell",
+ "coral",
+ "snail",
+ "butterfly",
+ "bug",
+ "ant",
+ "bee",
+ "beetle",
+ "ladybug",
+ "cricket",
+ "cockroach",
+ "spider",
+ "spider_web",
+ "scorpion",
+ "mosquito",
+ "fly",
+ "worm",
+ "microbe",
+ "bouquet",
+ "cherry_blossom",
+ "white_flower",
+ "lotus",
+ "rosette",
+ "rose",
+ "wilted_flower",
+ "hibiscus",
+ "sunflower",
+ "blossom",
+ "tulip",
+ "seedling",
+ "potted_plant",
+ "evergreen_tree",
+ "deciduous_tree",
+ "palm_tree",
+ "cactus",
+ "ear_of_rice",
+ "herb",
+ "shamrock",
+ "four_leaf_clover",
+ "maple_leaf",
+ "fallen_leaf",
+ "leaves",
+ "empty_nest",
+ "nest_with_eggs"
+ ]
+ },
+ {
+ "id": "foods",
+ "emojis": [
+ "grapes",
+ "melon",
+ "watermelon",
+ "tangerine",
+ "lemon",
+ "banana",
+ "pineapple",
+ "mango",
+ "apple",
+ "green_apple",
+ "pear",
+ "peach",
+ "cherries",
+ "strawberry",
+ "blueberries",
+ "kiwifruit",
+ "tomato",
+ "olive",
+ "coconut",
+ "avocado",
+ "eggplant",
+ "potato",
+ "carrot",
+ "corn",
+ "hot_pepper",
+ "bell_pepper",
+ "cucumber",
+ "leafy_green",
+ "broccoli",
+ "garlic",
+ "onion",
+ "mushroom",
+ "peanuts",
+ "beans",
+ "chestnut",
+ "bread",
+ "croissant",
+ "baguette_bread",
+ "flatbread",
+ "pretzel",
+ "bagel",
+ "pancakes",
+ "waffle",
+ "cheese_wedge",
+ "meat_on_bone",
+ "poultry_leg",
+ "cut_of_meat",
+ "bacon",
+ "hamburger",
+ "fries",
+ "pizza",
+ "hotdog",
+ "sandwich",
+ "taco",
+ "burrito",
+ "tamale",
+ "stuffed_flatbread",
+ "falafel",
+ "egg",
+ "fried_egg",
+ "shallow_pan_of_food",
+ "stew",
+ "fondue",
+ "bowl_with_spoon",
+ "green_salad",
+ "popcorn",
+ "butter",
+ "salt",
+ "canned_food",
+ "bento",
+ "rice_cracker",
+ "rice_ball",
+ "rice",
+ "curry",
+ "ramen",
+ "spaghetti",
+ "sweet_potato",
+ "oden",
+ "sushi",
+ "fried_shrimp",
+ "fish_cake",
+ "moon_cake",
+ "dango",
+ "dumpling",
+ "fortune_cookie",
+ "takeout_box",
+ "crab",
+ "lobster",
+ "shrimp",
+ "squid",
+ "oyster",
+ "icecream",
+ "shaved_ice",
+ "ice_cream",
+ "doughnut",
+ "cookie",
+ "birthday",
+ "cake",
+ "cupcake",
+ "pie",
+ "chocolate_bar",
+ "candy",
+ "lollipop",
+ "custard",
+ "honey_pot",
+ "baby_bottle",
+ "glass_of_milk",
+ "coffee",
+ "teapot",
+ "tea",
+ "sake",
+ "champagne",
+ "wine_glass",
+ "cocktail",
+ "tropical_drink",
+ "beer",
+ "beers",
+ "clinking_glasses",
+ "tumbler_glass",
+ "pouring_liquid",
+ "cup_with_straw",
+ "bubble_tea",
+ "beverage_box",
+ "mate_drink",
+ "ice_cube",
+ "chopsticks",
+ "knife_fork_plate",
+ "fork_and_knife",
+ "spoon",
+ "hocho",
+ "jar",
+ "amphora"
+ ]
+ },
+ {
+ "id": "activity",
+ "emojis": [
+ "jack_o_lantern",
+ "christmas_tree",
+ "fireworks",
+ "sparkler",
+ "firecracker",
+ "sparkles",
+ "balloon",
+ "tada",
+ "confetti_ball",
+ "tanabata_tree",
+ "bamboo",
+ "dolls",
+ "flags",
+ "wind_chime",
+ "rice_scene",
+ "red_envelope",
+ "ribbon",
+ "gift",
+ "reminder_ribbon",
+ "admission_tickets",
+ "ticket",
+ "medal",
+ "trophy",
+ "sports_medal",
+ "first_place_medal",
+ "second_place_medal",
+ "third_place_medal",
+ "soccer",
+ "baseball",
+ "softball",
+ "basketball",
+ "volleyball",
+ "football",
+ "rugby_football",
+ "tennis",
+ "flying_disc",
+ "bowling",
+ "cricket_bat_and_ball",
+ "field_hockey_stick_and_ball",
+ "ice_hockey_stick_and_puck",
+ "lacrosse",
+ "table_tennis_paddle_and_ball",
+ "badminton_racquet_and_shuttlecock",
+ "boxing_glove",
+ "martial_arts_uniform",
+ "goal_net",
+ "golf",
+ "ice_skate",
+ "fishing_pole_and_fish",
+ "diving_mask",
+ "running_shirt_with_sash",
+ "ski",
+ "sled",
+ "curling_stone",
+ "dart",
+ "yo-yo",
+ "kite",
+ "8ball",
+ "crystal_ball",
+ "magic_wand",
+ "nazar_amulet",
+ "hamsa",
+ "video_game",
+ "joystick",
+ "slot_machine",
+ "game_die",
+ "jigsaw",
+ "teddy_bear",
+ "pinata",
+ "mirror_ball",
+ "nesting_dolls",
+ "spades",
+ "hearts",
+ "diamonds",
+ "clubs",
+ "chess_pawn",
+ "black_joker",
+ "mahjong",
+ "flower_playing_cards",
+ "performing_arts",
+ "frame_with_picture",
+ "art",
+ "thread",
+ "sewing_needle",
+ "yarn",
+ "knot"
+ ]
+ },
+ {
+ "id": "places",
+ "emojis": [
+ "earth_africa",
+ "earth_americas",
+ "earth_asia",
+ "globe_with_meridians",
+ "world_map",
+ "japan",
+ "compass",
+ "snow_capped_mountain",
+ "mountain",
+ "volcano",
+ "mount_fuji",
+ "camping",
+ "beach_with_umbrella",
+ "desert",
+ "desert_island",
+ "national_park",
+ "stadium",
+ "classical_building",
+ "building_construction",
+ "bricks",
+ "rock",
+ "wood",
+ "hut",
+ "house_buildings",
+ "derelict_house_building",
+ "house",
+ "house_with_garden",
+ "office",
+ "post_office",
+ "european_post_office",
+ "hospital",
+ "bank",
+ "hotel",
+ "love_hotel",
+ "convenience_store",
+ "school",
+ "department_store",
+ "factory",
+ "japanese_castle",
+ "european_castle",
+ "wedding",
+ "tokyo_tower",
+ "statue_of_liberty",
+ "church",
+ "mosque",
+ "hindu_temple",
+ "synagogue",
+ "shinto_shrine",
+ "kaaba",
+ "fountain",
+ "tent",
+ "foggy",
+ "night_with_stars",
+ "cityscape",
+ "sunrise_over_mountains",
+ "sunrise",
+ "city_sunset",
+ "city_sunrise",
+ "bridge_at_night",
+ "hotsprings",
+ "carousel_horse",
+ "playground_slide",
+ "ferris_wheel",
+ "roller_coaster",
+ "barber",
+ "circus_tent",
+ "steam_locomotive",
+ "railway_car",
+ "bullettrain_side",
+ "bullettrain_front",
+ "train2",
+ "metro",
+ "light_rail",
+ "station",
+ "tram",
+ "monorail",
+ "mountain_railway",
+ "train",
+ "bus",
+ "oncoming_bus",
+ "trolleybus",
+ "minibus",
+ "ambulance",
+ "fire_engine",
+ "police_car",
+ "oncoming_police_car",
+ "taxi",
+ "oncoming_taxi",
+ "car",
+ "oncoming_automobile",
+ "blue_car",
+ "pickup_truck",
+ "truck",
+ "articulated_lorry",
+ "tractor",
+ "racing_car",
+ "racing_motorcycle",
+ "motor_scooter",
+ "manual_wheelchair",
+ "motorized_wheelchair",
+ "auto_rickshaw",
+ "bike",
+ "scooter",
+ "skateboard",
+ "roller_skate",
+ "busstop",
+ "motorway",
+ "railway_track",
+ "oil_drum",
+ "fuelpump",
+ "wheel",
+ "rotating_light",
+ "traffic_light",
+ "vertical_traffic_light",
+ "octagonal_sign",
+ "construction",
+ "anchor",
+ "ring_buoy",
+ "boat",
+ "canoe",
+ "speedboat",
+ "passenger_ship",
+ "ferry",
+ "motor_boat",
+ "ship",
+ "airplane",
+ "small_airplane",
+ "airplane_departure",
+ "airplane_arriving",
+ "parachute",
+ "seat",
+ "helicopter",
+ "suspension_railway",
+ "mountain_cableway",
+ "aerial_tramway",
+ "satellite",
+ "rocket",
+ "flying_saucer",
+ "bellhop_bell",
+ "luggage",
+ "hourglass",
+ "hourglass_flowing_sand",
+ "watch",
+ "alarm_clock",
+ "stopwatch",
+ "timer_clock",
+ "mantelpiece_clock",
+ "clock12",
+ "clock1230",
+ "clock1",
+ "clock130",
+ "clock2",
+ "clock230",
+ "clock3",
+ "clock330",
+ "clock4",
+ "clock430",
+ "clock5",
+ "clock530",
+ "clock6",
+ "clock630",
+ "clock7",
+ "clock730",
+ "clock8",
+ "clock830",
+ "clock9",
+ "clock930",
+ "clock10",
+ "clock1030",
+ "clock11",
+ "clock1130",
+ "new_moon",
+ "waxing_crescent_moon",
+ "first_quarter_moon",
+ "moon",
+ "full_moon",
+ "waning_gibbous_moon",
+ "last_quarter_moon",
+ "waning_crescent_moon",
+ "crescent_moon",
+ "new_moon_with_face",
+ "first_quarter_moon_with_face",
+ "last_quarter_moon_with_face",
+ "thermometer",
+ "sunny",
+ "full_moon_with_face",
+ "sun_with_face",
+ "ringed_planet",
+ "star",
+ "star2",
+ "stars",
+ "milky_way",
+ "cloud",
+ "partly_sunny",
+ "thunder_cloud_and_rain",
+ "mostly_sunny",
+ "barely_sunny",
+ "partly_sunny_rain",
+ "rain_cloud",
+ "snow_cloud",
+ "lightning",
+ "tornado",
+ "fog",
+ "wind_blowing_face",
+ "cyclone",
+ "rainbow",
+ "closed_umbrella",
+ "umbrella",
+ "umbrella_with_rain_drops",
+ "umbrella_on_ground",
+ "zap",
+ "snowflake",
+ "snowman",
+ "snowman_without_snow",
+ "comet",
+ "fire",
+ "droplet",
+ "ocean"
+ ]
+ },
+ {
+ "id": "objects",
+ "emojis": [
+ "eyeglasses",
+ "dark_sunglasses",
+ "goggles",
+ "lab_coat",
+ "safety_vest",
+ "necktie",
+ "shirt",
+ "jeans",
+ "scarf",
+ "gloves",
+ "coat",
+ "socks",
+ "dress",
+ "kimono",
+ "sari",
+ "one-piece_swimsuit",
+ "briefs",
+ "shorts",
+ "bikini",
+ "womans_clothes",
+ "purse",
+ "handbag",
+ "pouch",
+ "shopping_bags",
+ "school_satchel",
+ "thong_sandal",
+ "mans_shoe",
+ "athletic_shoe",
+ "hiking_boot",
+ "womans_flat_shoe",
+ "high_heel",
+ "sandal",
+ "ballet_shoes",
+ "boot",
+ "crown",
+ "womans_hat",
+ "tophat",
+ "mortar_board",
+ "billed_cap",
+ "military_helmet",
+ "helmet_with_white_cross",
+ "prayer_beads",
+ "lipstick",
+ "ring",
+ "gem",
+ "mute",
+ "speaker",
+ "sound",
+ "loud_sound",
+ "loudspeaker",
+ "mega",
+ "postal_horn",
+ "bell",
+ "no_bell",
+ "musical_score",
+ "musical_note",
+ "notes",
+ "studio_microphone",
+ "level_slider",
+ "control_knobs",
+ "microphone",
+ "headphones",
+ "radio",
+ "saxophone",
+ "accordion",
+ "guitar",
+ "musical_keyboard",
+ "trumpet",
+ "violin",
+ "banjo",
+ "drum_with_drumsticks",
+ "long_drum",
+ "iphone",
+ "calling",
+ "phone",
+ "telephone_receiver",
+ "pager",
+ "fax",
+ "battery",
+ "low_battery",
+ "electric_plug",
+ "computer",
+ "desktop_computer",
+ "printer",
+ "keyboard",
+ "three_button_mouse",
+ "trackball",
+ "minidisc",
+ "floppy_disk",
+ "cd",
+ "dvd",
+ "abacus",
+ "movie_camera",
+ "film_frames",
+ "film_projector",
+ "clapper",
+ "tv",
+ "camera",
+ "camera_with_flash",
+ "video_camera",
+ "vhs",
+ "mag",
+ "mag_right",
+ "candle",
+ "bulb",
+ "flashlight",
+ "izakaya_lantern",
+ "diya_lamp",
+ "notebook_with_decorative_cover",
+ "closed_book",
+ "book",
+ "green_book",
+ "blue_book",
+ "orange_book",
+ "books",
+ "notebook",
+ "ledger",
+ "page_with_curl",
+ "scroll",
+ "page_facing_up",
+ "newspaper",
+ "rolled_up_newspaper",
+ "bookmark_tabs",
+ "bookmark",
+ "label",
+ "moneybag",
+ "coin",
+ "yen",
+ "dollar",
+ "euro",
+ "pound",
+ "money_with_wings",
+ "credit_card",
+ "receipt",
+ "chart",
+ "email",
+ "e-mail",
+ "incoming_envelope",
+ "envelope_with_arrow",
+ "outbox_tray",
+ "inbox_tray",
+ "package",
+ "mailbox",
+ "mailbox_closed",
+ "mailbox_with_mail",
+ "mailbox_with_no_mail",
+ "postbox",
+ "ballot_box_with_ballot",
+ "pencil2",
+ "black_nib",
+ "lower_left_fountain_pen",
+ "lower_left_ballpoint_pen",
+ "lower_left_paintbrush",
+ "lower_left_crayon",
+ "memo",
+ "briefcase",
+ "file_folder",
+ "open_file_folder",
+ "card_index_dividers",
+ "date",
+ "calendar",
+ "spiral_note_pad",
+ "spiral_calendar_pad",
+ "card_index",
+ "chart_with_upwards_trend",
+ "chart_with_downwards_trend",
+ "bar_chart",
+ "clipboard",
+ "pushpin",
+ "round_pushpin",
+ "paperclip",
+ "linked_paperclips",
+ "straight_ruler",
+ "triangular_ruler",
+ "scissors",
+ "card_file_box",
+ "file_cabinet",
+ "wastebasket",
+ "lock",
+ "unlock",
+ "lock_with_ink_pen",
+ "closed_lock_with_key",
+ "key",
+ "old_key",
+ "hammer",
+ "axe",
+ "pick",
+ "hammer_and_pick",
+ "hammer_and_wrench",
+ "dagger_knife",
+ "crossed_swords",
+ "gun",
+ "boomerang",
+ "bow_and_arrow",
+ "shield",
+ "carpentry_saw",
+ "wrench",
+ "screwdriver",
+ "nut_and_bolt",
+ "gear",
+ "compression",
+ "scales",
+ "probing_cane",
+ "link",
+ "chains",
+ "hook",
+ "toolbox",
+ "magnet",
+ "ladder",
+ "alembic",
+ "test_tube",
+ "petri_dish",
+ "dna",
+ "microscope",
+ "telescope",
+ "satellite_antenna",
+ "syringe",
+ "drop_of_blood",
+ "pill",
+ "adhesive_bandage",
+ "crutch",
+ "stethoscope",
+ "x-ray",
+ "door",
+ "elevator",
+ "mirror",
+ "window",
+ "bed",
+ "couch_and_lamp",
+ "chair",
+ "toilet",
+ "plunger",
+ "shower",
+ "bathtub",
+ "mouse_trap",
+ "razor",
+ "lotion_bottle",
+ "safety_pin",
+ "broom",
+ "basket",
+ "roll_of_paper",
+ "bucket",
+ "soap",
+ "bubbles",
+ "toothbrush",
+ "sponge",
+ "fire_extinguisher",
+ "shopping_trolley",
+ "smoking",
+ "coffin",
+ "headstone",
+ "funeral_urn",
+ "moyai",
+ "placard",
+ "identification_card"
+ ]
+ },
+ {
+ "id": "symbols",
+ "emojis": [
+ "atm",
+ "put_litter_in_its_place",
+ "potable_water",
+ "wheelchair",
+ "mens",
+ "womens",
+ "restroom",
+ "baby_symbol",
+ "wc",
+ "passport_control",
+ "customs",
+ "baggage_claim",
+ "left_luggage",
+ "warning",
+ "children_crossing",
+ "no_entry",
+ "no_entry_sign",
+ "no_bicycles",
+ "no_smoking",
+ "do_not_litter",
+ "non-potable_water",
+ "no_pedestrians",
+ "no_mobile_phones",
+ "underage",
+ "radioactive_sign",
+ "biohazard_sign",
+ "arrow_up",
+ "arrow_upper_right",
+ "arrow_right",
+ "arrow_lower_right",
+ "arrow_down",
+ "arrow_lower_left",
+ "arrow_left",
+ "arrow_upper_left",
+ "arrow_up_down",
+ "left_right_arrow",
+ "leftwards_arrow_with_hook",
+ "arrow_right_hook",
+ "arrow_heading_up",
+ "arrow_heading_down",
+ "arrows_clockwise",
+ "arrows_counterclockwise",
+ "back",
+ "end",
+ "on",
+ "soon",
+ "top",
+ "place_of_worship",
+ "atom_symbol",
+ "om_symbol",
+ "star_of_david",
+ "wheel_of_dharma",
+ "yin_yang",
+ "latin_cross",
+ "orthodox_cross",
+ "star_and_crescent",
+ "peace_symbol",
+ "menorah_with_nine_branches",
+ "six_pointed_star",
+ "aries",
+ "taurus",
+ "gemini",
+ "cancer",
+ "leo",
+ "virgo",
+ "libra",
+ "scorpius",
+ "sagittarius",
+ "capricorn",
+ "aquarius",
+ "pisces",
+ "ophiuchus",
+ "twisted_rightwards_arrows",
+ "repeat",
+ "repeat_one",
+ "arrow_forward",
+ "fast_forward",
+ "black_right_pointing_double_triangle_with_vertical_bar",
+ "black_right_pointing_triangle_with_double_vertical_bar",
+ "arrow_backward",
+ "rewind",
+ "black_left_pointing_double_triangle_with_vertical_bar",
+ "arrow_up_small",
+ "arrow_double_up",
+ "arrow_down_small",
+ "arrow_double_down",
+ "double_vertical_bar",
+ "black_square_for_stop",
+ "black_circle_for_record",
+ "eject",
+ "cinema",
+ "low_brightness",
+ "high_brightness",
+ "signal_strength",
+ "vibration_mode",
+ "mobile_phone_off",
+ "female_sign",
+ "male_sign",
+ "transgender_symbol",
+ "heavy_multiplication_x",
+ "heavy_plus_sign",
+ "heavy_minus_sign",
+ "heavy_division_sign",
+ "heavy_equals_sign",
+ "infinity",
+ "bangbang",
+ "interrobang",
+ "question",
+ "grey_question",
+ "grey_exclamation",
+ "exclamation",
+ "wavy_dash",
+ "currency_exchange",
+ "heavy_dollar_sign",
+ "medical_symbol",
+ "recycle",
+ "fleur_de_lis",
+ "trident",
+ "name_badge",
+ "beginner",
+ "o",
+ "white_check_mark",
+ "ballot_box_with_check",
+ "heavy_check_mark",
+ "x",
+ "negative_squared_cross_mark",
+ "curly_loop",
+ "loop",
+ "part_alternation_mark",
+ "eight_spoked_asterisk",
+ "eight_pointed_black_star",
+ "sparkle",
+ "copyright",
+ "registered",
+ "tm",
+ "hash",
+ "keycap_star",
+ "zero",
+ "one",
+ "two",
+ "three",
+ "four",
+ "five",
+ "six",
+ "seven",
+ "eight",
+ "nine",
+ "keycap_ten",
+ "capital_abcd",
+ "abcd",
+ "1234",
+ "symbols",
+ "abc",
+ "a",
+ "ab",
+ "b",
+ "cl",
+ "cool",
+ "free",
+ "information_source",
+ "id",
+ "m",
+ "new",
+ "ng",
+ "o2",
+ "ok",
+ "parking",
+ "sos",
+ "up",
+ "vs",
+ "koko",
+ "sa",
+ "u6708",
+ "u6709",
+ "u6307",
+ "ideograph_advantage",
+ "u5272",
+ "u7121",
+ "u7981",
+ "accept",
+ "u7533",
+ "u5408",
+ "u7a7a",
+ "congratulations",
+ "secret",
+ "u55b6",
+ "u6e80",
+ "red_circle",
+ "large_orange_circle",
+ "large_yellow_circle",
+ "large_green_circle",
+ "large_blue_circle",
+ "large_purple_circle",
+ "large_brown_circle",
+ "black_circle",
+ "white_circle",
+ "large_red_square",
+ "large_orange_square",
+ "large_yellow_square",
+ "large_green_square",
+ "large_blue_square",
+ "large_purple_square",
+ "large_brown_square",
+ "black_large_square",
+ "white_large_square",
+ "black_medium_square",
+ "white_medium_square",
+ "black_medium_small_square",
+ "white_medium_small_square",
+ "black_small_square",
+ "white_small_square",
+ "large_orange_diamond",
+ "large_blue_diamond",
+ "small_orange_diamond",
+ "small_blue_diamond",
+ "small_red_triangle",
+ "small_red_triangle_down",
+ "diamond_shape_with_a_dot_inside",
+ "radio_button",
+ "white_square_button",
+ "black_square_button"
+ ]
+ },
+ {
+ "id": "flags",
+ "emojis": [
+ "checkered_flag",
+ "cn",
+ "crossed_flags",
+ "de",
+ "es",
+ "flag-ac",
+ "flag-ad",
+ "flag-ae",
+ "flag-af",
+ "flag-ag",
+ "flag-ai",
+ "flag-al",
+ "flag-am",
+ "flag-ao",
+ "flag-aq",
+ "flag-ar",
+ "flag-as",
+ "flag-at",
+ "flag-au",
+ "flag-aw",
+ "flag-ax",
+ "flag-az",
+ "flag-ba",
+ "flag-bb",
+ "flag-bd",
+ "flag-be",
+ "flag-bf",
+ "flag-bg",
+ "flag-bh",
+ "flag-bi",
+ "flag-bj",
+ "flag-bl",
+ "flag-bm",
+ "flag-bn",
+ "flag-bo",
+ "flag-bq",
+ "flag-br",
+ "flag-bs",
+ "flag-bt",
+ "flag-bv",
+ "flag-bw",
+ "flag-by",
+ "flag-bz",
+ "flag-ca",
+ "flag-cc",
+ "flag-cd",
+ "flag-cf",
+ "flag-cg",
+ "flag-ch",
+ "flag-ci",
+ "flag-ck",
+ "flag-cl",
+ "flag-cm",
+ "flag-co",
+ "flag-cp",
+ "flag-cr",
+ "flag-cu",
+ "flag-cv",
+ "flag-cw",
+ "flag-cx",
+ "flag-cy",
+ "flag-cz",
+ "flag-dg",
+ "flag-dj",
+ "flag-dk",
+ "flag-dm",
+ "flag-do",
+ "flag-dz",
+ "flag-ea",
+ "flag-ec",
+ "flag-ee",
+ "flag-eg",
+ "flag-eh",
+ "flag-england",
+ "flag-er",
+ "flag-et",
+ "flag-eu",
+ "flag-fi",
+ "flag-fj",
+ "flag-fk",
+ "flag-fm",
+ "flag-fo",
+ "flag-ga",
+ "flag-gd",
+ "flag-ge",
+ "flag-gf",
+ "flag-gg",
+ "flag-gh",
+ "flag-gi",
+ "flag-gl",
+ "flag-gm",
+ "flag-gn",
+ "flag-gp",
+ "flag-gq",
+ "flag-gr",
+ "flag-gs",
+ "flag-gt",
+ "flag-gu",
+ "flag-gw",
+ "flag-gy",
+ "flag-hk",
+ "flag-hm",
+ "flag-hn",
+ "flag-hr",
+ "flag-ht",
+ "flag-hu",
+ "flag-ic",
+ "flag-id",
+ "flag-ie",
+ "flag-il",
+ "flag-im",
+ "flag-in",
+ "flag-io",
+ "flag-iq",
+ "flag-ir",
+ "flag-is",
+ "flag-je",
+ "flag-jm",
+ "flag-jo",
+ "flag-ke",
+ "flag-kg",
+ "flag-kh",
+ "flag-ki",
+ "flag-km",
+ "flag-kn",
+ "flag-kp",
+ "flag-kw",
+ "flag-ky",
+ "flag-kz",
+ "flag-la",
+ "flag-lb",
+ "flag-lc",
+ "flag-li",
+ "flag-lk",
+ "flag-lr",
+ "flag-ls",
+ "flag-lt",
+ "flag-lu",
+ "flag-lv",
+ "flag-ly",
+ "flag-ma",
+ "flag-mc",
+ "flag-md",
+ "flag-me",
+ "flag-mf",
+ "flag-mg",
+ "flag-mh",
+ "flag-mk",
+ "flag-ml",
+ "flag-mm",
+ "flag-mn",
+ "flag-mo",
+ "flag-mp",
+ "flag-mq",
+ "flag-mr",
+ "flag-ms",
+ "flag-mt",
+ "flag-mu",
+ "flag-mv",
+ "flag-mw",
+ "flag-mx",
+ "flag-my",
+ "flag-mz",
+ "flag-na",
+ "flag-nc",
+ "flag-ne",
+ "flag-nf",
+ "flag-ng",
+ "flag-ni",
+ "flag-nl",
+ "flag-no",
+ "flag-np",
+ "flag-nr",
+ "flag-nu",
+ "flag-nz",
+ "flag-om",
+ "flag-pa",
+ "flag-pe",
+ "flag-pf",
+ "flag-pg",
+ "flag-ph",
+ "flag-pk",
+ "flag-pl",
+ "flag-pm",
+ "flag-pn",
+ "flag-pr",
+ "flag-ps",
+ "flag-pt",
+ "flag-pw",
+ "flag-py",
+ "flag-qa",
+ "flag-re",
+ "flag-ro",
+ "flag-rs",
+ "flag-rw",
+ "flag-sa",
+ "flag-sb",
+ "flag-sc",
+ "flag-scotland",
+ "flag-sd",
+ "flag-se",
+ "flag-sg",
+ "flag-sh",
+ "flag-si",
+ "flag-sj",
+ "flag-sk",
+ "flag-sl",
+ "flag-sm",
+ "flag-sn",
+ "flag-so",
+ "flag-sr",
+ "flag-ss",
+ "flag-st",
+ "flag-sv",
+ "flag-sx",
+ "flag-sy",
+ "flag-sz",
+ "flag-ta",
+ "flag-tc",
+ "flag-td",
+ "flag-tf",
+ "flag-tg",
+ "flag-th",
+ "flag-tj",
+ "flag-tk",
+ "flag-tl",
+ "flag-tm",
+ "flag-tn",
+ "flag-to",
+ "flag-tr",
+ "flag-tt",
+ "flag-tv",
+ "flag-tw",
+ "flag-tz",
+ "flag-ua",
+ "flag-ug",
+ "flag-um",
+ "flag-un",
+ "flag-uy",
+ "flag-uz",
+ "flag-va",
+ "flag-vc",
+ "flag-ve",
+ "flag-vg",
+ "flag-vi",
+ "flag-vn",
+ "flag-vu",
+ "flag-wales",
+ "flag-wf",
+ "flag-ws",
+ "flag-xk",
+ "flag-ye",
+ "flag-yt",
+ "flag-za",
+ "flag-zm",
+ "flag-zw",
+ "fr",
+ "gb",
+ "it",
+ "jp",
+ "kr",
+ "pirate_flag",
+ "rainbow-flag",
+ "ru",
+ "transgender_flag",
+ "triangular_flag_on_post",
+ "us",
+ "waving_black_flag",
+ "waving_white_flag"
+ ]
+ }
+ ],
+ "emojis": {
+ "100": {
+ "id": "100",
+ "name": "Hundred Points",
+ "keywords": [
+ "100",
+ "score",
+ "perfect",
+ "numbers",
+ "century",
+ "exam",
+ "quiz",
+ "test",
+ "pass"
+ ],
+ "skins": [{ "unified": "1f4af", "native": "💯" }],
+ "version": 1
+ },
+ "1234": {
+ "id": "1234",
+ "name": "Input Numbers",
+ "keywords": ["1234", "blue", "square"],
+ "skins": [{ "unified": "1f522", "native": "🔢" }],
+ "version": 1
+ },
+ "grinning": {
+ "id": "grinning",
+ "name": "Grinning Face",
+ "emoticons": [":D"],
+ "keywords": ["smile", "happy", "joy", ":D", "grin"],
+ "skins": [{ "unified": "1f600", "native": "😀" }],
+ "version": 1
+ },
+ "smiley": {
+ "id": "smiley",
+ "name": "Grinning Face with Big Eyes",
+ "emoticons": [":)", "=)", "=-)"],
+ "keywords": [
+ "smiley",
+ "happy",
+ "joy",
+ "haha",
+ ":D",
+ ":)",
+ "smile",
+ "funny"
+ ],
+ "skins": [{ "unified": "1f603", "native": "😃" }],
+ "version": 1
+ },
+ "smile": {
+ "id": "smile",
+ "name": "Grinning Face with Smiling Eyes",
+ "emoticons": [":)", "C:", "c:", ":D", ":-D"],
+ "keywords": [
+ "smile",
+ "happy",
+ "joy",
+ "funny",
+ "haha",
+ "laugh",
+ "like",
+ ":D",
+ ":)"
+ ],
+ "skins": [{ "unified": "1f604", "native": "😄" }],
+ "version": 1
+ },
+ "grin": {
+ "id": "grin",
+ "name": "Beaming Face with Smiling Eyes",
+ "keywords": ["grin", "happy", "smile", "joy", "kawaii"],
+ "skins": [{ "unified": "1f601", "native": "😁" }],
+ "version": 1
+ },
+ "laughing": {
+ "id": "laughing",
+ "name": "Grinning Squinting Face",
+ "emoticons": [":>", ":->"],
+ "keywords": [
+ "laughing",
+ "satisfied",
+ "happy",
+ "joy",
+ "lol",
+ "haha",
+ "glad",
+ "XD",
+ "laugh"
+ ],
+ "skins": [{ "unified": "1f606", "native": "😆" }],
+ "version": 1
+ },
+ "sweat_smile": {
+ "id": "sweat_smile",
+ "name": "Grinning Face with Sweat",
+ "keywords": ["smile", "hot", "happy", "laugh", "relief"],
+ "skins": [{ "unified": "1f605", "native": "😅" }],
+ "version": 1
+ },
+ "rolling_on_the_floor_laughing": {
+ "id": "rolling_on_the_floor_laughing",
+ "name": "Rolling on the Floor Laughing",
+ "keywords": ["face", "lol", "haha", "rofl"],
+ "skins": [{ "unified": "1f923", "native": "🤣" }],
+ "version": 3
+ },
+ "joy": {
+ "id": "joy",
+ "name": "Face with Tears of Joy",
+ "keywords": ["cry", "weep", "happy", "happytears", "haha"],
+ "skins": [{ "unified": "1f602", "native": "😂" }],
+ "version": 1
+ },
+ "slightly_smiling_face": {
+ "id": "slightly_smiling_face",
+ "name": "Slightly Smiling Face",
+ "emoticons": [":)", "(:", ":-)"],
+ "keywords": ["smile"],
+ "skins": [{ "unified": "1f642", "native": "🙂" }],
+ "version": 1
+ },
+ "upside_down_face": {
+ "id": "upside_down_face",
+ "name": "Upside-Down Face",
+ "keywords": ["upside", "down", "flipped", "silly", "smile"],
+ "skins": [{ "unified": "1f643", "native": "🙃" }],
+ "version": 1
+ },
+ "melting_face": {
+ "id": "melting_face",
+ "name": "Melting Face",
+ "keywords": ["hot", "heat"],
+ "skins": [{ "unified": "1fae0", "native": "🫠" }],
+ "version": 14
+ },
+ "wink": {
+ "id": "wink",
+ "name": "Winking Face",
+ "emoticons": [";)", ";-)"],
+ "keywords": [
+ "wink",
+ "happy",
+ "mischievous",
+ "secret",
+ ";)",
+ "smile",
+ "eye"
+ ],
+ "skins": [{ "unified": "1f609", "native": "😉" }],
+ "version": 1
+ },
+ "blush": {
+ "id": "blush",
+ "name": "Smiling Face with Smiling Eyes",
+ "emoticons": [":)"],
+ "keywords": [
+ "blush",
+ "smile",
+ "happy",
+ "flushed",
+ "crush",
+ "embarrassed",
+ "shy",
+ "joy"
+ ],
+ "skins": [{ "unified": "1f60a", "native": "😊" }],
+ "version": 1
+ },
+ "innocent": {
+ "id": "innocent",
+ "name": "Smiling Face with Halo",
+ "keywords": ["innocent", "angel", "heaven"],
+ "skins": [{ "unified": "1f607", "native": "😇" }],
+ "version": 1
+ },
+ "smiling_face_with_3_hearts": {
+ "id": "smiling_face_with_3_hearts",
+ "name": "Smiling Face with Hearts",
+ "keywords": [
+ "3",
+ "love",
+ "like",
+ "affection",
+ "valentines",
+ "infatuation",
+ "crush",
+ "adore"
+ ],
+ "skins": [{ "unified": "1f970", "native": "🥰" }],
+ "version": 11
+ },
+ "heart_eyes": {
+ "id": "heart_eyes",
+ "name": "Smiling Face with Heart-Eyes",
+ "keywords": [
+ "heart",
+ "eyes",
+ "love",
+ "like",
+ "affection",
+ "valentines",
+ "infatuation",
+ "crush"
+ ],
+ "skins": [{ "unified": "1f60d", "native": "😍" }],
+ "version": 1
+ },
+ "star-struck": {
+ "id": "star-struck",
+ "name": "Star-Struck",
+ "keywords": [
+ "star",
+ "struck",
+ "grinning",
+ "face",
+ "with",
+ "eyes",
+ "smile",
+ "starry"
+ ],
+ "skins": [{ "unified": "1f929", "native": "🤩" }],
+ "version": 5
+ },
+ "kissing_heart": {
+ "id": "kissing_heart",
+ "name": "Face Blowing a Kiss",
+ "emoticons": [":*", ":-*"],
+ "keywords": [
+ "kissing",
+ "heart",
+ "love",
+ "like",
+ "affection",
+ "valentines",
+ "infatuation"
+ ],
+ "skins": [{ "unified": "1f618", "native": "😘" }],
+ "version": 1
+ },
+ "kissing": {
+ "id": "kissing",
+ "name": "Kissing Face",
+ "keywords": ["love", "like", "3", "valentines", "infatuation", "kiss"],
+ "skins": [{ "unified": "1f617", "native": "😗" }],
+ "version": 1
+ },
+ "relaxed": {
+ "id": "relaxed",
+ "name": "Smiling Face",
+ "keywords": ["relaxed", "blush", "massage", "happiness"],
+ "skins": [{ "unified": "263a-fe0f", "native": "☺️" }],
+ "version": 1
+ },
+ "kissing_closed_eyes": {
+ "id": "kissing_closed_eyes",
+ "name": "Kissing Face with Closed Eyes",
+ "keywords": [
+ "love",
+ "like",
+ "affection",
+ "valentines",
+ "infatuation",
+ "kiss"
+ ],
+ "skins": [{ "unified": "1f61a", "native": "😚" }],
+ "version": 1
+ },
+ "kissing_smiling_eyes": {
+ "id": "kissing_smiling_eyes",
+ "name": "Kissing Face with Smiling Eyes",
+ "keywords": ["affection", "valentines", "infatuation", "kiss"],
+ "skins": [{ "unified": "1f619", "native": "😙" }],
+ "version": 1
+ },
+ "smiling_face_with_tear": {
+ "id": "smiling_face_with_tear",
+ "name": "Smiling Face with Tear",
+ "keywords": ["sad", "cry", "pretend"],
+ "skins": [{ "unified": "1f972", "native": "🥲" }],
+ "version": 13
+ },
+ "yum": {
+ "id": "yum",
+ "name": "Face Savoring Food",
+ "keywords": [
+ "yum",
+ "happy",
+ "joy",
+ "tongue",
+ "smile",
+ "silly",
+ "yummy",
+ "nom",
+ "delicious",
+ "savouring"
+ ],
+ "skins": [{ "unified": "1f60b", "native": "😋" }],
+ "version": 1
+ },
+ "stuck_out_tongue": {
+ "id": "stuck_out_tongue",
+ "name": "Face with Tongue",
+ "emoticons": [":p", ":-p", ":P", ":-P", ":b", ":-b"],
+ "keywords": [
+ "stuck",
+ "out",
+ "prank",
+ "childish",
+ "playful",
+ "mischievous",
+ "smile"
+ ],
+ "skins": [{ "unified": "1f61b", "native": "😛" }],
+ "version": 1
+ },
+ "stuck_out_tongue_winking_eye": {
+ "id": "stuck_out_tongue_winking_eye",
+ "name": "Winking Face with Tongue",
+ "emoticons": [";p", ";-p", ";b", ";-b", ";P", ";-P"],
+ "keywords": [
+ "stuck",
+ "out",
+ "eye",
+ "prank",
+ "childish",
+ "playful",
+ "mischievous",
+ "smile",
+ "wink"
+ ],
+ "skins": [{ "unified": "1f61c", "native": "😜" }],
+ "version": 1
+ },
+ "zany_face": {
+ "id": "zany_face",
+ "name": "Zany Face",
+ "keywords": [
+ "grinning",
+ "with",
+ "one",
+ "large",
+ "and",
+ "small",
+ "eye",
+ "goofy",
+ "crazy"
+ ],
+ "skins": [{ "unified": "1f92a", "native": "🤪" }],
+ "version": 5
+ },
+ "stuck_out_tongue_closed_eyes": {
+ "id": "stuck_out_tongue_closed_eyes",
+ "name": "Squinting Face with Tongue",
+ "keywords": [
+ "stuck",
+ "out",
+ "closed",
+ "eyes",
+ "prank",
+ "playful",
+ "mischievous",
+ "smile"
+ ],
+ "skins": [{ "unified": "1f61d", "native": "😝" }],
+ "version": 1
+ },
+ "money_mouth_face": {
+ "id": "money_mouth_face",
+ "name": "Money-Mouth Face",
+ "keywords": ["money", "mouth", "rich", "dollar"],
+ "skins": [{ "unified": "1f911", "native": "🤑" }],
+ "version": 1
+ },
+ "hugging_face": {
+ "id": "hugging_face",
+ "name": "Hugging Face",
+ "keywords": ["smile", "hug"],
+ "skins": [{ "unified": "1f917", "native": "🤗" }],
+ "version": 1
+ },
+ "face_with_hand_over_mouth": {
+ "id": "face_with_hand_over_mouth",
+ "name": "Face with Hand over Mouth",
+ "keywords": [
+ "smiling",
+ "eyes",
+ "and",
+ "covering",
+ "whoops",
+ "shock",
+ "surprise"
+ ],
+ "skins": [{ "unified": "1f92d", "native": "🤭" }],
+ "version": 5
+ },
+ "face_with_open_eyes_and_hand_over_mouth": {
+ "id": "face_with_open_eyes_and_hand_over_mouth",
+ "name": "Face with Open Eyes and Hand over Mouth",
+ "keywords": ["silence", "secret", "shock", "surprise"],
+ "skins": [{ "unified": "1fae2", "native": "🫢" }],
+ "version": 14
+ },
+ "face_with_peeking_eye": {
+ "id": "face_with_peeking_eye",
+ "name": "Face with Peeking Eye",
+ "keywords": ["scared", "frightening", "embarrassing"],
+ "skins": [{ "unified": "1fae3", "native": "🫣" }],
+ "version": 14
+ },
+ "shushing_face": {
+ "id": "shushing_face",
+ "name": "Shushing Face",
+ "keywords": [
+ "with",
+ "finger",
+ "covering",
+ "closed",
+ "lips",
+ "quiet",
+ "shhh"
+ ],
+ "skins": [{ "unified": "1f92b", "native": "🤫" }],
+ "version": 5
+ },
+ "thinking_face": {
+ "id": "thinking_face",
+ "name": "Thinking Face",
+ "keywords": ["hmmm", "think", "consider"],
+ "skins": [{ "unified": "1f914", "native": "🤔" }],
+ "version": 1
+ },
+ "saluting_face": {
+ "id": "saluting_face",
+ "name": "Saluting Face",
+ "keywords": ["respect", "salute"],
+ "skins": [{ "unified": "1fae1", "native": "🫡" }],
+ "version": 14
+ },
+ "zipper_mouth_face": {
+ "id": "zipper_mouth_face",
+ "name": "Zipper-Mouth Face",
+ "keywords": ["zipper", "mouth", "sealed", "secret"],
+ "skins": [{ "unified": "1f910", "native": "🤐" }],
+ "version": 1
+ },
+ "face_with_raised_eyebrow": {
+ "id": "face_with_raised_eyebrow",
+ "name": "Face with Raised Eyebrow",
+ "keywords": [
+ "one",
+ "distrust",
+ "scepticism",
+ "disapproval",
+ "disbelief",
+ "surprise"
+ ],
+ "skins": [{ "unified": "1f928", "native": "🤨" }],
+ "version": 5
+ },
+ "neutral_face": {
+ "id": "neutral_face",
+ "name": "Neutral Face",
+ "emoticons": [":|", ":-|"],
+ "keywords": ["indifference", "meh", ":", ""],
+ "skins": [{ "unified": "1f610", "native": "😐" }],
+ "version": 1
+ },
+ "expressionless": {
+ "id": "expressionless",
+ "name": "Expressionless Face",
+ "emoticons": ["-_-"],
+ "keywords": ["indifferent", "-", "", "meh", "deadpan"],
+ "skins": [{ "unified": "1f611", "native": "😑" }],
+ "version": 1
+ },
+ "no_mouth": {
+ "id": "no_mouth",
+ "name": "Face Without Mouth",
+ "keywords": ["no", "hellokitty"],
+ "skins": [{ "unified": "1f636", "native": "😶" }],
+ "version": 1
+ },
+ "dotted_line_face": {
+ "id": "dotted_line_face",
+ "name": "Dotted Line Face",
+ "keywords": ["invisible", "lonely", "isolation", "depression"],
+ "skins": [{ "unified": "1fae5", "native": "🫥" }],
+ "version": 14
+ },
+ "face_in_clouds": {
+ "id": "face_in_clouds",
+ "name": "Face in Clouds",
+ "keywords": ["shower", "steam", "dream"],
+ "skins": [{ "unified": "1f636-200d-1f32b-fe0f", "native": "😶🌫️" }],
+ "version": 13.1
+ },
+ "smirk": {
+ "id": "smirk",
+ "name": "Smirking Face",
+ "keywords": ["smirk", "smile", "mean", "prank", "smug", "sarcasm"],
+ "skins": [{ "unified": "1f60f", "native": "😏" }],
+ "version": 1
+ },
+ "unamused": {
+ "id": "unamused",
+ "name": "Unamused Face",
+ "emoticons": [":("],
+ "keywords": [
+ "indifference",
+ "bored",
+ "straight",
+ "serious",
+ "sarcasm",
+ "unimpressed",
+ "skeptical",
+ "dubious",
+ "side",
+ "eye"
+ ],
+ "skins": [{ "unified": "1f612", "native": "😒" }],
+ "version": 1
+ },
+ "face_with_rolling_eyes": {
+ "id": "face_with_rolling_eyes",
+ "name": "Face with Rolling Eyes",
+ "keywords": ["eyeroll", "frustrated"],
+ "skins": [{ "unified": "1f644", "native": "🙄" }],
+ "version": 1
+ },
+ "grimacing": {
+ "id": "grimacing",
+ "name": "Grimacing Face",
+ "keywords": ["grimace", "teeth"],
+ "skins": [{ "unified": "1f62c", "native": "😬" }],
+ "version": 1
+ },
+ "face_exhaling": {
+ "id": "face_exhaling",
+ "name": "Face Exhaling",
+ "keywords": ["relieve", "relief", "tired", "sigh"],
+ "skins": [{ "unified": "1f62e-200d-1f4a8", "native": "😮💨" }],
+ "version": 13.1
+ },
+ "lying_face": {
+ "id": "lying_face",
+ "name": "Lying Face",
+ "keywords": ["lie", "pinocchio"],
+ "skins": [{ "unified": "1f925", "native": "🤥" }],
+ "version": 3
+ },
+ "relieved": {
+ "id": "relieved",
+ "name": "Relieved Face",
+ "keywords": ["relaxed", "phew", "massage", "happiness"],
+ "skins": [{ "unified": "1f60c", "native": "😌" }],
+ "version": 1
+ },
+ "pensive": {
+ "id": "pensive",
+ "name": "Pensive Face",
+ "keywords": ["sad", "depressed", "upset"],
+ "skins": [{ "unified": "1f614", "native": "😔" }],
+ "version": 1
+ },
+ "sleepy": {
+ "id": "sleepy",
+ "name": "Sleepy Face",
+ "keywords": ["tired", "rest", "nap"],
+ "skins": [{ "unified": "1f62a", "native": "😪" }],
+ "version": 1
+ },
+ "drooling_face": {
+ "id": "drooling_face",
+ "name": "Drooling Face",
+ "keywords": [],
+ "skins": [{ "unified": "1f924", "native": "🤤" }],
+ "version": 3
+ },
+ "sleeping": {
+ "id": "sleeping",
+ "name": "Sleeping Face",
+ "keywords": ["tired", "sleepy", "night", "zzz"],
+ "skins": [{ "unified": "1f634", "native": "😴" }],
+ "version": 1
+ },
+ "mask": {
+ "id": "mask",
+ "name": "Face with Medical Mask",
+ "keywords": ["sick", "ill", "disease"],
+ "skins": [{ "unified": "1f637", "native": "😷" }],
+ "version": 1
+ },
+ "face_with_thermometer": {
+ "id": "face_with_thermometer",
+ "name": "Face with Thermometer",
+ "keywords": ["sick", "temperature", "cold", "fever"],
+ "skins": [{ "unified": "1f912", "native": "🤒" }],
+ "version": 1
+ },
+ "face_with_head_bandage": {
+ "id": "face_with_head_bandage",
+ "name": "Face with Head-Bandage",
+ "keywords": ["head", "bandage", "injured", "clumsy", "hurt"],
+ "skins": [{ "unified": "1f915", "native": "🤕" }],
+ "version": 1
+ },
+ "nauseated_face": {
+ "id": "nauseated_face",
+ "name": "Nauseated Face",
+ "keywords": ["vomit", "gross", "green", "sick", "throw", "up", "ill"],
+ "skins": [{ "unified": "1f922", "native": "🤢" }],
+ "version": 3
+ },
+ "face_vomiting": {
+ "id": "face_vomiting",
+ "name": "Face Vomiting",
+ "keywords": ["with", "open", "mouth", "sick"],
+ "skins": [{ "unified": "1f92e", "native": "🤮" }],
+ "version": 5
+ },
+ "sneezing_face": {
+ "id": "sneezing_face",
+ "name": "Sneezing Face",
+ "keywords": ["gesundheit", "sneeze", "sick", "allergy"],
+ "skins": [{ "unified": "1f927", "native": "🤧" }],
+ "version": 3
+ },
+ "hot_face": {
+ "id": "hot_face",
+ "name": "Hot Face",
+ "keywords": ["feverish", "heat", "red", "sweating"],
+ "skins": [{ "unified": "1f975", "native": "🥵" }],
+ "version": 11
+ },
+ "cold_face": {
+ "id": "cold_face",
+ "name": "Cold Face",
+ "keywords": ["blue", "freezing", "frozen", "frostbite", "icicles"],
+ "skins": [{ "unified": "1f976", "native": "🥶" }],
+ "version": 11
+ },
+ "woozy_face": {
+ "id": "woozy_face",
+ "name": "Woozy Face",
+ "keywords": ["dizzy", "intoxicated", "tipsy", "wavy"],
+ "skins": [{ "unified": "1f974", "native": "🥴" }],
+ "version": 11
+ },
+ "dizzy_face": {
+ "id": "dizzy_face",
+ "name": "Dizzy Face",
+ "keywords": ["spent", "unconscious", "xox"],
+ "skins": [{ "unified": "1f635", "native": "😵" }],
+ "version": 1
+ },
+ "face_with_spiral_eyes": {
+ "id": "face_with_spiral_eyes",
+ "name": "Face with Spiral Eyes",
+ "keywords": ["sick", "ill", "confused", "nauseous", "nausea"],
+ "skins": [{ "unified": "1f635-200d-1f4ab", "native": "😵💫" }],
+ "version": 13.1
+ },
+ "exploding_head": {
+ "id": "exploding_head",
+ "name": "Exploding Head",
+ "keywords": ["shocked", "face", "with", "mind", "blown"],
+ "skins": [{ "unified": "1f92f", "native": "🤯" }],
+ "version": 5
+ },
+ "face_with_cowboy_hat": {
+ "id": "face_with_cowboy_hat",
+ "name": "Cowboy Hat Face",
+ "keywords": ["with", "cowgirl"],
+ "skins": [{ "unified": "1f920", "native": "🤠" }],
+ "version": 3
+ },
+ "partying_face": {
+ "id": "partying_face",
+ "name": "Partying Face",
+ "keywords": ["celebration", "woohoo"],
+ "skins": [{ "unified": "1f973", "native": "🥳" }],
+ "version": 11
+ },
+ "disguised_face": {
+ "id": "disguised_face",
+ "name": "Disguised Face",
+ "keywords": ["pretent", "brows", "glasses", "moustache"],
+ "skins": [{ "unified": "1f978", "native": "🥸" }],
+ "version": 13
+ },
+ "sunglasses": {
+ "id": "sunglasses",
+ "name": "Smiling Face with Sunglasses",
+ "emoticons": ["8)"],
+ "keywords": ["cool", "smile", "summer", "beach", "sunglass"],
+ "skins": [{ "unified": "1f60e", "native": "😎" }],
+ "version": 1
+ },
+ "nerd_face": {
+ "id": "nerd_face",
+ "name": "Nerd Face",
+ "keywords": ["nerdy", "geek", "dork"],
+ "skins": [{ "unified": "1f913", "native": "🤓" }],
+ "version": 1
+ },
+ "face_with_monocle": {
+ "id": "face_with_monocle",
+ "name": "Face with Monocle",
+ "keywords": ["stuffy", "wealthy"],
+ "skins": [{ "unified": "1f9d0", "native": "🧐" }],
+ "version": 5
+ },
+ "confused": {
+ "id": "confused",
+ "name": "Confused Face",
+ "emoticons": [":\\", ":-\\", ":/", ":-/"],
+ "keywords": ["indifference", "huh", "weird", "hmmm", ":/"],
+ "skins": [{ "unified": "1f615", "native": "😕" }],
+ "version": 1
+ },
+ "face_with_diagonal_mouth": {
+ "id": "face_with_diagonal_mouth",
+ "name": "Face with Diagonal Mouth",
+ "keywords": ["skeptic", "confuse", "frustrated", "indifferent"],
+ "skins": [{ "unified": "1fae4", "native": "🫤" }],
+ "version": 14
+ },
+ "worried": {
+ "id": "worried",
+ "name": "Worried Face",
+ "keywords": ["concern", "nervous", ":("],
+ "skins": [{ "unified": "1f61f", "native": "😟" }],
+ "version": 1
+ },
+ "slightly_frowning_face": {
+ "id": "slightly_frowning_face",
+ "name": "Slightly Frowning Face",
+ "keywords": ["disappointed", "sad", "upset"],
+ "skins": [{ "unified": "1f641", "native": "🙁" }],
+ "version": 1
+ },
+ "white_frowning_face": {
+ "id": "white_frowning_face",
+ "name": "Frowning Face",
+ "keywords": ["white", "sad", "upset", "frown"],
+ "skins": [{ "unified": "2639-fe0f", "native": "☹️" }],
+ "version": 1
+ },
+ "open_mouth": {
+ "id": "open_mouth",
+ "name": "Face with Open Mouth",
+ "emoticons": [":o", ":-o", ":O", ":-O"],
+ "keywords": ["surprise", "impressed", "wow", "whoa", ":O"],
+ "skins": [{ "unified": "1f62e", "native": "😮" }],
+ "version": 1
+ },
+ "hushed": {
+ "id": "hushed",
+ "name": "Hushed Face",
+ "keywords": ["woo", "shh"],
+ "skins": [{ "unified": "1f62f", "native": "😯" }],
+ "version": 1
+ },
+ "astonished": {
+ "id": "astonished",
+ "name": "Astonished Face",
+ "keywords": ["xox", "surprised", "poisoned"],
+ "skins": [{ "unified": "1f632", "native": "😲" }],
+ "version": 1
+ },
+ "flushed": {
+ "id": "flushed",
+ "name": "Flushed Face",
+ "keywords": ["blush", "shy", "flattered"],
+ "skins": [{ "unified": "1f633", "native": "😳" }],
+ "version": 1
+ },
+ "pleading_face": {
+ "id": "pleading_face",
+ "name": "Pleading Face",
+ "keywords": ["begging", "mercy"],
+ "skins": [{ "unified": "1f97a", "native": "🥺" }],
+ "version": 11
+ },
+ "face_holding_back_tears": {
+ "id": "face_holding_back_tears",
+ "name": "Face Holding Back Tears",
+ "keywords": ["touched", "gratitude"],
+ "skins": [{ "unified": "1f979", "native": "🥹" }],
+ "version": 14
+ },
+ "frowning": {
+ "id": "frowning",
+ "name": "Frowning Face with Open Mouth",
+ "keywords": ["aw", "what"],
+ "skins": [{ "unified": "1f626", "native": "😦" }],
+ "version": 1
+ },
+ "anguished": {
+ "id": "anguished",
+ "name": "Anguished Face",
+ "emoticons": ["D:"],
+ "keywords": ["stunned", "nervous"],
+ "skins": [{ "unified": "1f627", "native": "😧" }],
+ "version": 1
+ },
+ "fearful": {
+ "id": "fearful",
+ "name": "Fearful Face",
+ "keywords": ["scared", "terrified", "nervous", "oops", "huh"],
+ "skins": [{ "unified": "1f628", "native": "😨" }],
+ "version": 1
+ },
+ "cold_sweat": {
+ "id": "cold_sweat",
+ "name": "Anxious Face with Sweat",
+ "keywords": ["cold", "nervous"],
+ "skins": [{ "unified": "1f630", "native": "😰" }],
+ "version": 1
+ },
+ "disappointed_relieved": {
+ "id": "disappointed_relieved",
+ "name": "Sad but Relieved Face",
+ "keywords": ["disappointed", "phew", "sweat", "nervous"],
+ "skins": [{ "unified": "1f625", "native": "😥" }],
+ "version": 1
+ },
+ "cry": {
+ "id": "cry",
+ "name": "Crying Face",
+ "emoticons": [":'("],
+ "keywords": ["cry", "tears", "sad", "depressed", "upset", ":'("],
+ "skins": [{ "unified": "1f622", "native": "😢" }],
+ "version": 1
+ },
+ "sob": {
+ "id": "sob",
+ "name": "Loudly Crying Face",
+ "emoticons": [":'("],
+ "keywords": ["sob", "cry", "tears", "sad", "upset", "depressed"],
+ "skins": [{ "unified": "1f62d", "native": "😭" }],
+ "version": 1
+ },
+ "scream": {
+ "id": "scream",
+ "name": "Face Screaming in Fear",
+ "keywords": ["scream", "munch", "scared", "omg"],
+ "skins": [{ "unified": "1f631", "native": "😱" }],
+ "version": 1
+ },
+ "confounded": {
+ "id": "confounded",
+ "name": "Confounded Face",
+ "keywords": ["confused", "sick", "unwell", "oops", ":S"],
+ "skins": [{ "unified": "1f616", "native": "😖" }],
+ "version": 1
+ },
+ "persevere": {
+ "id": "persevere",
+ "name": "Persevering Face",
+ "keywords": ["persevere", "sick", "no", "upset", "oops"],
+ "skins": [{ "unified": "1f623", "native": "😣" }],
+ "version": 1
+ },
+ "disappointed": {
+ "id": "disappointed",
+ "name": "Disappointed Face",
+ "emoticons": ["):", ":(", ":-("],
+ "keywords": ["sad", "upset", "depressed", ":("],
+ "skins": [{ "unified": "1f61e", "native": "😞" }],
+ "version": 1
+ },
+ "sweat": {
+ "id": "sweat",
+ "name": "Face with Cold Sweat",
+ "keywords": ["downcast", "hot", "sad", "tired", "exercise"],
+ "skins": [{ "unified": "1f613", "native": "😓" }],
+ "version": 1
+ },
+ "weary": {
+ "id": "weary",
+ "name": "Weary Face",
+ "keywords": ["tired", "sleepy", "sad", "frustrated", "upset"],
+ "skins": [{ "unified": "1f629", "native": "😩" }],
+ "version": 1
+ },
+ "tired_face": {
+ "id": "tired_face",
+ "name": "Tired Face",
+ "keywords": ["sick", "whine", "upset", "frustrated"],
+ "skins": [{ "unified": "1f62b", "native": "😫" }],
+ "version": 1
+ },
+ "yawning_face": {
+ "id": "yawning_face",
+ "name": "Yawning Face",
+ "keywords": ["tired", "sleepy"],
+ "skins": [{ "unified": "1f971", "native": "🥱" }],
+ "version": 12
+ },
+ "triumph": {
+ "id": "triumph",
+ "name": "Face with Look of Triumph",
+ "keywords": ["steam", "from", "nose", "gas", "phew", "proud", "pride"],
+ "skins": [{ "unified": "1f624", "native": "😤" }],
+ "version": 1
+ },
+ "rage": {
+ "id": "rage",
+ "name": "Pouting Face",
+ "keywords": ["rage", "angry", "mad", "hate", "despise"],
+ "skins": [{ "unified": "1f621", "native": "😡" }],
+ "version": 1
+ },
+ "angry": {
+ "id": "angry",
+ "name": "Angry Face",
+ "emoticons": [">:(", ">:-("],
+ "keywords": ["mad", "annoyed", "frustrated"],
+ "skins": [{ "unified": "1f620", "native": "😠" }],
+ "version": 1
+ },
+ "face_with_symbols_on_mouth": {
+ "id": "face_with_symbols_on_mouth",
+ "name": "Face with Symbols on Mouth",
+ "keywords": [
+ "serious",
+ "covering",
+ "swearing",
+ "cursing",
+ "cussing",
+ "profanity",
+ "expletive"
+ ],
+ "skins": [{ "unified": "1f92c", "native": "🤬" }],
+ "version": 5
+ },
+ "smiling_imp": {
+ "id": "smiling_imp",
+ "name": "Smiling Face with Horns",
+ "keywords": ["imp", "devil"],
+ "skins": [{ "unified": "1f608", "native": "😈" }],
+ "version": 1
+ },
+ "imp": {
+ "id": "imp",
+ "name": "Imp",
+ "keywords": ["angry", "face", "with", "horns", "devil"],
+ "skins": [{ "unified": "1f47f", "native": "👿" }],
+ "version": 1
+ },
+ "skull": {
+ "id": "skull",
+ "name": "Skull",
+ "keywords": ["dead", "skeleton", "creepy", "death"],
+ "skins": [{ "unified": "1f480", "native": "💀" }],
+ "version": 1
+ },
+ "skull_and_crossbones": {
+ "id": "skull_and_crossbones",
+ "name": "Skull and Crossbones",
+ "keywords": [
+ "poison",
+ "danger",
+ "deadly",
+ "scary",
+ "death",
+ "pirate",
+ "evil"
+ ],
+ "skins": [{ "unified": "2620-fe0f", "native": "☠️" }],
+ "version": 1
+ },
+ "hankey": {
+ "id": "hankey",
+ "name": "Pile of Poo",
+ "keywords": ["hankey", "poop", "shit", "shitface", "fail", "turd"],
+ "skins": [{ "unified": "1f4a9", "native": "💩" }],
+ "version": 1
+ },
+ "clown_face": {
+ "id": "clown_face",
+ "name": "Clown Face",
+ "keywords": [],
+ "skins": [{ "unified": "1f921", "native": "🤡" }],
+ "version": 3
+ },
+ "japanese_ogre": {
+ "id": "japanese_ogre",
+ "name": "Ogre",
+ "keywords": [
+ "japanese",
+ "monster",
+ "red",
+ "mask",
+ "halloween",
+ "scary",
+ "creepy",
+ "devil",
+ "demon"
+ ],
+ "skins": [{ "unified": "1f479", "native": "👹" }],
+ "version": 1
+ },
+ "japanese_goblin": {
+ "id": "japanese_goblin",
+ "name": "Goblin",
+ "keywords": [
+ "japanese",
+ "red",
+ "evil",
+ "mask",
+ "monster",
+ "scary",
+ "creepy"
+ ],
+ "skins": [{ "unified": "1f47a", "native": "👺" }],
+ "version": 1
+ },
+ "ghost": {
+ "id": "ghost",
+ "name": "Ghost",
+ "keywords": ["halloween", "spooky", "scary"],
+ "skins": [{ "unified": "1f47b", "native": "👻" }],
+ "version": 1
+ },
+ "alien": {
+ "id": "alien",
+ "name": "Alien",
+ "keywords": ["UFO", "paul", "weird", "outer", "space"],
+ "skins": [{ "unified": "1f47d", "native": "👽" }],
+ "version": 1
+ },
+ "space_invader": {
+ "id": "space_invader",
+ "name": "Alien Monster",
+ "keywords": ["space", "invader", "game", "arcade", "play"],
+ "skins": [{ "unified": "1f47e", "native": "👾" }],
+ "version": 1
+ },
+ "robot_face": {
+ "id": "robot_face",
+ "name": "Robot",
+ "keywords": ["face", "computer", "machine", "bot"],
+ "skins": [{ "unified": "1f916", "native": "🤖" }],
+ "version": 1
+ },
+ "smiley_cat": {
+ "id": "smiley_cat",
+ "name": "Grinning Cat",
+ "keywords": ["smiley", "animal", "cats", "happy", "smile"],
+ "skins": [{ "unified": "1f63a", "native": "😺" }],
+ "version": 1
+ },
+ "smile_cat": {
+ "id": "smile_cat",
+ "name": "Grinning Cat with Smiling Eyes",
+ "keywords": ["smile", "animal", "cats"],
+ "skins": [{ "unified": "1f638", "native": "😸" }],
+ "version": 1
+ },
+ "joy_cat": {
+ "id": "joy_cat",
+ "name": "Cat with Tears of Joy",
+ "keywords": ["animal", "cats", "haha", "happy"],
+ "skins": [{ "unified": "1f639", "native": "😹" }],
+ "version": 1
+ },
+ "heart_eyes_cat": {
+ "id": "heart_eyes_cat",
+ "name": "Smiling Cat with Heart-Eyes",
+ "keywords": [
+ "heart",
+ "eyes",
+ "animal",
+ "love",
+ "like",
+ "affection",
+ "cats",
+ "valentines"
+ ],
+ "skins": [{ "unified": "1f63b", "native": "😻" }],
+ "version": 1
+ },
+ "smirk_cat": {
+ "id": "smirk_cat",
+ "name": "Cat with Wry Smile",
+ "keywords": ["smirk", "animal", "cats"],
+ "skins": [{ "unified": "1f63c", "native": "😼" }],
+ "version": 1
+ },
+ "kissing_cat": {
+ "id": "kissing_cat",
+ "name": "Kissing Cat",
+ "keywords": ["animal", "cats", "kiss"],
+ "skins": [{ "unified": "1f63d", "native": "😽" }],
+ "version": 1
+ },
+ "scream_cat": {
+ "id": "scream_cat",
+ "name": "Weary Cat",
+ "keywords": ["scream", "animal", "cats", "munch", "scared"],
+ "skins": [{ "unified": "1f640", "native": "🙀" }],
+ "version": 1
+ },
+ "crying_cat_face": {
+ "id": "crying_cat_face",
+ "name": "Crying Cat",
+ "keywords": [
+ "face",
+ "animal",
+ "tears",
+ "weep",
+ "sad",
+ "cats",
+ "upset",
+ "cry"
+ ],
+ "skins": [{ "unified": "1f63f", "native": "😿" }],
+ "version": 1
+ },
+ "pouting_cat": {
+ "id": "pouting_cat",
+ "name": "Pouting Cat",
+ "keywords": ["animal", "cats"],
+ "skins": [{ "unified": "1f63e", "native": "😾" }],
+ "version": 1
+ },
+ "see_no_evil": {
+ "id": "see_no_evil",
+ "name": "See-No-Evil Monkey",
+ "keywords": ["see", "no", "evil", "animal", "nature", "haha"],
+ "skins": [{ "unified": "1f648", "native": "🙈" }],
+ "version": 1
+ },
+ "hear_no_evil": {
+ "id": "hear_no_evil",
+ "name": "Hear-No-Evil Monkey",
+ "keywords": ["hear", "no", "evil", "animal", "nature"],
+ "skins": [{ "unified": "1f649", "native": "🙉" }],
+ "version": 1
+ },
+ "speak_no_evil": {
+ "id": "speak_no_evil",
+ "name": "Speak-No-Evil Monkey",
+ "keywords": ["speak", "no", "evil", "animal", "nature", "omg"],
+ "skins": [{ "unified": "1f64a", "native": "🙊" }],
+ "version": 1
+ },
+ "kiss": {
+ "id": "kiss",
+ "name": "Kiss Mark",
+ "keywords": ["face", "lips", "love", "like", "affection", "valentines"],
+ "skins": [{ "unified": "1f48b", "native": "💋" }],
+ "version": 1
+ },
+ "love_letter": {
+ "id": "love_letter",
+ "name": "Love Letter",
+ "keywords": ["email", "like", "affection", "envelope", "valentines"],
+ "skins": [{ "unified": "1f48c", "native": "💌" }],
+ "version": 1
+ },
+ "cupid": {
+ "id": "cupid",
+ "name": "Heart with Arrow",
+ "keywords": ["cupid", "love", "like", "affection", "valentines"],
+ "skins": [{ "unified": "1f498", "native": "💘" }],
+ "version": 1
+ },
+ "gift_heart": {
+ "id": "gift_heart",
+ "name": "Heart with Ribbon",
+ "keywords": ["gift", "love", "valentines"],
+ "skins": [{ "unified": "1f49d", "native": "💝" }],
+ "version": 1
+ },
+ "sparkling_heart": {
+ "id": "sparkling_heart",
+ "name": "Sparkling Heart",
+ "keywords": ["love", "like", "affection", "valentines"],
+ "skins": [{ "unified": "1f496", "native": "💖" }],
+ "version": 1
+ },
+ "heartpulse": {
+ "id": "heartpulse",
+ "name": "Growing Heart",
+ "keywords": [
+ "heartpulse",
+ "like",
+ "love",
+ "affection",
+ "valentines",
+ "pink"
+ ],
+ "skins": [{ "unified": "1f497", "native": "💗" }],
+ "version": 1
+ },
+ "heartbeat": {
+ "id": "heartbeat",
+ "name": "Beating Heart",
+ "keywords": [
+ "heartbeat",
+ "love",
+ "like",
+ "affection",
+ "valentines",
+ "pink"
+ ],
+ "skins": [{ "unified": "1f493", "native": "💓" }],
+ "version": 1
+ },
+ "revolving_hearts": {
+ "id": "revolving_hearts",
+ "name": "Revolving Hearts",
+ "keywords": ["love", "like", "affection", "valentines"],
+ "skins": [{ "unified": "1f49e", "native": "💞" }],
+ "version": 1
+ },
+ "two_hearts": {
+ "id": "two_hearts",
+ "name": "Two Hearts",
+ "keywords": ["love", "like", "affection", "valentines", "heart"],
+ "skins": [{ "unified": "1f495", "native": "💕" }],
+ "version": 1
+ },
+ "heart_decoration": {
+ "id": "heart_decoration",
+ "name": "Heart Decoration",
+ "keywords": ["purple", "square", "love", "like"],
+ "skins": [{ "unified": "1f49f", "native": "💟" }],
+ "version": 1
+ },
+ "heavy_heart_exclamation_mark_ornament": {
+ "id": "heavy_heart_exclamation_mark_ornament",
+ "name": "Heart Exclamation",
+ "keywords": ["heavy", "mark", "ornament", "decoration", "love"],
+ "skins": [{ "unified": "2763-fe0f", "native": "❣️" }],
+ "version": 1
+ },
+ "broken_heart": {
+ "id": "broken_heart",
+ "name": "Broken Heart",
+ "emoticons": ["
-
+
)}
-
+
{showTime && (
)}
-
+
@@ -184,13 +186,18 @@ const ChatLine = memo(
style={[
py[1],
px[2],
- { position: "relative", borderRadius: 8 },
+ {
+ position: "relative",
+ borderRadius: 8,
+ minWidth: 0,
+ maxWidth: "100%",
+ },
isHovered && bg.gray[950],
]}
onPointerEnter={handleHoverIn}
onPointerLeave={handleHoverOut}
>
-
+
+
Loading chaat...
);
return (
-
+
+
+
+ Chat
+
+
+
+
+ {messagesPerMinute} msg/min
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/js/components/src/components/dashboard/header.tsx b/js/components/src/components/dashboard/header.tsx
new file mode 100644
index 00000000..4a25882d
--- /dev/null
+++ b/js/components/src/components/dashboard/header.tsx
@@ -0,0 +1,170 @@
+import { Car, Radio, Users } from "lucide-react-native";
+import { Text, View } from "react-native";
+import * as zero from "../../ui";
+
+const { bg, r, borders, px, py, text, layout, gap } = zero;
+
+interface MetricItemProps {
+ icon: any;
+ label: string;
+ value: string;
+ status?: "good" | "warning" | "error";
+}
+
+function MetricItem({ icon: Icon, label, value, status }: MetricItemProps) {
+ const statusColors = {
+ good: text.green[400],
+ warning: text.yellow[400],
+ error: text.red[400],
+ };
+
+ const statusColor = status ? statusColors[status] : text.gray[300];
+
+ return (
+
+
+
+
+ {label}
+
+
+ {value}
+
+
+
+ );
+}
+
+interface StatusIndicatorProps {
+ status: "excellent" | "good" | "poor" | "offline";
+ isLive: boolean;
+}
+
+function StatusIndicator({ status, isLive }: StatusIndicatorProps) {
+ const getStatusColor = () => {
+ if (!isLive) return bg.gray[500];
+ switch (status) {
+ case "excellent":
+ return bg.green[500];
+ case "good":
+ return bg.yellow[500];
+ case "poor":
+ return bg.orange[500];
+ case "offline":
+ return bg.red[500];
+ default:
+ return bg.gray[500];
+ }
+ };
+
+ const getStatusText = () => {
+ if (!isLive) return "OFFLINE";
+ switch (status) {
+ case "excellent":
+ return "EXCELLENT";
+ case "good":
+ return "GOOD";
+ case "poor":
+ return "POOR";
+ case "offline":
+ return "OFFLINE";
+ default:
+ return "UNKNOWN";
+ }
+ };
+
+ return (
+
+
+
+ {getStatusText()}
+
+
+ );
+}
+
+interface HeaderProps {
+ isLive: boolean;
+ streamTitle?: string;
+ viewers?: number;
+ uptime?: string;
+ bitrate?: string;
+ timeBetweenSegments?: number;
+ connectionStatus?: "excellent" | "good" | "poor" | "offline";
+}
+
+export default function Header({
+ isLive,
+ streamTitle = "Live Stream",
+ viewers = 0,
+ uptime = "00:00:00",
+ bitrate = "0 mbps",
+ timeBetweenSegments = 0,
+ connectionStatus = "offline",
+}: HeaderProps) {
+ const getConnectionQuality = (): "good" | "warning" | "error" => {
+ if (timeBetweenSegments <= 1500) return "good";
+ if (timeBetweenSegments <= 3000) return "warning";
+ return "error";
+ };
+
+ return (
+
+ {/* Left side - Stream title and status */}
+
+
+
+ {streamTitle}
+
+
+
+
+
+ {/* Right side - Stream metrics */}
+
+ {isLive && (
+ <>
+
+
+
+ )}
+
+ {!isLive && (
+
+
+
+ Stream offline
+
+
+ )}
+
+
+ );
+}
diff --git a/js/components/src/components/dashboard/index.tsx b/js/components/src/components/dashboard/index.tsx
new file mode 100644
index 00000000..49c1f920
--- /dev/null
+++ b/js/components/src/components/dashboard/index.tsx
@@ -0,0 +1,5 @@
+export { default as ChatPanel } from "./chat-panel";
+export { default as Header } from "./header";
+export { default as InformationWidget } from "./information-widget";
+export { default as ModActions } from "./mod-actions";
+export { default as Problems } from "./problems";
diff --git a/js/components/src/components/dashboard/information-widget.tsx b/js/components/src/components/dashboard/information-widget.tsx
new file mode 100644
index 00000000..f5cb03a8
--- /dev/null
+++ b/js/components/src/components/dashboard/information-widget.tsx
@@ -0,0 +1,526 @@
+import {
+ Car,
+ ChevronDown,
+ ChevronUp,
+ Eye,
+ EyeClosed,
+ Monitor,
+ Signal,
+ Video,
+ Zap,
+} from "lucide-react-native";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { LayoutChangeEvent, Text, TouchableOpacity, View } from "react-native";
+import Svg, { Path, Line as SvgLine, Text as SvgText } from "react-native-svg";
+import {
+ useLivestreamStore,
+ useSegment,
+ useViewers,
+} from "../../livestream-store";
+import * as zero from "../../ui";
+import { InfoBox, InfoRow } from "../ui";
+
+interface InformationWidgetProps {
+ embedMode?: boolean;
+ wideMode?: boolean;
+ showChart?: boolean;
+}
+
+const BITRATE_HISTORY_LENGTH = 30;
+
+const { bg, r, borders, px, py, text, layout, gap, flex, p } = zero;
+
+export default function InformationWidget({
+ embedMode = false,
+ wideMode, // Optional override
+ showChart = true,
+}: InformationWidgetProps) {
+ const [bitrateHistory, setBitrateHistory] = useState(
+ Array.from({ length: BITRATE_HISTORY_LENGTH }, () => 0),
+ );
+ const [showViewers, setShowViewers] = useState(false);
+ const [componentWidth, setComponentWidth] = useState(220);
+ const [componentHeight, setComponentHeight] = useState(400);
+ const [streamStartTime, setStreamStartTime] = useState(null);
+ const [layoutMeasured, setLayoutMeasured] = useState(false);
+ const isWideMode =
+ wideMode !== undefined ? wideMode : layoutMeasured && componentWidth > 400;
+
+ const isCompactHeight = layoutMeasured && componentHeight < 350;
+
+ const seg = useSegment();
+ const livestream = useLivestreamStore((x) => x.livestream);
+ const viewers = useViewers();
+
+ const getBitrate = useCallback((): number => {
+ if (!seg?.size || !seg?.duration) return 0;
+ const kbps =
+ (seg.size * 8) / ((seg.duration || 1000000000) / 1000000000) / 1000;
+ return kbps;
+ }, [seg?.size, seg?.duration]);
+
+ const getMediaInfo = useMemo(() => {
+ const videoTrack = seg?.video?.[0];
+ const audioTrack = seg?.audio?.[0];
+ return {
+ resolution:
+ videoTrack?.width && videoTrack?.height
+ ? `${videoTrack.width}x${videoTrack.height}`
+ : "Unknown",
+ fps: videoTrack?.framerate
+ ? `${(videoTrack.framerate.num / videoTrack.framerate.den).toFixed(
+ 2,
+ )} FPS`
+ : "Unknown",
+ videoCodec: videoTrack?.codec
+ ? videoTrack.codec.toUpperCase()
+ : "Unknown",
+ };
+ }, [seg?.video, seg?.audio]);
+
+ const currentBitrate = getBitrate();
+
+ useEffect(() => {
+ setBitrateHistory((prev) => [...prev.slice(1), currentBitrate]);
+ }, [currentBitrate]);
+
+ useEffect(() => {
+ if (seg?.startTime && !streamStartTime) {
+ setStreamStartTime(new Date(seg.startTime));
+ }
+ }, [seg?.startTime, streamStartTime]);
+
+ const getBitrateStatus = (): "good" | "warning" | "error" | "neutral" => {
+ if (currentBitrate > 2000) return "good";
+ if (currentBitrate > 1000) return "warning";
+ if (currentBitrate > 0) return "error";
+ return "neutral";
+ };
+
+ const getConnectionStatus = (): "good" | "warning" | "error" | "neutral" => {
+ if (!seg) return "error";
+ if (currentBitrate > 1500) return "good";
+ if (currentBitrate > 500) return "warning";
+ return "error";
+ };
+
+ const avgBitrate =
+ bitrateHistory.length > 0
+ ? bitrateHistory.reduce((a, b) => a + b, 0) / bitrateHistory.length
+ : 0;
+ const peakBitrate = Math.max(...bitrateHistory, 0);
+ const uptimeMinutes = streamStartTime
+ ? Math.floor((Date.now() - streamStartTime.getTime()) / 60000)
+ : 0;
+ const estimatedLatency = seg?.duration
+ ? Math.floor((seg.duration / 1000000000) * 2)
+ : 0;
+
+ const displayBitrate = `${(currentBitrate / 1000).toFixed(2)} Mbps`;
+ const displayResolution = getMediaInfo.resolution;
+ const displayFps = getMediaInfo.fps;
+ const streamTitle = livestream?.record?.title || "Untitled Stream";
+ const viewerCount = viewers ?? 0;
+
+ const handleLayout = useCallback((event: LayoutChangeEvent) => {
+ const { width, height } = event.nativeEvent.layout;
+ console.log("InformationWidget onLayout - size:", `${width}x${height}`);
+ if (width > 0 && height > 0) {
+ setComponentWidth(width);
+ setComponentHeight(height);
+ setLayoutMeasured(true);
+ }
+ }, []);
+
+ return (
+
+
+
+
+ Stream Health
+
+
+
+ setShowViewers(!showViewers)}
+ style={[
+ layout.flex.column,
+ layout.flex.alignCenter,
+ gap.all[1],
+ { minWidth: 120 },
+ ]}
+ >
+
+ {showViewers ? (
+
+ ) : (
+
+ )}
+
+ {showViewers ? `${viewerCount}` : "..."} viewer
+ {showViewers && viewerCount !== 1 ? "s" : ""}
+
+
+
+
+
+ {isWideMode ? (
+
+
+
+
+
+
+
+ {showChart && (
+
+ {!isCompactHeight && (
+
+
+ Live Performance
+
+
+
+
+ AVG
+
+
+ {avgBitrate > 0
+ ? `${(avgBitrate / 1000).toFixed(1)}M`
+ : "0M"}
+
+
+
+
+ PEAK
+
+
+ {peakBitrate > 0
+ ? `${(peakBitrate / 1000).toFixed(1)}M`
+ : "0M"}
+
+
+
+
+ CAPTURED
+
+
+ {uptimeMinutes > 60
+ ? `${Math.floor(uptimeMinutes / 60)}h ${uptimeMinutes % 60}m`
+ : `${uptimeMinutes}m`}
+
+
+
+
+ )}
+
+
+
+ )}
+
+ ) : (
+
+ {!isCompactHeight && (
+ setShowViewers(!showViewers)}
+ style={[
+ layout.flex.row,
+ layout.flex.spaceBetween,
+ layout.flex.alignCenter,
+ py[2],
+ ]}
+ >
+
+
+
+ Viewers
+
+
+
+
+ {showViewers ? `${viewerCount} watching` : "•••"}
+
+ {showViewers ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+ {showChart && (
+
+ {!isCompactHeight && (
+
+
+ Performance
+
+
+ {avgBitrate > 0
+ ? `AVG ${(avgBitrate / 1000).toFixed(1)}M`
+ : "No data"}
+
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
+
+function BitrateChart({
+ data,
+ width,
+ height,
+}: {
+ data: number[];
+ width: number;
+ height: number;
+}) {
+ const maxDataValue = Math.max(...data, 1);
+ const minDataValue = Math.min(...data);
+ const getSmartRange = (max: number) => {
+ if (max <= 1000) return { min: 0, max: 1000, step: 500 };
+ if (max <= 2000) return { min: 1000, max: 2000, step: 1000 };
+ if (max <= 7000) return { min: 4000, max: 7000, step: 1500 };
+ if (max <= 10000) return { min: 4000, max: 10000, step: 5000 };
+
+ const roundedMax = Math.ceil(max / 5000) * 5000;
+ return { min: 0, max: roundedMax, step: roundedMax / 2 };
+ };
+
+ const { min: minValue, max: maxValue, step } = getSmartRange(maxDataValue);
+ const range = maxValue - minValue;
+
+ const chartWidth = width - 40;
+ const chartStartX = 40;
+ const verticalPadding = 10;
+ const chartHeight = height - verticalPadding * 2;
+
+ const points = data
+ .map((value, index) => {
+ const x = chartStartX + (index / (data.length - 1)) * chartWidth;
+ // Clamp value to chart range and plot against the smart scale
+ const clampedValue = Math.max(minValue, Math.min(maxValue, value));
+ const y =
+ verticalPadding +
+ chartHeight -
+ ((clampedValue - minValue) / range) * chartHeight;
+ return `${x},${y}`;
+ })
+ .join(" ");
+
+ const pathData = `M ${points.replace(/ /g, " L ")}`;
+ const ticks = [
+ { value: minValue, y: height - verticalPadding },
+ { value: minValue + step, y: height / 2 },
+ { value: maxValue, y: verticalPadding },
+ ];
+
+ return (
+
+
+
+ );
+}
diff --git a/js/components/src/components/dashboard/mod-actions.tsx b/js/components/src/components/dashboard/mod-actions.tsx
new file mode 100644
index 00000000..743155c0
--- /dev/null
+++ b/js/components/src/components/dashboard/mod-actions.tsx
@@ -0,0 +1,133 @@
+import { AlertTriangle, Eye, MessageCircle, Shield } from "lucide-react-native";
+import { Pressable, Text, View } from "react-native";
+import * as zero from "../../ui";
+
+const { flex, bg, r, borders, p, text, layout, gap, mb } = zero;
+
+interface ModActionItem {
+ icon: any;
+ label: string;
+ color: string;
+ action: () => void;
+}
+
+interface ModActionsProps {
+ isLive: boolean;
+ isConnected: boolean;
+ messageCount?: number;
+ actions?: ModActionItem[];
+}
+
+const defaultActions: ModActionItem[] = [
+ {
+ icon: Shield,
+ label: "Ban User",
+ color: "red",
+ action: () => console.log("Ban user action"),
+ },
+ {
+ icon: MessageCircle,
+ label: "Timeout",
+ color: "yellow",
+ action: () => console.log("Timeout user action"),
+ },
+ {
+ icon: Eye,
+ label: "Monitor",
+ color: "blue",
+ action: () => console.log("Monitor stream action"),
+ },
+ {
+ icon: AlertTriangle,
+ label: "Report",
+ color: "orange",
+ action: () => console.log("Report content action"),
+ },
+];
+
+export default function ModActions({
+ isLive,
+ isConnected,
+ messageCount = 0,
+ actions = defaultActions,
+}: ModActionsProps) {
+ const canModerate = isLive && isConnected;
+
+ return (
+
+
+
+ Moderation
+
+
+ {messageCount} messages
+
+
+
+
+ {actions.map((action, index) => (
+
+
+
+ {action.label}
+
+
+ ))}
+
+
+ {!canModerate && (
+
+ {!isLive
+ ? "Moderation tools available when live"
+ : !isConnected
+ ? "Waiting for stream connection..."
+ : "Moderation tools unavailable"}
+
+ )}
+
+ );
+}
diff --git a/js/components/src/components/dashboard/problems.tsx b/js/components/src/components/dashboard/problems.tsx
new file mode 100644
index 00000000..2843a916
--- /dev/null
+++ b/js/components/src/components/dashboard/problems.tsx
@@ -0,0 +1,151 @@
+import { ExternalLink } from "lucide-react-native";
+import { useState } from "react";
+import { Linking, Pressable, Text, View } from "react-native";
+import { useLivestreamStore } from "../../livestream-store";
+import { LivestreamProblem } from "../../livestream-store/livestream-state";
+import * as zero from "../../ui";
+
+const { bg, r, borders, p, text, layout, gap } = zero;
+
+const Problems = ({
+ probs,
+ onIgnore,
+}: {
+ probs: LivestreamProblem[];
+ onIgnore: () => void;
+}) => {
+ return (
+
+
+
+ Optimize Your Stream
+
+
+ We've found a few things that could improve your stream's reliability.
+
+
+ {probs.map((p) => (
+
+
+
+ {p.severity}
+
+
+ {p.code}
+
+ {p.message}
+
+ {p.link && (
+ p.link && Linking.openURL(p.link)}>
+
+
+ Learn More
+
+
+
+
+ )}
+
+
+
+ ))}
+
+
+ Ignore
+
+
+ );
+};
+
+export const ProblemsWrapper = ({
+ children,
+}: {
+ children: React.ReactElement;
+}) => {
+ const problems = useLivestreamStore((x) => x.problems);
+ const [dismiss, setDismiss] = useState(false);
+
+ return (
+
+ {children}
+ {problems.length > 0 && !dismiss && (
+
+
+ setDismiss(true)} />
+
+
+ )}
+
+ );
+};
+
+export default Problems;
diff --git a/js/components/src/components/ui/button.tsx b/js/components/src/components/ui/button.tsx
index 08e336ba..84382ae4 100644
--- a/js/components/src/components/ui/button.tsx
+++ b/js/components/src/components/ui/button.tsx
@@ -231,8 +231,8 @@ function createStyles(theme: any) {
},
pillButton: {
- paddingHorizontal: theme.spacing[3],
- paddingVertical: theme.spacing[2],
+ paddingHorizontal: theme.spacing[2],
+ paddingVertical: theme.spacing[1],
borderRadius: tokens.borderRadius.full,
minHeight: tokens.touchTargets.minimum / 2,
},
diff --git a/js/components/src/components/ui/index.ts b/js/components/src/components/ui/index.ts
index 3e230054..7510e764 100644
--- a/js/components/src/components/ui/index.ts
+++ b/js/components/src/components/ui/index.ts
@@ -9,6 +9,8 @@ export * from "./button";
export * from "./dialog";
export * from "./dropdown";
export * from "./icons";
+export * from "./info-box";
+export * from "./info-row";
export * from "./input";
export * from "./loader";
export * from "./resizeable";
diff --git a/js/components/src/components/ui/info-box.tsx b/js/components/src/components/ui/info-box.tsx
new file mode 100644
index 00000000..cbbcbcb5
--- /dev/null
+++ b/js/components/src/components/ui/info-box.tsx
@@ -0,0 +1,60 @@
+import { Text, View } from "react-native";
+import * as zero from "../../ui";
+
+const { bg, r, p, text, layout, gap, flex } = zero;
+
+interface InfoBoxProps {
+ icon: any;
+ label: string;
+ value: string;
+ status?: "good" | "warning" | "error" | "neutral";
+}
+
+export function InfoBox({
+ icon: Icon,
+ label,
+ value,
+ status = "neutral",
+}: InfoBoxProps) {
+ const statusColors = {
+ good: text.green[400],
+ warning: text.yellow[400],
+ error: text.red[400],
+ neutral: text.white,
+ };
+
+ const statusColor = statusColors[status];
+
+ return (
+
+
+
+ {label}
+
+
+
+
+
+ {value}
+
+
+
+ );
+}
diff --git a/js/components/src/components/ui/info-row.tsx b/js/components/src/components/ui/info-row.tsx
new file mode 100644
index 00000000..0d3c863f
--- /dev/null
+++ b/js/components/src/components/ui/info-row.tsx
@@ -0,0 +1,48 @@
+import { Text, View } from "react-native";
+import * as zero from "../../ui";
+
+const { text, layout, py, gap } = zero;
+
+interface InfoRowProps {
+ icon: any;
+ label: string;
+ value: string;
+ status?: "good" | "warning" | "error" | "neutral";
+}
+
+export function InfoRow({
+ icon: Icon,
+ label,
+ value,
+ status = "neutral",
+}: InfoRowProps) {
+ const statusColors = {
+ good: text.green[400],
+ warning: text.yellow[400],
+ error: text.red[400],
+ neutral: text.white,
+ };
+
+ const statusColor = statusColors[status];
+
+ return (
+
+
+
+
+ {label}
+
+
+
+ {value}
+
+
+ );
+}
diff --git a/js/components/src/components/ui/toast.tsx b/js/components/src/components/ui/toast.tsx
index d6c2dbc8..3f00b249 100644
--- a/js/components/src/components/ui/toast.tsx
+++ b/js/components/src/components/ui/toast.tsx
@@ -13,6 +13,116 @@ import {
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTheme } from "../../lib/theme/theme";
+import { useCallback } from "react";
+
+type ToastController = {
+ show: (
+ title: string,
+ description?: string,
+ options?: {
+ duration?: number;
+ actionLabel?: string;
+ onAction?: () => void;
+ },
+ ) => void;
+ hide: () => void;
+};
+
+type UseToastReturn = {
+ open: boolean;
+ title: string;
+ description?: string;
+ actionLabel?: string;
+ onAction?: () => void;
+ duration?: number;
+ setOpen: (open: boolean) => void;
+ setTitle: (title: string) => void;
+ setDescription: (description: string) => void;
+ setActionLabel: (label: string) => void;
+ setOnAction: (cb?: () => void) => void;
+ setDuration: (duration: number) => void;
+ toastController: ToastController;
+};
+
+/**
+ * useToast - a hook to manage Toast state and provide a toastController.
+ * Returns a ready-to-render ToastComponent.
+ */
+export function useToast(
+ initial: {
+ title?: string;
+ description?: string;
+ duration?: number;
+ actionLabel?: string;
+ onAction?: () => void;
+ } = {},
+) {
+ const [open, setOpen] = useState(false);
+ const [title, setTitle] = useState(initial.title ?? "");
+ const [description, setDescription] = useState(initial.description ?? "");
+ const [duration, setDuration] = useState(initial.duration ?? 3);
+ const [actionLabel, setActionLabel] = useState(
+ initial.actionLabel ?? "Action",
+ );
+ const [onAction, setOnAction] = useState<(() => void) | undefined>(
+ initial.onAction,
+ );
+
+ const show = useCallback(
+ (
+ toastTitle: string,
+ toastDescription?: string,
+ options?: {
+ duration?: number;
+ actionLabel?: string;
+ onAction?: () => void;
+ },
+ ) => {
+ setTitle(toastTitle);
+ setDescription(toastDescription ?? "");
+ setDuration(options?.duration ?? 3);
+ setActionLabel(options?.actionLabel ?? "Action");
+ setOnAction(options?.onAction);
+ setOpen(true);
+ },
+ [],
+ );
+
+ const hide = useCallback(() => {
+ setOpen(false);
+ }, []);
+
+ // Ready-to-render Toast component
+ const ToastComponent = (
+
+ );
+
+ return {
+ open,
+ title,
+ description,
+ actionLabel,
+ onAction,
+ duration,
+ setOpen,
+ setTitle,
+ setDescription,
+ setActionLabel,
+ setOnAction,
+ setDuration,
+ toastController: { show, hide },
+ ToastComponent,
+ };
+}
+
type ToastProps = {
open: boolean;
onOpenChange: (open: boolean) => void;
diff --git a/js/components/src/index.tsx b/js/components/src/index.tsx
index 07bb5929..f591312f 100644
--- a/js/components/src/index.tsx
+++ b/js/components/src/index.tsx
@@ -34,3 +34,6 @@ export * from "./lib/system-messages";
export * from "./components/share/sharesheet";
export * from "./components/keep-awake";
+
+// Dashboard components
+export * as Dashboard from "./components/dashboard";
diff --git a/js/components/src/lib/theme/atoms.ts b/js/components/src/lib/theme/atoms.ts
index 02d13262..41a39b80 100644
--- a/js/components/src/lib/theme/atoms.ts
+++ b/js/components/src/lib/theme/atoms.ts
@@ -107,15 +107,53 @@ export const layout = {
spaceEvenly: {
justifyContent: "space-evenly" as const,
},
+ direction: pairify(
+ {
+ row: "row",
+ column: "column",
+ "row-reverse": "row-reverse",
+ "column-reverse": "column-reverse",
+ },
+ "flexDirection",
+ ),
+ justify: pairify(
+ {
+ start: "flex-start",
+ end: "flex-end",
+ center: "center",
+ between: "space-between",
+ around: "space-around",
+ evenly: "space-evenly",
+ },
+ "justifyContent",
+ ),
+ align: pairify(
+ {
+ start: "flex-start",
+ end: "flex-end",
+ center: "center",
+ stretch: "stretch",
+ baseline: "baseline",
+ },
+ "alignItems",
+ ),
+ wrap: pairify(
+ {
+ wrap: "wrap",
+ nowrap: "nowrap",
+ reverse: "wrap-reverse",
+ },
+ "flexWrap",
+ ),
},
- position: {
- absolute: {
- position: "absolute" as const,
- },
- relative: {
- position: "relative" as const,
+ position: pairify(
+ {
+ absolute: "absolute",
+ relative: "relative",
+ static: "static",
},
- },
+ "position",
+ ),
};
// Enhanced border utilities with pairified colors and widths
@@ -129,11 +167,14 @@ export const borders = {
"borderWidth",
),
- style: {
- solid: { borderStyle: "solid" as const },
- dashed: { borderStyle: "dashed" as const },
- dotted: { borderStyle: "dotted" as const },
- },
+ style: pairify(
+ {
+ solid: "solid",
+ dashed: "dashed",
+ dotted: "dotted",
+ },
+ "borderStyle",
+ ),
// Pairified color borders
color: pairify(rawColors, "borderColor"),
@@ -347,20 +388,26 @@ export const zIndex = pairify(
);
// Overflow utilities
-export const overflow = {
- visible: { overflow: "visible" as const },
- hidden: { overflow: "hidden" as const },
- scroll: { overflow: "scroll" as const },
-};
+export const overflow = pairify(
+ {
+ visible: "visible",
+ hidden: "hidden",
+ scroll: "scroll",
+ },
+ "overflow",
+);
// Text alignment utilities
-export const textAlign = {
- left: { textAlign: "left" as const },
- center: { textAlign: "center" as const },
- right: { textAlign: "right" as const },
- justify: { textAlign: "justify" as const },
- auto: { textAlign: "auto" as const },
-};
+export const textAlign = pairify(
+ {
+ left: "left",
+ center: "center",
+ right: "right",
+ justify: "justify",
+ auto: "auto",
+ },
+ "textAlign",
+);
// Font weight utilities
export const fontWeight = pairify(
@@ -433,30 +480,37 @@ export const letterSpacing = pairify(
);
// Text transform utilities
-export const textTransform = {
- uppercase: { textTransform: "uppercase" as const },
- lowercase: { textTransform: "lowercase" as const },
- capitalize: { textTransform: "capitalize" as const },
- none: { textTransform: "none" as const },
-};
+export const textTransform = pairify(
+ {
+ uppercase: "uppercase",
+ lowercase: "lowercase",
+ capitalize: "capitalize",
+ none: "none",
+ },
+ "textTransform",
+);
// Text decoration utilities
-export const textDecoration = {
- none: { textDecorationLine: "none" as const },
- underline: { textDecorationLine: "underline" as const },
- lineThrough: { textDecorationLine: "line-through" as const },
- underlineLineThrough: {
- textDecorationLine: "underline line-through" as const,
+export const textDecoration = pairify(
+ {
+ none: "none",
+ underline: "underline",
+ lineThrough: "line-through",
+ underlineLineThrough: "underline line-through",
},
-};
+ "textDecorationLine",
+);
// Text align vertical utilities (React Native specific)
-export const textAlignVertical = {
- auto: { textAlignVertical: "auto" as const },
- top: { textAlignVertical: "top" as const },
- bottom: { textAlignVertical: "bottom" as const },
- center: { textAlignVertical: "center" as const },
-};
+export const textAlignVertical = pairify(
+ {
+ auto: "auto",
+ top: "top",
+ bottom: "bottom",
+ center: "center",
+ },
+ "textAlignVertical",
+);
// Transform utilities
export const transforms = {
diff --git a/js/components/src/lib/theme/tokens.ts b/js/components/src/lib/theme/tokens.ts
index 0e88eaa1..891549f0 100644
--- a/js/components/src/lib/theme/tokens.ts
+++ b/js/components/src/lib/theme/tokens.ts
@@ -19,19 +19,292 @@ export const colors = {
950: "#172554",
},
- // Grayscale
+ // Tailwind default palettes:
+ slate: {
+ 50: "#f8fafc",
+ 100: "#f1f5f9",
+ 200: "#e2e8f0",
+ 300: "#cbd5e1",
+ 400: "#94a3b8",
+ 500: "#64748b",
+ 600: "#475569",
+ 700: "#334155",
+ 800: "#1e293b",
+ 900: "#0f172a",
+ 950: "#020617",
+ },
gray: {
+ 50: "#f9fafb",
+ 100: "#f3f4f6",
+ 200: "#e5e7eb",
+ 300: "#d1d5db",
+ 400: "#9ca3af",
+ 500: "#6b7280",
+ 600: "#4b5563",
+ 700: "#374151",
+ 800: "#1f2937",
+ 900: "#111827",
+ 950: "#030712",
+ },
+ zinc: {
50: "#fafafa",
- 100: "#f5f5f5",
- 200: "#e5e5e5",
- 300: "#d4d4d4",
- 400: "#a3a3a3",
- 500: "#737373",
- 600: "#525252",
- 700: "#404040",
- 800: "#262626",
- 900: "#171717",
- 950: "#0d0d0d",
+ 100: "#f4f4f5",
+ 200: "#e4e4e7",
+ 300: "#d4d4d8",
+ 400: "#a1a1aa",
+ 500: "#71717a",
+ 600: "#52525b",
+ 700: "#3f3f46",
+ 800: "#27272a",
+ 900: "#18181b",
+ 950: "#09090b",
+ },
+ neutral: {
+ 50: "#fafaf9",
+ 100: "#f5f5f4",
+ 200: "#e7e5e4",
+ 300: "#d6d3d1",
+ 400: "#a8a29e",
+ 500: "#78716c",
+ 600: "#57534e",
+ 700: "#44403c",
+ 800: "#292524",
+ 900: "#1c1917",
+ 950: "#0c0a09",
+ },
+ stone: {
+ 50: "#fafaf9",
+ 100: "#f5f5f4",
+ 200: "#e7e5e4",
+ 300: "#d6d3d1",
+ 400: "#a8a29e",
+ 500: "#78716c",
+ 600: "#57534e",
+ 700: "#44403c",
+ 800: "#292524",
+ 900: "#1c1917",
+ 950: "#0c0a09",
+ },
+ red: {
+ 50: "#fef2f2",
+ 100: "#fee2e2",
+ 200: "#fecaca",
+ 300: "#fca5a5",
+ 400: "#f87171",
+ 500: "#ef4444",
+ 600: "#dc2626",
+ 700: "#b91c1c",
+ 800: "#991b1b",
+ 900: "#7f1d1d",
+ 950: "#450a0a",
+ },
+ orange: {
+ 50: "#fff7ed",
+ 100: "#ffedd5",
+ 200: "#fed7aa",
+ 300: "#fdba74",
+ 400: "#fb923c",
+ 500: "#f97316",
+ 600: "#ea580c",
+ 700: "#c2410c",
+ 800: "#9a3412",
+ 900: "#7c2d12",
+ 950: "#431407",
+ },
+ amber: {
+ 50: "#fffbeb",
+ 100: "#fef3c7",
+ 200: "#fde68a",
+ 300: "#fcd34d",
+ 400: "#fbbf24",
+ 500: "#f59e0b",
+ 600: "#d97706",
+ 700: "#b45309",
+ 800: "#92400e",
+ 900: "#78350f",
+ 950: "#451a03",
+ },
+ yellow: {
+ 50: "#fefce8",
+ 100: "#fef9c3",
+ 200: "#fef08a",
+ 300: "#fde047",
+ 400: "#facc15",
+ 500: "#eab308",
+ 600: "#ca8a04",
+ 700: "#a16207",
+ 800: "#854d0e",
+ 900: "#713f12",
+ 950: "#422006",
+ },
+ lime: {
+ 50: "#f7fee7",
+ 100: "#ecfccb",
+ 200: "#d9f99d",
+ 300: "#bef264",
+ 400: "#a3e635",
+ 500: "#84cc16",
+ 600: "#65a30d",
+ 700: "#4d7c0f",
+ 800: "#3f6212",
+ 900: "#365314",
+ 950: "#1a2e05",
+ },
+ green: {
+ 50: "#f0fdf4",
+ 100: "#dcfce7",
+ 200: "#bbf7d0",
+ 300: "#86efac",
+ 400: "#4ade80",
+ 500: "#22c55e",
+ 600: "#16a34a",
+ 700: "#15803d",
+ 800: "#166534",
+ 900: "#14532d",
+ 950: "#052e16",
+ },
+ emerald: {
+ 50: "#ecfdf5",
+ 100: "#d1fae5",
+ 200: "#a7f3d0",
+ 300: "#6ee7b7",
+ 400: "#34d399",
+ 500: "#10b981",
+ 600: "#059669",
+ 700: "#047857",
+ 800: "#065f46",
+ 900: "#064e3b",
+ 950: "#022c22",
+ },
+ teal: {
+ 50: "#f0fdfa",
+ 100: "#ccfbf1",
+ 200: "#99f6e4",
+ 300: "#5eead4",
+ 400: "#2dd4bf",
+ 500: "#14b8a6",
+ 600: "#0d9488",
+ 700: "#0f766e",
+ 800: "#115e59",
+ 900: "#134e4a",
+ 950: "#042f2e",
+ },
+ cyan: {
+ 50: "#ecfeff",
+ 100: "#cffafe",
+ 200: "#a5f3fc",
+ 300: "#67e8f9",
+ 400: "#22d3ee",
+ 500: "#06b6d4",
+ 600: "#0891b2",
+ 700: "#0e7490",
+ 800: "#155e75",
+ 900: "#164e63",
+ 950: "#083344",
+ },
+ sky: {
+ 50: "#f0f9ff",
+ 100: "#e0f2fe",
+ 200: "#bae6fd",
+ 300: "#7dd3fc",
+ 400: "#38bdf8",
+ 500: "#0ea5e9",
+ 600: "#0284c7",
+ 700: "#0369a1",
+ 800: "#075985",
+ 900: "#0c4a6e",
+ 950: "#082f49",
+ },
+ blue: {
+ 50: "#eff6ff",
+ 100: "#dbeafe",
+ 200: "#bfdbfe",
+ 300: "#93c5fd",
+ 400: "#60a5fa",
+ 500: "#3b82f6",
+ 600: "#2563eb",
+ 700: "#1d4ed8",
+ 800: "#1e40af",
+ 900: "#1e3a8a",
+ 950: "#172554",
+ },
+ indigo: {
+ 50: "#eef2ff",
+ 100: "#e0e7ff",
+ 200: "#c7d2fe",
+ 300: "#a5b4fc",
+ 400: "#818cf8",
+ 500: "#6366f1",
+ 600: "#4f46e5",
+ 700: "#4338ca",
+ 800: "#3730a3",
+ 900: "#312e81",
+ 950: "#1e1b4b",
+ },
+ violet: {
+ 50: "#f5f3ff",
+ 100: "#ede9fe",
+ 200: "#ddd6fe",
+ 300: "#c4b5fd",
+ 400: "#a78bfa",
+ 500: "#8b5cf6",
+ 600: "#7c3aed",
+ 700: "#6d28d9",
+ 800: "#5b21b6",
+ 900: "#4c1d95",
+ 950: "#2e1065",
+ },
+ purple: {
+ 50: "#faf5ff",
+ 100: "#f3e8ff",
+ 200: "#e9d5ff",
+ 300: "#d8b4fe",
+ 400: "#c084fc",
+ 500: "#a855f7",
+ 600: "#9333ea",
+ 700: "#7e22ce",
+ 800: "#6b21a8",
+ 900: "#581c87",
+ 950: "#3b0764",
+ },
+ fuchsia: {
+ 50: "#fdf4ff",
+ 100: "#fae8ff",
+ 200: "#f5d0fe",
+ 300: "#f0abfc",
+ 400: "#e879f9",
+ 500: "#d946ef",
+ 600: "#c026d3",
+ 700: "#a21caf",
+ 800: "#86198f",
+ 900: "#701a75",
+ 950: "#4a044e",
+ },
+ pink: {
+ 50: "#fdf2f8",
+ 100: "#fce7f3",
+ 200: "#fbcfe8",
+ 300: "#f9a8d4",
+ 400: "#f472b6",
+ 500: "#ec4899",
+ 600: "#db2777",
+ 700: "#be185d",
+ 800: "#9d174d",
+ 900: "#831843",
+ 950: "#500724",
+ },
+ rose: {
+ 50: "#fff1f2",
+ 100: "#ffe4e6",
+ 200: "#fecdd3",
+ 300: "#fda4af",
+ 400: "#fb7185",
+ 500: "#f43f5e",
+ 600: "#e11d48",
+ 700: "#be123c",
+ 800: "#9f1239",
+ 900: "#881337",
+ 950: "#4c0519",
},
// Semantic colors
@@ -154,7 +427,7 @@ export const spacing = {
export const borderRadius = {
none: 0,
- sm: 4,
+ sm: 3,
md: 8,
lg: 12,
xl: 16,
--
2.51.2