feat: naive scrobbling integration

src/screens/Settings/components/PlaybackReporting.tsx

@@ -0,0 +1,44 @@
+import { Paragraph, Text } from 'components/Typography';
+import React, { useCallback } from 'react';
+import { Switch } from 'react-native-gesture-handler';
+import styled from 'styled-components/native';
+import { t } from '@localisation';
+import { SafeScrollView } from 'components/SafeNavigatorView';
+import { useAppDispatch, useTypedSelector } from 'store';
+import { setEnablePlaybackReporting } from 'store/settings/actions';
+
+const Container = styled.View`
+    padding: 24px;
+`;
+
+const SwitchContainer = styled.View`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0;
+`;
+
+const Label = styled(Text)`
+    font-size: 16px;
+`;
+
+export default function PlaybackReporting() {
+    const isEnabled = useTypedSelector((state) => state.settings.enablePlaybackReporting);
+    const dispatch = useAppDispatch();
+
+    const toggleSwitch = useCallback(() => {
+        dispatch(setEnablePlaybackReporting(!isEnabled));
+    }, [isEnabled, dispatch]);
+
+    return (
+        <SafeScrollView>
+            <Container>
+                <Paragraph>{t('playback-reporting-description')}</Paragraph>
+                <SwitchContainer>
+                    <Label>{t('playback-reporting')}</Label>
+                    <Switch value={isEnabled} onValueChange={toggleSwitch} />
+                </SwitchContainer>
+            </Container>
+        </SafeScrollView>
+    );
+}

src/screens/Settings/index.tsx

@@ -11,18 +11,21 @@ import { THEME_COLOR } from 'CONSTANTS';
 import Sentry from './components/Sentry';
 import { SettingsNavigationProp } from './types';
 import { SafeScrollView } from 'components/SafeNavigatorView';
+import PlaybackReporting from './components/PlaybackReporting';
 
 export function SettingsList() {
     const navigation = useNavigation<SettingsNavigationProp>();
     const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
     const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
     const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);
+    const handlePlaybackReportingClick = useCallback(() => { navigation.navigate('Playback Reporting'); }, [navigation]);
 
     return (
         <SafeScrollView>
             <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
             <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
+            <ListButton onPress={handlePlaybackReportingClick}>{t('playback-reporting')}</ListButton>
         </SafeScrollView>
     );
 }
@@ -43,6 +46,7 @@ export default function Settings() {
             <Stack.Screen name="Library" component={Library} options={{ headerTitle: t('jellyfin-library') }} />
             <Stack.Screen name="Cache" component={Cache} options={{ headerTitle: t('setting-cache') }} />
             <Stack.Screen name="Sentry" component={Sentry} options={{ headerTitle: t('error-reporting') }} />
+            <Stack.Screen name="Playback Reporting" component={PlaybackReporting} options={{ headerTitle: t('playback-reporting')}} />
         </Stack.Navigator>
     );
 }