add fullscreen btn

This commit is contained in:
Simon Vieille 2022-04-11 18:03:01 +02:00
parent c947fe01b3
commit 7a379d0359
Signed by: deblan
GPG key ID: 03383D15A1D31745
3 changed files with 23 additions and 14 deletions

View file

@ -34,6 +34,10 @@ var createWebSocketConnection = function() {
}
var navigationClickHandler = function(e) {
if ($(this).attr('href') === '#') {
return
}
$('.pane').hide();
var target = $(this).attr('href');
@ -205,12 +209,12 @@ var liveClickHandler = function(e) {
doScreenshot();
}
var screenshotImgClickHandler = function(e) {
var img = $screenshotImg.get(0);
var isFullscreen = parseInt($screenshotImg.attr('data-fullscreen'));
var fullscreenHandler = function(e) {
var element = $(e.target.getAttribute('data-target'));
var isFullscreen = parseInt($(e.target).attr('data-fullscreen'));
if (isFullscreen) {
$screenshotImg.attr('data-fullscreen', '0');
element.attr('data-fullscreen', '0');
if (document.exitFullscreen) {
document.exitFullscreen();
@ -220,14 +224,14 @@ var screenshotImgClickHandler = function(e) {
document.mozCancelFullScreen();
}
} else {
$screenshotImg.attr('data-fullscreen', '1');
$(e.target).attr('data-fullscreen', '1');
if (img.requestFullscreen) {
img.requestFullscreen();
} else if (img.webkitRequestFullscreen) {
img.webkitRequestFullscreen();
} else if (img.mozRequestFullScreen) {
img.mozRequestFullScreen();
if (element.get(0).requestFullscreen) {
element.get(0).requestFullscreen();
} else if (element.get(0).webkitRequestFullscreen) {
element.get(0).webkitRequestFullscreen();
} else if (element.get(0).mozRequestFullScreen) {
element.get(0).mozRequestFullScreen();
}
}
}
@ -268,7 +272,7 @@ var addListeners = function() {
$('#live').click(liveClickHandler);
$screenshotImg.click(screenshotImgClickHandler)
$('.btn-fullscreen').click(fullscreenHandler)
}
var bootstrap = function() {

View file

@ -28,6 +28,9 @@
<li class="nav-item">
<a class="nav-link no-radius" href="#pane-desktop">DESKTOP</a>
</li>
<li class="nav-item">
<a class="nav-link no-radius btn-fullscreen" data-target="html" href="#">💻</a>
</li>
</ul>
</div>
</div>
@ -212,7 +215,7 @@
<div class="col-12">
<button type="button" data-msg='{"type":"screenshot"}' class="btn btn-secondary">Screenshot</button>
<button type="button" id="live" class="btn btn-secondary">Live</button>
<div id="screenshot"><img src="data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIJDjc3srQk8gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADElEQVQI12P48+cPAAXsAvVTWDc6AAAAAElFTkSuQmCC"></div>
<div id="screenshot"><img class="btn-fullscreen" data-target="#screenshot img" src="data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIJDjc3srQk8gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADElEQVQI12P48+cPAAXsAvVTWDc6AAAAAElFTkSuQmCC"></div>
</div>
<div class="col-12">
</div>

View file

@ -190,11 +190,13 @@ $server->addMessageHandler('screenshot', function (ConnectionInterface $from, ar
unlink($tmpFilename);
});
$server->addMessageHandler('messages', function (ConnectionInterface $from, array $data) use ($server) {
$server->addMessageHandler('messages', function (ConnectionInterface $from, array $data) use ($server, $serverOutput) {
$value = $data['value'] ?? [];
foreach ($value as $msg) {
$server->onMessage($from, json_encode($msg));
usleep(1000000 / 3);
}
});