\n \n \n \n

\n )\n}\n\nconst Basics = () => {\n const [context, setContext] = useState()\n useEffect(() => {\n fcsdk.context.then(setContext)\n }, [])\n const uid = context?.user?.fid || 0\n\n const { id } = useParams()\n\n const { data: space, isLoading } = useQuery({ queryKey: ['space', id], queryFn: () => fetchSpace(id) })\n\n const [calling, setCalling] = useState(false)\n const isConnected = useIsConnected()\n const [token, setToken] = useState('')\n const channel = id\n\n // console.log(\"Basics\", name, calling, isConnected);\n\n const onShare = () => {\n if (!context) return\n const text = `Join me in this audio space!\\n\\n${space?.name || channel}\\n\\ncc @moe`\n fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] })\n }\n\n if (isLoading) {\n return (\n

\n \n

\n )\n }\n\n if (!space) {\n return (\n

Space not found

\n )\n }\n\n return (\n <>\n \n\n

\n {calling ? (\n \n ) : (\n \n )}\n

\n\n

Share this space with friends

\n \n {context && (\n \n )}\n

\n \n )\n}\n\nfunction SpaceHeader({ channel }: any) {\n const navigate = useNavigate()\n\n const [context, setContext] = useState()\n useEffect(() => {\n fcsdk.context.then(setContext)\n }, [])\n\n // const onShare = () => {\n // if (!context) return\n // const text = `Join me in this audio space!\\n\\n${channel}\\n\\n`\n // fcsdk.actions.openUrl(\n // `https://warpcast.com/~/compose?text=${encodeURIComponent(text)}&embeds[]=${window.location.href}`\n // )\n // }\n\n return (\n

navigate('/')}>\n \n

Spaces

{channel}

\n {/* {false && } */}\n

\n )\n}\n\nfunction Lobby({ channel, space, uid, setCalling, setToken }: any) {\n // console.log(\"Lobby\", channel);\n const { data: creator } = useUser(space?.created_by)\n\n const queryFn = () =>\n fetch(`/api/channels`)\n .then((r) => r.json())\n .then((r) => r?.data?.channels?.find((c) => c.channel_name == channel))\n const { data: agoraChannel } = useQuery({ queryKey: ['agoraChannel', channel], queryFn })\n console.log('agoraChannel', agoraChannel)\n\n const join = async () => {\n const response = await fetch(`/api/token?channel=${channel}&uid=${uid}`).then((r) => r.json())\n console.log('response', response)\n setToken(response.token)\n setCalling(true)\n }\n\n return (\n <>\n

\n {creator && (\n

Hosted by

\n fcsdk.actions.viewProfile({ fid: creator.fid })}\n />\n

{creator?.username}

\n )}\n {agoraChannel?.user_count > 1 && (\n

{agoraChannel?.user_count} users

\n )}\n \n

