+48 -21

js/app/components/login/login.tsx

··· 1 1 import { useNavigation } from "@react-navigation/native"; 2 2 - import { zero } from "@streamplace/components"; 2 2 + import { Button, Text, useTheme, zero } from "@streamplace/components"; 3 3 import Loading from "components/loading/loading"; 4 4 import NameColorPicker from "components/name-color-picker/name-color-picker"; 5 5 import { ··· 10 10 selectLogin, 11 11 selectUserProfile, 12 12 } from "features/bluesky/blueskySlice"; 13 13 + import { Info, LogOut, UserRoundPen } from "lucide-react-native"; 13 14 import { useEffect, useState } from "react"; 14 15 import { 15 16 ActivityIndicator, ··· 19 20 Platform, 20 21 Pressable, 21 22 ScrollView, 22 22 - Text, 23 23 TextInput, 24 24 View, 25 25 } from "react-native"; 26 26 import { useAppDispatch, useAppSelector } from "store/hooks"; 27 27 28 28 export default function Login() { 29 29 + const { theme } = useTheme(); 29 30 const dispatch = useAppDispatch(); 30 31 const chatProfile = useAppSelector(selectChatProfile); 31 32 const userProfile = useAppSelector(selectUserProfile); ··· 82 83 zero.gap.all[3], 83 84 ]} 84 85 > 85 85 - <Text style={[{ textAlign: "center", fontSize: 32 }]}> 86 86 + <Text size="3xl" style={[{ textAlign: "center" }, zero.pb[4]]}> 86 87 Hey,{" "} 87 87 - <Text style={{ color: rgb || "#bd6e86" }}>@{userProfile.handle}</Text> 88 88 + <Text size="3xl" style={{ color: rgb || "#bd6e86" }}> 89 89 + @{userProfile.handle} 90 90 + </Text> 88 91 . 89 92 </Text> 90 93 <View ··· 94 97 { justifyContent: "center" }, 95 98 ]} 96 99 > 97 97 - <Pressable 100 100 + <Button 101 101 + onPress={() => dispatch(logout())} 102 102 + variant="secondary" 103 103 + leftIcon={<LogOut color={theme.colors.text} />} 104 104 + style={[ 105 105 + { 106 106 + maxWidth: 300, 107 107 + flexBasis: 250, 108 108 + alignItems: "center", 109 109 + }, 110 110 + ]} 111 111 + > 112 112 + <Text style={[{ color: theme.colors.text, textAlign: "center" }]}> 113 113 + Log out 114 114 + </Text> 115 115 + </Button> 116 116 + </View> 117 117 + <View 118 118 + style={[ 119 119 + { flexDirection: "row" }, 120 120 + zero.gap.all[2], 121 121 + { justifyContent: "center" }, 122 122 + ]} 123 123 + > 124 124 + <Button 98 125 onPress={() => dispatch(logout())} 126 126 + variant="secondary" 127 127 + leftIcon={<UserRoundPen color="white" />} 99 128 style={[ 100 129 { 101 130 maxWidth: 300, 102 102 - backgroundColor: "#007AFF", 103 103 - padding: 12, 104 104 - borderRadius: 8, 105 105 - marginHorizontal: "auto", 106 131 flexBasis: 250, 107 132 alignItems: "center", 108 133 }, 109 134 ]} 110 135 > 111 136 <Text style={[{ color: "white", textAlign: "center" }]}> 112 112 - Log out 137 137 + Edit profile (Bluesky) 113 138 </Text> 114 114 - </Pressable> 139 139 + </Button> 115 140 </View> 116 141 <NameColorPicker 117 142 buttonProps={{ ··· 144 169 > 145 170 <View 146 171 style={[ 147 147 - zero.px[6], 148 148 - zero.py[6], 172 172 + zero.px[8], 173 173 + zero.py[8], 149 174 zero.r.lg, 150 150 - { backgroundColor: "#1a1a1a" }, 175 175 + { backgroundColor: theme.colors.card }, 151 176 { width: "100%" }, 152 177 { maxWidth: 600 }, 153 153 - zero.gap.all[2], 178 178 + zero.gap.all[4], 154 179 ]} 155 180 > 156 181 <Text style={[{ fontSize: 36, fontWeight: "200", color: "white" }]}> ··· 162 187 zero.gap.all[1], 163 188 ]} 164 189 > 165 165 - <Text style={[{ color: "#aaa" }]}> 190 190 + <Text style={[{ color: theme.colors.textMuted }]}> 166 191 Sign in using your handle on the AT Protocol 167 192 </Text> 168 193 <Pressable ··· 173 198 Linking.openURL(u.toString()); 174 199 }} 175 200 > 176 176 - <Text style={[{ color: "lightskyblue", fontSize: 18 }]}> 177 177 - ℹ 178 178 - </Text> 201 201 + <Info 202 202 + size={16} 203 203 + style={{ paddingTop: 4 }} 204 204 + color={theme.colors.ring} 205 205 + /> 179 206 </Pressable> 180 180 - <Text style={[{ color: "#aaa" }]}> 207 207 + <Text style={[{ color: theme.colors.textMuted }]}> 181 208 (e.g. your Bluesky handle) 182 209 </Text> 183 210 </View> 184 184 - <View style={[zero.gap.all[2], zero.py[4]]}> 211 211 + <View style={[zero.pb[2]]}> 185 212 <Text style={[{ color: "#aaa" }]}>Handle</Text> 186 213 <TextInput 187 214 value={handle}

