chore: add icon

feat: automatically start watching if gelocation permission is given

.gitignore

@@ -20,3 +20,4 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 TODO
+public/konulu-konum-logo2.jpg

src/components/LockedContent/geolocation.ts

@@ -56,7 +56,7 @@ function locationSuccessCallback(
 
     // Reveal image when the unlock button is clicked
     const unlockButton = document.getElementById("unlock-content-button")
-    unlockButton?.addEventListener("click", revealContent)
+    unlockButton?.addEventListener("click", (ev) => revealContent(ev.target))
   } else {
     const distanceText = generateDistanceText(distance)
     updateText("locked-content-description", `Kalan mesafe: ${distanceText}`)

src/layouts/Layout.astro

@@ -9,7 +9,7 @@ import "toastify-js/src/toastify.css"
     <meta charset='UTF-8' />
     <meta name='description' content='Astro description' />
     <meta name='viewport' content='width=device-width' />
-    <link rel='icon' type='image/jpg' href='/konulu-konum-logo.jpg' />
+    <link rel='icon' type='image/jpg' href='/konulu-konum-icon.jpg' />
     <meta property='og:title' content='Konulu Konum' />
     <meta property='og:description' content='Sevdiklerinizi şaşırtın!' />
     <meta property='og:url' content='https://konulukonum.com' />

src/lib/domUtils.ts

@@ -43,7 +43,11 @@ function addAttribute(elemId: string, attribute: string, value: string) {
   else console.error("Element could not be found!")
 }
 
-function revealContent() {
+function revealContent(el: EventTarget | null) {
+  // dispatch user arrived custom event to stop geolocation callback
+  const userArrivedEvent = new Event("userarrived", { bubbles: true })
+  el?.dispatchEvent(userArrivedEvent)
+
   incrementUnlockCounter(document.URL.slice(-12))
   removeClasses("content", "blur-2xl")
   removeElement("unlock-button-container")

src/pages/x/index.astro

@@ -116,9 +116,11 @@ import { CalendarIcon } from "@radix-ui/react-icons"
     import dayjs from "dayjs"
     import relativeTime from "dayjs/plugin/relativeTime"
     import utc from "dayjs/plugin/utc"
+    import "dayjs/locale/tr"
 
     // Map
     import { initMap } from "@/scripts/initMap"
+    import { startWatchingLocation } from "@/scripts/lockedContent"
 
     const url = new URL(document.URL).searchParams
     const id = url.get("id")
@@ -132,8 +134,8 @@ import { CalendarIcon } from "@radix-ui/react-icons"
     const data: Content | null = res.status === 200 ? await res.json() : null
 
     dayjs.extend(relativeTime)
-
     dayjs.extend(utc)
+    dayjs.locale("tr")
 
     const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc())
 
@@ -164,6 +166,22 @@ import { CalendarIcon } from "@radix-ui/react-icons"
 
     const counter = document.getElementById("counter")
     if (counter) counter.innerText = data?.unlocked_counter.toString() ?? ""
+
+    // When the web page is loaded, check if user has given geolocation
+    // permission before
+    navigator.permissions
+      .query({ name: "geolocation" })
+      .then((permissionStatus) => {
+        switch (permissionStatus.state) {
+          case "granted":
+            startWatchingLocation()
+            break
+          case "denied":
+          case "prompt":
+          default:
+            break
+        }
+      })
   </script>
   <script src='@/scripts/initMap.ts'></script>
   <script src='@/scripts/lockedContent.ts'></script>

src/scripts/lockedContent.ts

@@ -30,7 +30,7 @@ locationPermissionButton.addEventListener("click", startWatchingLocation)
 lockedContentContainer.addEventListener("askpermission", startWatchingLocation)
 
 // Get target position from container's dataset
-function getTargetPosition() {
+function getTargetPosition(): LatLngTuple | void {
   const lockedContentContainer = document.getElementById(
     "locked-content-container"
   )
@@ -59,36 +59,21 @@ function getRadius() {
 }
 
 // Call Geolocation API to start watching user location
-function startWatchingLocation() {
+export function startWatchingLocation() {
   const TARGET_POSITION = getTargetPosition()
   const radius = getRadius()
 
-  if (!watchId) {
+  if (!watchId && TARGET_POSITION) {
     watchId = window.navigator.geolocation.watchPosition(
       (position) => locationSuccessCallback(position, TARGET_POSITION, radius),
       errorCallback
     )
-  }
-}
 
-// When the web page is loaded, check if user has given geolocation
-// permission before
-navigator.permissions
-  .query({ name: "geolocation" })
-  .then((permissionStatus) => {
-    switch (permissionStatus.state) {
-      case "granted":
-        const TARGET_POSITION = getTargetPosition()
-        const radius = getRadius()
-        watchId = window.navigator.geolocation.watchPosition(
-          (position) =>
-            locationSuccessCallback(position, TARGET_POSITION, radius),
-          errorCallback
-        )
-        break
-      case "denied":
-      case "prompt":
-      default:
-        break
-    }
+    const imageContainer = document.getElementById("locked-content-container")
+    if (imageContainer) {
+      imageContainer.addEventListener("userarrived", () => {
+        window.navigator.geolocation.clearWatch(watchId)
       })
+    }
+  }
+}