From 1b6e0510bbf6f6166754e40855102b4e528604be Mon Sep 17 00:00:00 2001 From: skalthoff <32023561+skalthoff@users.noreply.github.com> Date: Sat, 12 Jul 2025 15:28:08 -0500 Subject: [PATCH] Enhance debug configuration and improve radio group item usability - Added debug configuration to manage console output and warnings in production. - Updated RadioGroupItemWithLabel to handle value changes and improved label press functionality. - Integrated onValueChange handlers for streaming and download quality settings in PlaybackTab and StorageTab components. --- App.tsx | 1 + .../helpers/radio-group-item-with-label.tsx | 16 +++++++- src/components/Global/helpers/text.tsx | 11 +++++- .../Settings/components/playback-tab.tsx | 12 ++++++ .../Settings/components/storage-tab.tsx | 12 ++++++ src/utils/debug-config.ts | 37 +++++++++++++++++++ 6 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 src/utils/debug-config.ts diff --git a/App.tsx b/App.tsx index db2c16e7..9ef5efae 100644 --- a/App.tsx +++ b/App.tsx @@ -1,4 +1,5 @@ import './gesture-handler' +import './src/utils/debug-config' // Import debug configuration early import React, { useState } from 'react' import 'react-native-url-polyfill/auto' import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client' diff --git a/src/components/Global/helpers/radio-group-item-with-label.tsx b/src/components/Global/helpers/radio-group-item-with-label.tsx index f9ade07f..a1acad0b 100644 --- a/src/components/Global/helpers/radio-group-item-with-label.tsx +++ b/src/components/Global/helpers/radio-group-item-with-label.tsx @@ -1,15 +1,27 @@ import { SizeTokens, XStack, RadioGroup } from 'tamagui' import { Label } from './text' -export function RadioGroupItemWithLabel(props: { size: SizeTokens; value: string; label: string }) { +interface RadioGroupItemWithLabelProps { + size: SizeTokens + value: string + label: string + onValueChange?: (value: string) => void +} + +export function RadioGroupItemWithLabel(props: RadioGroupItemWithLabelProps) { const id = `radiogroup-${props.value}` + + const handleLabelPress = () => { + props.onValueChange?.(props.value) + } + return ( - diff --git a/src/components/Global/helpers/text.tsx b/src/components/Global/helpers/text.tsx index 2b920885..bd95c411 100644 --- a/src/components/Global/helpers/text.tsx +++ b/src/components/Global/helpers/text.tsx @@ -15,11 +15,20 @@ interface LabelProps { htmlFor: string children: string size: SizeTokens + onPress?: () => void } export function Label(props: LabelProps): React.JSX.Element { return ( - + {props.children} ) diff --git a/src/components/Settings/components/playback-tab.tsx b/src/components/Settings/components/playback-tab.tsx index 2bb44d71..5a31930c 100644 --- a/src/components/Settings/components/playback-tab.tsx +++ b/src/components/Settings/components/playback-tab.tsx @@ -48,21 +48,33 @@ export default function PlaybackTab(): React.JSX.Element { size='$3' value='original' label='Original Quality (Highest bandwidth)' + onValueChange={(value) => + setStreamingQuality(value as StreamingQuality) + } /> + setStreamingQuality(value as StreamingQuality) + } /> + setStreamingQuality(value as StreamingQuality) + } /> + setStreamingQuality(value as StreamingQuality) + } /> diff --git a/src/components/Settings/components/storage-tab.tsx b/src/components/Settings/components/storage-tab.tsx index 1fd43dfa..7b7ecb78 100644 --- a/src/components/Settings/components/storage-tab.tsx +++ b/src/components/Settings/components/storage-tab.tsx @@ -65,21 +65,33 @@ export default function StorageTab(): React.JSX.Element { size='$3' value='original' label='Original Quality' + onValueChange={(value) => + setDownloadQuality(value as DownloadQuality) + } /> + setDownloadQuality(value as DownloadQuality) + } /> + setDownloadQuality(value as DownloadQuality) + } /> + setDownloadQuality(value as DownloadQuality) + } /> diff --git a/src/utils/debug-config.ts b/src/utils/debug-config.ts new file mode 100644 index 00000000..06c525b7 --- /dev/null +++ b/src/utils/debug-config.ts @@ -0,0 +1,37 @@ +/** + * Debug configuration for controlling console output and in-app warnings + * This disables console.debug, console.log in production builds + * and removes yellow/red warning boxes from the app interface + */ + +import { LogBox } from 'react-native' + +// Disable all LogBox warnings (yellow boxes) in the app +LogBox.ignoreAllLogs(true) + +// Only keep warnings and errors in production +if (!__DEV__) { + console.debug = () => {} + console.log = () => {} + // Optionally disable warnings too: + // console.warn = () => {} + + // Keep console.error for critical issues even in production + // console.error is preserved +} + +// For development, you can control specific debug levels +export const DEBUG_LEVELS = { + PLAYER: __DEV__, // Player-related debug messages + API: __DEV__, // API-related debug messages + QUEUE: __DEV__, // Queue-related debug messages + GENERAL: __DEV__, // General debug messages +} + +// Utility functions for conditional logging +export const debugLog = { + player: (...args: unknown[]) => DEBUG_LEVELS.PLAYER && console.debug('[PLAYER]', ...args), + api: (...args: unknown[]) => DEBUG_LEVELS.API && console.debug('[API]', ...args), + queue: (...args: unknown[]) => DEBUG_LEVELS.QUEUE && console.debug('[QUEUE]', ...args), + general: (...args: unknown[]) => DEBUG_LEVELS.GENERAL && console.debug('[DEBUG]', ...args), +}