Mirrors/cloud-game
1
0
Fork 0
mirror of https://github.com/giongto35/cloud-game.git synced 2026-07-28 12:36:30 +00:00
Code Issues Projects Releases Packages Wiki Activity

Use orientation-based video / canvas stretching (#335)

Browse source
This commit is contained in:
sergystepanov 2021-07-28 02:13:03 +03:00 • committed by GitHub
parent 3079751758
commit 3abb1d4818
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/css/main.css vendored
View file

@ -429,9 +429,8 @@ body {
}
.game-screen {
/*overflow: hidden;*/
width: 100%;
/*height: 100%;*/
height: 100%;
background-color: #222222;
position: absolute;
display: flex;

2
web/index.html vendored
View file

@ -124,7 +124,7 @@
<script src="/static/js/env.js?v=5"></script>
<script src="/static/js/input/input.js?v=3"></script>
<script src="/static/js/gameList.js?v=3"></script>
<script src="/static/js/stream/stream.js?v=1"></script>
<script src="/static/js/stream/stream.js?v=2"></script>
<script src="/static/js/room.js?v=3"></script>
<script src="/static/js/stats/stats.js?v=1"></script>
<script src="/static/js/network/ajax.js?v=3"></script>

6
web/js/stream/stream.js vendored
View file

@ -97,6 +97,12 @@ const stream = (() => {
canvas.style['image-rendering'] = 'pixelated';
canvas.classList.add('game-screen');
// stretch depending on the video orientation
// portrait -- vertically, landscape -- horizontally
const isPortrait = screen.videoWidth < screen.videoHeight;
canvas.style.width = isPortrait ? 'auto' : canvas.style.width;
canvas.style.height = isPortrait ? canvas.style.height : 'auto';
let surface = canvas.getContext('2d');
screen.parentNode.insertBefore(canvas, screen.nextSibling);
toggle(false)