-68

js/app/components/settings/debug-recording-settings.tsx

··· 1 1 - import { Text, View, zero } from "@streamplace/components"; 2 2 - import { useEffect } from "react"; 3 3 - import { useTranslation } from "react-i18next"; 4 4 - import { ScrollView, Switch } from "react-native"; 5 5 - import { useStore } from "store"; 6 6 - import { useIsReady, useServerSettings, useStreamplaceUrl } from "store/hooks"; 7 7 - 8 8 - export function DebugRecordingSettings() { 9 9 - const isReady = useIsReady(); 10 10 - const serverSettings = useServerSettings(); 11 11 - const url = useStreamplaceUrl(); 12 12 - const getServerSettingsFromPDS = useStore( 13 13 - (state) => state.getServerSettingsFromPDS, 14 14 - ); 15 15 - const createServerSettingsRecord = useStore( 16 16 - (state) => state.createServerSettingsRecord, 17 17 - ); 18 18 - const { t } = useTranslation("settings"); 19 19 - const debugRecordingOn = serverSettings?.debugRecording === true; 20 20 - 21 21 - useEffect(() => { 22 22 - if (isReady) { 23 23 - getServerSettingsFromPDS(); 24 24 - } 25 25 - }, [isReady]); 26 26 - 27 27 - const u = new URL(url); 28 28 - 29 29 - return ( 30 30 - <ScrollView> 31 31 - <View style={[zero.layout.flex.align.center, zero.px[8], zero.py[4]]}> 32 32 - <View 33 33 - style={[ 34 34 - zero.gap.all[12], 35 35 - { paddingVertical: 24, maxWidth: 500, width: "100%" }, 36 36 - ]} 37 37 - > 38 38 - <View 39 39 - style={[ 40 40 - { alignItems: "center" }, 41 41 - { justifyContent: "space-between" }, 42 42 - { width: "100%", flexDirection: "row" }, 43 43 - ]} 44 44 - > 45 45 - <View style={[{ flex: 1 }, { paddingRight: 12 }]}> 46 46 - <Text size="xl"> 47 47 - {t("debug-recording-title", { host: u.host })} 48 48 - </Text> 49 49 - <Text size="lg" color="muted"> 50 50 - {t("debug-recording-description")} 51 51 - </Text> 52 52 - </View> 53 53 - <Switch 54 54 - value={debugRecordingOn} 55 55 - onValueChange={(value) => { 56 56 - if (value === true) { 57 57 - createServerSettingsRecord(true); 58 58 - } else { 59 59 - createServerSettingsRecord(false); 60 60 - } 61 61 - }} 62 62 - /> 63 63 - </View> 64 64 - </View> 65 65 - </View> 66 66 - </ScrollView> 67 67 - ); 68 68 - }

+53 -11

js/app/components/settings/privacy-category-settings.tsx

