stream.place
Live video on the AT Protocol
settings: key manager
+125
-95
+6
-5
js/app/components/settings/keymgr.tsx
js/app/components/settings/key-manager.tsx
+6
-5
js/app/components/settings/keymgr.tsx
js/app/components/settings/key-manager.tsx
···
34
34
<Text
35
35
fontFamily="$mono"
36
36
fontSize="$2"
37
-
$sm={{ width: "$14" }}
37
+
$xs={{ width: "$14" }}
38
38
ellipse
39
39
numberOfLines={1}
40
40
>
···
76
76
77
77
return (
78
78
<ScrollView justifyContent="flex-start" alignItems="center">
79
-
<YStack f={1} p="$4" gap="$4" maxWidth={750}>
79
+
<YStack f={1} p="$4" gap="$4" maxWidth={650}>
80
80
{keyRecords === null ? (
81
81
<Loading />
82
82
) : keyRecords.records.length === 0 ? (
···
91
91
) : (
92
92
<>
93
93
<YStack gap="$2">
94
-
<Text fontSize="$8">Existing Pubkeys</Text>
94
+
<Text fontSize="$8">Your public keys</Text>
95
95
<Text fontSize="$2" color="$color.gray11Dark">
96
-
Your private stream key is the secret credential you use to
97
-
stream. Listed are the associated public keys.
96
+
A public key is a pair to one of your stream keys. You can
97
+
revoke access for a specific stream key by revoking its
98
+
associated public key below.
98
99
</Text>
99
100
{keyRecords.records.map((keyRecord) => (
100
101
<KeyRow
+118
-83
js/app/components/settings/settings.tsx
+118
-83
js/app/components/settings/settings.tsx
···
1
+
import { useNavigation } from "@react-navigation/native";
2
+
import AQLink from "components/aqlink";
3
+
import Container from "components/container";
1
4
import {
2
5
DEFAULT_URL,
3
6
selectTelemetry,
···
8
11
import { useEffect, useState } from "react";
9
12
import { Switch } from "react-native";
10
13
import { useAppDispatch, useAppSelector } from "store/hooks";
11
-
import { Button, Form, H3, Input, Text, View, XStack, isWeb } from "tamagui";
14
+
import { Button, H3, Input, Text, View, XStack } from "tamagui";
12
15
import { Updates } from "./updates";
13
16
14
17
export function Settings() {
···
17
20
const defaultUrl = DEFAULT_URL;
18
21
const [newUrl, setNewUrl] = useState("");
19
22
const [overrideEnabled, setOverrideEnabled] = useState(false);
23
+
24
+
const navigate = useNavigation();
20
25
21
26
// Initialize the override state based on current URL
22
27
useEffect(() => {
23
28
setOverrideEnabled(url !== defaultUrl);
24
29
}, [url, defaultUrl]);
25
30
26
-
const onSubmit = () => {
31
+
const onSubmitUrl = () => {
27
32
if (newUrl) {
28
33
dispatch(setURL(newUrl));
29
34
setNewUrl("");
···
38
43
};
39
44
40
45
const telemetry = useAppSelector(selectTelemetry);
46
+
47
+
const handleTelemetryToggle = (checked: boolean) => {
48
+
dispatch(telemetryOpt(checked));
49
+
};
41
50
42
51
return (
43
-
<View f={1} alignItems="stretch" justifyContent="center" fg={1}>
44
-
<Updates />
45
-
<Form
46
-
fg={1}
47
-
flexBasis={0}
48
-
alignItems="center"
52
+
<Container alignItems="center" justifyContent="center">
53
+
<View
54
+
f={1}
55
+
alignItems="stretch"
49
56
justifyContent="center"
50
-
padding="$4"
51
-
onSubmit={onSubmit}
57
+
mt="$8"
58
+
maxWidth={500}
59
+
gap="$6"
60
+
width="100%"
52
61
>
53
-
<View
54
-
alignItems="center"
55
-
justifyContent="center"
56
-
gap="$2"
57
-
fg={1}
58
-
flexBasis={0}
59
-
backgroundColor="rgba(0, 0, 0, 0.1)"
60
-
>
61
-
<XStack alignItems="center" justifyContent="space-around">
62
-
<View>
63
-
<XStack width={isWeb ? "100%" : "75%"}>
64
-
<H3 fontSize="$8">Use custom node</H3>
65
-
<Switch
66
-
accessibilityLabel="Use custom node"
67
-
accessibilityHint="Toggle to use a custom node"
68
-
style={{
69
-
transform: [{ scaleX: 1.2 }, { scaleY: 1.2 }],
70
-
marginLeft: 20,
71
-
marginTop: isWeb ? 8 : 4,
72
-
}}
73
-
value={overrideEnabled}
74
-
onValueChange={handleToggleOverride}
75
-
/>
76
-
</XStack>
62
+
<Updates />
63
+
64
+
<View alignItems="center" justifyContent="center" width="100%">
65
+
{/* Toggle Switch for Custom Node */}
66
+
<XStack
67
+
alignItems="stretch"
68
+
justifyContent="space-between"
69
+
width="100%"
70
+
flexDirection="column"
71
+
>
72
+
<View
73
+
flexDirection="row"
74
+
alignItems="center"
75
+
justifyContent="space-between"
76
+
flex={1}
77
+
>
78
+
<H3 fontSize="$7">Use custom node</H3>
79
+
<Switch
80
+
size="$3" // Tamagui Switch size
81
+
checked={overrideEnabled}
82
+
onCheckedChange={handleToggleOverride}
83
+
theme="green" // Optional: use a theme color
84
+
>
85
+
<Switch.Thumb animation="bouncy" />
86
+
</Switch>
87
+
</View>
88
+
{!overrideEnabled && (
77
89
<Text
78
-
fontSize="$6"
90
+
fontSize="$5" // Slightly smaller text
79
91
color="$gray10"
80
92
style={{ opacity: overrideEnabled ? 0 : 1 }}
81
93
numberOfLines={1}
82
94
ellipsizeMode="middle"
83
-
maxWidth={280}
84
95
>
85
-
Default node: {url}
96
+
Default: {url} {/* Shorter label */}
86
97
</Text>
87
-
</View>
98
+
)}
88
99
</XStack>
89
100
101
+
{/* Custom URL Input Row */}
90
102
<XStack
91
-
alignItems="stretch"
103
+
alignItems="center" // Changed to center
92
104
gap="$2"
93
-
width={isWeb ? "100%" : "75%"}
105
+
width="100%" // Adjusted width
94
106
style={{
95
107
opacity: overrideEnabled ? 1 : 0,
96
-
marginTop: -15,
108
+
height: overrideEnabled ? "auto" : 0, // Collapse when hidden
109
+
overflow: "hidden", // Hide overflow when collapsed
110
+
transition: "opacity 0.2s ease-in-out, height 0.2s ease-in-out", // Add transition
97
111
}}
98
112
>
99
113
<Input
100
114
value={newUrl}
101
115
flex={1}
102
-
size="$3"
103
-
placeholder={url}
104
-
onChangeText={(t) => setNewUrl(t)}
105
-
onSubmitEditing={onSubmit}
116
+
size="$4" // Slightly larger input
117
+
placeholder={url || "Enter custom node URL"} // Fallback placeholder
118
+
onChangeText={setNewUrl}
119
+
onSubmitEditing={onSubmitUrl}
106
120
textContentType="URL"
107
121
autoCapitalize="none"
108
122
autoCorrect={false}
123
+
keyboardType="url" // Use URL keyboard
109
124
/>
110
-
<Form.Trigger asChild>
111
-
<Button size="$3">SAVE</Button>
112
-
</Form.Trigger>
125
+
<Button size="$4" onPress={onSubmitUrl}>
126
+
{" "}
127
+
{/* Slightly larger button */}
128
+
SAVE
129
+
</Button>
113
130
</XStack>
114
131
</View>
115
-
</Form>
116
-
<View
117
-
alignItems="center"
118
-
justifyContent="center"
119
-
gap="$2"
120
-
fg={1}
121
-
flexBasis={0}
122
-
>
123
-
<XStack alignItems="center" gap="$6">
124
-
<View>
125
-
<H3 fontSize="$8">Player Telemetry</H3>
126
-
<Text
127
-
fontSize="$6"
128
-
color="$gray10"
129
-
style={{ position: "absolute", bottom: -15 }}
132
+
133
+
{/* Player Telemetry Section */}
134
+
<View
135
+
alignItems="center"
136
+
justifyContent="center"
137
+
gap="$4" // Increased gap
138
+
>
139
+
{/* Toggle Switch for Player Telemetry */}
140
+
<XStack
141
+
alignItems="center"
142
+
justifyContent="space-between"
143
+
width="100%"
144
+
>
145
+
{" "}
146
+
{/* Adjusted width and justification */}
147
+
<View flex={1} pr="$3">
148
+
{" "}
149
+
{/* Added padding right to text container */}
150
+
<H3 fontSize="$7">Player Telemetry</H3>{" "}
151
+
{/* Slightly smaller heading */}
152
+
<Text
153
+
fontSize="$5" // Slightly smaller text
154
+
color="$gray10"
155
+
>
156
+
Optional
157
+
</Text>
158
+
</View>
159
+
<Switch
160
+
size="$3"
161
+
checked={telemetry === true}
162
+
onCheckedChange={handleTelemetryToggle}
163
+
theme="purple"
130
164
>
131
-
Optional
132
-
</Text>
133
-
</View>
134
-
<Switch
135
-
accessibilityLabel="Player Telemetry"
136
-
accessibilityHint="Toggle to enable player telemetry"
137
-
style={{
138
-
transform: [{ scaleX: 1.2 }, { scaleY: 1.2 }],
139
-
marginTop: isWeb ? 0 : 8,
140
-
}}
141
-
value={telemetry === true}
142
-
onValueChange={(checked) => {
143
-
if (checked === true) {
144
-
dispatch(telemetryOpt(true));
145
-
} else {
146
-
dispatch(telemetryOpt(false));
147
-
}
165
+
<Switch.Thumb animation="bouncy" />
166
+
</Switch>
167
+
</XStack>
168
+
</View>
169
+
170
+
{/* Manage Keys Button */}
171
+
<AQLink
172
+
to={{
173
+
screen: "Key Manager",
174
+
}}
175
+
>
176
+
<Button
177
+
size="$4" // Slightly larger button
178
+
onPress={() => {
179
+
// redirect to manage keys page
148
180
}}
149
-
/>
150
-
</XStack>
181
+
theme="blue" // Optional: use a theme color
182
+
>
183
+
Manage Keys
184
+
</Button>
185
+
</AQLink>
151
186
</View>
152
-
</View>
187
+
</Container>
153
188
);
154
189
}
+1
-7
js/app/components/settings/updates.tsx
+1
-7
js/app/components/settings/updates.tsx
···
4
4
// maybe someday some PWA update stuff will live here
5
5
export function Updates() {
6
6
return (
7
-
<View
8
-
f={1}
9
-
alignItems="center"
10
-
justifyContent="center"
11
-
fg={1}
12
-
flexBasis={0}
13
-
>
7
+
<View alignItems="center" justifyContent="center" flexBasis={0} py="$6">
14
8
<View>
15
9
<H2 textAlign="center">Streamplace v{pkg.version}</H2>
16
10
</View>