mirror of
https://github.com/giongto35/cloud-game.git
synced 2026-01-23 02:34:42 +00:00
Add 'force full-screen' option
This commit is contained in:
Sergey Stepanov
sergystepanov
parent
cf5248ec54
commit
a349fdd0cf
8 changed files with 77 additions and 15 deletions
|
|
@ -74,10 +74,13 @@
|
|||
|
||||
.settings__option-value select, .settings__option-value input {
|
||||
font-family: '6809', monospace;
|
||||
width: 6em;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.settings__option-value input:not([type='checkbox']) {
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
.settings__option-value option {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
|
@ -88,10 +91,15 @@
|
|||
|
||||
.keyboard-bindings .settings__option-value {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 25% auto auto;
|
||||
grid-template-columns: 20% 20% 20% 20% auto;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.settings__option-checkbox label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.binding-element {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<link rel="icon" href="data:,">
|
||||
|
||||
<link href="css/main.css?v=6" rel="stylesheet">
|
||||
<link href="css/ui.css?v=2" rel="stylesheet">
|
||||
<link href="css/ui.css?v=3" rel="stylesheet">
|
||||
<title>Cloud Retro</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -102,18 +102,18 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<script src="js/gui/gui.js?v=2"></script>
|
||||
<script src="js/gui/gui.js?v=3"></script>
|
||||
<script src="js/utils.js?v1"></script>
|
||||
<script src="js/gui/message.js?v=2"></script>
|
||||
<script src="js/log.js?v=5"></script>
|
||||
<script src="js/event/event.js?v=5"></script>
|
||||
<script src="js/input/keys.js?v=3"></script>
|
||||
<script src="js/settings/opts.js?v=2"></script>
|
||||
<script src="js/settings/settings.js?v=5"></script>
|
||||
<script src="js/env.js?v=5"></script>
|
||||
<script src="js/settings/opts.js?v=3"></script>
|
||||
<script src="js/settings/settings.js?v=6"></script>
|
||||
<script src="js/env.js?v=6"></script>
|
||||
<script src="js/input/input.js?v=3"></script>
|
||||
<script src="js/gameList.js?v=5"></script>
|
||||
<script src="js/stream/stream.js?v=7"></script>
|
||||
<script src="js/stream/stream.js?v=8"></script>
|
||||
<script src="js/room.js?v=3"></script>
|
||||
<script src="js/network/ajax.js?v=3"></script>
|
||||
<script src="js/network/socket.js?v=4"></script>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
<script src="js/api/api.js?v=3"></script>
|
||||
<script src="js/workerManager.js?v=1"></script>
|
||||
<script src="js/stats/stats.js?v=1"></script>
|
||||
<script src="js/controller.js?v=10"></script>
|
||||
<script src="js/controller.js?v=11"></script>
|
||||
<script src="js/input/keyboard.js?v=6"></script>
|
||||
<script src="js/input/touch.js?v=3"></script>
|
||||
<script src="js/input/joystick.js?v=3"></script>
|
||||
|
|
|
|||
|
|
@ -138,6 +138,7 @@
|
|||
input.poll.disable();
|
||||
gui.hide(menuScreen);
|
||||
stream.toggle(true);
|
||||
stream.forceFullscreenMaybe();
|
||||
gui.show(keyButtons[KEY.SAVE]);
|
||||
gui.show(keyButtons[KEY.LOAD]);
|
||||
// end clear
|
||||
|
|
|
|||
|
|
@ -108,8 +108,7 @@ const env = (() => {
|
|||
return {
|
||||
getOs: getOS,
|
||||
getBrowser: getBrowser,
|
||||
// Check mobile type because different mobile can accept different video encoder.
|
||||
isMobileDevice: () => (typeof window.orientation !== 'undefined') || (navigator.userAgent.indexOf('IEMobile') !== -1),
|
||||
isMobileDevice: () => /Mobi|Android|iPhone/i.test(navigator.userAgent),
|
||||
display: () => ({
|
||||
isPortrait: isPortrait,
|
||||
toggleFullscreen: toggleFullscreen,
|
||||
|
|
|
|||
|
|
@ -42,6 +42,36 @@ const gui = (() => {
|
|||
return el;
|
||||
}
|
||||
|
||||
const checkbox = (id, cb = () => ({}), checked = false, label = '', cc = '') => {
|
||||
const el = _create();
|
||||
cc !== '' && el.classList.add(cc);
|
||||
|
||||
let parent = el;
|
||||
|
||||
if (label) {
|
||||
const _label = _create('label', (el) => {
|
||||
el.setAttribute('htmlFor', id);
|
||||
})
|
||||
_label.innerText = label;
|
||||
el.append(_label)
|
||||
parent = _label;
|
||||
}
|
||||
|
||||
const input = _create('input', (el) => {
|
||||
el.setAttribute('id', id);
|
||||
el.setAttribute('name', id);
|
||||
el.setAttribute('type', 'checkbox');
|
||||
el.onclick = ((e) => {
|
||||
checked = e.target.checked
|
||||
cb(id, checked)
|
||||
})
|
||||
checked && el.setAttribute('checked', '');
|
||||
});
|
||||
parent.prepend(input);
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
const panel = (root, title = '', cc = '', content, buttons = [], onToggle) => {
|
||||
const state = {
|
||||
br: null,
|
||||
|
|
@ -221,6 +251,7 @@ const gui = (() => {
|
|||
fadeInOut,
|
||||
},
|
||||
binding,
|
||||
checkbox,
|
||||
create: _create,
|
||||
fragment,
|
||||
hide,
|
||||
|
|
|
|||
|
|
@ -11,5 +11,6 @@ const opts = Object.freeze({
|
|||
LOG_LEVEL: 'log.level',
|
||||
INPUT_KEYBOARD_MAP: 'input.keyboard.map',
|
||||
MIRROR_SCREEN: 'mirror.screen',
|
||||
VOLUME: 'volume'
|
||||
VOLUME: 'volume',
|
||||
FORCE_FULLSCREEN: 'force.fullscreen'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
*/
|
||||
const settings = (() => {
|
||||
// internal structure version
|
||||
const revision = 1.5;
|
||||
const revision = 1.51;
|
||||
|
||||
// default settings
|
||||
// keep them for revert to defaults option
|
||||
|
|
@ -480,7 +480,7 @@ settings.renderer = (() => {
|
|||
case opts.MIRROR_SCREEN:
|
||||
_option(data).withName('Video mirroring')
|
||||
.add(gui.select(k, onChange, {values: ['mirror'], labels: []}, value))
|
||||
.withDescription('Disables video image smoothing by rendering the video on a canvas (much more demanding on the CPU/GPU)')
|
||||
.withDescription('Disables video image smoothing by rendering the video on a canvas (much more demanding for browser)')
|
||||
.build();
|
||||
break;
|
||||
case opts.VOLUME:
|
||||
|
|
@ -489,6 +489,14 @@ settings.renderer = (() => {
|
|||
.restartNeeded()
|
||||
.build()
|
||||
break;
|
||||
case opts.FORCE_FULLSCREEN:
|
||||
_option(data).withName('Force fullscreen')
|
||||
.withDescription(
|
||||
'Whether games should open in full-screen mode after starting up (excluding mobile devices)'
|
||||
)
|
||||
.add(gui.checkbox(k, onChange, value, 'Enbabled', 'settings__option-checkbox'))
|
||||
.build()
|
||||
break;
|
||||
default:
|
||||
_option(data).withName(k).add(value).build();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ const stream = (() => {
|
|||
poster: '/img/screen_loading.gif',
|
||||
mirrorMode: null,
|
||||
mirrorUpdateRate: 1 / 60,
|
||||
forceFullscreen: true,
|
||||
},
|
||||
state = {
|
||||
screen: screen,
|
||||
|
|
@ -112,6 +113,12 @@ const stream = (() => {
|
|||
screen.classList.toggle('no-media-controls', make)
|
||||
}
|
||||
|
||||
const forceFullscreenMaybe = () => {
|
||||
const touchMode = env.isMobileDevice();
|
||||
log.debug('touch check', touchMode)
|
||||
!touchMode && options.forceFullscreen && toggleFullscreen();
|
||||
}
|
||||
|
||||
const useCustomScreen = (use) => {
|
||||
if (use) {
|
||||
if (screen.paused || screen.ended) return;
|
||||
|
|
@ -158,14 +165,20 @@ const stream = (() => {
|
|||
const init = () => {
|
||||
options.mirrorMode = settings.loadOr(opts.MIRROR_SCREEN, 'none');
|
||||
options.volume = settings.loadOr(opts.VOLUME, 50) / 100;
|
||||
options.forceFullscreen = settings.loadOr(opts.FORCE_FULLSCREEN, false);
|
||||
}
|
||||
|
||||
event.sub(SETTINGS_CHANGED, () => {
|
||||
const newValue = settings.get()[opts.MIRROR_SCREEN];
|
||||
const s = settings.get();
|
||||
const newValue = s[opts.MIRROR_SCREEN];
|
||||
if (newValue !== options.mirrorMode) {
|
||||
useCustomScreen(newValue === 'mirror');
|
||||
options.mirrorMode = newValue;
|
||||
}
|
||||
const newValue2 = s[opts.FORCE_FULLSCREEN];
|
||||
if (newValue2 !== options.forceFullscreen) {
|
||||
options.forceFullscreen = newValue2;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -196,6 +209,7 @@ const stream = (() => {
|
|||
play: stream,
|
||||
toggle,
|
||||
useCustomScreen,
|
||||
forceFullscreenMaybe,
|
||||
init
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue