ordering-ui-react-native 0.21.31 → 0.21.32-test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.31",
+  "version": "0.21.32-test",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/NewOrderNotification/index.tsx

@@ -1,22 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  View,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity
+} from 'react-native';
+import { useTheme } from 'styled-components/native'
 import moment from 'moment'
-import { NewOrderNotification as NewOrderNotificationController, useApi, useEvent, useLanguage, useSession } from 'ordering-components/native'
-import React, { useEffect, useState } from 'react'
-import { Dimensions, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
-import Sound from 'react-native-sound'
 import Icon from 'react-native-vector-icons/Feather'
-import { useTheme } from 'styled-components/native'
+import SoundPlayer from 'react-native-sound-player'
+
+import {
+  NewOrderNotification as NewOrderNotificationController,
+  useApi,
+  useEvent,
+  useLanguage,
+  useSession
+} from 'ordering-components/native'
 
-import { useLocation } from '../../hooks/useLocation'
 import { OIcon, OText } from '../shared'
 import { NotificationContainer } from './styles'
+import { useLocation } from '../../hooks/useLocation'
 
-Sound.setCategory('Playback', true)
-Sound.setMode('Default')
-
+const SOUND_REPETITIONS = 3
+const DELAY_SOUND = 2000 // 2 sec
 const windowWidth = Dimensions.get('screen').width
 
-const SOUND_LOOP = 3
-
 const NewOrderNotificationUI = (props: any) => {
   const { isBusinessApp } = props
   const [events] = useEvent()
@@ -24,9 +34,11 @@ const NewOrderNotificationUI = (props: any) => {
   const [, t] = useLanguage()
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
-  const { getCurrentLocation } = useLocation();
+  const { getCurrentLocation } = useLocation()
   const [currentEvent, setCurrentEvent] = useState<any>(null)
 
+  const URL_SOUND = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
+
   const evtList: any = {
     1: {
       event: 'messages',
@@ -45,37 +57,22 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const soundSrc = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
-
-  const notificationSound = new Sound(soundSrc, '', () => { });
-
-  let _timeout: any = null
-  let times = 0
-
   const handleCloseEvents = () => {
-    notificationSound.stop()
     setCurrentEvent(null)
-    clearInterval(_timeout)
+    SoundPlayer.stop();
+  }
+
+  const playSoundNotification = async () => {
+    for (let i = 0; i < SOUND_REPETITIONS; i++) {
+      SoundPlayer.playUrl(URL_SOUND)
+      await new Promise(resolve => setTimeout(resolve, DELAY_SOUND));
+      SoundPlayer.stop();
+    }
   }
 
   const handlePlayNotificationSound = (eventObj: any = null) => {
     setCurrentEvent(eventObj)
-    if (times > 0) {
-      if (times === 3) {
-        times = 0
-        return
-      }
-      return
-    }
-    _timeout = setInterval(() => {
-      if (times < SOUND_LOOP) {
-        notificationSound.play()
-        times++
-      } else {
-        clearInterval(_timeout)
-        return
-      }
-    }, 2500)
+    playSoundNotification()
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
@@ -96,11 +93,15 @@ const NewOrderNotificationUI = (props: any) => {
         handlePlayNotificationSound({ evt: 2, orderId: value?.id })
       }
     }
-    if (evtType === 3 || value.author_id === user.id) return
-    setTimeout(() => handlePlayNotificationSound({
+    if (evtType === 3 || value?.author_id === user.id) return
+    handlePlayNotificationSound({
       evt: evtType,
-      orderId: value?.driver ? value?.order_id : evtList[evtType].event === 'messages' ? value?.order?.id : value?.order_id
-    }), 1000)
+      orderId: value?.driver
+        ? value?.order_id
+        : evtList[evtType].event === 'messages'
+          ? value?.order?.id
+          : value?.order_id ?? value?.id
+    })
   }
 
   useEffect(() => {

package/themes/business/src/components/OrdersOption/index.tsx

@@ -6,11 +6,6 @@ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import TrackPlayer, {
-  RepeatMode,
-  Capability,
-  AppKilledPlaybackBehavior
-} from 'react-native-track-player';
 
 import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
@@ -112,79 +107,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const HEIGHT_SCREEN = orientationState?.dimensions?.height
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
 
-  const URL_SOUND = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
-
-  const setupPlayer = async (options: any) => {
-    const setup = async () => {
-      try {
-        await TrackPlayer.setupPlayer(options);
-      } catch (error) {
-        return (error as Error & { code?: string }).code;
-      }
-    }
-    while ((await setup()) === 'android_cannot_setup_player_in_background') {
-      await new Promise<void>((resolve) => setTimeout(resolve, 1));
-    }
-  };
-
-  const SetupService = async () => {
-    await setupPlayer({ autoHandleInterruptions: true });
-    await TrackPlayer.updateOptions({
-      android: {
-        appKilledPlaybackBehavior:
-          AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
-      },
-      capabilities: [
-        Capability.Play,
-        Capability.Pause,
-        Capability.SkipToNext,
-        Capability.SkipToPrevious,
-        Capability.SeekTo,
-      ],
-      compactCapabilities: [
-        Capability.Play,
-        Capability.Pause,
-        Capability.SkipToNext,
-      ],
-      progressUpdateEventInterval: 2,
-    });
-    await TrackPlayer.setRepeatMode(RepeatMode.Track);
-  };
-
-  const QueueInitialTracksService = async () => {
-    await TrackPlayer.add([
-      {
-        id: 'notification',
-        url: URL_SOUND,
-        title: 'notification'
-      },
-    ]);
-  }
-
-  function useSetupPlayer() {
-    const [playerReady, setPlayerReady] = useState<boolean>(false)
-
-    useEffect(() => {
-      let unmounted = false;
-      (async () => {
-        await SetupService()
-        if (unmounted) return
-        setPlayerReady(true)
-        const queue = await TrackPlayer.getQueue()
-        if (unmounted) return
-        if (queue.length <= 0) {
-          await QueueInitialTracksService()
-        }
-      })();
-      return () => {
-        unmounted = true;
-      };
-    }, []);
-    return playerReady;
-  }
-
-  const isPlayerReady = useSetupPlayer()
-
   const preorderTypeList = [
     { key: null, name: t('SLA', 'SLA\'s') },
     { key: 'in_time', name: t('OK', 'Ok') },
@@ -780,10 +702,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
 
       {isBusinessApp && (
-        <NewOrderNotification
-          isBusinessApp={isBusinessApp}
-          isPlayerReady={isPlayerReady}
-        />
+        <NewOrderNotification isBusinessApp={isBusinessApp} />
       )}
 
       {(openSearchModal || openSLASettingModal) && (