··· 1 1 - import { View, zero } from "@streamplace/components"; 2 2 - import { SettingsItemLink } from "components/settings/settings-item-link"; 3 3 - import { Video } from "lucide-react-native"; 1 1 + import { Text, View, zero } from "@streamplace/components"; 2 2 + import { useEffect } from "react"; 4 3 import { useTranslation } from "react-i18next"; 5 5 - import { ScrollView } from "react-native"; 4 4 + import { ScrollView, Switch } from "react-native"; 5 5 + import { useStore } from "store"; 6 6 + import { useIsReady, useServerSettings, useStreamplaceUrl } from "store/hooks"; 6 7 7 8 export function PrivacyCategorySettings() { 8 9 const { t } = useTranslation("settings"); 10 10 + const isReady = useIsReady(); 11 11 + const serverSettings = useServerSettings(); 12 12 + const url = useStreamplaceUrl(); 13 13 + const getServerSettingsFromPDS = useStore( 14 14 + (state) => state.getServerSettingsFromPDS, 15 15 + ); 16 16 + const createServerSettingsRecord = useStore( 17 17 + (state) => state.createServerSettingsRecord, 18 18 + ); 19 19 + const debugRecordingOn = serverSettings?.debugRecording === true; 20 20 + 21 21 + useEffect(() => { 22 22 + if (isReady) { 23 23 + getServerSettingsFromPDS(); 24 24 + } 25 25 + }, [isReady]); 26 26 + 27 27 + const u = new URL(url); 28 28 + 9 29 return ( 10 30 <ScrollView> 11 11 - <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}> 31 31 + <View style={[zero.layout.flex.align.center, zero.px[8], zero.py[4]]}> 12 32 <View 13 33 style={[ 14 14 - zero.gap.all[4], 34 34 + zero.gap.all[12], 15 35 { paddingVertical: 24, maxWidth: 500, width: "100%" }, 16 36 ]} 17 37 > 18 18 - <SettingsItemLink 19 19 - title={t("debug-recording")} 20 20 - screen="DebugRecordingSettings" 21 21 - icon={Video} 22 22 - /> 38 38 + <View 39 39 + style={[ 40 40 + zero.layout.flex.row, 41 41 + zero.layout.flex.align.center, 42 42 + zero.layout.flex.justify.between, 43 43 + { width: "100%" }, 44 44 + ]} 45 45 + > 46 46 + <View style={[zero.flex.values[1], { paddingRight: 12 }]}> 47 47 + <Text size="xl"> 48 48 + {t("debug-recording-title", { host: u.host })} 49 49 + </Text> 50 50 + <Text size="lg" color="muted"> 51 51 + {t("debug-recording-description")} 52 52 + </Text> 53 53 + </View> 54 54 + <Switch 55 55 + value={debugRecordingOn} 56 56 + onValueChange={(value) => { 57 57 + if (value === true) { 58 58 + createServerSettingsRecord(true); 59 59 + } else { 60 60 + createServerSettingsRecord(false); 61 61 + } 62 62 + }} 63 63 + /> 64 64 + </View> 23 65 </View> 24 66 </View> 25 67 </ScrollView>

+1 -1

js/app/components/settings/settings.tsx

··· 16 16 import { useUserProfile } from "store/hooks"; 17 17 import pkg from "../../package.json"; 18 18 19 19 - function HorizontalBar() { 19 19 + export function HorizontalBar() { 20 20 return ( 21 21 <View 22 22 style={{

+4 -7

js/app/components/settings/streaming-category-settings.tsx

··· 3 3 import { Key, Webhook } from "lucide-react-native"; 4 4 import { useTranslation } from "react-i18next"; 5 5 import { ScrollView } from "react-native"; 6 6 + import { HorizontalBar } from "./settings"; 6 7 7 8 export function StreamingCategorySettings() { 8 9 const { t } = useTranslation("settings"); 9 10 return ( 10 11 <ScrollView> 11 11 - <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}> 12 12 - <View 13 13 - style={[ 14 14 - zero.gap.all[4], 15 15 - { paddingVertical: 24, maxWidth: 500, width: "100%" }, 16 16 - ]} 17 17 - > 12 12 + <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}> 13 13 + <View style={[{ paddingVertical: 0, maxWidth: 500, width: "100%" }]}> 18 14 <SettingsItemLink 19 15 title={t("key-management")} 20 16 screen="KeyManagement" 21 17 icon={Key} 22 18 rootScreen 23 19 /> 20 20 + <HorizontalBar /> 24 21 <SettingsItemLink 25 22 title={t("webhooks")} 26 23 screen="WebhooksSettings"

-8

js/app/src/router.tsx

··· 21 21 import Login from "components/login/login"; 22 22 import { AboutCategorySettings } from "components/settings/about-category-settings"; 23 23 import { AdvancedCategorySettings } from "components/settings/advanced-category-settings"; 24 24 - import { DebugRecordingSettings } from "components/settings/debug-recording-settings"; 25 24 import { DeveloperSettings } from "components/settings/developer"; 26 25 import { PrivacyCategorySettings } from "components/settings/privacy-category-settings"; 27 26 import { StreamingCategorySettings } from "components/settings/streaming-category-settings"; ··· 112 111 StreamingCategory: undefined; 113 112 WebhooksSettings: undefined; 114 113 PrivacyCategory: undefined; 115 115 - DebugRecordingSettings: undefined; 116 114 DanmuCategory: undefined; 117 115 AdvancedCategory: undefined; 118 116 DeveloperSettings: undefined; ··· 166 164 StreamingCategory: "settings/streaming", 167 165 WebhooksSettings: "settings/streaming/webhooks", 168 166 PrivacyCategory: "settings/privacy", 169 169 - DebugRecordingSettings: "settings/privacy/debug-recording", 170 167 DanmuCategory: "settings/danmu", 171 168 AdvancedCategory: "settings/advanced", 172 169 DeveloperSettings: "settings/developer", ··· 721 718 headerTitle: "Privacy & Security", 722 719 title: "Privacy & Security", 723 720 }} 724 724 - /> 725 725 - <Stack.Screen 726 726 - name="DebugRecordingSettings" 727 727 - component={DebugRecordingSettings} 728 728 - options={{ headerTitle: "Debug Recording", title: "Debug Recording" }} 729 721 /> 730 722 <Stack.Screen 731 723 name="DanmuCategory"