3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use Capacitor Geolocation to prompt and get native location on Android

Browse Source
This commit is contained in:
3dtours
2026-06-27 22:15:18 +07:00
parent 7f426c8e46
commit 964a72514f
5 changed files with 68 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/index.html
Vendored
+4 -4
View File
@@ -21,13 +21,13 @@
<meta name="twitter:title" content="Travel Planner - Lên kế hoạch chuyến đi của bạn" />
<meta name="twitter:description" content="Khám phá những hành trình tuyệt vời và chia sẻ khoảnh khắc đẹp với cộng đồng du lịch." />
<meta name="twitter:image" content="https://yotrip.labz.io.vn/background.avif" />
<script type="module" crossorigin src="/assets/index-B_EfWg-q.js"></script>
<script type="module" crossorigin src="/assets/index-CRcJJCpn.js"></script>
<link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-CMxvf4Kt.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-others-9VIIAnER.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-others-C077EAcu.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-editor-BDwQQzB8.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-maps-1-B38H26.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-react-OU16SOQH.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-pdf-CKa2gyHu.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-react-DRCYLnn6.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-pdf-TQOwx6ff.js">
<link rel="stylesheet" crossorigin href="/assets/vendor-maps-CcXJxNtP.css">
<link rel="stylesheet" crossorigin href="/assets/vendor-react-CuSj0z1j.css">
<link rel="stylesheet" crossorigin href="/assets/index-w726aohe.css">
frontend/src/components/AddPhotoModal.tsx
+5 -17
View File
@@ -4,6 +4,7 @@ import { useNotification } from '@/hooks/useNotification';
import { useTourStore } from '@/store/useTourStore';
import { processImageModeration } from '@/hooks/useImageModeration';
import { processAndResizeImage } from '../utils/imageProcessor';
import { getDeviceLocation } from '../utils/geolocation';
interface AddPhotoModalProps {
isOpen: boolean;
@@ -38,20 +39,7 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
try {
// Fetch device location once to serve as Priority 2 fallback for files without EXIF
const deviceLocation = await Promise.race([
new Promise<GeolocationPosition | null>((resolve) => {
if (!navigator.geolocation) {
resolve(null);
} else {
navigator.geolocation.getCurrentPosition(
(pos) => resolve(pos),
() => resolve(null),
{ timeout: 3500, enableHighAccuracy: true }
);
}
}),
new Promise<null>((resolve) => setTimeout(() => resolve(null), 4000))
]);
const deviceLocation = await getDeviceLocation();
const newValidPhotos: PendingPhoto[] = [];
const newValidPreviews: string[] = [];
@@ -89,9 +77,9 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
let finalLng: number | null = exifLng;
// Priority 2: Device location
if ((finalLat === null || finalLng === null) && deviceLocation && deviceLocation.coords) {
finalLat = deviceLocation.coords.latitude;
finalLng = deviceLocation.coords.longitude;
if ((finalLat === null || finalLng === null) && deviceLocation) {
finalLat = deviceLocation.latitude;
finalLng = deviceLocation.longitude;
}
// Priority 3: Map view state
frontend/src/pages/LandingPage.tsx
+5 -17
View File
@@ -14,6 +14,7 @@ import { useNotification } from '@/hooks/useNotification';
import { processImageModeration } from '../hooks/useImageModeration';
import { useTranslation } from '../hooks/useTranslation';
import { processAndResizeImage } from '../utils/imageProcessor';
import { getDeviceLocation } from '../utils/geolocation';
interface LandingPageProps {
onContinue?: () => void;
@@ -215,23 +216,10 @@ export const LandingPage: React.FC<LandingPageProps> = ({
// 2. Get current mobile/device GPS position of the user
if (finalLat === null || finalLng === null) {
try {
const pos = await Promise.race([
new Promise<GeolocationPosition | null>((resolve) => {
if (!navigator.geolocation) {
resolve(null);
} else {
navigator.geolocation.getCurrentPosition(
(p) => resolve(p),
() => resolve(null),
{ timeout: 4000, enableHighAccuracy: true }
);
}
}),
new Promise<null>((resolve) => setTimeout(() => resolve(null), 4500))
]);
if (pos && pos.coords) {
finalLat = pos.coords.latitude;
finalLng = pos.coords.longitude;
const deviceLoc = await getDeviceLocation();
if (deviceLoc) {
finalLat = deviceLoc.latitude;
finalLng = deviceLoc.longitude;
console.log('[Upload Location] Priority 2: GPS coordinates found:', finalLat, finalLng);
}
} catch (e) {
frontend/src/utils/geolocation.ts
+54
View File
@@ -0,0 +1,54 @@
import { Geolocation } from '@capacitor/geolocation';
export interface DeviceLocation {
latitude: number;
longitude: number;
}
export async function getDeviceLocation(): Promise<DeviceLocation | null> {
try {
// Request permission at native level (essential for Android app packaging)
const permissionStatus = await Geolocation.requestPermissions();
if (permissionStatus.location === 'granted' || permissionStatus.coarseLocation === 'granted') {
const position = await Geolocation.getCurrentPosition({
enableHighAccuracy: true,
timeout: 5000
});
if (position && position.coords) {
console.log('[Geolocation] Acquired coordinates via Capacitor Geolocation:', position.coords.latitude, position.coords.longitude);
return {
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
}
}
} catch (error) {
console.warn('[Geolocation] Capacitor plugin failed/unavailable, falling back to browser Geolocation:', error);
}
// Fallback to standard web browser Geolocation API
try {
const position = await new Promise<GeolocationPosition | null>((resolve) => {
if (!navigator.geolocation) {
resolve(null);
} else {
navigator.geolocation.getCurrentPosition(
(p) => resolve(p),
() => resolve(null),
{ timeout: 4000, enableHighAccuracy: true }
);
}
});
if (position && position.coords) {
console.log('[Geolocation] Acquired coordinates via Web Geolocation:', position.coords.latitude, position.coords.longitude);
return {
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
}
} catch (e) {
console.error('[Geolocation] Browser Geolocation failed:', e);
}
return null;
}