+2 -1

js/components/src/components/dashboard/information-widget.tsx

··· 12 12 import React, { useCallback, useEffect, useMemo, useState } from "react"; 13 13 import { LayoutChangeEvent, Text, TouchableOpacity, View } from "react-native"; 14 14 import Svg, { Path, Line as SvgLine, Text as SvgText } from "react-native-svg"; 15 15 + import { useAQState } from "../../hooks"; 15 16 import { 16 17 useLivestreamStore, 17 18 useSegment, ··· 38 39 const [bitrateHistory, setBitrateHistory] = useState<number[]>( 39 40 Array.from({ length: BITRATE_HISTORY_LENGTH }, () => 0), 40 41 ); 41 41 - const [showViewers, setShowViewers] = useState(false); 42 42 + const [showViewers, setShowViewers] = useAQState("showViewers", false); 42 43 const [componentWidth, setComponentWidth] = useState<number>(220); 43 44 const [componentHeight, setComponentHeight] = useState<number>(400); 44 45 const [streamStartTime, setStreamStartTime] = useState<Date | null>(null);

+1

js/components/src/hooks/index.ts

··· 1 1 // barrel file :) 2 2 + export * from "./useAQState"; 2 3 export * from "./useAvatars"; 3 4 export * from "./useCameraToggle"; 4 5 export * from "./useDocumentTitle";

+37

js/components/src/hooks/useAQState.ts

··· 1 1 + import { useEffect, useState } from "react"; 2 2 + import storage from "../storage"; 3 3 + 4 4 + export function useAQState<T>( 5 5 + key: string, 6 6 + defaultValue: T, 7 7 + ): [T, (value: T) => void] { 8 8 + const [state, setState] = useState<T>(defaultValue); 9 9 + const [isLoaded, setIsLoaded] = useState(false); 10 10 + 11 11 + useEffect(() => { 12 12 + const loadFromStorage = async () => { 13 13 + try { 14 14 + const stored = await storage.getItem(key); 15 15 + if (stored !== null) { 16 16 + setState(JSON.parse(stored)); 17 17 + } 18 18 + } catch (error) { 19 19 + console.error(`Failed to load ${key} from storage:`, error); 20 20 + } finally { 21 21 + setIsLoaded(true); 22 22 + } 23 23 + }; 24 24 + loadFromStorage(); 25 25 + }, [key]); 26 26 + 27 27 + const setStoredState = (value: T) => { 28 28 + setState(value); 29 29 + if (isLoaded) { 30 30 + storage.setItem(key, JSON.stringify(value)).catch((error) => { 31 31 + console.error(`Failed to save ${key} to storage:`, error); 32 32 + }); 33 33 + } 34 34 + }; 35 35 + 36 36 + return [state, setStoredState]; 37 37 + }