\n \n )\n}\n\nfunction Room({ channel, token, uid, calling, setCalling }: any) {\n // console.log(\"Room\", channel, calling, setCalling);\n\n // const [calling, setCalling] = useState(false);\n const isConnected = useIsConnected()\n const [appId, setAppId] = useState('1e46ee7dda94477c833739c1fc1f8d38')\n // const [channel, setChannel] = useState(\"test\");\n\n const { data: localUserId } = useJoin({ appid: appId, channel, token, uid }, calling)\n\n const [micOn, setMic] = useState(false)\n const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn)\n usePublish([localMicrophoneTrack])\n\n const remoteUsers = useRemoteUsers()\n const activeSpeakerUid = useActiveSpeakerUid({ isConnected })\n\n const { space, toggleHost, toggleSpeaker } = useSpace(channel)\n // console.log('🟢 space', space)\n\n const localUserIsCreator = space?.created_by === localUserId\n const localUserIsHost = space?.hosts?.includes(localUserId)\n const localUserIsSpeaker = space?.speakers?.includes(localUserId)\n\n useEffect(() => {\n if (!localUserIsSpeaker) setMic(false)\n }, [localUserIsSpeaker])\n\n const { receivedEmojis, sendEmoji } = useEmojis(channel)\n // console.log('🔴🔴🔴', receivedEmojis, localUserId)\n\n const localUserProps = {\n uid: localUserId,\n space,\n muted: !micOn,\n speaking: activeSpeakerUid === localUserId,\n receivedEmojis,\n }\n\n const getRemoteUserProps = (user: any) => ({\n uid: user.uid,\n key: user.uid,\n space,\n muted: !user?.hasAudio,\n speaking: activeSpeakerUid === user.uid,\n toggleHost: localUserIsHost ? toggleHost : undefined,\n toggleSpeaker: localUserIsHost ? toggleSpeaker : undefined,\n receivedEmojis,\n })\n\n const [showEmojiBar, setShowEmojiBar] = useState(false)\n const emojis = ['❤️', '🎉', '🔥', '😂', '😢', '👍', '👎']\n\n return (\n <>\n {isConnected && (\n

\n {localUserIsSpeaker && (\n

\n \n

\n )}\n \n \n \n

\n {showEmojiBar &&

\n {emojis.map((emoji) => (\n

sendEmoji(emoji, localUserId)}>\n {emoji}\n

\n ))}\n

}\n

\n )}\n\n

\n \n \n \n {remoteUsers.map((user) => (\n \n \n \n ))}\n

\n \n )\n}\n\nfunction User({\n uid,\n muted,\n speaking,\n space,\n toggleHost,\n toggleSpeaker,\n receivedEmojis,\n onlySpeakers,\n onlyListeners,\n ...props\n}: any) {\n const { data: user } = useUser(uid)\n // console.log(\"User\", uid, user);\n\n const image =\n user?.pfp_url ||\n userImageUrl(uid) ||\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjmD59ugIABXQB5tNl2LwAAAAASUVORK5CYII='\n\n const goToProfile = (uid) => {\n console.log('goToProfile', uid)\n fcsdk?.actions?.viewProfile({ fid: uid }).catch(console.error)\n }\n const tipProfile = async () => {\n if (!user) return\n await fcsdk.actions.sendToken?.({\n token: 'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',\n amount: '250000',\n recipientFid: uid,\n })\n }\n\n const [showMenu, setShowMenu] = useState(false)\n\n const userIsCreator = space?.created_by === uid\n const userIsHost = space?.hosts?.includes(uid)\n const userIsSpeaker = space?.speakers?.includes(uid)\n\n if (onlySpeakers && !userIsSpeaker) return null\n if (onlyListeners && userIsSpeaker) return null\n\n const userEmoji = receivedEmojis.find((emoji) => emoji.uid === uid && emoji.timestamp > Date.now() - 1000 * 5)\n\n return (\n

\n setShowMenu(true)}\n />\n {muted && onlySpeakers && }\n {speaking && }\n {userEmoji && }\n

{user?.username || uid}

\n {userIsHost ? 'Host' : userIsSpeaker ? 'Speaker' : ''}\n

{props.children}

\n\n \n

\n setShowMenu(true)}\n />\n

{user?.username || uid}

\n {toggleHost && !userIsCreator && (\n <>\n \n \n )}\n {toggleSpeaker && !userIsHost && (\n <>\n \n \n )}\n \n {user && (\n \n )}\n \n

