20210782/travel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use unsplash API to get photos

Browse Source
This commit is contained in:
adeliptr 2025-06-09 17:46:33 +09:00
parent 63f3c55041
commit a3c22448c8
5 changed files with 62 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/firebase.js
View File

@ -1,15 +1,15 @@
import { initializeApp, getApps, getApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
// Your web app's Firebase configuration
// Firebase configuration
const firebaseConfig = {
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_FIREBASE_APP_ID
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_FIREBASE_APP_ID
};
// Initialize Firebase (with duplicate app prevention)

22
src/lib/components/AddPlaces.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Loader } from '@googlemaps/js-api-loader';
import { fetchUnsplashPhoto } from '../../services/unsplash';
// Extend the PlaceResult type to include our custom photoUrl
interface ExtendedPlaceResult extends google.maps.places.PlaceResult {
@ -58,25 +59,12 @@
const autocomplete = new google.maps.places.Autocomplete(input, autocompleteOptions);
autocomplete.setFields(['name', 'formatted_address', 'photos', 'place_id', 'geometry']);
autocomplete.addListener('place_changed', () => {
autocomplete.addListener('place_changed', async () => {
const place = autocomplete.getPlace() as ExtendedPlaceResult;
if (place && place.name) {
// If the place has photos, get the URL for the first photo
if (place.photos && place.photos.length > 0) {
try {
const photoOptions = {
maxWidth: 400,
maxHeight: 300
};
place.photoUrl = place.photos[0].getUrl(photoOptions);
} catch (error) {
console.error('Error getting photo URL:', error);
place.photoUrl = '/placeholder.jpeg';
}
}
else {
place.photoUrl = '/placeholder.jpeg';
}
// Use Unsplash for the photo
const unsplashUrl = await fetchUnsplashPhoto(place.name);
place.photoUrl = unsplashUrl || '/placeholder.jpeg';
selectedPlace = place;
lastSelectedPlaceName = input.value.trim();

24
src/lib/components/NewTripPopup.svelte
View File

@ -145,6 +145,28 @@
}
}
const UNSPLASH_ACCESS_KEY = import.meta.env.VITE_UNSPLASH_ACCESS_KEY;
async function fetchUnsplashPhoto(query: string): Promise<string | null> {
try {
const response = await fetch(
`https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&client_id=${UNSPLASH_ACCESS_KEY}`
);
if (!response.ok) {
console.error("Failed to fetch Unsplash photo");
return null;
}
const data = await response.json();
const firstPhoto = data.results?.[0];
return firstPhoto?.urls?.regular || null;
} catch (error) {
console.error("Error fetching Unsplash photo:", error);
return null;
}
}
async function handleStart() {
destinationError = !destination;
startDateError = !startDate;
@ -174,7 +196,7 @@
const placeDetails = {
name: selectedPlace.name,
formatted_address: selectedPlace.formatted_address,
photo: selectedPlace.photos?.[0]?.getUrl(),
photo: await fetchUnsplashPhoto(destination) || '/placeholder.jpeg',
location: {
lat: selectedPlace.geometry.location.lat(),
lng: selectedPlace.geometry.location.lng()

14
src/routes/itinerary/[tid]/+page.svelte
View File

@ -22,6 +22,7 @@
import RecommendationPopup from '$lib/components/RecommendationPopup.svelte';
import LoadingOverlay from '$lib/components/LoadingOverlay.svelte';
import TurnIntoItineraryPopup from '$lib/components/TurnIntoItineraryPopup.svelte';
import { fetchUnsplashPhoto } from '../../../services/unsplash';
import type { Place } from '$lib/constants/Interfaces';
let tripData: any = null;
@ -288,12 +289,6 @@
itinerary: true
};
let recommendedPlaces = [
{ name: "Place name" },
{ name: "Place name" },
{ name: "Place name" }
];
let placesToVisit: any[] = [];
async function handleDeletePlace(index: number) {
@ -419,12 +414,13 @@
if (results.length > 0) {
const place = results[0];
const photoUrl = place.photos?.[0]?.getUrl();
// Use Unsplash for the photo
const unsplashUrl = await fetchUnsplashPhoto(place.name || rec.name);
const newPlace = {
name: place.name || rec.name,
desc: place.formatted_address || '',
image: photoUrl || '/placeholder.jpeg',
image: unsplashUrl || '/placeholder.jpeg',
geometry: place.geometry?.location ? {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()

21
src/services/unsplash.ts Normal file
View File

@ -0,0 +1,21 @@
const UNSPLASH_ACCESS_KEY = import.meta.env.VITE_UNSPLASH_ACCESS_KEY;
export async function fetchUnsplashPhoto(query: string): Promise<string | null> {
try {
const response = await fetch(
`https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&client_id=${UNSPLASH_ACCESS_KEY}`
);
if (!response.ok) {
console.error("Failed to fetch Unsplash photo");
return null;
}
const data = await response.json();
const firstPhoto = data.results?.[0];
return firstPhoto?.urls?.regular || null;
} catch (error) {
console.error("Error fetching Unsplash photo:", error);
return null;
}
}