[#9] Add notifications (#88)

App.js

@@ -7,13 +7,15 @@ import { ContextProvider } from "./src/helpers/context";
 import Player from "./src/components/player";
 
 export default function App() {
+
+
   return (
-      <ContextProvider>
-        <RootSiblingParent>
-          <NavigationService />
-          <Player />
-          <StatusBar style="auto" />
-        </RootSiblingParent>
-      </ContextProvider>
+    <ContextProvider>
+      <RootSiblingParent>
+        <NavigationService />
+        <Player />
+        <StatusBar style="auto" />
+      </RootSiblingParent>
+    </ContextProvider>
   );
 }

app.json

@@ -27,6 +27,7 @@
       "bundleIdentifier": "subadapp"
     },
     "android": {
+      "googleServicesFile": "./google-services.json",
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"

google-services.json

@@ -0,0 +1,39 @@
+{
+  "project_info": {
+    "project_number": "117252681067",
+    "project_id": "subadapp-e4046",
+    "storage_bucket": "subadapp-e4046.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:117252681067:android:9cc8b20058befb6f30302e",
+        "android_client_info": {
+          "package_name": "org.subadapp"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "117252681067-k3dm5t3e14ga17s8tv5nqmi36t6h5pdf.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyDaJ-DiyAmMHr6vK2cuIn7gliACpzw-FsQ"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "117252681067-k3dm5t3e14ga17s8tv5nqmi36t6h5pdf.apps.googleusercontent.com",
+              "client_type": 3
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

package.json

@@ -42,7 +42,9 @@
     "expo": "^47",
     "expo-av": "~13.0.2",
     "expo-constants": "~14.0.2",
+    "expo-device": "~5.0.0",
     "expo-linking": "~3.3.0",
+    "expo-notifications": "~0.17.0",
     "expo-status-bar": "~1.4.2",
     "expo-updates": "~0.15.6",
     "react": "18.1.0",
@@ -51,7 +53,7 @@
     "react-native-dialog": "^9.3",
     "react-native-elements": "^3.4",
     "react-native-gesture-handler": "~2.8.0",
-    "react-native-get-random-values": "~1.8.0",
+    "react-native-get-random-values": "^1.8",
     "react-native-reanimated": "~2.12.0",
     "react-native-root-toast": "^3.4",
     "react-native-safe-area-context": "4.4.1",

src/components/menu.js

@@ -30,11 +30,11 @@ export const Menu = (props) => {
 
   const handleUrl = (url) => {
     if (url) {
-      const { path, queryParams } = Linking.parse(url);
-      if (path === "song" && queryParams["no"]) {
+      const { queryParams } = Linking.parse(url);
+      if (queryParams["song"]) {
         navigation.navigate("Playlist", {
           tabIndex: 0,
-          song: queryParams["no"],
+          song: queryParams["song"],
         });
       }
     }
@@ -81,7 +81,7 @@ export const Menu = (props) => {
           label="Kreosus"
         />
         <IconDrawerItem
-          onPress={() => openURL("http://bio.biolinktr.com/subadap")}
+          onPress={() => openURL("https://bio.biolinktr.com/subadap")}
           icon={faCalendarDays}
           label="Yaklaşan Konserler"
         />

src/components/player.js

@@ -1,15 +1,69 @@
-import React, { useEffect, useState } from "react";
-import { View } from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
 import { Audio, InterruptionModeAndroid, InterruptionModeIOS } from "expo-av";
+import * as Device from "expo-device";
+import * as Notifications from "expo-notifications";
 import Toast from "react-native-root-toast";
 import { styles, LoopType, randomInt, useAppContext } from "../helpers";
 import PlayerControls from "./controls";
 import SeekBar from "./seekbar";
 
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: false,
+    shouldSetBadge: false,
+  }),
+});
+
+async function registerForPushNotificationsAsync() {
+  if (Device.isDevice) {
+    const { status: existingStatus } =
+      await Notifications.getPermissionsAsync();
+    let finalStatus = existingStatus;
+    if (existingStatus !== "granted") {
+      const { status } = await Notifications.requestPermissionsAsync();
+      finalStatus = status;
+    }
+    if (finalStatus !== "granted") {
+      Toast.error("Failed to get push token for push notification!");
+      return;
+    }
+  } else {
+    Toast.show("Push notification needs physical device");
+  }
+
+  if (Platform.OS === "android") {
+    Notifications.setNotificationChannelAsync("default", {
+      name: "default",
+      importance: Notifications.AndroidImportance.MAX,
+      vibrationPattern: [0, 250, 250, 250],
+      lightColor: "#FF231F7C",
+    });
+  }
+}
+
 const Player = () => {
   const [status, setStatus] = useState({});
   const [player, setPlayer] = useState(new Audio.Sound());
   const { playlist, setPlaylist, loop, songs } = useAppContext();
+  const [notification, setNotification] = useState(null);
+  const notificationListener = useRef();
+
+  useEffect(() => {
+    registerForPushNotificationsAsync();
+
+    notificationListener.current =
+      Notifications.addNotificationReceivedListener((notification) => {
+        setNotification(notification);
+      });
+
+    return () => {
+      Notifications.removeNotificationSubscription(
+        notificationListener.current
+      );
+    };
+  }, []);
 
   const randomTrack = () => {
     if (playlist.list.length > 0) {
@@ -74,8 +128,8 @@ const Player = () => {
           console.debug(e);
         });
       player.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
-    } catch(e) {
-      console.warning(e)
+    } catch (e) {
+      console.warning(e);
     }
   }, [loop]);
 
@@ -136,7 +190,22 @@ const Player = () => {
   };
 
   return (
-    <View style={styles.bottomView} accessibilityLabel={"çalma bilgi çubuğu ve oynatma düğmeleri"}>
+    <View
+      style={styles.bottomView}
+      accessibilityLabel={"çalma bilgi çubuğu ve oynatma düğmeleri"}
+    >
+      {notification && (
+        <TouchableOpacity
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          onPress={() => setNotification(null)}
+        >
+          <Text>{notification.request.content.title}</Text>
+          <Text>{notification.request.content.body}</Text>
+        </TouchableOpacity>
+      )}
       <SeekBar
         isPlaying={status.isLoaded}
         onSeek={onSeek}

src/components/song.js

@@ -48,7 +48,7 @@ export const SongItem = ({
         <IconPress
           onPress={() =>
             shareUrl(
-              `Şubadap'tan ${song.name} şarkısını dinle: subadapp://song?no=${song.no}. Şubadapp uygulamasını indir: ${PLAY_STORE_URL}`
+              `Şubadap'tan ${song.name} şarkısını dinle: https://subadapp.page.link/?song=${song.no}. Şubadapp uygulamasını indir: ${PLAY_STORE_URL}`
             )
           }
           icon={faShare}

src/components/tabs.js

@@ -28,7 +28,7 @@ export const AnimatedTabView = ({ value, children }) => (
 export const TabViewItem = ({ selected, children }) =>
   selected && (
     <TabView.Item
-      style={{width: deviceWidth}}
+      style={{ width: deviceWidth }}
       //Fix from: https://github.com/react-native-elements/react-native-elements/issues/3091#issuecomment-866226005
       onMoveShouldSetResponder={(e) => e.stopPropagation()}
     >

src/screens/playlist.js

@@ -33,6 +33,7 @@ export const Playlist = ({ navigation, route }) => {
   const [saveDialogVisible, setSaveDialogVisible] = useState(false);
   const [openDialogVisible, setOpenDialogVisible] = useState(false);
   const { playlist, setPlaylist, loop, setLoop, songs } = useAppContext();
+
   useEffect(() => {
     if (tabIndex !== route.params?.tabIndex)
       setTabIndex(route.params?.tabIndex);