feat: added device specific download methods (#274)

nthumodifications · Apr 15, 2024 · 59350f0 · 59350f0
2 parents aa782c0 + 95771a4
commit 59350f0
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 14 deletions.
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
@@ -9,7 +9,10 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-community-media')
     implementation project(':capacitor-app')
+    implementation project(':capacitor-device')
+    implementation project(':capacitor-filesystem')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-status-bar')

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -30,6 +30,7 @@
     </application>
 
     <!-- Permissions -->
-
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.INTERNET" />
 </manifest>
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
@@ -2,9 +2,18 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-community-media'
+project(':capacitor-community-media').projectDir = new File('../node_modules/@capacitor-community/media/android')
+
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 
+include ':capacitor-device'
+project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')
+
+include ':capacitor-filesystem'
+project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacitor/filesystem/android')
+
 include ':capacitor-haptics'
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
 

diff --git a/capacitor.config.ts b/capacitor.config.ts
@@ -5,8 +5,8 @@ const config: CapacitorConfig = {
   appName: 'NTHUMods',
   webDir: 'fakeout',
   server: {
-    url: 'https://nthumods.com',
-    androidScheme: 'https',
+    url: process.env.NODE_ENV === 'production' ? 'https://nthumods.com' : 'http://192.168.31.109:3000',
+    androidScheme: process.env.NODE_ENV === 'production' ? 'https' : 'http',
   },
 
 };

diff --git a/ios/App/Podfile b/ios/App/Podfile
@@ -11,7 +11,10 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorCommunityMedia', :path => '../../node_modules/@capacitor-community/media'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
+  pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
   pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,10 +15,13 @@
     "sync:ios": "npx cap sync ios"
   },
   "dependencies": {
+    "@capacitor-community/media": "^5.4.1",
     "@capacitor/android": "^5.6.0",
     "@capacitor/app": "5.0.7",
     "@capacitor/cli": "5.6.0",
     "@capacitor/core": "5.6.0",
+    "@capacitor/device": "^5.0.7",
+    "@capacitor/filesystem": "^5.2.1",
     "@capacitor/haptics": "5.0.7",
     "@capacitor/ios": "5.6.0",
     "@capacitor/keyboard": "5.0.8",

diff --git a/src/components/Timetable/DownloadTimetableDialog.tsx b/src/components/Timetable/DownloadTimetableDialog.tsx
@@ -8,6 +8,10 @@ import { useCallback, useRef, useState } from 'react';
 import {createTimetableFromCourses, colorMapFromCourses} from '@/helpers/timetable';
 import { useSettings } from '@/hooks/contexts/settings';
 import { MinimalCourse } from '@/types/courses';
+import { Device } from '@capacitor/device';
+import { Media } from '@capacitor-community/media';
+import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
+import { toast } from '../ui/use-toast';
 
 const DownloadTimetableComponent = () => {
     const dict = useDictionary();
@@ -23,12 +27,25 @@ const DownloadTimetableComponent = () => {
         }
         setLoading(true);
         toPng(ref.current!, { cacheBust: true, pixelRatio: 3, filter: (node: HTMLElement) => node.id !== 'time_slot'})
-        .then((dataUrl) => {
-            const link = document.createElement('a');
-            link.download = 'timetable.png';
-            link.href = dataUrl;
-            link.click();
-            // navigator.clipboard.writeText(dataUrl);
+        .then(async (dataUrl) => {
+            const filename = new Date().toISOString() + '_timetable.png';
+            const info = await Device.getInfo();
+            if (info.platform === 'web') {
+                const link = document.createElement('a');
+                link.download = filename;
+                link.href = dataUrl;
+                link.click();
+            } else {
+                const albums = await Media.getAlbums();
+                if (albums.albums.every(album => album.name !== 'NTHUMods')) {
+                    await Media.createAlbum({ name: 'NTHUMods' });
+                }
+                await Media.savePhoto({
+                    path: dataUrl,
+                    albumIdentifier: 'NTHUMods',
+                    fileName: filename,
+                });
+            }
         })
         .catch((err) => {
             console.error('oops, something went wrong!', err);
@@ -59,11 +76,33 @@ const DownloadTimetableComponent = () => {
 const DownloadTimetableDialog = ({ onClose, icsfileLink }: { onClose: () => void, icsfileLink: string }) => {
     const dict = useDictionary();
 
-    const handleDownloadCalendar = () => {
-        const link = document.createElement('a');
-        link.download = 'calendar.ics';
-        link.href = icsfileLink;
-        link.click();
+    const handleDownloadCalendar = async () => {
+        const filename = `${new Date().toISOString()}_timetable.ics`;
+        if((await Device.getInfo()).platform === 'web') {
+            const link = document.createElement('a');
+            link.download = filename
+            link.href = icsfileLink;
+            link.click();
+        } else {
+            const res = await Filesystem.checkPermissions()
+            if (!res.publicStorage) {
+                const result = await Filesystem.requestPermissions();
+                if (result.publicStorage != 'granted') {
+                    toast({
+                        title: 'Permission Denied',
+                        description: 'Please allow storage permission to download the file.',
+                    });
+                    return;
+                }
+            }
+            Filesystem.downloadFile({
+                path: `ics/${filename}`,
+                url: icsfileLink,
+                directory: Directory.Documents,
+                recursive: true,
+            });
+        }
+
     }
 
     return <ModalDialog>