@streamplace/components 0.7.27 → 0.7.29

package/dist/lib/theme/tokens.js

@@ -4,7 +4,7 @@
  * Inspired by shadcn/ui but adapted for React Native styling
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.breakpoints = exports.animations = exports.touchTargets = exports.shadows = exports.typography = exports.borderRadius = exports.spacing = exports.colors = void 0;
+exports.breakpoints = exports.animations = exports.touchTargets = exports.shadows = exports.fontFamilies = exports.typography = exports.borderRadius = exports.spacing = exports.colors = void 0;
 exports.colors = {
     // Primary colors
     primary: {
@@ -435,56 +435,67 @@ exports.typography = {
             fontSize: 34,
             lineHeight: 41,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         title1: {
             fontSize: 28,
             lineHeight: 34,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         title2: {
             fontSize: 22,
             lineHeight: 28,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         title3: {
             fontSize: 20,
             lineHeight: 25,
             fontWeight: "600",
+            fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
         },
         headline: {
             fontSize: 17,
             lineHeight: 22,
             fontWeight: "600",
+            fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
         },
         body: {
             fontSize: 17,
             lineHeight: 22,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         callout: {
             fontSize: 16,
             lineHeight: 21,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         subhead: {
             fontSize: 15,
             lineHeight: 20,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         footnote: {
             fontSize: 13,
             lineHeight: 18,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         caption1: {
             fontSize: 12,
             lineHeight: 16,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         caption2: {
             fontSize: 11,
             lineHeight: 13,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
     },
     // Android Material typography
@@ -493,66 +504,79 @@ exports.typography = {
             fontSize: 96,
             lineHeight: 112,
             fontWeight: "300",
+            fontFamily: "AtkinsonHyperlegibleNext-ExtraLight",
         },
         headline2: {
             fontSize: 60,
             lineHeight: 72,
             fontWeight: "300",
+            fontFamily: "AtkinsonHyperlegibleNext-Light",
         },
         headline3: {
             fontSize: 48,
             lineHeight: 56,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         headline4: {
             fontSize: 34,
             lineHeight: 42,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         headline5: {
             fontSize: 24,
             lineHeight: 32,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         headline6: {
             fontSize: 20,
             lineHeight: 28,
             fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         subtitle1: {
             fontSize: 16,
             lineHeight: 24,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         subtitle2: {
             fontSize: 14,
             lineHeight: 22,
             fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         body1: {
             fontSize: 16,
             lineHeight: 24,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         body2: {
             fontSize: 14,
             lineHeight: 20,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         button: {
             fontSize: 14,
             lineHeight: 16,
             fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         caption: {
             fontSize: 12,
             lineHeight: 16,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         overline: {
             fontSize: 10,
             lineHeight: 16,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
     },
     // Universal typography scale
@@ -561,43 +585,112 @@ exports.typography = {
             fontSize: 12,
             lineHeight: 16,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         sm: {
             fontSize: 14,
             lineHeight: 20,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         base: {
             fontSize: 16,
             lineHeight: 24,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         lg: {
             fontSize: 18,
             lineHeight: 28,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         xl: {
             fontSize: 20,
             lineHeight: 28,
             fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         "2xl": {
             fontSize: 24,
             lineHeight: 32,
             fontWeight: "600",
+            fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
         },
         "3xl": {
             fontSize: 30,
             lineHeight: 36,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         "4xl": {
             fontSize: 36,
             lineHeight: 40,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-ExtraBold",
         },
     },
+    // Monospace typography for code and technical content
+    mono: {
+        xs: {
+            fontSize: 11,
+            lineHeight: 16,
+            fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleMono-Regular",
+        },
+        sm: {
+            fontSize: 13,
+            lineHeight: 18,
+            fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleMono-Regular",
+        },
+        base: {
+            fontSize: 14,
+            lineHeight: 20,
+            fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleMono-Regular",
+        },
+        lg: {
+            fontSize: 16,
+            lineHeight: 24,
+            fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleMono-Regular",
+        },
+        xl: {
+            fontSize: 18,
+            lineHeight: 28,
+            fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleMono-Medium",
+        },
+        "2xl": {
+            fontSize: 20,
+            lineHeight: 32,
+            fontWeight: "600",
+            fontFamily: "AtkinsonHyperlegibleMono-SemiBold",
+        },
+        "3xl": {
+            fontSize: 24,
+            lineHeight: 36,
+            fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleMono-Bold",
+        },
+    },
+};
+// Font families available in the app
+exports.fontFamilies = {
+    // Sans serif fonts
+    regular: "AtkinsonHyperlegibleNext-Regular",
+    light: "AtkinsonHyperlegibleNext-Light",
+    extraLight: "AtkinsonHyperlegibleNext-ExtraLight",
+    medium: "AtkinsonHyperlegibleNext-Medium",
+    semiBold: "AtkinsonHyperlegibleNext-SemiBold",
+    bold: "AtkinsonHyperlegibleNext-Bold",
+    extraBold: "AtkinsonHyperlegibleNext-ExtraBold",
+    // Monospace fonts
+    monoRegular: "AtkinsonHyperlegibleMono-Regular",
+    monoMedium: "AtkinsonHyperlegibleMono-Medium",
+    monoSemiBold: "AtkinsonHyperlegibleMono-SemiBold",
+    monoBold: "AtkinsonHyperlegibleMono-Bold",
 };
 exports.shadows = {
     none: {

package/dist/ui/index.js

@@ -6,8 +6,8 @@
  * ZeroCSS provides a zero-config, atomic styling system optimized for React Native.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.atomsNS = exports.theme = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = exports.responsiveValue = exports.platformStyle = exports.mergeStyles = exports.debounce = exports.typography = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.w = exports.top = exports.text = exports.right = exports.r = exports.py = exports.px = exports.pt = exports.pr = exports.position = exports.pl = exports.pb = exports.p = exports.my = exports.mx = exports.mt = exports.mr = exports.ml = exports.mb = exports.m = exports.left = exports.layout = exports.h = exports.gap = exports.flex = exports.bottom = exports.borders = exports.bg = exports.atoms = void 0;
-exports.utils = exports.tokens = void 0;
+exports.tokens = exports.atomsNS = exports.theme = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = exports.responsiveValue = exports.platformStyle = exports.mergeStyles = exports.debounce = exports.typography = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.w = exports.top = exports.text = exports.right = exports.r = exports.py = exports.px = exports.pt = exports.pr = exports.position = exports.pl = exports.pb = exports.p = exports.my = exports.mx = exports.mt = exports.mr = exports.ml = exports.mb = exports.m = exports.left = exports.layout = exports.h = exports.gap = exports.flex = exports.bottom = exports.borders = exports.bg = exports.atoms = void 0;
+exports.utils = void 0;
 const tslib_1 = require("tslib");
 // Export the most commonly used ZeroCSS utilities
 var atoms_1 = require("../lib/theme/atoms");
@@ -66,7 +66,6 @@ var theme_1 = require("../lib/theme/theme");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
 Object.defineProperty(exports, "createThemeColors", { enumerable: true, get: function () { return theme_1.createThemeColors; } });
 Object.defineProperty(exports, "createThemeIcons", { enumerable: true, get: function () { return theme_1.createThemeIcons; } });
-Object.defineProperty(exports, "createThemeStyles", { enumerable: true, get: function () { return theme_1.createThemeStyles; } });
 Object.defineProperty(exports, "createThemedStyles", { enumerable: true, get: function () { return theme_1.createThemedStyles; } });
 Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });
 Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return theme_1.lightTheme; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.27",
+  "version": "0.7.29",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -17,6 +17,7 @@
   "author": "Streamplace",
   "license": "MIT",
   "devDependencies": {
+    "@types/sdp-transform": "^2.15.0",
     "tsup": "^8.5.0"
   },
   "dependencies": {
@@ -53,5 +54,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "c981451ba44cc3e2213e1734c31d35b1383b2132"
+  "gitHead": "8dba54b751a4a48f125485ef8b0997428f6095cf"
 }

package/src/components/chat/chat-box.tsx

@@ -421,7 +421,8 @@ export function ChatBox({
         >
           <Button
             variant="secondary"
-            style={{ borderRadius: 16, height: 36, maxWidth: 36 }}
+            style={{ borderRadius: 16, maxWidth: 44, aspectRatio: 1 }}
+            aria-label="Insert Mention"
             onPress={() => {
               // if the last character is not @, add it
               !message.endsWith("@") && setMessage(message + "@");
@@ -445,7 +446,8 @@ export function ChatBox({
           >
             <Button
               variant="secondary"
-              style={{ borderRadius: 16, height: 36, maxWidth: 36 }}
+              aria-label="Insert Emoji"
+              style={{ borderRadius: 16, maxWidth: 44, aspectRatio: 1 }}
               onPress={() => setShowEmojiSelector(!showEmojiSelector)}
             >
               <Text>{COOL_EMOJI_LIST[emojiIconIndex]}</Text>
@@ -454,7 +456,8 @@ export function ChatBox({
           {!isPopout && (
             <Button
               variant="secondary"
-              style={{ borderRadius: 16, height: 36, maxWidth: 36 }}
+              aria-label="Popout Chat"
+              style={{ borderRadius: 16, maxWidth: 44, aspectRatio: 1 }}
               onPress={() => {
                 if (!linfo) return;
                 const u = new URL(window.location.href);

package/src/components/chat/chat.tsx

@@ -304,6 +304,7 @@ export function Chat({
         updateCellsBatchingPeriod={50}
         onScroll={handleScroll}
         scrollEventThrottle={16}
+        nestedScrollEnabled={true}
       />
       <ModView />
     </View>

package/src/components/mobile-player/ui/autoplay-button.tsx

@@ -17,6 +17,7 @@ export function AutoplayButton() {
         .play()
         .then(() => {
           setAutoplayFailed(false);
+          setMuted(false);
           setUserInteraction();
         })
         .catch((err) => {

package/src/components/mobile-player/ui/viewer-context-menu.tsx

@@ -1,5 +1,5 @@
 import { useRootContext } from "@rn-primitives/dropdown-menu";
-import { Settings } from "lucide-react-native";
+import { Menu } from "lucide-react-native";
 import { Platform, View } from "react-native";
 import { colors } from "../../../lib/theme";
 import { useLivestreamStore } from "../../../livestream-store";
@@ -57,7 +57,7 @@ export function ContextMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <Settings color={colors.gray[200]} />
+        <Menu color={colors.gray[200]} />
       </DropdownMenuTrigger>
       <Portal container={dropdownPortalContainer}>
         <DropdownMenuContent side="top" align="end">

package/src/components/mobile-player/ui/viewer-loading-overlay.tsx

@@ -15,7 +15,7 @@ import {
 
 export function ViewerLoadingOverlay() {
   const status = usePlayerStore((x) => x.status);
-  const theme = useTheme();
+  const { theme, zero: zt } = useTheme();
   const opacity = useSharedValue(0);
 
   useEffect(() => {
@@ -42,7 +42,7 @@ export function ViewerLoadingOverlay() {
 
   let spinner = <Loader size="large" />;
   if (status === PlayerStatus.PAUSE) {
-    spinner = <Play size="$12" color={theme.styles.text.primary["color"]} />;
+    spinner = <Play size="$12" color={theme.colors.foreground} />;
   }
 
   return (

package/src/components/mobile-player/use-webrtc.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import * as sdpTransform from "sdp-transform";
 import { PlayerStatus, usePlayerStore, useStreamKey } from "../..";
 import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
 
@@ -107,6 +108,13 @@ export async function negotiateConnectionWithClientOffer(
     offerToReceiveAudio: true,
     offerToReceiveVideo: true,
   });
+  if (!offer.sdp) {
+    throw Error("no SDP in offer");
+  }
+
+  const newSDP = forceStereoAudio(offer.sdp);
+
+  offer.sdp = newSDP;
   /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription */
   await peerConnection.setLocalDescription(offer);
 
@@ -297,3 +305,26 @@ export function useWebRTCIngest({
 
   return [mediaStream, setMediaStream];
 }
+
+export function forceStereoAudio(sdp: string): string {
+  const parsedSDP = sdpTransform.parse(sdp);
+  const audioMedia = parsedSDP.media.find((m) => m.type === "audio");
+  if (!audioMedia) {
+    throw Error("no audio media in SDP");
+  }
+  const opusCodec = audioMedia.rtp.find((c) => c.codec === "opus");
+  if (!opusCodec) {
+    throw Error("no opus codec in SDP");
+  }
+  const opusFMTP = audioMedia.fmtp.find((c) => c.payload === opusCodec.payload);
+  if (!opusFMTP) {
+    throw Error("no opus fmtp in SDP");
+  }
+  const opusParams = sdpTransform.parseParams(opusFMTP.config);
+  opusParams.stereo = 1;
+  const newParams = Object.entries(opusParams)
+    .map(([k, v]) => `${k}=${v}`)
+    .join(";");
+  opusFMTP.config = newParams;
+  return sdpTransform.write(parsedSDP);
+}