2024-01-17 21:50:12 +00:00
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
|
import { Card, CardContent } from "@/components/ui/card"
|
2024-01-16 14:57:13 +00:00
|
|
|
|
|
2024-01-17 21:50:12 +00:00
|
|
|
|
import { LockClosedIcon, LockOpen1Icon } from "@radix-ui/react-icons"
|
|
|
|
|
import { useEffect, useState } from "react"
|
2024-01-16 14:57:13 +00:00
|
|
|
|
|
2024-01-17 21:50:12 +00:00
|
|
|
|
import "../styles/locked-content.css"
|
2024-01-30 17:06:23 +00:00
|
|
|
|
import type { Generated } from "kysely"
|
2024-02-06 17:45:14 +00:00
|
|
|
|
import { onLocationError } from "@/lib/error"
|
2024-01-16 14:57:13 +00:00
|
|
|
|
|
2024-01-30 17:06:23 +00:00
|
|
|
|
const incrementCounter = async (id: string | Generated<string>) =>
|
|
|
|
|
await fetch(`${import.meta.env.PUBLIC_HOME_URL}/api/content/increment?id=${id}`)
|
|
|
|
|
|
|
|
|
|
const LocationButton = ({
|
|
|
|
|
contentId = "",
|
2024-01-31 19:24:49 +00:00
|
|
|
|
imageUrl = "#",
|
|
|
|
|
location = ""
|
2024-01-30 17:06:23 +00:00
|
|
|
|
}: {
|
|
|
|
|
contentId?: string | Generated<string>
|
|
|
|
|
imageUrl?: string
|
2024-01-31 19:24:49 +00:00
|
|
|
|
location?: string
|
2024-01-30 17:06:23 +00:00
|
|
|
|
}) => {
|
2024-01-17 21:50:12 +00:00
|
|
|
|
const [atTarget, setAtTarget] = useState(false)
|
|
|
|
|
const [contentVisible, setContentVisible] = useState(false)
|
|
|
|
|
const [hasPermission, setHasPermission] = useState(false)
|
2024-01-18 17:39:47 +00:00
|
|
|
|
const [watchId, setWatchId] = useState<number>()
|
2024-01-31 19:24:49 +00:00
|
|
|
|
const [distanceRemain, setDistanceRemain] = useState<string>("")
|
|
|
|
|
|
|
|
|
|
const targetCoordinates = JSON.parse(location).coordinates
|
2024-02-06 17:45:14 +00:00
|
|
|
|
|
2024-01-31 19:24:49 +00:00
|
|
|
|
const targetPos = {
|
|
|
|
|
lat: targetCoordinates[0],
|
|
|
|
|
lng: targetCoordinates[1]
|
|
|
|
|
}
|
|
|
|
|
|
2024-01-17 21:50:12 +00:00
|
|
|
|
const startWatchingLocation = () => {
|
|
|
|
|
setHasPermission(true)
|
2024-01-18 17:39:47 +00:00
|
|
|
|
if (!watchId) {
|
|
|
|
|
const id = navigator.geolocation.watchPosition(
|
|
|
|
|
(position: GeolocationPosition) => {
|
|
|
|
|
const pos = {
|
|
|
|
|
lat: position.coords.latitude,
|
|
|
|
|
lng: position.coords.longitude
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-01 15:03:17 +00:00
|
|
|
|
// @ts-expect-error 3rd party script
|
|
|
|
|
const targetLatLng = L.latLng(targetPos)
|
|
|
|
|
|
|
|
|
|
// @ts-expect-error 3rd party script
|
|
|
|
|
const currentLatLng = L.latLng(pos)
|
|
|
|
|
|
|
|
|
|
const betweenMeters = currentLatLng.distanceTo(targetLatLng)
|
2024-01-18 17:39:47 +00:00
|
|
|
|
|
2024-02-01 15:03:17 +00:00
|
|
|
|
if (betweenMeters > 1000) {
|
|
|
|
|
setDistanceRemain(`${(betweenMeters / 1000).toFixed()} KM`)
|
|
|
|
|
} else if (betweenMeters > 50) {
|
|
|
|
|
setDistanceRemain(`${betweenMeters.toFixed(0)} M`)
|
2024-01-31 19:24:49 +00:00
|
|
|
|
} else {
|
2024-01-18 17:39:47 +00:00
|
|
|
|
setAtTarget(true)
|
|
|
|
|
}
|
|
|
|
|
},
|
2024-02-06 17:45:14 +00:00
|
|
|
|
err => onLocationError(err),
|
2024-02-02 16:38:49 +00:00
|
|
|
|
{ enableHighAccuracy: true, timeout: 27000, maximumAge: 10000 }
|
2024-01-18 17:39:47 +00:00
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
setWatchId(id)
|
|
|
|
|
}
|
2024-01-17 21:50:12 +00:00
|
|
|
|
}
|
2024-01-16 14:57:13 +00:00
|
|
|
|
|
2024-01-30 17:06:23 +00:00
|
|
|
|
const handleUnlock = async () => {
|
|
|
|
|
setContentVisible(true)
|
|
|
|
|
await incrementCounter(contentId)
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-02 16:38:49 +00:00
|
|
|
|
useEffect(() => {
|
|
|
|
|
navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => {
|
|
|
|
|
if (permissionStatus.state === "granted") {
|
|
|
|
|
setHasPermission(true)
|
|
|
|
|
startWatchingLocation()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}, [])
|
|
|
|
|
|
2024-01-17 21:50:12 +00:00
|
|
|
|
if (contentVisible) {
|
2024-01-26 17:32:32 +00:00
|
|
|
|
return (
|
|
|
|
|
<div className='w-full h-[475px] p-4 flex justify-center'>
|
|
|
|
|
<img src={imageUrl} />
|
|
|
|
|
</div>
|
|
|
|
|
)
|
2024-01-16 14:57:13 +00:00
|
|
|
|
} else {
|
|
|
|
|
return (
|
2024-01-26 17:32:32 +00:00
|
|
|
|
<div className='w-full h-[475px] p-4'>
|
2024-01-17 21:50:12 +00:00
|
|
|
|
{atTarget ? (
|
2024-01-26 17:32:32 +00:00
|
|
|
|
<div className='flex flex-col justify-center items-center image-wrapper'>
|
|
|
|
|
<img src={imageUrl} className='blur-lg h-[450px]' />
|
|
|
|
|
|
2024-01-27 15:23:27 +00:00
|
|
|
|
<div className='flex flex-col justify-center gap-4 overlay'>
|
2024-02-01 15:03:17 +00:00
|
|
|
|
<Button
|
|
|
|
|
size='lg'
|
|
|
|
|
className='text-lg p-6 animate-pulse bg-indigo-600 hover:bg-indigo-700 hover:animate-none border-2 border-indigo-800'
|
2024-02-06 17:45:14 +00:00
|
|
|
|
onClick={handleUnlock}>
|
2024-01-17 21:50:12 +00:00
|
|
|
|
<LockOpen1Icon className='mr-2 h-4 w-4' />
|
2024-01-16 14:57:13 +00:00
|
|
|
|
İçeriğin Kilidi Açıldı
|
2024-01-17 21:50:12 +00:00
|
|
|
|
</Button>
|
|
|
|
|
|
2024-01-26 17:32:32 +00:00
|
|
|
|
<Card className='p-2'>
|
|
|
|
|
<CardContent className='pb-0 text-center'>İçeriği görmek için butona bas!</CardContent>
|
|
|
|
|
</Card>
|
|
|
|
|
</div>
|
2024-01-16 14:57:13 +00:00
|
|
|
|
</div>
|
2024-01-17 21:50:12 +00:00
|
|
|
|
) : (
|
2024-01-26 17:32:32 +00:00
|
|
|
|
<div className='flex flex-col justify-center items-center image-wrapper'>
|
|
|
|
|
<img src={imageUrl} className='blur-lg h-[450px]' />
|
2024-01-27 15:23:27 +00:00
|
|
|
|
<div className='flex flex-col justify-center gap-4 overlay'>
|
|
|
|
|
<Button size='lg' className='text-md'>
|
2024-01-26 17:32:32 +00:00
|
|
|
|
<LockClosedIcon className='mr-2 h-4 w-4' /> İçerik Kilitli
|
|
|
|
|
</Button>
|
|
|
|
|
<Card className='p-2'>
|
|
|
|
|
{hasPermission ? (
|
2024-01-31 19:24:49 +00:00
|
|
|
|
<CardContent className='pb-0 text-center'>
|
|
|
|
|
<p>İçeriği görmek için konuma gitmelisin!</p>
|
2024-02-01 15:03:17 +00:00
|
|
|
|
<p>{distanceRemain && `Kalan mesafe: ${distanceRemain}`}</p>
|
2024-01-31 19:24:49 +00:00
|
|
|
|
</CardContent>
|
2024-01-26 17:32:32 +00:00
|
|
|
|
) : (
|
|
|
|
|
<div className='flex flex-col gap-2'>
|
|
|
|
|
<CardContent className='pb-0 text-center'>
|
|
|
|
|
Ne kadar yaklaştığını görmek için aşağıdaki butona bas.
|
|
|
|
|
</CardContent>
|
2024-01-16 14:57:13 +00:00
|
|
|
|
|
2024-01-26 17:32:32 +00:00
|
|
|
|
<Button
|
2024-01-27 15:23:27 +00:00
|
|
|
|
size='sm'
|
|
|
|
|
className='bg-green-700 hover:bg-green-600 text-md'
|
2024-02-06 17:45:14 +00:00
|
|
|
|
onClick={() => startWatchingLocation()}>
|
2024-01-26 17:32:32 +00:00
|
|
|
|
Konum İzni Ver
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</Card>
|
|
|
|
|
</div>
|
2024-01-17 21:50:12 +00:00
|
|
|
|
</div>
|
|
|
|
|
)}
|
2024-01-16 14:57:13 +00:00
|
|
|
|
</div>
|
2024-01-17 21:50:12 +00:00
|
|
|
|
)
|
2024-01-16 14:57:13 +00:00
|
|
|
|
}
|
2024-01-17 21:50:12 +00:00
|
|
|
|
}
|
2024-01-16 14:57:13 +00:00
|
|
|
|
|
2024-01-17 21:50:12 +00:00
|
|
|
|
export default LocationButton
|