feat: manage permissons

This commit is contained in:
log101 2024-07-17 13:36:56 +03:00
parent 5ea7471678
commit 9bc380c81d
2 changed files with 53 additions and 20 deletions

View File

@ -113,8 +113,10 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
targetPos={location} targetPos={location}
id="locked-content"></locked-content> 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.ts"></script>
<script src="../components/locked-content-lit.ts"></script> <script src="../components/locked-content-lit.ts"></script>

View File

@ -12,20 +12,21 @@ export class LockedContent extends LitElement {
// Constants // Constants
geolocationOptions = { geolocationOptions = {
enableHighAccuracy: true, enableHighAccuracy: true,
timeout: 5000, timeout: 15000,
maximumAge: 0, maximumAge: 0,
}; };
// Styling // Tailwind and custom styles
static styles: CSSResultGroup | undefined = [ static styles: CSSResultGroup | undefined = [
unsafeCSS(globalStyles), unsafeCSS(globalStyles),
unsafeCSS(lockedContentStyles), unsafeCSS(lockedContentStyles),
]; ];
// Static properties // Static properties, no accessor attribute disables detecting changes
@property() readonly imageId?: string; // as these are readonly attriubtes there is no need to attach setters
@property() readonly imageURL?: string; @property({ noAccessor: true }) readonly imageId?: string;
@property({ type: Object }) @property({ noAccessor: true }) readonly imageURL?: string;
@property({ type: Object, noAccessor: true })
readonly targetPosition?: LatLngTuple; readonly targetPosition?: LatLngTuple;
// Reactive state // Reactive state
@ -34,12 +35,14 @@ export class LockedContent extends LitElement {
@state() @state()
protected _unlocked = false; protected _unlocked = false;
@state() @state()
protected _targetProximity?: number; protected _targetProximity?: string;
@state() @state()
protected _watchId?: number; protected _watchId?: number;
// This callback will be fired when geolocation info is available // This callback will be fired when geolocation info is available
successCallback(position: GeolocationPosition) { successCallback(position: GeolocationPosition) {
if (!this._hasGeolocationPermission) this._hasGeolocationPermission = true;
const pos = { const pos = {
lat: position.coords.latitude, lat: position.coords.latitude,
lng: position.coords.longitude, lng: position.coords.longitude,
@ -54,13 +57,13 @@ export class LockedContent extends LitElement {
const betweenMeters = currentLatLng.distanceTo(targetLatLng); const betweenMeters = currentLatLng.distanceTo(targetLatLng);
if (betweenMeters > 1000) { if (betweenMeters > 1000) {
// this.changeDescription(`${(betweenMeters / 1000).toFixed()} KM`); this._targetProximity = `${(betweenMeters / 1000).toFixed()} KM`;
} else if (betweenMeters > 100) { } else if (betweenMeters > 100) {
// this.changeDescription(`${betweenMeters.toFixed(0)} M`); this._targetProximity = `${betweenMeters.toFixed(0)} M`;
} else { } else {
if (this._watchId) { if (this._watchId) {
navigator.geolocation.clearWatch(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. Ne kadar yaklaştığını görmek için aşağıdaki butona bas.
</p> </p>
<button <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" 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 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="rounded-lg border bg-card text-card-foreground shadow-sm p-2">
<div class="pb-0 px-4 text-center"> <div class="pb-0 px-4 text-center">
<p id="locked-content-description"> <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> </p>
</div> </div>
</div> </div>
@ -164,20 +169,48 @@ export class LockedContent extends LitElement {
</div>`; </div>`;
} }
connectedCallback(): void { private _startWatchingLocation() {
super.connectedCallback();
// start geolocation services // start geolocation services
const id = navigator.geolocation.watchPosition( const id = navigator.geolocation.watchPosition(
this.successCallback.bind(this), this.successCallback.bind(this),
this.errorCallback, this.errorCallback.bind(this),
this.geolocationOptions this.geolocationOptions
); );
this._watchId = id; 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() { 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` return html`
<div <div
class="w-full h-[475px] overflow-hidden border border-zinc-200 shadow-sm p-4 rounded" 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"> <div class="flex flex-col justify-center items-center image-wrapper">
<img id="content" src="${this.imageURL}" class="blur-2xl h-[450px]" /> <img id="content" src="${this.imageURL}" class="blur-2xl h-[450px]" />
${this._watchId ${buttonTemplate()}
? this.lockedButtonTemplate()
: this.permissionButtonTemplate()}
</div> </div>
</div> </div>
`; `;