baileytownsend.dev
A stream.place client in a single index.html
full screen
+42
index.html
+42
index.html
···
995
995
oninput="setVolume(this.value)"
996
996
title="Volume"
997
997
/>
998
+
<button
999
+
class="mc-btn"
1000
+
id="fullscreenBtn"
1001
+
onclick="toggleFullscreen()"
1002
+
title="Fullscreen"
1003
+
style="margin-left: auto"
1004
+
>
1005
+
<svg viewBox="0 0 24 24">
1006
+
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
1007
+
</svg>
1008
+
</button>
998
1009
</div>
999
1010
<div class="video-overlay" id="overlay">
1000
1011
<div class="idle-icon">
···
1348
1359
const playPauseBtn = document.getElementById("playPauseBtn");
1349
1360
const muteBtn = document.getElementById("muteBtn");
1350
1361
const volumeSlider = document.getElementById("volumeSlider");
1362
+
const fullscreenBtn = document.getElementById("fullscreenBtn");
1363
+
const videoFrame = document.querySelector(".video-frame");
1351
1364
let savedVolume = 1;
1352
1365
1353
1366
const iconPlay =
···
1358
1371
'<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/><path d="M19 12c0-3.07-1.96-5.68-4.5-6.65v1.52A5.99 5.99 0 0118 12a5.99 5.99 0 01-3.5 5.13v1.52C17.04 17.68 19 15.07 19 12z"/></svg>';
1359
1372
const iconMuted =
1360
1373
'<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3z"/><line x1="23" y1="9" x2="17" y2="15" stroke="currentColor" stroke-width="2"/><line x1="17" y1="9" x2="23" y2="15" stroke="currentColor" stroke-width="2"/></svg>';
1374
+
const iconFullscreen =
1375
+
'<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
1376
+
const iconExitFullscreen =
1377
+
'<svg viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
1361
1378
1362
1379
function updatePlayPauseIcon() {
1363
1380
playPauseBtn.innerHTML = video.paused ? iconPlay : iconPause;
···
1388
1405
}
1389
1406
updateMuteIcon();
1390
1407
}
1408
+
1409
+
function toggleFullscreen() {
1410
+
// iOS Safari only supports fullscreen on <video> via webkit prefix
1411
+
if (video.webkitEnterFullscreen && !document.fullscreenEnabled) {
1412
+
video.webkitEnterFullscreen();
1413
+
return;
1414
+
}
1415
+
if (!document.fullscreenElement) {
1416
+
videoFrame.requestFullscreen().catch((err) => {
1417
+
log(`Fullscreen error: ${err.message}`, "error");
1418
+
});
1419
+
} else {
1420
+
document.exitFullscreen();
1421
+
}
1422
+
}
1423
+
1424
+
function updateFullscreenIcon() {
1425
+
fullscreenBtn.innerHTML = document.fullscreenElement
1426
+
? iconExitFullscreen
1427
+
: iconFullscreen;
1428
+
}
1429
+
1430
+
document.addEventListener("fullscreenchange", updateFullscreenIcon);
1431
+
video.addEventListener("webkitendfullscreen", updateFullscreenIcon);
1391
1432
1392
1433
function setVolume(val) {
1393
1434
val = parseFloat(val);
···
1945
1986
window.togglePlayPause = togglePlayPause;
1946
1987
window.toggleMute = toggleMute;
1947
1988
window.setVolume = setVolume;
1989
+
window.toggleFullscreen = toggleFullscreen;
1948
1990
1949
1991
// ---- History navigation ----
1950
1992
window.addEventListener("popstate", () => {