gistfile1.txt

import {useFocusEffect} from '@react-navigation/native';
import {Box, IconButton, Text} from 'components';
import {Theme} from 'core/styles';
import {useGetSessions} from 'hooks';
import useInAppPurchase from 'hooks/iap';
import LottieView from 'lottie-react-native';
import {useAppNavigation} from 'navigation/hooks/useAppNavigation';
import {useAuth} from 'pods/auth/context';
import {useOnboarding} from 'pods/onboarding/context';
import {SoundEquilizer} from 'pods/session/assets';
import {useSettings} from 'pods/settings/context';
import React, {useCallback, useEffect, useLayoutEffect} from 'react';
import {
  ActivityIndicator,
  AppState,
  AppStateStatus,
  Dimensions,
  Pressable,
  ScrollView,
} from 'react-native';
import {NativeModules} from 'react-native';
import Sound from 'react-native-sound';
import {sessionsService} from 'services';

const {TimerWidgetModule} = NativeModules;

import ActivityGoalsTracker from './components/activity-goals-tracker/ActivityGoalsTracker';
import NextBadges from './components/badges/NextBadges';
import ExploreSoundscapes from './components/explore-soundscapes/ExploreSoundscapes';
import MySessions from './components/my-sessions/MySessions';
import MyShortcuts from './components/my-shortcuts/MyShortcuts';

const fadeDuration = 1500;
Sound.setCategory('Playback', true);