\n )\n}\n\nfunction Indicator({ Icon, color }: any) {\n return (\n \n \n \n )\n}\nfunction Emoji({ emoji, color }: any) {\n return (\n

{emoji}

\n )\n}\n\n//////////\n\nfunction useUser(uid: number) {\n return useQuery({\n queryKey: ['user', uid],\n queryFn: () => getUserByUid(uid),\n staleTime: 1000 * 60 * 60 * 1,\n })\n}\n\nasync function getUserByUid(uid?: number) {\n if (!uid) return null\n if (uid > 2_000_000) return null\n return await fetchUsersById(`${uid}`).then((users) => users?.[0])\n}\n\nfunction userImageUrl(address) {\n if (!address) return null\n return 'https://cdn.stamp.fyi/avatar/' + address + '?s=140'\n}\n\nfunction useActiveSpeakerUid({ isConnected }) {\n const [activeSpeakerUid, setActiveSpeakerUid] = useState()\n useEffect(() => {\n if (isConnected) {\n client.enableAudioVolumeIndicator()\n client.on('volume-indicator', (volumes) => setActiveSpeakerUid(getActiveSpeakerUid(volumes)))\n }\n }, [isConnected])\n return activeSpeakerUid\n}\n\nfunction getActiveSpeakerUid(volumes) {\n if (!volumes || volumes.length === 0) return undefined\n const topSpeaker = volumes?.reduce((prev, current) => (prev.level > current.level ? prev : current))\n // console.log(\"volumes\", volumes, topSpeaker);\n if (topSpeaker?.level > 40) return topSpeaker.uid\n else return undefined\n}\n\nfunction useSpace(id: string) {\n const [space, setSpace] = useState()\n\n useEffect(() => {\n fetchSpace(id).then(setSpace)\n\n const changes = supabase\n .channel('table-db-changes')\n .on(\n 'postgres_changes',\n {\n event: '*',\n schema: 'public',\n table: 'spaces',\n filter: `id=eq.${id}`,\n },\n (payload) => {\n console.log('🗄️ realtime spaces', payload)\n setSpace(payload.new)\n }\n )\n .subscribe()\n }, [])\n\n const toggleHost = async (uid) => {\n console.log('toggleHost', uid)\n const hosts = space?.hosts || []\n const newHosts = hosts.includes(uid) ? hosts.filter((s) => s !== uid) : [...hosts, uid]\n const { data, error } = await supabase.from('spaces').update({ hosts: newHosts }).eq('id', id)\n console.log('toggleHost', data, error)\n }\n\n const toggleSpeaker = async (uid) => {\n console.log('toggleSpeaker', uid)\n const speakers = space?.speakers || []\n const newSpeakers = speakers.includes(uid) ? speakers.filter((s) => s !== uid) : [...speakers, uid]\n const { data, error } = await supabase.from('spaces').update({ speakers: newSpeakers }).eq('id', id)\n console.log('toggleSpeaker', data, error)\n }\n\n const hosts = space ? [...space?.hosts, space?.created_by].filter(Boolean) : []\n const speakers = space ? [...space?.speakers, ...space?.hosts, space?.created_by].filter(Boolean) : []\n\n return { space: { ...space, hosts, speakers }, toggleHost, toggleSpeaker }\n}\n\nfunction useEmojis(id: string) {\n const [receivedEmojis, setEmojis] = useState([])\n const channelRef = useRef(null)\n\n useEffect(() => {\n // channelRef.current?.unsubscribe()\n channelRef.current = supabase\n .channel(id, { config: { broadcast: { self: true } } })\n .on('broadcast', { event: 'emoji' }, onBroadcast)\n .subscribe((status, error) => {\n console.log('🔴🔴🔴 emoji channel status', status, error)\n })\n\n return () => {\n supabase.removeChannel(channelRef.current)\n // channelRef.current?.unsubscribe()\n channelRef.current = null\n }\n }, [id])\n\n const onBroadcast = (data) => {\n // console.log('onBroadcast', data)\n setEmojis((prev) => [data.payload, ...prev].slice(0, 100))\n }\n\n const sendEmoji = (emoji, uid) =>\n channelRef.current?.send({\n type: 'broadcast',\n event: 'emoji',\n payload: { emoji, uid, timestamp: Date.now() },\n })\n\n return { receivedEmojis, sendEmoji }\n}\n","deleted","label",[173,174,155],"frontend","screens","permalink","https://www.val.town/x/moe/FarcasterSpaces/code/frontend/screens/Space.tsx","extension","actionData","errors"]