Skip to content

Commit 49655db

Browse files
captainbrossetcaptainbrosset
committed
idle detection demo
1 parent e3a0508 commit 49655db

File tree

2 files changed

+132
-0
lines changed

2 files changed

+132
-0
lines changed

‎idle-detection/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Idle detection demo
2+
3+
➡️ **[Open the demo](https://microsoftedge.github.io/Demos/idle-detection/)** ⬅️
4+
5+
This webpage shows how to use the Idle Detection API to detect when a user is idle or active, and is used as a demo to illustrate the [Emulate idle detector state](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/sensors/#emulate-idle-detector-state) section of the _Emulate device sensors_ article in the Microsoft Edge DevTools documentation.

‎idle-detection/index.html

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
8+
<title>Idle detection demo</title>
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
list-style: none;
14+
}
15+
16+
body {
17+
font-family: system-ui;
18+
font-size: 1.2rem;
19+
padding: 2rem;
20+
}
21+
22+
button {
23+
font-size: inherit;
24+
font-family: inherit;
25+
padding: .5rem;
26+
border-radius: .5rem;
27+
border: 1px solid black;
28+
background: #63ddb5;
29+
}
30+
31+
.app {
32+
max-width: 600px;
33+
margin: 0 auto;
34+
padding: 2rem;
35+
border-radius: 1rem;
36+
background: #d7e9dd;
37+
}
38+
39+
h1 {
40+
margin-block-end: 2rem;
41+
}
42+
43+
ul {
44+
margin-block-start: 2rem;
45+
}
46+
47+
ul li {
48+
margin: 1rem 0;
49+
}
50+
51+
.state {
52+
font-family: monospace;
53+
padding: .5rem;
54+
background: #0001;
55+
border-radius: .5rem;
56+
font-weight: bold;
57+
}
58+
</style>
59+
</head>
60+
61+
<body>
62+
<div class="app">
63+
<h1>Idle detection demo</h1>
64+
65+
<button id="start">Start detecting idle state</button>
66+
<button id="stop">Stop detecting idle state</button>
67+
68+
<ul>
69+
<li>Idle detection status: <span class="state" id="status-text">-</span></li>
70+
<li>User state: <span class="state" id="user-state">-</span></li>
71+
<li>Screen state: <span class="state" id="screen-state">-</span></li>
72+
</ul>
73+
</div>
74+
75+
<script>
76+
const startButton = document.querySelector("#start");
77+
const stopButton = document.querySelector("#stop");
78+
const statusText = document.querySelector("#status-text");
79+
const userStateText = document.querySelector("#user-state");
80+
const screenStateText = document.querySelector("#screen-state");
81+
82+
let abortController = null;
83+
84+
startButton.addEventListener("click", async () => {
85+
if ((await IdleDetector.requestPermission()) !== "granted") {
86+
console.error("Idle detection permission denied.");
87+
statusText.textContent = "Permission denied";
88+
return;
89+
}
90+
91+
abortController = new AbortController();
92+
const signal = abortController.signal;
93+
94+
try {
95+
const idleDetector = new IdleDetector();
96+
idleDetector.addEventListener("change", () => {
97+
const userState = idleDetector.userState;
98+
const screenState = idleDetector.screenState;
99+
100+
userStateText.textContent = userState;
101+
screenStateText.textContent = screenState;
102+
});
103+
104+
await idleDetector.start({
105+
threshold: 60_000,
106+
signal,
107+
});
108+
109+
statusText.textContent = "Active";
110+
} catch (err) {
111+
// Deal with initialization errors like permission denied,
112+
// running outside of top-level frame, etc.
113+
statusText.textContent = err.name + ": " + err.message;
114+
}
115+
});
116+
117+
stopButton.addEventListener("click", () => {
118+
abortController.abort();
119+
120+
statusText.textContent = "Stopped";
121+
userStateText.textContent = "-";
122+
screenStateText.textContent = "-";
123+
});
124+
</script>
125+
</body>
126+
127+
</html>

0 commit comments

Comments
 (0)