Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(wakeLockApi): button to prevent the screen lock #1036

Merged
merged 5 commits into from
May 24, 2022
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demo/src/app/geo/simple-map/simple-map.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<igo-geolocate-button [map]="map" color="primary"></igo-geolocate-button>
<igo-home-extent-button [map]="map" color="primary"></igo-home-extent-button>
<igo-rotation-button [map]="map" [showIfNoRotation]="true" color="primary"></igo-rotation-button>
<igo-wake-lock-button [map]="map" color="primary"></igo-wake-lock-button>
</igo-map-browser>

</mat-card>
Expand Down
2 changes: 1 addition & 1 deletion demo/src/app/geo/simple-map/simple-map.component.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
igo-map-browser {
width: 100%;
height: 300px;
height: 350px;
}
1 change: 1 addition & 0 deletions demo/src/environments/environment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ interface Environment {
export const environment: Environment = {
production: false,
igo: {
wakeLockApiButton: true,
importWithStyle: true,
projections: [
{
Expand Down
5 changes: 5 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@
"moment": "^2.24.0",
"ngx-color-picker": "^10.1.0",
"ngx-toastr": "^14.1.3",
"nosleep.js": "^0.12.0",
"ol": "^6.8.1",
"ol-mapbox-style": "^6.5.1",
"proj4": "^2.7.5",
Expand Down
1 change: 1 addition & 0 deletions packages/geo/ng-package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"entryFile": "src/public_api.ts",
"umdModuleIds": {
"ngx-color-picker": "ngxColorPicker",
"nosleep.js": "NoSleep",
"ol-mapbox-style/dist/stylefunction": "stylefunction",
"ol/source/OSM": "olSourceOSM",
"ol/source/XYZ": "olSourceXYZ",
Expand Down
1 change: 1 addition & 0 deletions packages/geo/ng-package.prod.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"entryFile": "src/public_api.ts",
"umdModuleIds": {
"ngx-color-picker": "ngxColorPicker",
"nosleep.js": "NoSleep",
"ol-mapbox-style/dist/stylefunction": "stylefunction",
"ol/source/OSM": "olSourceOSM",
"ol/source/XYZ": "olSourceXYZ",
Expand Down
1 change: 1 addition & 0 deletions packages/geo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@igo2/common": "^1.11.1",
"@igo2/core": "^1.11.1",
"@igo2/utils": "^1.11.1",
"nosleep.js": "^0.12.0",
"ol": "^6.8.1",
"proj4": "^2.7.5",
"rxjs": "^6.6.7",
Expand Down
1 change: 1 addition & 0 deletions packages/geo/src/lib/map/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export * from './menu-button';
export * from './geolocate-button';
export * from './home-extent-button';
export * from './offline-button';
export * from './wake-lock-button';
export * from './baselayers-switcher';
export * from './rotation-button';
export * from './swipe-control';
Expand Down
10 changes: 10 additions & 0 deletions packages/geo/src/lib/map/map-browser/map-browser.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
}
}


pelord marked this conversation as resolved.
Show resolved Hide resolved
:host ::ng-deep igo-offline-button {
position: absolute;
bottom:15px;
Expand Down Expand Up @@ -48,6 +49,15 @@
}
}

:host ::ng-deep igo-wake-lock-button {
position: absolute;
top: calc(2 * #{$igo-icon-size} + 2 * 5px + #{$igo-margin});
right: $igo-margin;
@include mobile {
bottom: calc(#{$igo-icon-size} + 5px + #{$igo-margin});
}
}

:host ::ng-deep igo-home-extent-button {
position: absolute;
bottom: calc((3 * #{$igo-icon-size}) + 5px + (2 * #{$igo-margin}));
Expand Down
3 changes: 3 additions & 0 deletions packages/geo/src/lib/map/map.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { BaseLayersSwitcherComponent } from './baselayers-switcher/baselayers-sw
import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.component';
import { MapOfflineDirective } from './shared/mapOffline.directive';
import { OfflineButtonComponent } from './offline-button/offline-button.component';
import { WakeLockButtonComponent } from './wake-lock-button/wake-lock-button.component';
import { PointerPositionDirective } from './shared/map-pointer-position.directive';
import { HoverFeatureDirective } from './shared/hover-feature.directive';
import { SwipeControlComponent } from './swipe-control/swipe-control.component';
Expand Down Expand Up @@ -41,6 +42,7 @@ import { InfoSectionComponent } from './info-section/info-section.component';
MiniBaseMapComponent,
MapOfflineDirective,
OfflineButtonComponent,
WakeLockButtonComponent,
PointerPositionDirective,
HoverFeatureDirective,
SwipeControlComponent,
Expand All @@ -58,6 +60,7 @@ import { InfoSectionComponent } from './info-section/info-section.component';
MiniBaseMapComponent,
MapOfflineDirective,
OfflineButtonComponent,
WakeLockButtonComponent,
PointerPositionDirective,
HoverFeatureDirective,
SwipeControlComponent,
Expand Down
1 change: 1 addition & 0 deletions packages/geo/src/lib/map/wake-lock-button/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './wake-lock-button.component';
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div *ngIf="visible" class="igo-wake-lock-button-container">
<div>
<button
[color]="color"
mat-icon-button
[matTooltip]="enabled ? ('igo.geo.mapButtons.preventSreenLock' | translate): ('igo.geo.mapButtons.letScreenLock' | translate)"
matTooltipPosition="left"
(click)="toggleWakeLock()">
<mat-icon svgIcon="{{icon$ | async}}"></mat-icon>
</button>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@import '../../../../../core/src/style/partial/core.variables';

.igo-wake-lock-button-container {
width: $igo-icon-size;
background-color: #fff;
&:hover {
background-color: #efefef;
}
}

button,
:host ::ng-deep button .mat-button-ripple-round {
border-radius: 0;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { Component, Input } from '@angular/core';
import { ConfigService, StorageService } from '@igo2/core';
import { BehaviorSubject } from 'rxjs';
import NoSleep from 'nosleep.js';
import { IgoMap } from '../shared/map';
import { userAgent } from '@igo2/utils';

@Component({
selector: 'igo-wake-lock-button',
templateUrl: './wake-lock-button.component.html',
styleUrls: ['./wake-lock-button.component.scss']
})

/**
* Prevent display sleep and enable wake lock in all Android and iOS web browsers.
* On iOS, the Wake Lock API is not supported
* https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
* On not supported browser, a fake video is used to keep the screen open.
*
* TODO: When the API will be supported by every browser, We should remove the NoSleep.js dependency
* and replace it by a WakeLock API implementation.
*/
export class WakeLockButtonComponent {

@Input() color: string = 'primary';
@Input() map: IgoMap;
@Input()
get enabled(): boolean {
return this.storageService.get('wakeLockEnabled') as boolean;
}
set enabled(value: boolean) {
this.storageService.set('wakeLockEnabled', value);
}

private noSleep: NoSleep;
readonly icon$: BehaviorSubject<string> = new BehaviorSubject('sleep');
public visible = false;

constructor(
private config: ConfigService,
private storageService: StorageService
) {
this.visible = this.config.getConfig('wakeLockApiButton') ? true : false;
this.noSleep = new NoSleep();
const nonWakeLockApiBrowser = userAgent.satisfies({
ie: '>0',
edge: '<84',
chrome: '<84',
firefox: '>0',
opera: '<70',
safari: '>0'
});
if (nonWakeLockApiBrowser) {
this.disableWakeLock();
this.enabled = false;
window.onblur = () => {
this.disableWakeLock();
this.enabled = false;
};
}
this.enabled ? this.enableWakeLock() : this.disableWakeLock();
}

/**
* Prevent display sleep and enable wake lock in all Android and iOS web browsers.
* On iOS, the Wake Lock API is not supported
* https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
* On not supported browser, a fake video is used to keep the screen open.
*/
private enableWakeLock() {
this.noSleep.enable();
this.enabled = true;
this.icon$.next('sleep-off');
}
/**
* Let display sleep
*/
private disableWakeLock() {
this.noSleep.disable();
this.enabled = false;
this.icon$.next('sleep');
}

toggleWakeLock() {
if (this.enabled) {
this.disableWakeLock();
} else {
this.enableWakeLock();
}
}
}
4 changes: 3 additions & 1 deletion packages/geo/src/locale/en.geo.json
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,9 @@
"zoomIn": "Zoom in ({{zoom}})",
"zoomOut": "Zoom out ({{zoom}})",
"resetRotation": "Set map to north",
"tipRotation": "Hold Alt and SHIFT while dragging on map to rotate the map."
"tipRotation": "Hold Alt and SHIFT while dragging on map to rotate the map.",
"preventSreenLock": "Prevent the screen to enter in lock mode.",
"letScreenLock": "Allow the screen to enter in lock mode."
},
"metadata": {
"show": "Show metadata"
Expand Down
4 changes: 3 additions & 1 deletion packages/geo/src/locale/fr.geo.json
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,9 @@
"zoomIn": "Zoomer ({{zoom}})",
"zoomOut": "Dézoomer ({{zoom}})",
"resetRotation": "Réinitialiser la carte vers le nord",
"tipRotation": "Maintenez les touches Alt et Majuscule (shift) tout en cliquant sur la carte pour faire pivoter la carte"
"tipRotation": "Maintenez les touches Alt et Majuscule (shift) tout en cliquant sur la carte pour faire pivoter la carte",
"preventSreenLock": "Prévient l'écran d'entrer en mode de verrouillé.",
pelord marked this conversation as resolved.
Show resolved Hide resolved
"letScreenLock": "Permet l'écran d'entrer en mode de verrouillé."
pelord marked this conversation as resolved.
Show resolved Hide resolved
},
"metadata": {
"show": "Montrer les métadonnées"
Expand Down