tangled
alpha
login
or
join now
stream.place
/
streamplace
74
fork
atom
Live video on the AT Protocol
74
fork
atom
overview
issues
1
pulls
pipelines
move debug down a level
Natalie B.
4 months ago
5415e457
91128863
+58
-95
5 changed files
expand all
collapse all
unified
split
js
app
components
settings
debug-recording-settings.tsx
privacy-category-settings.tsx
settings.tsx
streaming-category-settings.tsx
src
router.tsx
-68
js/app/components/settings/debug-recording-settings.tsx
···
1
-
import { Text, View, zero } from "@streamplace/components";
2
-
import { useEffect } from "react";
3
-
import { useTranslation } from "react-i18next";
4
-
import { ScrollView, Switch } from "react-native";
5
-
import { useStore } from "store";
6
-
import { useIsReady, useServerSettings, useStreamplaceUrl } from "store/hooks";
7
-
8
-
export function DebugRecordingSettings() {
9
-
const isReady = useIsReady();
10
-
const serverSettings = useServerSettings();
11
-
const url = useStreamplaceUrl();
12
-
const getServerSettingsFromPDS = useStore(
13
-
(state) => state.getServerSettingsFromPDS,
14
-
);
15
-
const createServerSettingsRecord = useStore(
16
-
(state) => state.createServerSettingsRecord,
17
-
);
18
-
const { t } = useTranslation("settings");
19
-
const debugRecordingOn = serverSettings?.debugRecording === true;
20
-
21
-
useEffect(() => {
22
-
if (isReady) {
23
-
getServerSettingsFromPDS();
24
-
}
25
-
}, [isReady]);
26
-
27
-
const u = new URL(url);
28
-
29
-
return (
30
-
<ScrollView>
31
-
<View style={[zero.layout.flex.align.center, zero.px[8], zero.py[4]]}>
32
-
<View
33
-
style={[
34
-
zero.gap.all[12],
35
-
{ paddingVertical: 24, maxWidth: 500, width: "100%" },
36
-
]}
37
-
>
38
-
<View
39
-
style={[
40
-
{ alignItems: "center" },
41
-
{ justifyContent: "space-between" },
42
-
{ width: "100%", flexDirection: "row" },
43
-
]}
44
-
>
45
-
<View style={[{ flex: 1 }, { paddingRight: 12 }]}>
46
-
<Text size="xl">
47
-
{t("debug-recording-title", { host: u.host })}
48
-
</Text>
49
-
<Text size="lg" color="muted">
50
-
{t("debug-recording-description")}
51
-
</Text>
52
-
</View>
53
-
<Switch
54
-
value={debugRecordingOn}
55
-
onValueChange={(value) => {
56
-
if (value === true) {
57
-
createServerSettingsRecord(true);
58
-
} else {
59
-
createServerSettingsRecord(false);
60
-
}
61
-
}}
62
-
/>
63
-
</View>
64
-
</View>
65
-
</View>
66
-
</ScrollView>
67
-
);
68
-
}
···
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
+53
-11
js/app/components/settings/privacy-category-settings.tsx
···
1
-
import { View, zero } from "@streamplace/components";
2
-
import { SettingsItemLink } from "components/settings/settings-item-link";
3
-
import { Video } from "lucide-react-native";
4
import { useTranslation } from "react-i18next";
5
-
import { ScrollView } from "react-native";
0
0
6
7
export function PrivacyCategorySettings() {
8
const { t } = useTranslation("settings");
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
9
return (
10
<ScrollView>
11
-
<View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}>
12
<View
13
style={[
14
-
zero.gap.all[4],
15
{ paddingVertical: 24, maxWidth: 500, width: "100%" },
16
]}
17
>
18
-
<SettingsItemLink
19
-
title={t("debug-recording")}
20
-
screen="DebugRecordingSettings"
21
-
icon={Video}
22
-
/>
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
23
</View>
24
</View>
25
</ScrollView>
···
1
+
import { Text, View, zero } from "@streamplace/components";
2
+
import { useEffect } from "react";
0
3
import { useTranslation } from "react-i18next";
4
+
import { ScrollView, Switch } from "react-native";
5
+
import { useStore } from "store";
6
+
import { useIsReady, useServerSettings, useStreamplaceUrl } from "store/hooks";
7
8
export function PrivacyCategorySettings() {
9
const { t } = useTranslation("settings");
10
+
const isReady = useIsReady();
11
+
const serverSettings = useServerSettings();
12
+
const url = useStreamplaceUrl();
13
+
const getServerSettingsFromPDS = useStore(
14
+
(state) => state.getServerSettingsFromPDS,
15
+
);
16
+
const createServerSettingsRecord = useStore(
17
+
(state) => state.createServerSettingsRecord,
18
+
);
19
+
const debugRecordingOn = serverSettings?.debugRecording === true;
20
+
21
+
useEffect(() => {
22
+
if (isReady) {
23
+
getServerSettingsFromPDS();
24
+
}
25
+
}, [isReady]);
26
+
27
+
const u = new URL(url);
28
+
29
return (
30
<ScrollView>
31
+
<View style={[zero.layout.flex.align.center, zero.px[8], zero.py[4]]}>
32
<View
33
style={[
34
+
zero.gap.all[12],
35
{ paddingVertical: 24, maxWidth: 500, width: "100%" },
36
]}
37
>
38
+
<View
39
+
style={[
40
+
zero.layout.flex.row,
41
+
zero.layout.flex.align.center,
42
+
zero.layout.flex.justify.between,
43
+
{ width: "100%" },
44
+
]}
45
+
>
46
+
<View style={[zero.flex.values[1], { paddingRight: 12 }]}>
47
+
<Text size="xl">
48
+
{t("debug-recording-title", { host: u.host })}
49
+
</Text>
50
+
<Text size="lg" color="muted">
51
+
{t("debug-recording-description")}
52
+
</Text>
53
+
</View>
54
+
<Switch
55
+
value={debugRecordingOn}
56
+
onValueChange={(value) => {
57
+
if (value === true) {
58
+
createServerSettingsRecord(true);
59
+
} else {
60
+
createServerSettingsRecord(false);
61
+
}
62
+
}}
63
+
/>
64
+
</View>
65
</View>
66
</View>
67
</ScrollView>
+1
-1
js/app/components/settings/settings.tsx
···
16
import { useUserProfile } from "store/hooks";
17
import pkg from "../../package.json";
18
19
-
function HorizontalBar() {
20
return (
21
<View
22
style={{
···
16
import { useUserProfile } from "store/hooks";
17
import pkg from "../../package.json";
18
19
+
export function HorizontalBar() {
20
return (
21
<View
22
style={{
+4
-7
js/app/components/settings/streaming-category-settings.tsx
···
3
import { Key, Webhook } from "lucide-react-native";
4
import { useTranslation } from "react-i18next";
5
import { ScrollView } from "react-native";
0
6
7
export function StreamingCategorySettings() {
8
const { t } = useTranslation("settings");
9
return (
10
<ScrollView>
11
-
<View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}>
12
-
<View
13
-
style={[
14
-
zero.gap.all[4],
15
-
{ paddingVertical: 24, maxWidth: 500, width: "100%" },
16
-
]}
17
-
>
18
<SettingsItemLink
19
title={t("key-management")}
20
screen="KeyManagement"
21
icon={Key}
22
rootScreen
23
/>
0
24
<SettingsItemLink
25
title={t("webhooks")}
26
screen="WebhooksSettings"
···
3
import { Key, Webhook } from "lucide-react-native";
4
import { useTranslation } from "react-i18next";
5
import { ScrollView } from "react-native";
6
+
import { HorizontalBar } from "./settings";
7
8
export function StreamingCategorySettings() {
9
const { t } = useTranslation("settings");
10
return (
11
<ScrollView>
12
+
<View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
13
+
<View style={[{ paddingVertical: 0, maxWidth: 500, width: "100%" }]}>
0
0
0
0
0
14
<SettingsItemLink
15
title={t("key-management")}
16
screen="KeyManagement"
17
icon={Key}
18
rootScreen
19
/>
20
+
<HorizontalBar />
21
<SettingsItemLink
22
title={t("webhooks")}
23
screen="WebhooksSettings"
-8
js/app/src/router.tsx
···
21
import Login from "components/login/login";
22
import { AboutCategorySettings } from "components/settings/about-category-settings";
23
import { AdvancedCategorySettings } from "components/settings/advanced-category-settings";
24
-
import { DebugRecordingSettings } from "components/settings/debug-recording-settings";
25
import { DeveloperSettings } from "components/settings/developer";
26
import { PrivacyCategorySettings } from "components/settings/privacy-category-settings";
27
import { StreamingCategorySettings } from "components/settings/streaming-category-settings";
···
112
StreamingCategory: undefined;
113
WebhooksSettings: undefined;
114
PrivacyCategory: undefined;
115
-
DebugRecordingSettings: undefined;
116
DanmuCategory: undefined;
117
AdvancedCategory: undefined;
118
DeveloperSettings: undefined;
···
166
StreamingCategory: "settings/streaming",
167
WebhooksSettings: "settings/streaming/webhooks",
168
PrivacyCategory: "settings/privacy",
169
-
DebugRecordingSettings: "settings/privacy/debug-recording",
170
DanmuCategory: "settings/danmu",
171
AdvancedCategory: "settings/advanced",
172
DeveloperSettings: "settings/developer",
···
721
headerTitle: "Privacy & Security",
722
title: "Privacy & Security",
723
}}
724
-
/>
725
-
<Stack.Screen
726
-
name="DebugRecordingSettings"
727
-
component={DebugRecordingSettings}
728
-
options={{ headerTitle: "Debug Recording", title: "Debug Recording" }}
729
/>
730
<Stack.Screen
731
name="DanmuCategory"
···
21
import Login from "components/login/login";
22
import { AboutCategorySettings } from "components/settings/about-category-settings";
23
import { AdvancedCategorySettings } from "components/settings/advanced-category-settings";
0
24
import { DeveloperSettings } from "components/settings/developer";
25
import { PrivacyCategorySettings } from "components/settings/privacy-category-settings";
26
import { StreamingCategorySettings } from "components/settings/streaming-category-settings";
···
111
StreamingCategory: undefined;
112
WebhooksSettings: undefined;
113
PrivacyCategory: undefined;
0
114
DanmuCategory: undefined;
115
AdvancedCategory: undefined;
116
DeveloperSettings: undefined;
···
164
StreamingCategory: "settings/streaming",
165
WebhooksSettings: "settings/streaming/webhooks",
166
PrivacyCategory: "settings/privacy",
0
167
DanmuCategory: "settings/danmu",
168
AdvancedCategory: "settings/advanced",
169
DeveloperSettings: "settings/developer",
···
718
headerTitle: "Privacy & Security",
719
title: "Privacy & Security",
720
}}
0
0
0
0
0
721
/>
722
<Stack.Screen
723
name="DanmuCategory"