const HomeScreen = () => {
  const {authenticated} = useAuth();
  const navigation = useAppNavigation();
  const {checkAndSetIfUserIsPremium} = useInAppPurchase();
  const {lobbyMusic} = useOnboarding();
  const {lobbyMusicEnabled} = useSettings();

  const {sessions, isLoading, refetch} = useGetSessions();

  const [playing, setPlaying] = React.useState(false);
  const [fading, setFading] = React.useState(false);

  const initializeLobbyMusic = useCallback(async () => {
    if (!lobbyMusicEnabled) {
      return;
    }
    if (lobbyMusic.isPlaying()) {
      setPlaying(true);
      return;
    }

    setFading(true);
    lobbyMusic.setNumberOfLoops(-1);
    lobbyMusic.setVolume(0);
    lobbyMusic.play(success => {
      if (!success) {
        console.log('playback failed due to audio decoding errors');
      }
    });

    // Fade in effect
    const fadeIn = (volume: any) => {
      if (volume < 0.5) {
        lobbyMusic.setVolume(volume);
        setTimeout(() => fadeIn(volume + 0.1), fadeDuration / 10);
      }
    };
    fadeIn(0.1);
    setPlaying(true);
    setFading(false);
  }, [lobbyMusic, lobbyMusicEnabled]);

  const stopLobbyMusic = useCallback(() => {
    // Fade out effect
    setFading(true);

    const fadeOut = (volume: any) => {
      if (volume > 0) {
        lobbyMusic.setVolume(volume);
        setTimeout(() => fadeOut(volume - 0.1), fadeDuration / 10);
      } else {
        lobbyMusic.pause();
        setPlaying(false);
        setFading(false);
      }
    };
    fadeOut(0.5);
  }, [lobbyMusic]);

  useFocusEffect(
    React.useCallback(() => {
      // only if route is Home
      if (navigation.isFocused()) {
        initializeLobbyMusic();
      }
      return () => {
        stopLobbyMusic();
      };
    }, [initializeLobbyMusic, navigation, stopLobbyMusic]),
  );

  useEffect(() => {
    const handleAppStateChange = async (nextAppState: AppStateStatus) => {
      if (nextAppState === 'active' && navigation.isFocused()) {
        initializeLobbyMusic();
      }
      if (nextAppState === 'background') {
        stopLobbyMusic();
      }
    };

    const listener = AppState.addEventListener('change', handleAppStateChange);

    return () => {
      listener.remove();
    };
  }, [initializeLobbyMusic, navigation, stopLobbyMusic]);

  useLayoutEffect(() => {
    navigation.setOptions({
      // eslint-disable-next-line react/no-unstable-nested-components
      headerRight: () => (
        <>
          {lobbyMusicEnabled && fading && (
            <Box height={30} width={30}>
              <ActivityIndicator size="small" />
            </Box>
          )}
          {lobbyMusicEnabled &&
            !playing &&
            lobbyMusic.isLoaded() &&
            !fading && (
              <Box
                height={30}
                width={30}
                alignItems="center"
                justifyContent="center">
                <IconButton
                  iconName="play-icon"
                  onPress={initializeLobbyMusic}
                />
              </Box>
            )}
          {playing && !fading && (
            <Box height={30} width={30}>
              <Pressable onPress={stopLobbyMusic}>
                <LottieView
                  source={SoundEquilizer}
                  // eslint-disable-next-line react-native/no-inline-styles
                  style={{width: '100%', height: '100%'}}
                  speed={0.6}
                  autoPlay
                  loop
                />
              </Pressable>
            </Box>
          )}
        </>
      ),
    });
  }, [
    navigation,
    playing,
    fading,
    lobbyMusicEnabled,
    lobbyMusic,
    initializeLobbyMusic,
    stopLobbyMusic,
  ]);

  //if users has active session we decided that we should delete it if he closed the app during it and it was not completed.
  useEffect(() => {
    const cleanup = async () => {
      const activeSession = sessions.find(
        session => session.completed === false,
      );
      if (activeSession?.uuid) {
        await sessionsService.deleteSession(activeSession.uuid);
        refetch();
      }
    };
    cleanup();
  }, [refetch, sessions]);

  useEffect(() => {
    checkAndSetIfUserIsPremium();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!authenticated || isLoading) {
    return (
      <Box
        flex={1}
        backgroundColor={Theme.colors.background.main}
        alignItems="center"
        justifyContent="center">
        <ActivityIndicator animating={isLoading} />
      </Box>
    );
  }

  const itemWidth = Dimensions.get('window').width * 0.45;

  const getDate = () => {
    const oldDateObj = new Date();
    const newDateObj = new Date();
    newDateObj.setTime(oldDateObj.getTime() + 5 * 60 * 1000);

    return newDateObj;
  };

  return (
    <ScrollView
      style={{
        backgroundColor: Theme.colors.background.main,
      }}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{
        paddingBottom: Theme.spacing.large,
        backgroundColor: Theme.colors.background.main,
      }}>
      <Pressable
        style={{paddingVertical: 10}}
        onPress={() => {
          TimerWidgetModule.stopLiveActivity();
        }}>
        <Text>Break Activity</Text>
      </Pressable>

      <Pressable
        style={{paddingVertical: 10}}
        onPress={() => {
          TimerWidgetModule.startLiveActivity(
            getDate() / 1000,
            'TIME LEFT',
            false,
            'background-1',
          );
        }}>
        <Text>Start CountUp</Text>
      </Pressable>
      <Pressable
        style={{paddingVertical: 10}}
        onPress={() => {
          TimerWidgetModule.startLiveActivity(
            getDate() / 1000,
            'TIME LEFT',
            true,
            'background-2',
          );
        }}>
        <Text>Start CountDown</Text>
      </Pressable>
      <Pressable
        style={{paddingVertical: 10}}
        onPress={() => {
          TimerWidgetModule.startLiveActivity(
            getDate() / 1000,
            'TIME LEFT',
            false,
            'background-2',
          );
        }}>
        <Text>Start CountUp</Text>
      </Pressable>
      <Pressable
        style={{paddingVertical: 10}}
        onPress={() => {
          TimerWidgetModule.pause(Date.now() / 1000);
        }}>
        <Text>Pause Activity</Text>
      </Pressable>
      <Pressable
        style={{paddingVertical: 10}}
        onPress={() => {
          TimerWidgetModule.resume();
        }}>
        <Text>Resume pausedActivity</Text>
      </Pressable>
      <Box
        justifyContent="center"
        backgroundColor={Theme.colors.background.main}
        rowGap={Theme.spacing.medium}>
        <Box padding={Theme.spacing.medium}>
          <ActivityGoalsTracker />
        </Box>
        <Box paddingBottom={Theme.spacing.medium}>
          <MyShortcuts
            navigation={navigation}
            shortcutItemWidth={itemWidth}
            renderHeader
          />
        </Box>
        <ExploreSoundscapes />
        <MySessions />
        <Box padding={Theme.spacing.medium}>
          <NextBadges />
        </Box>
      </Box>
    </ScrollView>
  );
};

export default HomeScreen;