+7 -12

js/app/components/name-color-picker/name-color-picker.tsx

··· 1 1 + import { Button } from "@streamplace/components"; 1 2 import { 2 3 createChatProfileRecord, 3 4 getChatProfileRecordFromPDS, 4 5 selectChatProfile, 5 6 selectUserProfile, 6 7 } from "features/bluesky/blueskySlice"; 8 8 + import { SwatchBook } from "lucide-react-native"; 7 9 import { useEffect, useState } from "react"; 8 10 import { 9 11 Keyboard, ··· 79 81 80 82 return ( 81 83 <View style={[{ alignItems: "center" }, { flexDirection: "row" }]}> 82 82 - <TouchableOpacity 83 83 - style={[ 84 84 - { 85 85 - backgroundColor: "#007AFF", 86 86 - borderRadius: 8, 87 87 - paddingHorizontal: 16, 88 88 - paddingVertical: 12, 89 89 - alignItems: "center", 90 90 - }, 91 91 - buttonProps?.style, 92 92 - ]} 84 84 + <Button 85 85 + variant="secondary" 86 86 + leftIcon={<SwatchBook color={color} />} 87 87 + style={[buttonProps?.style]} 93 88 onPress={() => { 94 89 if (!isWeb) { 95 90 Keyboard.dismiss(); ··· 101 96 <Text style={[{ color, fontWeight: "600" }]}> 102 97 {text ? text(color) : "Change Name Color"} 103 98 </Text> 104 104 - </TouchableOpacity> 99 99 + </Button> 105 100 106 101 <Modal 107 102 visible={open}

+9 -8

js/app/src/router.tsx

··· 208 208 }, 209 209 ]} 210 210 > 211 211 - {sidebar?.isActive && ( 211 211 + {sidebar?.isActive ? ( 212 212 <Pressable style={{ padding: 5 }} onPress={handlePress}> 213 213 {sidebar.isCollapsed ? ( 214 214 <PanelLeftOpen size={24} color={theme.colors.accentForeground} /> ··· 216 216 <PanelLeftClose size={24} color={theme.colors.accentForeground} /> 217 217 )} 218 218 </Pressable> 219 219 + ) : ( 220 220 + <Pressable style={{ padding: 5 }} onPress={handleGoBackPress}> 221 221 + {canGoBack ? ( 222 222 + <ArrowLeft size={24} color={theme.colors.accentForeground} /> 223 223 + ) : ( 224 224 + <Menu size={24} color={theme.colors.accentForeground} /> 225 225 + )} 226 226 + </Pressable> 219 227 )} 220 220 - <Pressable style={{ padding: 5 }} onPress={handleGoBackPress}> 221 221 - {canGoBack ? ( 222 222 - <ArrowLeft size={24} color={theme.colors.accentForeground} /> 223 223 - ) : ( 224 224 - <Menu size={24} color={theme.colors.accentForeground} /> 225 225 - )} 226 226 - </Pressable> 227 228 </View> 228 229 ); 229 230 };

+37 -33

js/app/src/screens/about.tsx

··· 1 1 - import { Text } from "@streamplace/components"; 2 2 - import { Linking, Pressable, View } from "react-native"; 3 3 - 4 4 - const H4 = (props: any) => ( 5 5 - <Text 6 6 - style={[{ fontSize: 18, fontWeight: "100", marginBottom: 10 }, props.style]} 7 7 - {...props} 8 8 - /> 9 9 - ); 10 10 - const P = (props: any) => ( 11 11 - <Text style={[{ fontSize: 13, marginBottom: 20 }, props.style]} {...props} /> 12 12 - ); 1 1 + import { Text, View, zero } from "@streamplace/components"; 2 2 + import { Linking, Pressable } from "react-native"; 13 3 14 4 const Anchor = ({ 15 5 href, ··· 29 19 export default function AboutScreen() { 30 20 return ( 31 21 <View style={[{ maxWidth: 500, marginHorizontal: "auto" }]}> 32 32 - <H4>What is Streamplace?</H4> 33 33 - <P style={{ fontSize: 13, marginBottom: 20 }}> 22 22 + <Text variant="h4" size="2xl" style={[zero.mt[4]]}> 23 23 + What is Streamplace? 24 24 + </Text> 25 25 + <Text> 34 26 Streamplace is the video layer for decentralized social networks. We're 35 27 building open-source infrastructure to bring high-quality video 36 28 experiences to the AT Protocol ecosystem, while preserving user 37 29 sovereignty and content authenticity. 38 38 - </P> 30 30 + </Text> 39 31 40 40 - <H4>Open source single-binary node software</H4> 41 41 - <P> 32 32 + <Text variant="h4" size="xl"> 33 33 + Open source single-binary node software 34 34 + </Text> 35 35 + <Text> 42 36 Get up and running with one command. No complex configuration or deep 43 37 video expertise required. Perfect for hackers and builders. 44 44 - </P> 38 38 + </Text> 45 39 46 46 - <H4>User sovereignty by design</H4> 47 47 - <P> 40 40 + <Text variant="h4" size="xl"> 41 41 + User sovereignty by design 42 42 + </Text> 43 43 + <Text> 48 44 All video content is cryptographically signed by creators and respects 49 45 their consent preferences. Built on the same public key infrastructure 50 46 as decentralized social networks. 51 51 - </P> 47 47 + </Text> 52 48 53 53 - <H4>Familiar streaming experience</H4> 54 54 - <P> 49 49 + <Text variant="h4" size="xl"> 50 50 + Familiar streaming experience 51 51 + </Text> 52 52 + <Text> 55 53 Native apps for iOS, Android, and web that provide the rich video 56 54 features users expect: livestreaming, clips, uploads, and more. 57 57 - </P> 55 55 + </Text> 58 56 59 59 - <H4>Built for federation</H4> 60 60 - <P> 57 57 + <Text variant="h4" size="xl"> 58 58 + Built for federation 59 59 + </Text> 60 60 + <Text> 61 61 Seamlessly integrates with the AT Protocol. Streamplace nodes can 62 62 connect to any compatible social network to index and serve video 63 63 content. 64 64 - </P> 64 64 + </Text> 65 65 66 66 - <H4>Powered by Livepeer</H4> 67 67 - <P> 66 66 + <Text variant="h4" size="xl"> 67 67 + Powered by Livepeer 68 68 + </Text> 69 69 + <Text> 68 70 Leverages battle-tested decentralized video infrastructure for 69 71 transcoding, distribution, and delivery at scale. 70 70 - </P> 72 72 + </Text> 71 73 72 72 - <H4>Want to get involved?</H4> 73 73 - <P> 74 74 + <Text variant="h4" size="xl"> 75 75 + Want to get involved? 76 76 + </Text> 77 77 + <Text> 74 78 Join our <Anchor href="https://discord.stream.place">Discord</Anchor> to 75 79 learn more about Streamplace and how you can get involved. 76 76 - </P> 80 80 + </Text> 77 81 </View> 78 82 ); 79 83 }

+26 -18

js/app/src/screens/download.tsx

··· 1 1 - import { Text } from "@streamplace/components"; 1 1 + import { Text, zero } from "@streamplace/components"; 2 2 import { Linking, Pressable, View } from "react-native"; 3 3 import GetApps from "../../components/get-apps"; 4 4 ··· 18 18 href: string; 19 19 children: React.ReactNode; 20 20 style?: any; 21 21 - }) => ( 22 22 - <Pressable onPress={() => Linking.openURL(href)} {...props}> 23 23 - <Text 24 24 - style={[{ color: "#0066cc", textDecorationLine: "underline" }, style]} 25 25 - > 26 26 - {children} 27 27 - </Text> 28 28 - </Pressable> 29 29 - ); 21 21 + }) => { 22 22 + return ( 23 23 + <Pressable onPress={() => Linking.openURL(href)} {...props}> 24 24 + <Text 25 25 + style={[ 26 26 + { 27 27 + color: zero.colors.blue[400], 28 28 + textDecorationLine: "underline", 29 29 + textAlign: "center", 30 30 + }, 31 31 + zero.layout.flex.center, 32 32 + ]} 33 33 + > 34 34 + {children} 35 35 + </Text> 36 36 + </Pressable> 37 37 + ); 38 38 + }; 30 39 31 40 export default function AboutScreen() { 32 41 return ( 33 42 <View 34 43 style={[ 35 44 { maxWidth: 500, marginHorizontal: "auto" }, 36 36 - { flex: 1 }, 37 37 - { alignItems: "center" }, 38 38 - { justifyContent: "center" }, 45 45 + zero.flex.values[1], 46 46 + zero.px[4], 47 47 + zero.py[8], 48 48 + zero.layout.flex.center, 49 49 + zero.gap.all[6], 39 50 ]} 40 51 > 41 52 <GetApps /> 42 42 - <H4 style={[{ padding: 40 }, { textAlign: "center" }]}>Or:</H4> 43 43 - <Anchor 44 44 - href="https://git.stream.place/streamplace/streamplace/-/releases" 45 45 - style={[{ fontSize: 20 }, { textAlign: "center" }]} 46 46 - > 53 53 + <Text>Or:</Text> 54 54 + <Anchor href="https://git.stream.place/streamplace/streamplace/-/releases"> 47 55 Get the latest releases for Windows, Mac, and Linux from 48 56 git.stream.place 49 57 </Anchor>