jrd/floorbell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prompt user for interaction to enable sound when block by browser

Browse Source
This commit is contained in:
Jared Burce
2020-10-29 04:59:20 -07:00
parent ab81bdb708
commit 5f60cd2a1b
1 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
static/main.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" onclick="document.getElementById('unmute').style.display = 'none';">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Fáfnir Doorbell</title> <title>Fáfnir Doorbell</title>
@@ -52,10 +52,14 @@
border-color: yellow; border-color: yellow;
border-width: 5px; border-width: 5px;
padding: 15px; padding: 15px;
text-align: center;
}
#status_box table {
text-align: left;
} }
#status_box th { #status_box th {
text-align: left;
padding-right: 2em; padding-right: 2em;
} }
@@ -72,6 +76,11 @@
.disconnected { .disconnected {
color: red; color: red;
} }
#unmute {
display: none;
min-width: 60%;
}
</style> </style>
</head> </head>
<body class="flash"> <body class="flash">
@@ -85,6 +94,7 @@
<td id="last_ring" class="status"></td> <td id="last_ring" class="status"></td>
</tr> </tr>
</table> </table>
<button id="unmute">Click Anywhere To Enable Sound</button>
</section> </section>
<audio id="chime" src="indoor.mp3"></audio> <audio id="chime" src="indoor.mp3"></audio>
@@ -118,7 +128,7 @@
if (ping) { clearTimeout(ping); } if (ping) { clearTimeout(ping); }
sse = new EventSource('events'); sse = new EventSource('events');
let beep_seek = document.getElementById('beep_seek'); let beep_seek = document.getElementById('beep_seek');
beep_seek.play(); beep_seek.play().catch(() => { $('#unmute').show() }); // Need user interatction for sound
sse.onopen = () => { sse.onopen = () => {
console.log('connected'); console.log('connected');