streamplace / js / app / components / mobile / bottom-metadata.tsx

import {
  Button,
  layout,
  PlayerUI,
  Text,
  useAvatars,
  useLivestreamInfo,
  useLivestreamStore,
  zero,
} from "@streamplace/components";
import { ChevronLeft } from "@tamagui/lucide-icons";
import { ChevronRight } from "lucide-react-native";
import { Image, View } from "react-native";
const { gap, px, py, colors } = zero;

export function BottomMetadata({
  setShowChat,
  showChat,
}: {
  setShowChat: (show: boolean) => void;
  showChat: boolean;
}) {
  const { profile } = useLivestreamInfo();
  const avatars = useAvatars(profile?.did ? [profile?.did] : []);
  const ls = useLivestreamStore((x) => x.livestream);

  return (
    <View
      style={[
        layout.position.relative,
        {
          backgroundColor: "rgba(0, 0, 0, 0.9)",
          borderTopWidth: 1,
          borderTopColor: "rgba(255, 255, 255, 0.1)",
        },
        px[5],
        py[3],
      ]}
    >
      <View
        style={[layout.flex.row, layout.flex.spaceBetween, { height: "100%" }]}
      >
        {/* Left side - Profile info */}
        <View style={[layout.flex.row, layout.flex.center, gap.all[3]]}>
          {profile?.did && avatars[profile?.did]?.avatar && (
            <Image
              key="avatar"
              source={{
                uri: avatars[profile?.did]?.avatar,
              }}
              style={{ width: 42, height: 42, borderRadius: 999 }}
              resizeMode="cover"
            />
          )}
          {!(profile?.did && avatars[profile?.did]?.avatar) && (
            <Image
              key="avatar"
              source={require("./../../assets/images/goose.png")}
              style={{ width: 42, height: 42, borderRadius: 999 }}
              resizeMode="cover"
            />
          )}
          <View>
            <Text style={{ color: "white", fontWeight: "600" }}>
              @{profile?.handle || "user"}
            </Text>
            <Text style={{ color: colors.gray[400] }}>
              {ls?.record.title || "Stream Title"}
            </Text>
          </View>
        </View>

        {/* Right side - Viewer count and collapse chat */}
        <View style={[layout.flex.row, layout.flex.center, gap.all[4]]}>
          <View style={[layout.flex.row, layout.flex.center, gap.all[2]]}>
            <PlayerUI.Viewers />
          </View>
          <Button
            variant="outline"
            size="sm"
            onPress={() => {
              setShowChat(!showChat);
            }}
          >
            {showChat ? (
              <ChevronRight color="white" size={16} />
            ) : (
              <ChevronLeft color="white" size={16} />
            )}
          </Button>
        </View>
      </View>
    </View>
  );
}