feat: manage permissons

src/components/WebComponentWrapper.astro

@@ -113,8 +113,10 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
   targetPos={location}
   id="locked-content"></locked-content>
 -->
-<locked-content-lit imageId="sample" imageURL={imageUrl} targetPosition="[1,1]"
-></locked-content-lit>
+<locked-content-lit
+  imageId={contentId}
+  imageURL={imageUrl}
+  targetPosition={location}></locked-content-lit>
 
 <script src="../components/locked-content.ts"></script>
 <script src="../components/locked-content-lit.ts"></script>

src/components/locked-content-lit.ts

@@ -12,20 +12,21 @@ export class LockedContent extends LitElement {
   // Constants
   geolocationOptions = {
     enableHighAccuracy: true,
-    timeout: 5000,
+    timeout: 15000,
     maximumAge: 0,
   };
 
-  // Styling
+  // Tailwind and custom styles
   static styles: CSSResultGroup | undefined = [
     unsafeCSS(globalStyles),
     unsafeCSS(lockedContentStyles),
   ];
 
-  // Static properties
-  @property() readonly imageId?: string;
-  @property() readonly imageURL?: string;
-  @property({ type: Object })
+  // Static properties, no accessor attribute disables detecting changes
+  // as these are readonly attriubtes there is no need to attach setters
+  @property({ noAccessor: true }) readonly imageId?: string;
+  @property({ noAccessor: true }) readonly imageURL?: string;
+  @property({ type: Object, noAccessor: true })
   readonly targetPosition?: LatLngTuple;
 
   // Reactive state
@@ -34,12 +35,14 @@ export class LockedContent extends LitElement {
   @state()
   protected _unlocked = false;
   @state()
-  protected _targetProximity?: number;
+  protected _targetProximity?: string;
   @state()
   protected _watchId?: number;
 
   // This callback will be fired when geolocation info is available
   successCallback(position: GeolocationPosition) {
+    if (!this._hasGeolocationPermission) this._hasGeolocationPermission = true;
+
     const pos = {
       lat: position.coords.latitude,
       lng: position.coords.longitude,
@@ -54,13 +57,13 @@ export class LockedContent extends LitElement {
     const betweenMeters = currentLatLng.distanceTo(targetLatLng);
 
     if (betweenMeters > 1000) {
-      // this.changeDescription(`${(betweenMeters / 1000).toFixed()} KM`);
+      this._targetProximity = `${(betweenMeters / 1000).toFixed()} KM`;
     } else if (betweenMeters > 100) {
-      // this.changeDescription(`${betweenMeters.toFixed(0)} M`);
+      this._targetProximity = `${betweenMeters.toFixed(0)} M`;
     } else {
       if (this._watchId) {
         navigator.geolocation.clearWatch(this._watchId);
-        // this.unlockContent();
+        this._unlocked = true;
       }
     }
   }
@@ -119,6 +122,7 @@ export class LockedContent extends LitElement {
               Ne kadar yaklaştığını görmek için aşağıdaki butona bas.
             </p>
             <button
+              @click="${this._startWatchingLocation}"
               class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-9 rounded-md px-3 bg-green-700 hover:bg-green-600 text-md"
             >
               Konum İzni Ver
@@ -140,7 +144,8 @@ export class LockedContent extends LitElement {
       <div class="rounded-lg border bg-card text-card-foreground shadow-sm p-2">
         <div class="pb-0 px-4 text-center">
           <p id="locked-content-description">
-            İçeriği görmek için konuma gitmelisin!
+            İçeriği görmek için konuma gitmelisin! Kalan mesafe:
+            ${this._targetProximity}
           </p>
         </div>
       </div>
@@ -164,20 +169,48 @@ export class LockedContent extends LitElement {
     </div>`;
   }
 
-  connectedCallback(): void {
-    super.connectedCallback();
-
+  private _startWatchingLocation() {
     // start geolocation services
     const id = navigator.geolocation.watchPosition(
       this.successCallback.bind(this),
-      this.errorCallback,
+      this.errorCallback.bind(this),
       this.geolocationOptions
     );
 
     this._watchId = id;
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    navigator.permissions
+      .query({ name: "geolocation" })
+      .then((permissionStatus) => {
+        switch (permissionStatus.state) {
+          case "granted":
+            this._hasGeolocationPermission = true;
+            this._startWatchingLocation();
+            break;
+          case "denied":
+          case "prompt":
+          default:
+            this._hasGeolocationPermission = false;
+            break;
+        }
+      });
+  }
+
   render() {
+    let buttonTemplate;
+
+    if (this._unlocked) {
+      buttonTemplate = this.unlockedButtonTemplate.bind(this);
+    } else if (this._hasGeolocationPermission) {
+      buttonTemplate = this.lockedButtonTemplate.bind(this);
+    } else {
+      buttonTemplate = this.permissionButtonTemplate.bind(this);
+    }
+
     return html`
       <div
         class="w-full h-[475px] overflow-hidden border border-zinc-200 shadow-sm p-4 rounded"
@@ -185,9 +218,7 @@ export class LockedContent extends LitElement {
         <div class="flex flex-col justify-center items-center image-wrapper">
           <img id="content" src="${this.imageURL}" class="blur-2xl h-[450px]" />
 
-          ${this._watchId
-            ? this.lockedButtonTemplate()
-            : this.permissionButtonTemplate()}
+          ${buttonTemplate()}
         </div>
       </div>
     `;