ordering-ui-react-native 0.21.27 → 0.21.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.27",
+  "version": "0.21.28",
   "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,33 @@
+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 { useLocation } from '../../hooks/useLocation'
+import {
+  NewOrderNotification as NewOrderNotificationController,
+  useApi,
+  useEvent,
+  useLanguage,
+  useSession
+} from 'ordering-components/native'
+
+import TrackPlayer from 'react-native-track-player';
+
 import { OIcon, OText } from '../shared'
 import { NotificationContainer } from './styles'
+import { useLocation } from '../../hooks/useLocation'
 
-Sound.setCategory('Playback', true)
-Sound.setMode('Default')
-
+const SOUND_LOOP_AMOUNT = 3
+const DURATION_BETWEEN_LOOP = 2000 // ms
 const windowWidth = Dimensions.get('screen').width
 
-const SOUND_LOOP = 3
-
 const NewOrderNotificationUI = (props: any) => {
   const { isBusinessApp } = props
   const [events] = useEvent()
@@ -24,7 +35,7 @@ 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 evtList: any = {
@@ -45,38 +56,28 @@ 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 = () => {
     setCurrentEvent(null)
-    clearInterval(_timeout)
+  }
+
+  const playSoundNotification = () => {
+    let count = 0;
+    const intervalId = setInterval(() => {
+      TrackPlayer.seekTo(0)
+      TrackPlayer.play()
+      setTimeout(() => {
+        TrackPlayer.pause()
+        count++
+        if (count === SOUND_LOOP_AMOUNT) {
+          clearInterval(intervalId);
+        }
+      }, 500) // sound duration divide by 2
+    }, DURATION_BETWEEN_LOOP) // notification duration
   }
 
   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)
-        notificationSound.stop()
-        notificationSound.release()
-        return
-      }
-    }, 2500)
+    playSoundNotification()
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
@@ -98,10 +99,14 @@ const NewOrderNotificationUI = (props: any) => {
       }
     }
     if (evtType === 3 || value?.author_id === user.id) return
-    setTimeout(() => handlePlayNotificationSound({
+    handlePlayNotificationSound({
       evt: evtType,
-      orderId: value?.driver ? value?.order_id : evtList[evtType].event === 'messages' ? value?.order?.id : value?.order_id ?? value?.id
-    }), 1000)
+      orderId: value?.driver
+        ? value?.order_id
+        : evtList[evtType].event === 'messages'
+          ? value?.order?.id
+          : value?.order_id ?? value?.id
+    })
   }
 
   useEffect(() => {
@@ -123,48 +128,44 @@ const NewOrderNotificationUI = (props: any) => {
   useEffect(() => {
     return () => {
       handleCloseEvents()
-      notificationSound.stop()
-      notificationSound.release()
     }
   }, [])
 
   return (
-    <>
-      <Modal
-        animationType='slide'
-        transparent={true}
-        visible={!!currentEvent?.orderId}
-      >
-        <NotificationContainer>
-          <View style={styles.modalView}>
-            <TouchableOpacity
-              style={styles.wrapperIcon}
-              onPress={() => handleCloseEvents()}
-            >
-              <Icon name="x" size={30} />
-            </TouchableOpacity>
-            <OText
-              size={18}
-              color={theme.colors.textGray}
-              weight={600}
-            >
-              {evtList[currentEvent?.evt]?.message}
-            </OText>
-            <OIcon
-              src={theme.images.general.newOrder}
-              width={250}
-              height={200}
-            />
-            <OText
-              color={theme.colors.textGray}
-              mBottom={15}
-            >
-              {evtList[currentEvent?.evt]?.message2}
-            </OText>
-          </View>
-        </NotificationContainer>
-      </Modal>
-    </>
+    <Modal
+      animationType='slide'
+      transparent={true}
+      visible={!!currentEvent?.orderId}
+    >
+      <NotificationContainer>
+        <View style={styles.modalView}>
+          <TouchableOpacity
+            style={styles.wrapperIcon}
+            onPress={() => handleCloseEvents()}
+          >
+            <Icon name="x" size={30} />
+          </TouchableOpacity>
+          <OText
+            size={18}
+            color={theme.colors.textGray}
+            weight={600}
+          >
+            {evtList[currentEvent?.evt]?.message}
+          </OText>
+          <OIcon
+            src={theme.images.general.newOrder}
+            width={250}
+            height={200}
+          />
+          <OText
+            color={theme.colors.textGray}
+            mBottom={15}
+          >
+            {evtList[currentEvent?.evt]?.message2}
+          </OText>
+        </View>
+      </NotificationContainer>
+    </Modal>
   )
 }
 

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

@@ -6,6 +6,12 @@ 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'
 import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
@@ -106,6 +112,79 @@ 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') },
@@ -701,7 +780,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
 
       {isBusinessApp && (
-        <NewOrderNotification isBusinessApp={isBusinessApp} />
+        <NewOrderNotification
+          isBusinessApp={isBusinessApp}
+          isPlayerReady={isPlayerReady}
+        />
       )}
 
       {(openSearchModal || openSLASettingModal) && (