thomas/hass-browser_mod
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add fullykiosk browser special cases

Browse Source
This commit is contained in:
Thomas Lovén 2022-07-15 19:49:38 +00:00
parent a46d2b3cb0
commit 11d75426fb
8 changed files with 505 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

290
custom_components/browser_mod/browser_mod.js
View File

@ -837,14 +837,26 @@ const ScreenSaverMixin = (SuperClass) => {
`; `;
this.addEventListener("command-screen_off", () => this._screen_off()); this.addEventListener("command-screen_off", () => this._screen_off());
this.addEventListener("command-screen_on", (ev) => this._screen_on(ev)); this.addEventListener("command-screen_on", (ev) => this._screen_on(ev));
this.addEventListener("fully-update", () => this.send_screen_status());
this.connectionPromise.then(() => this._screen_on()); this.connectionPromise.then(() => this._screen_on());
} }
send_screen_status() {
let screen_on = !this._panel.hasAttribute("dark");
let screen_brightness = this._brightness;
if (this.fully) {
screen_on = this.fully_screen;
screen_brightness = this.fully_brightness;
}
this.sendUpdate({ screen_on, screen_brightness });
}
_screen_off() { _screen_off() {
this._panel.setAttribute("dark", ""); if (this.fully) {
this.sendUpdate({ this.fully_screen = false;
screen_on: false, }
screen_brightness: 0, else {
}); this._panel.setAttribute("dark", "");
}
this.send_screen_status();
const l = () => this._screen_on(); const l = () => this._screen_on();
for (const ev of ["pointerdown", "pointermove", "keydown"]) { for (const ev of ["pointerdown", "pointermove", "keydown"]) {
this._listeners[ev] = l; this._listeners[ev] = l;
@ -852,16 +864,21 @@ const ScreenSaverMixin = (SuperClass) => {
} }
} }
_screen_on(ev = undefined) { _screen_on(ev = undefined) {
var _a; var _a, _b;
if ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.brightness) { if (this.fully) {
this._brightness = ev.detail.brightness; this.fully_screen = true;
this._panel.style.setProperty("--darkness", 1 - ev.detail.brightness / 255); if ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.brightness) {
this.fully_brightness = ev.detail.brightness;
}
} }
this._panel.removeAttribute("dark"); else {
this.sendUpdate({ if ((_b = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _b === void 0 ? void 0 : _b.brightness) {
screen_on: true, this._brightness = ev.detail.brightness;
screen_brightness: this._brightness, this._panel.style.setProperty("--darkness", 1 - ev.detail.brightness / 255);
}); }
this._panel.removeAttribute("dark");
}
this.send_screen_status();
for (const ev of ["pointerdown", "pointermove", "keydown"]) { for (const ev of ["pointerdown", "pointermove", "keydown"]) {
if (this._listeners[ev]) { if (this._listeners[ev]) {
window.removeEventListener(ev, this._listeners[ev]); window.removeEventListener(ev, this._listeners[ev]);
@ -872,6 +889,133 @@ const ScreenSaverMixin = (SuperClass) => {
} }
return ScreenSaverMixinClass; return ScreenSaverMixinClass;
}; };
// export const BrowserModScreensaverMixin = (C) =>
// class extends C {
// constructor() {
// super();
// this._blackout_panel = document.createElement("div");
// this._screenSaver = undefined;
// this._screenSaverTimer = undefined;
// this._screenSaverTimeOut = 0;
// this._screenSaver = {
// fn: undefined,
// clearfn: undefined,
// timer: undefined,
// timeout: undefined,
// listeners: {},
// active: false,
// };
// this._blackout_panel.style.cssText = `
// position: fixed;
// left: 0;
// top: 0;
// padding: 0;
// margin: 0;
// width: 100%;
// height: 100%;
// background: black;
// display: none;
// `;
// document.body.appendChild(this._blackout_panel);
// }
// screensaver_set(fn, clearfn, time) {
// this._ss_clear();
// this._screenSaver = {
// fn,
// clearfn,
// timer: undefined,
// timeout: time,
// listeners: {},
// active: false,
// };
// const l = () => this.screensaver_update();
// for (const event of ["mousemove", "mousedown", "keydown", "touchstart"]) {
// window.addEventListener(event, l);
// this._screenSaver.listeners[event] = l;
// }
// this._screenSaver.timer = window.setTimeout(
// () => this._ss_run(),
// time * 1000
// );
// }
// screensaver_update() {
// if (this._screenSaver.active) {
// this.screensaver_stop();
// } else {
// window.clearTimeout(this._screenSaver.timer);
// this._screenSaver.timer = window.setTimeout(
// () => this._ss_run(),
// this._screenSaver.timeout * 1000
// );
// }
// }
// screensaver_stop() {
// this._ss_clear();
// this._screenSaver.active = false;
// if (this._screenSaver.clearfn) this._screenSaver.clearfn();
// if (this._screenSaver.timeout) {
// this.screensaver_set(
// this._screenSaver.fn,
// this._screenSaver.clearfn,
// this._screenSaver.timeout
// );
// }
// }
// _ss_clear() {
// window.clearTimeout(this._screenSaverTimer);
// for (const [k, v] of Object.entries(this._screenSaver.listeners)) {
// window.removeEventListener(k as any, v as any);
// }
// }
// _ss_run() {
// this._screenSaver.active = true;
// this._screenSaver.fn();
// }
// do_blackout(timeout) {
// this.screensaver_set(
// () => {
// if (this.isFully) {
// if (this.config.screensaver) window.fully.startScreensaver();
// else window.fully.turnScreenOff(true);
// } else {
// this._blackout_panel.style.display = "block";
// }
// this.screen_update();
// },
// () => {
// if ((this._blackout_panel.style.display = "block"))
// this._blackout_panel.style.display = "none";
// if (this.isFully) {
// if (!window.fully.getScreenOn()) window.fully.turnScreenOn();
// window.fully.stopScreensaver();
// }
// this.screen_update();
// },
// timeout || 0
// );
// }
// no_blackout() {
// if (this.isFully) {
// window.fully.turnScreenOn();
// window.fully.stopScreensaver();
// }
// this.screensaver_stop();
// }
// screen_update() {
// this.sendUpdate({
// screen: {
// blackout: this.isFully
// ? this.fully_screensaver !== undefined
// ? this.fully_screensaver
// : !window.fully.getScreenOn()
// : Boolean(this._blackout_panel.style.display === "block"),
// brightness: this.isFully
// ? window.fully.getScreenBrightness()
// : undefined,
// },
// });
// }
// };
const MediaPlayerMixin = (SuperClass) => { const MediaPlayerMixin = (SuperClass) => {
return class MediaPlayerMixinClass extends SuperClass { return class MediaPlayerMixinClass extends SuperClass {
@ -951,6 +1095,8 @@ const CameraMixin = (SuperClass) => {
await this.firstInteraction; await this.firstInteraction;
if (!this.cameraEnabled) if (!this.cameraEnabled)
return; return;
if (this.fully)
return this.update_camera();
const div = document.createElement("div"); const div = document.createElement("div");
document.body.append(div); document.body.append(div);
div.classList.add("browser-mod-camera"); div.classList.add("browser-mod-camera");
@ -989,16 +1135,23 @@ const CameraMixin = (SuperClass) => {
} }
return; return;
} }
const video = this._video; if (this.fully) {
const width = video.videoWidth; this.sendUpdate({
const height = video.videoHeight; camera: this.fully_camera,
this._canvas.width = width; });
this._canvas.height = height; }
const context = this._canvas.getContext("2d"); else {
context.drawImage(video, 0, 0, width, height); const video = this._video;
this.sendUpdate({ const width = video.videoWidth;
camera: this._canvas.toDataURL("image/jpeg"), const height = video.videoHeight;
}); this._canvas.width = width;
this._canvas.height = height;
const context = this._canvas.getContext("2d");
context.drawImage(video, 0, 0, width, height);
this.sendUpdate({
camera: this._canvas.toDataURL("image/jpeg"),
});
}
const interval = Math.round(1000 / this._framerate); const interval = Math.round(1000 / this._framerate);
setTimeout(() => this.update_camera(), interval); setTimeout(() => this.update_camera(), interval);
} }
@ -1012,7 +1165,6 @@ const RequireInteractMixin = (SuperClass) => {
this.firstInteraction = new Promise((resolve) => { this.firstInteraction = new Promise((resolve) => {
this._interactionResolve = resolve; this._interactionResolve = resolve;
}); });
window.addEventListener("pointerdown", this._interactionResolve);
this.show_indicator(); this.show_indicator();
} }
async show_indicator() { async show_indicator() {
@ -1033,22 +1185,104 @@ const RequireInteractMixin = (SuperClass) => {
color: var(--warning-color, red); color: var(--warning-color, red);
opacity: 0.5; opacity: 0.5;
--mdc-icon-size: 48px; --mdc-icon-size: 48px;
}`; }
video {
display: none;
}
`;
const icon = document.createElement("ha-icon"); const icon = document.createElement("ha-icon");
interactSymbol.shadowRoot.append(icon); interactSymbol.shadowRoot.append(icon);
icon.icon = "mdi:gesture-tap"; icon.icon = "mdi:gesture-tap";
// If we are allowed to play a video, we can assume no interaction is needed
const video = (this._video = document.createElement("video"));
interactSymbol.shadowRoot.append(video);
const vPlay = video.play();
if (vPlay) {
vPlay
.then(() => {
this._interactionResolve();
})
.catch((e) => {
if (e.name === "AbortError")
this._interactionResolve();
});
video.pause();
}
window.addEventListener("pointerdown", this._interactionResolve);
// if (this.fully) this._interactionResolve();
await this.firstInteraction; await this.firstInteraction;
interactSymbol.remove(); interactSymbol.remove();
} }
}; };
}; };
const FullyMixin = (C) => {
return class FullyMixinClass extends C {
constructor() {
super();
this._fully_screensaver = false;
if (!this.fully)
return;
for (const ev of [
"screenOn",
"screenOff",
"pluggedAC",
"pluggedUSB",
"onBatteryLevelChanged",
"unplugged",
"networkReconnect",
"onMotion",
"onDaydreamStart",
"onDaydreamStop",
]) {
window.fully.bind(ev, `window.browser_mod.fullyEvent("${ev}");`);
}
window.fully.bind("onScreensaverStart", `window.browser_mod._fully_screensaver = true; window.browser_mod.fullyEvent();`);
window.fully.bind("onScreensaverStop", `window.browser_mod._fully_screensaver = false; window.browser_mod.fullyEvent();`);
return;
}
get fully() {
return window.fully !== undefined;
}
get fully_screen() {
var _a;
return this._fully_screensaver === false && ((_a = window.fully) === null || _a === void 0 ? void 0 : _a.getScreenOn());
}
set fully_screen(state) {
var _a, _b, _c;
if (state) {
(_a = window.fully) === null || _a === void 0 ? void 0 : _a.turnScreenOn();
(_b = window.fully) === null || _b === void 0 ? void 0 : _b.stopScreensaver();
}
else {
(_c = window.fully) === null || _c === void 0 ? void 0 : _c.turnScreenOff();
}
}
get fully_brightness() {
var _a;
return (_a = window.fully) === null || _a === void 0 ? void 0 : _a.getScreenBrightness();
}
set fully_brightness(br) {
var _a;
(_a = window.fully) === null || _a === void 0 ? void 0 : _a.setScreenBrightness(br);
}
get fully_camera() {
var _a;
return (_a = window.fully) === null || _a === void 0 ? void 0 : _a.getCamshotJpgBase64();
}
fullyEvent(event = undefined) {
this.fireEvent("fully-update", { event });
}
};
};
const BrowserStateMixin = (SuperClass) => { const BrowserStateMixin = (SuperClass) => {
return class BrowserStateMixinClass extends SuperClass { return class BrowserStateMixinClass extends SuperClass {
constructor() { constructor() {
super(); super();
document.addEventListener("visibilitychange", () => this._browser_state_update()); document.addEventListener("visibilitychange", () => this._browser_state_update());
window.addEventListener("location-changed", () => this._browser_state_update()); window.addEventListener("location-changed", () => this._browser_state_update());
this.addEventListener("fully-update", () => this._browser_state_update());
this.connectionPromise.then(() => this._browser_state_update()); this.connectionPromise.then(() => this._browser_state_update());
} }
_browser_state_update() { _browser_state_update() {
@ -1061,7 +1295,7 @@ const BrowserStateMixin = (SuperClass) => {
visibility: document.visibilityState, visibility: document.visibilityState,
userAgent: navigator.userAgent, userAgent: navigator.userAgent,
currentUser: (_d = (_c = this.hass) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.name, currentUser: (_d = (_c = this.hass) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.name,
fullyKiosk: this.isFully || false, fullyKiosk: this.fully || false,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
battery_level: (_f = (_e = window.fully) === null || _e === void 0 ? void 0 : _e.getBatteryLevel()) !== null && _f !== void 0 ? _f : (battery === null || battery === void 0 ? void 0 : battery.level) * 100, battery_level: (_f = (_e = window.fully) === null || _e === void 0 ? void 0 : _e.getBatteryLevel()) !== null && _f !== void 0 ? _f : (battery === null || battery === void 0 ? void 0 : battery.level) * 100,
@ -1130,7 +1364,7 @@ var pjson = {
// FullyKioskMixin, // FullyKioskMixin,
// BrowserModMediaPlayerMixin, // BrowserModMediaPlayerMixin,
// ]) { // ]) {
class BrowserMod extends BrowserStateMixin(CameraMixin(MediaPlayerMixin(ScreenSaverMixin(RequireInteractMixin(ConnectionMixin(EventTarget)))))) { class BrowserMod extends BrowserStateMixin(CameraMixin(MediaPlayerMixin(ScreenSaverMixin(FullyMixin(RequireInteractMixin(ConnectionMixin(EventTarget))))))) {
constructor() { constructor() {
super(); super();
this.entity_id = deviceID.replace("-", "_"); this.entity_id = deviceID.replace("-", "_");

4
js/plugin/browser.ts
View File

@ -12,6 +12,8 @@ export const BrowserStateMixin = (SuperClass) => {
this._browser_state_update() this._browser_state_update()
); );
this.addEventListener("fully-update", () => this._browser_state_update());
this.connectionPromise.then(() => this._browser_state_update()); this.connectionPromise.then(() => this._browser_state_update());
} }
@ -24,7 +26,7 @@ export const BrowserStateMixin = (SuperClass) => {
visibility: document.visibilityState, visibility: document.visibilityState,
userAgent: navigator.userAgent, userAgent: navigator.userAgent,
currentUser: this.hass?.user?.name, currentUser: this.hass?.user?.name,
fullyKiosk: this.isFully || false, fullyKiosk: this.fully || false,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
battery_level: battery_level:

27
js/plugin/camera.ts
View File

@ -19,6 +19,7 @@ export const CameraMixin = (SuperClass) => {
await this.connectionPromise; await this.connectionPromise;
await this.firstInteraction; await this.firstInteraction;
if (!this.cameraEnabled) return; if (!this.cameraEnabled) return;
if (this.fully) return this.update_camera();
const div = document.createElement("div"); const div = document.createElement("div");
document.body.append(div); document.body.append(div);
@ -63,17 +64,23 @@ export const CameraMixin = (SuperClass) => {
} }
return; return;
} }
const video = this._video; if (this.fully) {
const width = video.videoWidth; this.sendUpdate({
const height = video.videoHeight; camera: this.fully_camera,
this._canvas.width = width; });
this._canvas.height = height; } else {
const context = this._canvas.getContext("2d"); const video = this._video;
context.drawImage(video, 0, 0, width, height); const width = video.videoWidth;
const height = video.videoHeight;
this._canvas.width = width;
this._canvas.height = height;
const context = this._canvas.getContext("2d");
context.drawImage(video, 0, 0, width, height);
this.sendUpdate({ this.sendUpdate({
camera: this._canvas.toDataURL("image/jpeg"), camera: this._canvas.toDataURL("image/jpeg"),
}); });
}
const interval = Math.round(1000 / this._framerate); const interval = Math.round(1000 / this._framerate);
setTimeout(() => this.update_camera(), interval); setTimeout(() => this.update_camera(), interval);

90
js/plugin/fullyKiosk.ts
View File

@ -1,16 +1,15 @@
export const FullyKioskMixin = (C) => export const FullyMixin = (C) => {
class extends C { return class FullyMixinClass extends C {
get isFully() { private _fully_screensaver = false;
get fully() {
return window.fully !== undefined; return window.fully !== undefined;
} }
constructor() { constructor() {
super(); super();
if (!this.isFully) return; if (!this.fully) return;
this._fullyMotion = false;
this._motionTimeout = undefined;
for (const ev of [ for (const ev of [
"screenOn", "screenOn",
@ -21,74 +20,49 @@ export const FullyKioskMixin = (C) =>
"unplugged", "unplugged",
"networkReconnect", "networkReconnect",
"onMotion", "onMotion",
"onDaydreamStart",
"onDaydreamStop",
]) { ]) {
window.fully.bind(ev, `window.browser_mod.fully_update("${ev}");`); window.fully.bind(ev, `window.browser_mod.fullyEvent("${ev}");`);
} }
window.fully.bind( window.fully.bind(
"onScreensaverStart", "onScreensaverStart",
`window.browser_mod.fully_screensaver = true; window.browser_mod.screen_update();` `window.browser_mod._fully_screensaver = true; window.browser_mod.fullyEvent();`
); );
window.fully.bind( window.fully.bind(
"onScreensaverStop", "onScreensaverStop",
`window.browser_mod.fully_screensaver = false; window.browser_mod.screen_update();` `window.browser_mod._fully_screensaver = false; window.browser_mod.fullyEvent();`
); );
this._keepingAlive = false; return;
} }
fully_update(event?) { get fully_screen() {
if (!this.isFully) return; return this._fully_screensaver === false && window.fully?.getScreenOn();
if (event === "screenOn") { }
window.clearTimeout(this._keepAliveTimer); set fully_screen(state) {
if (!this._keepingAlive) this.screen_update(); if (state) {
} else if (event === "screenOff") { window.fully?.turnScreenOn();
this.screen_update(); window.fully?.stopScreensaver();
this._keepingAlive = false; } else {
if (this.config.force_stay_awake) { window.fully?.turnScreenOff();
this._keepAliveTimer = window.setTimeout(() => {
this._keepingAlive = true;
window.fully.turnScreenOn();
window.fully.turnScreenOff();
}, 270000);
}
} else if (event === "onMotion") {
this.fullyMotionTriggered();
} }
this.sendUpdate({
fully: {
battery: window.fully.getBatteryLevel(),
charging: window.fully.isPlugged(),
motion: this._fullyMotion,
ip: window.fully.getIp4Address(),
},
});
} }
startCamera() { get fully_brightness() {
if (this._fullyCameraTimer !== undefined) return; return window.fully?.getScreenBrightness();
this._fullyCameraTimer = window.setInterval(() => {
this.sendUpdate({
camera: window.fully.getCamshotJpgBase64(),
});
}, 200);
} }
stopCamera() { set fully_brightness(br) {
window.clearInterval(this._fullyCameraTimer); window.fully?.setScreenBrightness(br);
this._fullyCameraTimer = undefined;
} }
fullyMotionTriggered() { get fully_camera() {
if (this._keepingAlive) return; return window.fully?.getCamshotJpgBase64();
this._fullyMotion = true; }
this.startCamera();
clearTimeout(this._motionTimeout); fullyEvent(event = undefined) {
this._motionTimeout = setTimeout(() => { this.fireEvent("fully-update", { event });
this._fullyMotion = false;
this.stopCamera();
this.fully_update();
}, 5000);
this.fully_update();
} }
}; };
};

7
js/plugin/main.ts
View File

@ -11,8 +11,7 @@ import { ScreenSaverMixin } from "./screensaver";
import { MediaPlayerMixin } from "./mediaPlayer"; import { MediaPlayerMixin } from "./mediaPlayer";
import { CameraMixin } from "./camera"; import { CameraMixin } from "./camera";
import { RequireInteractMixin } from "./require-interact"; import { RequireInteractMixin } from "./require-interact";
import { FullyKioskMixin } from "./fullyKiosk"; import { FullyMixin } from "./fullyKiosk";
import { BrowserModScreensaverMixin } from "./screensaver";
import { BrowserModPopupsMixin } from "./popups"; import { BrowserModPopupsMixin } from "./popups";
import { BrowserStateMixin } from "./browser"; import { BrowserStateMixin } from "./browser";
import pjson from "../../package.json"; import pjson from "../../package.json";
@ -31,7 +30,9 @@ const ext = (baseClass, mixins) =>
export class BrowserMod extends BrowserStateMixin( export class BrowserMod extends BrowserStateMixin(
CameraMixin( CameraMixin(
MediaPlayerMixin( MediaPlayerMixin(
ScreenSaverMixin(RequireInteractMixin(ConnectionMixin(EventTarget))) ScreenSaverMixin(
FullyMixin(RequireInteractMixin(ConnectionMixin(EventTarget)))
)
) )
) )
) { ) {

27
js/plugin/require-interact.ts
View File

@ -8,8 +8,6 @@ export const RequireInteractMixin = (SuperClass) => {
constructor() { constructor() {
super(); super();
window.addEventListener("pointerdown", this._interactionResolve);
this.show_indicator(); this.show_indicator();
} }
@ -34,12 +32,35 @@ export const RequireInteractMixin = (SuperClass) => {
color: var(--warning-color, red); color: var(--warning-color, red);
opacity: 0.5; opacity: 0.5;
--mdc-icon-size: 48px; --mdc-icon-size: 48px;
}`; }
video {
display: none;
}
`;
const icon = document.createElement("ha-icon"); const icon = document.createElement("ha-icon");
interactSymbol.shadowRoot.append(icon); interactSymbol.shadowRoot.append(icon);
(icon as any).icon = "mdi:gesture-tap"; (icon as any).icon = "mdi:gesture-tap";
// If we are allowed to play a video, we can assume no interaction is needed
const video = (this._video = document.createElement("video"));
interactSymbol.shadowRoot.append(video);
const vPlay = video.play();
if (vPlay) {
vPlay
.then(() => {
this._interactionResolve();
})
.catch((e) => {
if (e.name === "AbortError") this._interactionResolve();
});
video.pause();
}
window.addEventListener("pointerdown", this._interactionResolve);
// if (this.fully) this._interactionResolve();
await this.firstInteraction; await this.firstInteraction;
interactSymbol.remove(); interactSymbol.remove();
} }

305
js/plugin/screensaver.ts
View File

@ -36,16 +36,29 @@ export const ScreenSaverMixin = (SuperClass) => {
this.addEventListener("command-screen_off", () => this._screen_off()); this.addEventListener("command-screen_off", () => this._screen_off());
this.addEventListener("command-screen_on", (ev) => this._screen_on(ev)); this.addEventListener("command-screen_on", (ev) => this._screen_on(ev));
this.addEventListener("fully-update", () => this.send_screen_status());
this.connectionPromise.then(() => this._screen_on()); this.connectionPromise.then(() => this._screen_on());
} }
private _screen_off() { send_screen_status() {
this._panel.setAttribute("dark", ""); let screen_on = !this._panel.hasAttribute("dark");
let screen_brightness = this._brightness;
if (this.fully) {
screen_on = this.fully_screen;
screen_brightness = this.fully_brightness;
}
this.sendUpdate({ this.sendUpdate({ screen_on, screen_brightness });
screen_on: false, }
screen_brightness: 0,
}); private _screen_off() {
if (this.fully) {
this.fully_screen = false;
} else {
this._panel.setAttribute("dark", "");
}
this.send_screen_status();
const l = () => this._screen_on(); const l = () => this._screen_on();
for (const ev of ["pointerdown", "pointermove", "keydown"]) { for (const ev of ["pointerdown", "pointermove", "keydown"]) {
@ -55,18 +68,22 @@ export const ScreenSaverMixin = (SuperClass) => {
} }
private _screen_on(ev = undefined) { private _screen_on(ev = undefined) {
if (ev?.detail?.brightness) { if (this.fully) {
this._brightness = ev.detail.brightness; this.fully_screen = true;
this._panel.style.setProperty( if (ev?.detail?.brightness) {
"--darkness", this.fully_brightness = ev.detail.brightness;
1 - ev.detail.brightness / 255 }
); } else {
if (ev?.detail?.brightness) {
this._brightness = ev.detail.brightness;
this._panel.style.setProperty(
"--darkness",
1 - ev.detail.brightness / 255
);
}
this._panel.removeAttribute("dark");
} }
this._panel.removeAttribute("dark"); this.send_screen_status();
this.sendUpdate({
screen_on: true,
screen_brightness: this._brightness,
});
for (const ev of ["pointerdown", "pointermove", "keydown"]) { for (const ev of ["pointerdown", "pointermove", "keydown"]) {
if (this._listeners[ev]) { if (this._listeners[ev]) {
@ -79,141 +96,141 @@ export const ScreenSaverMixin = (SuperClass) => {
return ScreenSaverMixinClass; return ScreenSaverMixinClass;
}; };
export const BrowserModScreensaverMixin = (C) => // export const BrowserModScreensaverMixin = (C) =>
class extends C { // class extends C {
constructor() { // constructor() {
super(); // super();
this._blackout_panel = document.createElement("div"); // this._blackout_panel = document.createElement("div");
this._screenSaver = undefined; // this._screenSaver = undefined;
this._screenSaverTimer = undefined; // this._screenSaverTimer = undefined;
this._screenSaverTimeOut = 0; // this._screenSaverTimeOut = 0;
this._screenSaver = { // this._screenSaver = {
fn: undefined, // fn: undefined,
clearfn: undefined, // clearfn: undefined,
timer: undefined, // timer: undefined,
timeout: undefined, // timeout: undefined,
listeners: {}, // listeners: {},
active: false, // active: false,
}; // };
this._blackout_panel.style.cssText = ` // this._blackout_panel.style.cssText = `
position: fixed; // position: fixed;
left: 0; // left: 0;
top: 0; // top: 0;
padding: 0; // padding: 0;
margin: 0; // margin: 0;
width: 100%; // width: 100%;
height: 100%; // height: 100%;
background: black; // background: black;
display: none; // display: none;
`; // `;
document.body.appendChild(this._blackout_panel); // document.body.appendChild(this._blackout_panel);
} // }
screensaver_set(fn, clearfn, time) { // screensaver_set(fn, clearfn, time) {
this._ss_clear(); // this._ss_clear();
this._screenSaver = { // this._screenSaver = {
fn, // fn,
clearfn, // clearfn,
timer: undefined, // timer: undefined,
timeout: time, // timeout: time,
listeners: {}, // listeners: {},
active: false, // active: false,
}; // };
const l = () => this.screensaver_update(); // const l = () => this.screensaver_update();
for (const event of ["mousemove", "mousedown", "keydown", "touchstart"]) { // for (const event of ["mousemove", "mousedown", "keydown", "touchstart"]) {
window.addEventListener(event, l); // window.addEventListener(event, l);
this._screenSaver.listeners[event] = l; // this._screenSaver.listeners[event] = l;
} // }
this._screenSaver.timer = window.setTimeout( // this._screenSaver.timer = window.setTimeout(
() => this._ss_run(), // () => this._ss_run(),
time * 1000 // time * 1000
); // );
} // }
screensaver_update() { // screensaver_update() {
if (this._screenSaver.active) { // if (this._screenSaver.active) {
this.screensaver_stop(); // this.screensaver_stop();
} else { // } else {
window.clearTimeout(this._screenSaver.timer); // window.clearTimeout(this._screenSaver.timer);
this._screenSaver.timer = window.setTimeout( // this._screenSaver.timer = window.setTimeout(
() => this._ss_run(), // () => this._ss_run(),
this._screenSaver.timeout * 1000 // this._screenSaver.timeout * 1000
); // );
} // }
} // }
screensaver_stop() { // screensaver_stop() {
this._ss_clear(); // this._ss_clear();
this._screenSaver.active = false; // this._screenSaver.active = false;
if (this._screenSaver.clearfn) this._screenSaver.clearfn(); // if (this._screenSaver.clearfn) this._screenSaver.clearfn();
if (this._screenSaver.timeout) { // if (this._screenSaver.timeout) {
this.screensaver_set( // this.screensaver_set(
this._screenSaver.fn, // this._screenSaver.fn,
this._screenSaver.clearfn, // this._screenSaver.clearfn,
this._screenSaver.timeout // this._screenSaver.timeout
); // );
} // }
} // }
_ss_clear() { // _ss_clear() {
window.clearTimeout(this._screenSaverTimer); // window.clearTimeout(this._screenSaverTimer);
for (const [k, v] of Object.entries(this._screenSaver.listeners)) { // for (const [k, v] of Object.entries(this._screenSaver.listeners)) {
window.removeEventListener(k as any, v as any); // window.removeEventListener(k as any, v as any);
} // }
} // }
_ss_run() { // _ss_run() {
this._screenSaver.active = true; // this._screenSaver.active = true;
this._screenSaver.fn(); // this._screenSaver.fn();
} // }
do_blackout(timeout) { // do_blackout(timeout) {
this.screensaver_set( // this.screensaver_set(
() => { // () => {
if (this.isFully) { // if (this.isFully) {
if (this.config.screensaver) window.fully.startScreensaver(); // if (this.config.screensaver) window.fully.startScreensaver();
else window.fully.turnScreenOff(true); // else window.fully.turnScreenOff(true);
} else { // } else {
this._blackout_panel.style.display = "block"; // this._blackout_panel.style.display = "block";
} // }
this.screen_update(); // this.screen_update();
}, // },
() => { // () => {
if ((this._blackout_panel.style.display = "block")) // if ((this._blackout_panel.style.display = "block"))
this._blackout_panel.style.display = "none"; // this._blackout_panel.style.display = "none";
if (this.isFully) { // if (this.isFully) {
if (!window.fully.getScreenOn()) window.fully.turnScreenOn(); // if (!window.fully.getScreenOn()) window.fully.turnScreenOn();
window.fully.stopScreensaver(); // window.fully.stopScreensaver();
} // }
this.screen_update(); // this.screen_update();
}, // },
timeout || 0 // timeout || 0
); // );
} // }
no_blackout() { // no_blackout() {
if (this.isFully) { // if (this.isFully) {
window.fully.turnScreenOn(); // window.fully.turnScreenOn();
window.fully.stopScreensaver(); // window.fully.stopScreensaver();
} // }
this.screensaver_stop(); // this.screensaver_stop();
} // }
screen_update() { // screen_update() {
this.sendUpdate({ // this.sendUpdate({
screen: { // screen: {
blackout: this.isFully // blackout: this.isFully
? this.fully_screensaver !== undefined // ? this.fully_screensaver !== undefined
? this.fully_screensaver // ? this.fully_screensaver
: !window.fully.getScreenOn() // : !window.fully.getScreenOn()
: Boolean(this._blackout_panel.style.display === "block"), // : Boolean(this._blackout_panel.style.display === "block"),
brightness: this.isFully // brightness: this.isFully
? window.fully.getScreenBrightness() // ? window.fully.getScreenBrightness()
: undefined, // : undefined,
}, // },
}); // });
} // }
}; // };

1
js/plugin/types.ts
View File

@ -14,6 +14,7 @@ interface FullyKiosk {
// Controll device, show notifications, send network data etc. // Controll device, show notifications, send network data etc.
turnScreenOn: { () }; turnScreenOn: { () };
turnScreenOff: { (keepAlive?: Boolean) }; turnScreenOff: { (keepAlive?: Boolean) };
setScreenBrightness: { (lewvel: Number) };
// Control fully and browsing // Control fully and browsing
startScreensaver: { () }; startScreensaver: { () };