mirror of
https://github.com/moonlight-stream/moonlight-chrome.git
synced 2025-08-17 16:46:31 +00:00
Merge pull request #454 from Jorys-Paulin/develop
Changes and improvements
This commit is contained in:
Cameron Gutman
GitHub
commit
47cfbf3d9f
62
index.html
62
index.html
@ -11,7 +11,7 @@
|
||||
<link rel="stylesheet" href="static/css/material-icons.css">
|
||||
</head>
|
||||
<body data-name="moonlight-chrome" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}">
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header id="main-navigation" class="mdl-layout__header mdl-layout__header--transparent">
|
||||
<div class="mdl-layout__header-row">
|
||||
<button id="backIcon" class="mdl-button mdl-js-button mdl-button--icon" role="link" aria-label="Host selection"><i class="material-icons">keyboard_arrow_left</i></button>
|
||||
@ -28,8 +28,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul class="resolutionMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
|
||||
for="selectResolution">
|
||||
<ul class="resolutionMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="selectResolution">
|
||||
<li class="mdl-menu__item" data-value="1280:720">720p</li>
|
||||
<li class="mdl-menu__item" data-value="1920:1080">1080p</li>
|
||||
<li class="mdl-menu__item" data-value="3840:2160">4K</li>
|
||||
@ -46,8 +45,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul class="framerateMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
|
||||
for="selectFramerate">
|
||||
<ul class="framerateMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="selectFramerate">
|
||||
<li class="mdl-menu__item" data-value="30">30 FPS</li>
|
||||
<li class="mdl-menu__item" data-value="60">60 FPS</li>
|
||||
</ul>
|
||||
@ -77,7 +75,7 @@
|
||||
<i class="mdl-icon-toggle__label material-icons">volume_up</i>
|
||||
</label>
|
||||
<div id="externalAudioTooltip" class="mdl-tooltip" for="externalAudioBtn">
|
||||
Play audio on the host PC speakers
|
||||
Play audio on the host
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -87,7 +85,7 @@
|
||||
<i class="mdl-icon-toggle__label material-icons">timeline</i>
|
||||
</label>
|
||||
<div id="optimizeGamesTooltip" class="mdl-tooltip" for="optimizeGamesBtn">
|
||||
Allow GeForce Experience to optimize game settings for streaming
|
||||
Allow game optimisations
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -100,16 +98,13 @@
|
||||
</header>
|
||||
<main id="main-content" class="mdl-layout__content">
|
||||
<div id="host-grid">
|
||||
<div class="page-title">Your PCs</div>
|
||||
<div class="add-host-card mdl-card mdl-shadow--4dp" id="addHostCell">
|
||||
<div class="mdl-card__title mdl-card--expand" id="addHostIcon" role="link" tabindex="0" aria-label="Add Host">
|
||||
<h2 class="mdl-card__title-text" >Add Host</h2>
|
||||
<h2 class="mdl-card__title-text">Add Host</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="game-grid">
|
||||
<div class="page-title">Your Games</div>
|
||||
</div>
|
||||
<div id="game-grid"></div>
|
||||
<div id="listener"></div>
|
||||
<!-- NaCl module placeholder. NaCl gets thrown into here -->
|
||||
<div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
|
||||
@ -119,16 +114,16 @@
|
||||
<h5 id="naclSpinnerMessage"></h5>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script defer src="static/js/jquery-2.2.0.min.js"></script>
|
||||
<script defer src="static/js/material.min.js"></script>
|
||||
<script type="text/javascript" src="static/js/messages.js"></script>
|
||||
<script type="text/javascript" src="static/js/common.js"></script>
|
||||
<script type="text/javascript" src="static/js/index.js"></script>
|
||||
<script type="text/javascript" src="static/js/utils.js"></script>
|
||||
<script type="text/javascript" src="static/js/mdns-browser/dns.js"></script>
|
||||
<script type="text/javascript" src="static/js/mdns-browser/main.js"></script>
|
||||
<dialog id="pairingDialog" class="mdl-dialog">
|
||||
</div>
|
||||
<script defer src="static/js/jquery-2.2.0.min.js"></script>
|
||||
<script defer src="static/js/material.min.js"></script>
|
||||
<script type="text/javascript" src="static/js/messages.js"></script>
|
||||
<script type="text/javascript" src="static/js/common.js"></script>
|
||||
<script type="text/javascript" src="static/js/index.js"></script>
|
||||
<script type="text/javascript" src="static/js/utils.js"></script>
|
||||
<script type="text/javascript" src="static/js/mdns-browser/dns.js"></script>
|
||||
<script type="text/javascript" src="static/js/mdns-browser/main.js"></script>
|
||||
<dialog id="pairingDialog" class="mdl-dialog">
|
||||
<h3 class="mdl-dialog__title">Pairing</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<p id="pairingDialogText">
|
||||
@ -138,8 +133,8 @@
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelPairingDialog">Cancel</button>
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog id="quitAppDialog" class="mdl-dialog">
|
||||
</dialog>
|
||||
<dialog id="quitAppDialog" class="mdl-dialog">
|
||||
<h3 class="mdl-dialog__title">Quit Running App?</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<p id="quitAppDialogText">
|
||||
@ -150,8 +145,8 @@
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelQuitApp">No</button>
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="continueQuitApp">Yes</button>
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog id="deleteHostDialog" class="mdl-dialog">
|
||||
</dialog>
|
||||
<dialog id="deleteHostDialog" class="mdl-dialog">
|
||||
<h3 class="mdl-dialog__title">Delete PC</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<p id="deleteHostDialogText">
|
||||
@ -162,12 +157,12 @@
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelDeleteHost">No</button>
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="continueDeleteHost">Yes</button>
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog id="addHostDialog" class="mdl-dialog">
|
||||
</dialog>
|
||||
<dialog id="addHostDialog" class="mdl-dialog">
|
||||
<h3 class="mdl-dialog__title">Add Host Manually</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="dialogInputHost"/>
|
||||
<input class="mdl-textfield__input" type="text" id="dialogInputHost" />
|
||||
<label class="mdl-textfield__label" for="dialogInputHost">IP Address or Hostname of Geforce PC</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -175,10 +170,11 @@
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelAddHost">Cancel</button>
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="continueAddHost">Continue</button>
|
||||
</div>
|
||||
</dialog>
|
||||
<div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
|
||||
</dialog>
|
||||
<div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
|
||||
<div class="mdl-snackbar__text"></div>
|
||||
<button id="snackButton" class="mdl-snackbar__action" type="button"></button> <!-- this button exists to suppress the snackbar warning. we're really using a toast. -->
|
||||
</div>
|
||||
<button id="snackButton" class="mdl-snackbar__action" type="button"></button>
|
||||
<!-- this button exists to suppress the snackbar warning. we're really using a toast. -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -72,6 +72,7 @@ main {
|
||||
|
||||
.nav-menu-parent {
|
||||
position: relative;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.mdl-menu__outline {
|
||||
background-color: #333846;
|
||||
@ -177,7 +178,7 @@ main {
|
||||
}
|
||||
#game-grid .mdl-card {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
background: url('../res/placeholder_game.svg') rgba(29, 29, 29, 1) center/cover no-repeat;
|
||||
}
|
||||
#host-grid .mdl-card, #game-grid .mdl-card {
|
||||
text-align: center;
|
||||
@ -187,9 +188,11 @@ main {
|
||||
margin: 15px;
|
||||
cursor: pointer;
|
||||
transition: all .2s ease-in-out;
|
||||
will-change: transform;
|
||||
}
|
||||
#host-grid .mdl-card:hover, #host-grid .mdl-card:focus, #host-grid .mdl-card:active, #game-grid .mdl-card:hover, #game-grid .mdl-card:focus, #game-grid .mdl-card:active {
|
||||
#host-grid .mdl-card:hover, #host-grid .mdl-card:focus, #host-grid .mdl-card:active, #game-grid .mdl-card:focus, #game-grid .mdl-card:active {
|
||||
transform: scale(1.1);
|
||||
outline-color: #00A3C6;
|
||||
}
|
||||
#host-grid .mdl-card__title {
|
||||
padding: 0;
|
||||
@ -203,6 +206,12 @@ main {
|
||||
#game-grid .mdl-card img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
z-index: -1;
|
||||
}
|
||||
#game-grid .mdl-card img.fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
#game-grid .game-title {
|
||||
position: absolute;
|
||||
@ -290,10 +299,10 @@ main {
|
||||
border: none !important;
|
||||
}
|
||||
.current-game {
|
||||
border: 2px solid #00A3C6;
|
||||
outline: auto #8BC34A;
|
||||
}
|
||||
.host-cell-inactive {
|
||||
border: 3px solid #8e0000;
|
||||
outline: auto #F44336;
|
||||
}
|
||||
.host-cell:hover {
|
||||
cursor: pointer;
|
||||
|
||||
@ -10,7 +10,9 @@ function createWindow(state) {
|
||||
// state = 'normal' in some cases not work (e.g. starting app from 'chrome://extensions' always open window in fullscreen mode)
|
||||
// it requires manually restoring window state to 'normal'
|
||||
if (state == 'normal') {
|
||||
setTimeout(function() { window.restore(); }, 1000);
|
||||
setTimeout(function() {
|
||||
window.restore();
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -22,9 +24,9 @@ chrome.app.runtime.onLaunched.addListener(function() {
|
||||
if (chrome.storage) {
|
||||
// load stored window state
|
||||
chrome.storage.sync.get('windowState', function(item) {
|
||||
windowState = (item && item.windowState)
|
||||
? item.windowState
|
||||
: windowState;
|
||||
windowState = (item && item.windowState) ?
|
||||
item.windowState :
|
||||
windowState;
|
||||
createWindow(windowState);
|
||||
});
|
||||
} else {
|
||||
|
||||
@ -35,13 +35,15 @@ function fullscreenChromeWindow() {
|
||||
}
|
||||
|
||||
function loadWindowState() {
|
||||
if (!chrome.storage) { return; }
|
||||
if (!chrome.storage) {
|
||||
return;
|
||||
}
|
||||
|
||||
chrome.storage.sync.get('windowState', function(item) {
|
||||
// load stored window state
|
||||
windowState = (item && item.windowState)
|
||||
? item.windowState
|
||||
: windowState;
|
||||
windowState = (item && item.windowState) ?
|
||||
item.windowState :
|
||||
windowState;
|
||||
|
||||
// subscribe to chrome's windowState events
|
||||
chrome.app.window.current().onFullscreened.addListener(onFullscreened);
|
||||
@ -71,13 +73,13 @@ function changeUiModeForNaClLoad() {
|
||||
}
|
||||
|
||||
function startPollingHosts() {
|
||||
for(var hostUID in hosts) {
|
||||
for (var hostUID in hosts) {
|
||||
beginBackgroundPollingOfHost(hosts[hostUID]);
|
||||
}
|
||||
}
|
||||
|
||||
function stopPollingHosts() {
|
||||
for(var hostUID in hosts) {
|
||||
for (var hostUID in hosts) {
|
||||
stopBackgroundPollingOfHost(hosts[hostUID]);
|
||||
}
|
||||
}
|
||||
@ -89,7 +91,7 @@ function restoreUiAfterNaClLoad() {
|
||||
$('#loadingSpinner').css('display', 'none');
|
||||
showHostsAndSettingsMode();
|
||||
|
||||
findNvService(function (finder, opt_error) {
|
||||
findNvService(function(finder, opt_error) {
|
||||
if (finder.byService_['_nvstream._tcp']) {
|
||||
var ips = Object.keys(finder.byService_['_nvstream._tcp']);
|
||||
for (var i in ips) {
|
||||
@ -117,37 +119,38 @@ function restoreUiAfterNaClLoad() {
|
||||
}
|
||||
|
||||
function beginBackgroundPollingOfHost(host) {
|
||||
var el = document.querySelector('#hostgrid-' + host.serverUid)
|
||||
if (host.online) {
|
||||
$("#hostgrid-" + host.serverUid).removeClass('host-cell-inactive');
|
||||
el.classList.remove('host-cell-inactive')
|
||||
// The host was already online. Just start polling in the background now.
|
||||
activePolls[host.serverUid] = window.setInterval(function() {
|
||||
// every 5 seconds, poll at the address we know it was live at
|
||||
host.pollServer(function () {
|
||||
host.pollServer(function() {
|
||||
if (host.online) {
|
||||
$("#hostgrid-" + host.serverUid).removeClass('host-cell-inactive');
|
||||
el.classList.remove('host-cell-inactive')
|
||||
} else {
|
||||
$("#hostgrid-" + host.serverUid).addClass('host-cell-inactive');
|
||||
el.classList.add('host-cell-inactive')
|
||||
}
|
||||
});
|
||||
}, 5000);
|
||||
} else {
|
||||
$("#hostgrid-" + host.serverUid).addClass('host-cell-inactive');
|
||||
el.classList.add('host-cell-inactive')
|
||||
// The host was offline, so poll immediately.
|
||||
host.pollServer(function () {
|
||||
host.pollServer(function() {
|
||||
if (host.online) {
|
||||
$("#hostgrid-" + host.serverUid).removeClass('host-cell-inactive');
|
||||
el.classList.remove('host-cell-inactive')
|
||||
} else {
|
||||
$("#hostgrid-" + host.serverUid).addClass('host-cell-inactive');
|
||||
el.classList.add('host-cell-inactive')
|
||||
}
|
||||
|
||||
// Now start background polling
|
||||
activePolls[host.serverUid] = window.setInterval(function() {
|
||||
// every 5 seconds, poll at the address we know it was live at
|
||||
host.pollServer(function () {
|
||||
host.pollServer(function() {
|
||||
if (host.online) {
|
||||
$("#hostgrid-" + host.serverUid).removeClass('host-cell-inactive');
|
||||
el.classList.remove('host-cell-inactive')
|
||||
} else {
|
||||
$("#hostgrid-" + host.serverUid).addClass('host-cell-inactive');
|
||||
el.classList.add('host-cell-inactive')
|
||||
}
|
||||
});
|
||||
}, 5000);
|
||||
@ -201,24 +204,23 @@ function moduleDidLoad() {
|
||||
|
||||
if (!pairingCert) { // we couldn't load a cert. Make one.
|
||||
console.warn('%c[index.js, moduleDidLoad]', 'color: green;', 'Failed to load local cert. Generating new one');
|
||||
sendMessage('makeCert', []).then(function (cert) {
|
||||
sendMessage('makeCert', []).then(function(cert) {
|
||||
storeData('cert', cert, null);
|
||||
pairingCert = cert;
|
||||
console.info('%c[index.js, moduleDidLoad]', 'color: green;', 'Generated new cert:', cert);
|
||||
}, function (failedCert) {
|
||||
}, function(failedCert) {
|
||||
console.error('%c[index.js, moduleDidLoad]', 'color: green;', 'Failed to generate new cert! Returned error was: \n', failedCert);
|
||||
}).then(function (ret) {
|
||||
sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) {
|
||||
}).then(function(ret) {
|
||||
sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function(ret) {
|
||||
restoreUiAfterNaClLoad();
|
||||
}, function (failedInit) {
|
||||
}, function(failedInit) {
|
||||
console.error('%c[index.js, moduleDidLoad]', 'color: green;', 'Failed httpInit! Returned error was: ', failedInit);
|
||||
});
|
||||
});
|
||||
}
|
||||
else {
|
||||
sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) {
|
||||
} else {
|
||||
sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function(ret) {
|
||||
restoreUiAfterNaClLoad();
|
||||
}, function (failedInit) {
|
||||
}, function(failedInit) {
|
||||
console.error('%c[index.js, moduleDidLoad]', 'color: green;', 'Failed httpInit! Returned error was: ', failedInit);
|
||||
});
|
||||
}
|
||||
@ -226,7 +228,7 @@ function moduleDidLoad() {
|
||||
// load previously connected hosts, which have been killed into an object, and revive them back into a class
|
||||
chrome.storage.sync.get('hosts', function(previousValue) {
|
||||
hosts = previousValue.hosts != null ? previousValue.hosts : {};
|
||||
for(var hostUID in hosts) { // programmatically add each new host.
|
||||
for (var hostUID in hosts) { // programmatically add each new host.
|
||||
var revivedHost = new NvHTTP(hosts[hostUID].address, myUniqueid, hosts[hostUID].userEnteredAddress);
|
||||
revivedHost.serverUid = hosts[hostUID].serverUid;
|
||||
revivedHost.externalIP = hosts[hostUID].externalIP;
|
||||
@ -241,14 +243,14 @@ function moduleDidLoad() {
|
||||
|
||||
// pair to the given NvHTTP host object. Returns whether pairing was successful.
|
||||
function pairTo(nvhttpHost, onSuccess, onFailure) {
|
||||
if(!pairingCert) {
|
||||
if (!pairingCert) {
|
||||
snackbarLog('ERROR: cert has not been generated yet. Is NaCl initialized?');
|
||||
console.warn('%c[index.js]', 'color: green;', 'User wants to pair, and we still have no cert. Problem = very yes.');
|
||||
onFailure();
|
||||
return;
|
||||
}
|
||||
|
||||
nvhttpHost.pollServer(function (ret) {
|
||||
nvhttpHost.pollServer(function(ret) {
|
||||
if (!nvhttpHost.online) {
|
||||
snackbarLog('Failed to connect to ' + nvhttpHost.hostname + '! Are you sure the host is on?');
|
||||
console.error('%c[index.js]', 'color: green;', 'Host declared as offline:', nvhttpHost, nvhttpHost.toString()); //Logging both the object and the toString version for text logs
|
||||
@ -261,18 +263,18 @@ function pairTo(nvhttpHost, onSuccess, onFailure) {
|
||||
return;
|
||||
}
|
||||
|
||||
var randomNumber = String("0000" + (Math.random()*10000|0)).slice(-4);
|
||||
var randomNumber = String("0000" + (Math.random() * 10000 | 0)).slice(-4);
|
||||
var pairingDialog = document.querySelector('#pairingDialog');
|
||||
$('#pairingDialogText').html('Please enter the number ' + randomNumber + ' on the GFE dialog on the computer. This dialog will be dismissed once complete');
|
||||
pairingDialog.showModal();
|
||||
|
||||
$('#cancelPairingDialog').off('click');
|
||||
$('#cancelPairingDialog').on('click', function () {
|
||||
$('#cancelPairingDialog').on('click', function() {
|
||||
pairingDialog.close();
|
||||
});
|
||||
|
||||
console.log('%c[index.js]', 'color: green;', 'Sending pairing request to ' + nvhttpHost.hostname + ' with random number' + randomNumber);
|
||||
nvhttpHost.pair(randomNumber).then(function (paired) {
|
||||
nvhttpHost.pair(randomNumber).then(function(paired) {
|
||||
if (!paired) {
|
||||
if (nvhttpHost.currentGame != 0) {
|
||||
$('#pairingDialogText').html('Error: ' + nvhttpHost.hostname + ' is busy. Stop streaming to pair.');
|
||||
@ -287,7 +289,7 @@ function pairTo(nvhttpHost, onSuccess, onFailure) {
|
||||
snackbarLog('Pairing successful');
|
||||
pairingDialog.close();
|
||||
onSuccess();
|
||||
}, function (failedPairing) {
|
||||
}, function(failedPairing) {
|
||||
snackbarLog('Failed pairing to: ' + nvhttpHost.hostname);
|
||||
console.error('%c[index.js]', 'color: green;', 'Pairing failed, and returned:', failedPairing);
|
||||
console.error('%c[index.js]', 'color: green;', 'Failed API object:', nvhttpHost, nvhttpHost.toString()); //Logging both the object and the toString version for text logs
|
||||
@ -312,7 +314,7 @@ function hostChosen(host) {
|
||||
showApps(host);
|
||||
saveHosts();
|
||||
},
|
||||
function(){
|
||||
function() {
|
||||
startPollingHosts();
|
||||
});
|
||||
} else {
|
||||
@ -335,7 +337,7 @@ function addHost() {
|
||||
|
||||
// try to pair if they continue
|
||||
$('#continueAddHost').off('click');
|
||||
$('#continueAddHost').on('click', function () {
|
||||
$('#continueAddHost').on('click', function() {
|
||||
var inputHost = $('#dialogInputHost').val();
|
||||
var _nvhttpHost = new NvHTTP(inputHost, myUniqueid, inputHost);
|
||||
|
||||
@ -345,8 +347,7 @@ function addHost() {
|
||||
// Just update the addresses
|
||||
hosts[_nvhttpHost.serverUid].address = _nvhttpHost.address;
|
||||
hosts[_nvhttpHost.serverUid].userEnteredAddress = _nvhttpHost.userEnteredAddress;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
beginBackgroundPollingOfHost(_nvhttpHost);
|
||||
addHostToGrid(_nvhttpHost);
|
||||
}
|
||||
@ -362,20 +363,38 @@ function addHost() {
|
||||
// host is an NvHTTP object
|
||||
function addHostToGrid(host, ismDNSDiscovered) {
|
||||
|
||||
var outerDiv = $("<div>", {class: 'host-container mdl-card mdl-shadow--4dp', id: 'host-container-' + host.serverUid, role: 'link', tabindex: 0, 'aria-label': host.hostname });
|
||||
var cell = $("<div>", {class: 'mdl-card__title mdl-card--expand', id: 'hostgrid-' + host.serverUid });
|
||||
$(cell).prepend($("<h2>", {class: "mdl-card__title-text", html: host.hostname}));
|
||||
var removalButton = $("<div>", {class: "remove-host", id: "removeHostButton-" + host.serverUid, role: 'button', tabindex: 0, 'aria-label': 'Remove host ' + host.hostname});
|
||||
var outerDiv = $("<div>", {
|
||||
class: 'host-container mdl-card mdl-shadow--4dp',
|
||||
id: 'host-container-' + host.serverUid,
|
||||
role: 'link',
|
||||
tabindex: 0,
|
||||
'aria-label': host.hostname
|
||||
});
|
||||
var cell = $("<div>", {
|
||||
class: 'mdl-card__title mdl-card--expand',
|
||||
id: 'hostgrid-' + host.serverUid
|
||||
});
|
||||
$(cell).prepend($("<h2>", {
|
||||
class: "mdl-card__title-text",
|
||||
html: host.hostname
|
||||
}));
|
||||
var removalButton = $("<div>", {
|
||||
class: "remove-host",
|
||||
id: "removeHostButton-" + host.serverUid,
|
||||
role: 'button',
|
||||
tabindex: 0,
|
||||
'aria-label': 'Remove host ' + host.hostname
|
||||
});
|
||||
removalButton.off('click');
|
||||
removalButton.click(function () {
|
||||
removalButton.click(function() {
|
||||
removeClicked(host);
|
||||
});
|
||||
cell.off('click');
|
||||
cell.click(function () {
|
||||
cell.click(function() {
|
||||
hostChosen(host);
|
||||
});
|
||||
outerDiv.keypress(function(e){
|
||||
if(e.keyCode == 13) {
|
||||
outerDiv.keypress(function(e) {
|
||||
if (e.keyCode == 13) {
|
||||
hostChosen(host);
|
||||
}
|
||||
});
|
||||
@ -395,7 +414,7 @@ function removeClicked(host) {
|
||||
deleteHostDialog.showModal();
|
||||
|
||||
$('#cancelDeleteHost').off('click');
|
||||
$('#cancelDeleteHost').on('click', function () {
|
||||
$('#cancelDeleteHost').on('click', function() {
|
||||
deleteHostDialog.close();
|
||||
});
|
||||
|
||||
@ -403,7 +422,7 @@ function removeClicked(host) {
|
||||
// note: this does not make the host forget the pairing to us.
|
||||
// this means we can re-add the host, and will still be paired.
|
||||
$('#continueDeleteHost').off('click');
|
||||
$('#continueDeleteHost').on('click', function () {
|
||||
$('#continueDeleteHost').on('click', function() {
|
||||
var deleteHostDialog = document.querySelector('#deleteHostDialog');
|
||||
$('#host-container-' + host.serverUid).remove();
|
||||
delete hosts[host.serverUid]; // remove the host from the array;
|
||||
@ -418,16 +437,14 @@ function removeClicked(host) {
|
||||
// the function was made like this so that we can remove duplicated code, but
|
||||
// not do N*N stylizations of the box art, or make the code not flow very well
|
||||
function stylizeBoxArt(freshApi, appIdToStylize) {
|
||||
if (freshApi.currentGame === appIdToStylize){ // stylize the currently running game
|
||||
// destylize it, if it has the not-current-game style
|
||||
if ($('#game-'+ appIdToStylize).hasClass("not-current-game")) $('#game-'+ appIdToStylize).removeClass("not-current-game");
|
||||
// add the current-game style
|
||||
$('#game-'+ appIdToStylize).addClass("current-game");
|
||||
// If the running game is the good one then style it
|
||||
var el = document.querySelector("#game-" + appIdToStylize);
|
||||
if(freshApi.currentGame === appIdToStylize) {
|
||||
el.classList.add('current-game')
|
||||
el.title += ' (Running)'
|
||||
} else {
|
||||
// destylize it, if it has the current-game style
|
||||
if ($('#game-'+ appIdToStylize).hasClass("current-game")) $('#game-'+ appIdToStylize).removeClass("current-game");
|
||||
// add the not-current-game style
|
||||
$('#game-'+ appIdToStylize).addClass('not-current-game');
|
||||
el.classList.remove('current-game')
|
||||
el.title.replace(' (Running)', '') // TODO: Replace with localized string so make it e.title = game_title
|
||||
}
|
||||
}
|
||||
|
||||
@ -438,22 +455,31 @@ function sortTitles(list, sortOrder) {
|
||||
|
||||
// A - Z
|
||||
if (sortOrder === 'ASC') {
|
||||
if (titleA < titleB) { return -1; }
|
||||
if (titleA > titleB) { return 1; }
|
||||
if (titleA < titleB) {
|
||||
return -1;
|
||||
}
|
||||
if (titleA > titleB) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Z - A
|
||||
if (sortOrder === 'DESC') {
|
||||
if (titleA < titleB) { return 1; }
|
||||
if (titleA > titleB) { return -1; }
|
||||
return 0; }
|
||||
if (titleA < titleB) {
|
||||
return 1;
|
||||
}
|
||||
if (titleA > titleB) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// show the app list
|
||||
function showApps(host) {
|
||||
if(!host || !host.paired) { // safety checking. shouldn't happen.
|
||||
if (!host || !host.paired) { // safety checking. shouldn't happen.
|
||||
console.log('%c[index.js, showApps]', 'color: green;', 'Moved into showApps, but `host` did not initialize properly! Failing.');
|
||||
return;
|
||||
}
|
||||
@ -465,65 +491,81 @@ function showApps(host) {
|
||||
$('#naclSpinnerMessage').text('Loading apps...');
|
||||
$('#naclSpinner').css('display', 'inline-block');
|
||||
|
||||
host.getAppList().then(function (appList) {
|
||||
// if game grid is populated, empty it
|
||||
$("div.game-container").remove();
|
||||
|
||||
host.getAppList().then(function(appList) {
|
||||
$('#naclSpinner').hide();
|
||||
$("#game-grid").show();
|
||||
|
||||
if(appList.length == 0) {
|
||||
console.error('%c[index.js, showApps]', 'User\'s applist is empty')
|
||||
var img = new Image()
|
||||
img.src = 'static/res/applist_empty.svg'
|
||||
$('#game-grid').html(img)
|
||||
snackbarLog('Your game list is empty')
|
||||
return; // We stop the function right here
|
||||
}
|
||||
// if game grid is populated, empty it
|
||||
const sortedAppList = sortTitles(appList, 'ASC');
|
||||
|
||||
sortedAppList.forEach(function (app) {
|
||||
host.getBoxArt(app.id).then(function (resolvedPromise) {
|
||||
// put the box art into the image holder
|
||||
sortedAppList.forEach(function(app) {
|
||||
if ($('#game-' + app.id).length === 0) {
|
||||
// double clicking the button will cause multiple box arts to appear.
|
||||
// to mitigate this we ensure we don't add a duplicate.
|
||||
// This isn't perfect: there's lots of RTTs before the logic prevents anything
|
||||
var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: resolvedPromise, role: 'link', tabindex: 0, title: app.title, 'aria-label': app.title });
|
||||
$(outerDiv).append($("<img \>", {src: resolvedPromise, id: 'game-'+app.id, name: app.title }));
|
||||
$(outerDiv).append($("<div>", {class: "game-title", html: $("<span>", {html: app.title} )}));
|
||||
$("#game-grid").append(outerDiv);
|
||||
var gameCard = document.createElement('div')
|
||||
gameCard.id = 'game-' + app.id
|
||||
gameCard.className = 'game-container mdl-card mdl-shadow--4dp'
|
||||
gameCard.setAttribute('role', 'link')
|
||||
gameCard.tabIndex = 0
|
||||
gameCard.title = app.title
|
||||
|
||||
$('#game-'+app.id).on('click', function () {
|
||||
startGame(host, app.id);
|
||||
gameCard.innerHTML = `<div class="game-title">${app.title}</div>`
|
||||
|
||||
gameCard.addEventListener('click', e => {
|
||||
startGame(host, app.id)
|
||||
})
|
||||
gameCard.addEventListener('mouseover', e => {
|
||||
gameCard.focus();
|
||||
});
|
||||
$('#game-'+app.id).keypress(function(e){
|
||||
if(e.keyCode == 13) {
|
||||
gameCard.addEventListener('keydown', e => {
|
||||
if(e.key == "Enter") {
|
||||
startGame(host, app.id);
|
||||
}
|
||||
});
|
||||
|
||||
if(e.key == "ArrowLeft") {
|
||||
let prev = gameCard.previousSibling
|
||||
if(prev !== null)
|
||||
gameCard.previousSibling.focus()
|
||||
// TODO: Add a sound when limit reached
|
||||
}
|
||||
if(e.key == "ArrowRight") {
|
||||
let next = gameCard.nextSibling
|
||||
if(next !== null)
|
||||
gameCard.nextSibling.focus()
|
||||
// TODO: Add a sound when limit reached
|
||||
}
|
||||
})
|
||||
document.querySelector('#game-grid').appendChild(gameCard);
|
||||
// apply CSS stylization to indicate whether the app is active
|
||||
stylizeBoxArt(host, app.id);
|
||||
}
|
||||
|
||||
}, function (failedPromise) {
|
||||
var img = new Image();
|
||||
host.getBoxArt(app.id).then(function(resolvedPromise) {
|
||||
img.src = resolvedPromise;
|
||||
}, function(failedPromise) {
|
||||
console.log('%c[index.js, showApps]', 'color: green;', 'Error! Failed to retrieve box art for app ID: ' + app.id + '. Returned value was: ' + failedPromise, '\n Host object:', host, host.toString());
|
||||
|
||||
if ($('#game-' + app.id).length === 0) {
|
||||
// double clicking the button will cause multiple box arts to appear.
|
||||
// to mitigate this we ensure we don't add a duplicate.
|
||||
// This isn't perfect: there's lots of RTTs before the logic prevents anything
|
||||
var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: "static/res/no_app_image.png" });
|
||||
$(outerDiv).append($("<img \>", {src: "static/res/no_app_image.png", id: 'game-'+app.id, name: app.title }));
|
||||
$(outerDiv).append($("<div>", {class: "game-title", html: $("<span>", {html: app.title} )}));
|
||||
$("#game-grid").append(outerDiv);
|
||||
|
||||
$('#game-'+app.id).on('click', function () {
|
||||
startGame(host, app.id);
|
||||
img.src = 'static/res/placeholder_error.svg'
|
||||
});
|
||||
|
||||
// apply CSS stylization to indicate whether the app is active
|
||||
stylizeBoxArt(host, app.id);
|
||||
}
|
||||
img.onload = e => img.classList.add('fade-in');
|
||||
$(gameCard).append(img);
|
||||
});
|
||||
});
|
||||
}, function (failedAppList) {
|
||||
}, function(failedAppList) {
|
||||
$('#naclSpinner').hide();
|
||||
|
||||
console.log('%c[index.js, showApps]', 'color: green;', 'Failed to get applist from host: ' + host.hostname, '\n Host object:', host, host.toString());
|
||||
var img = new Image();
|
||||
img.src = 'static/res/applist_error.svg'
|
||||
$("#game-grid").html(img)
|
||||
snackbarLog('Unable to get your games')
|
||||
console.error('%c[index.js, showApps]', 'Failed to get applist from host: ' + host.hostname, '\n Host object:', host, host.toString());
|
||||
});
|
||||
|
||||
showAppsMode();
|
||||
@ -568,31 +610,31 @@ function showAppsMode() {
|
||||
// start the given appID. if another app is running, offer to quit it.
|
||||
// if the given app is already running, just resume it.
|
||||
function startGame(host, appID) {
|
||||
if(!host || !host.paired) {
|
||||
if (!host || !host.paired) {
|
||||
console.error('%c[index.js, startGame]', 'color: green;', 'Attempted to start a game, but `host` did not initialize properly. Host object: ', host);
|
||||
return;
|
||||
}
|
||||
|
||||
// refresh the server info, because the user might have quit the game.
|
||||
host.refreshServerInfo().then(function (ret) {
|
||||
host.getAppById(appID).then(function (appToStart) {
|
||||
host.refreshServerInfo().then(function(ret) {
|
||||
host.getAppById(appID).then(function(appToStart) {
|
||||
|
||||
if(host.currentGame != 0 && host.currentGame != appID) {
|
||||
host.getAppById(host.currentGame).then(function (currentApp) {
|
||||
if (host.currentGame != 0 && host.currentGame != appID) {
|
||||
host.getAppById(host.currentGame).then(function(currentApp) {
|
||||
var quitAppDialog = document.querySelector('#quitAppDialog');
|
||||
document.getElementById('quitAppDialogText').innerHTML =
|
||||
currentApp.title + ' is already running. Would you like to quit ' +
|
||||
currentApp.title + '?';
|
||||
quitAppDialog.showModal();
|
||||
$('#cancelQuitApp').off('click');
|
||||
$('#cancelQuitApp').on('click', function () {
|
||||
$('#cancelQuitApp').on('click', function() {
|
||||
quitAppDialog.close();
|
||||
console.log('[index.js, startGame]','color: green;', 'Closing app dialog, and returning');
|
||||
console.log('[index.js, startGame]', 'color: green;', 'Closing app dialog, and returning');
|
||||
});
|
||||
$('#continueQuitApp').off('click');
|
||||
$('#continueQuitApp').on('click', function () {
|
||||
console.log('[index.js, startGame]','color: green;', 'Stopping game, and closing app dialog, and returning');
|
||||
stopGame(host, function () {
|
||||
$('#continueQuitApp').on('click', function() {
|
||||
console.log('[index.js, startGame]', 'color: green;', 'Stopping game, and closing app dialog, and returning');
|
||||
stopGame(host, function() {
|
||||
// please oh please don't infinite loop with recursion
|
||||
startGame(host, appID);
|
||||
});
|
||||
@ -600,8 +642,8 @@ function startGame(host, appID) {
|
||||
});
|
||||
|
||||
return;
|
||||
}, function (failedCurrentApp) {
|
||||
console.error('[index.js, startGame]','color: green;', 'Failed to get the current running app from host! Returned error was:' + failedCurrentApp, '\n Host object:', host, host.toString());
|
||||
}, function(failedCurrentApp) {
|
||||
console.error('[index.js, startGame]', 'color: green;', 'Failed to get the current running app from host! Returned error was:' + failedCurrentApp, '\n Host object:', host, host.toString());
|
||||
return;
|
||||
});
|
||||
return;
|
||||
@ -613,7 +655,7 @@ function startGame(host, appID) {
|
||||
var streamHeight = $('#selectResolution').data('value').split(':')[1];
|
||||
// we told the user it was in Mbps. We're dirty liars and use Kbps behind their back.
|
||||
var bitrate = parseInt($("#bitrateSlider").val()) * 1000;
|
||||
console.log('%c[index.js, startGame]','color:green;', 'startRequest:' + host.address + ":" + streamWidth + ":" + streamHeight + ":" + frameRate + ":" + bitrate + ":" + optimize);
|
||||
console.log('%c[index.js, startGame]', 'color:green;', 'startRequest:' + host.address + ":" + streamWidth + ":" + streamHeight + ":" + frameRate + ":" + bitrate + ":" + optimize);
|
||||
|
||||
var rikey = generateRemoteInputKey();
|
||||
var rikeyid = generateRemoteInputKeyId();
|
||||
@ -622,13 +664,14 @@ function startGame(host, appID) {
|
||||
$('#loadingMessage').text('Starting ' + appToStart.title + '...');
|
||||
playGameMode();
|
||||
|
||||
if(host.currentGame == appID) { // if user wants to launch the already-running app, then we resume it.
|
||||
if (host.currentGame == appID) { // if user wants to launch the already-running app, then we resume it.
|
||||
return host.resumeApp(
|
||||
rikey, rikeyid, 0x030002 // Surround channel mask << 16 | Surround channel count
|
||||
).then(function (ret) {
|
||||
).then(function(ret) {
|
||||
sendMessage('startRequest', [host.address, streamWidth, streamHeight, frameRate,
|
||||
bitrate.toString(), rikey, rikeyid.toString(), host.appVersion]);
|
||||
}, function (failedResumeApp) {
|
||||
bitrate.toString(), rikey, rikeyid.toString(), host.appVersion
|
||||
]);
|
||||
}, function(failedResumeApp) {
|
||||
console.eror('%c[index.js, startGame]', 'color:green;', 'Failed to resume the app! Returned error was' + failedResumeApp);
|
||||
return;
|
||||
});
|
||||
@ -643,11 +686,12 @@ function startGame(host, appID) {
|
||||
remote_audio_enabled, // Play audio locally too?
|
||||
0x030002, // Surround channel mask << 16 | Surround channel count
|
||||
gamepadMask
|
||||
).then(function (ret) {
|
||||
).then(function(ret) {
|
||||
sendMessage('startRequest', [host.address, streamWidth, streamHeight, frameRate,
|
||||
bitrate.toString(), rikey, rikeyid.toString(), host.appVersion]);
|
||||
}, function (failedLaunchApp) {
|
||||
console.error('%c[index.js, launchApp]','color: green;','Failed to launch app width id: ' + appID + '\nReturned error was: ' + failedLaunchApp);
|
||||
bitrate.toString(), rikey, rikeyid.toString(), host.appVersion
|
||||
]);
|
||||
}, function(failedLaunchApp) {
|
||||
console.error('%c[index.js, launchApp]', 'color: green;', 'Failed to launch app width id: ' + appID + '\nReturned error was: ' + failedLaunchApp);
|
||||
return;
|
||||
});
|
||||
|
||||
@ -691,19 +735,19 @@ function stopGameWithConfirmation() {
|
||||
if (api.currentGame === 0) {
|
||||
snackbarLog('Nothing was running');
|
||||
} else {
|
||||
api.getAppById(api.currentGame).then(function (currentGame) {
|
||||
api.getAppById(api.currentGame).then(function(currentGame) {
|
||||
var quitAppDialog = document.querySelector('#quitAppDialog');
|
||||
document.getElementById('quitAppDialogText').innerHTML =
|
||||
' Are you sure you would like to quit ' +
|
||||
currentGame.title + '? Unsaved progress will be lost.';
|
||||
quitAppDialog.showModal();
|
||||
$('#cancelQuitApp').off('click');
|
||||
$('#cancelQuitApp').on('click', function () {
|
||||
$('#cancelQuitApp').on('click', function() {
|
||||
console.log('%c[index.js, stopGameWithConfirmation]', 'color:green;', 'Closing app dialog, and returning');
|
||||
quitAppDialog.close();
|
||||
});
|
||||
$('#continueQuitApp').off('click');
|
||||
$('#continueQuitApp').on('click', function () {
|
||||
$('#continueQuitApp').on('click', function() {
|
||||
console.log('%c[index.js, stopGameWithConfirmation]', 'color:green;', 'Stopping game, and closing app dialog, and returning');
|
||||
stopGame(api);
|
||||
quitAppDialog.close();
|
||||
@ -720,29 +764,29 @@ function stopGame(host, callbackFunction) {
|
||||
return;
|
||||
}
|
||||
|
||||
host.refreshServerInfo().then(function (ret) {
|
||||
host.getAppById(host.currentGame).then(function (runningApp) {
|
||||
host.refreshServerInfo().then(function(ret) {
|
||||
host.getAppById(host.currentGame).then(function(runningApp) {
|
||||
if (!runningApp) {
|
||||
snackbarLog('Nothing was running');
|
||||
return;
|
||||
}
|
||||
var appName = runningApp.title;
|
||||
snackbarLog('Stopping ' + appName);
|
||||
host.quitApp().then(function (ret2) {
|
||||
host.refreshServerInfo().then(function (ret3) { // refresh to show no app is currently running.
|
||||
host.quitApp().then(function(ret2) {
|
||||
host.refreshServerInfo().then(function(ret3) { // refresh to show no app is currently running.
|
||||
showAppsMode();
|
||||
stylizeBoxArt(host, runningApp.id);
|
||||
if (typeof(callbackFunction) === "function") callbackFunction();
|
||||
}, function (failedRefreshInfo2) {
|
||||
}, function(failedRefreshInfo2) {
|
||||
console.error('%c[index.js, stopGame]', 'color:green;', 'Failed to refresh server info! Returned error was:' + failedRefreshInfo + ' and failed server was:', host, host.toString());
|
||||
});
|
||||
}, function (failedQuitApp) {
|
||||
}, function(failedQuitApp) {
|
||||
console.error('%c[index.js, stopGame]', 'color:green;', 'Failed to quit app! Returned error was:' + failedQuitApp);
|
||||
});
|
||||
}, function (failedGetApp) {
|
||||
}, function(failedGetApp) {
|
||||
console.error('%c[index.js, stopGame]', 'color:green;', 'Failed to get app ID! Returned error was:' + failedRefreshInfo);
|
||||
});
|
||||
}, function (failedRefreshInfo) {
|
||||
}, function(failedRefreshInfo) {
|
||||
console.error('%c[index.js, stopGame]', 'color:green;', 'Failed to refresh server info! Returned error was:' + failedRefreshInfo);
|
||||
});
|
||||
}
|
||||
@ -750,7 +794,7 @@ function stopGame(host, callbackFunction) {
|
||||
function storeData(key, data, callbackFunction) {
|
||||
var obj = {};
|
||||
obj[key] = data;
|
||||
if(chrome.storage)
|
||||
if (chrome.storage)
|
||||
chrome.storage.sync.set(obj, callbackFunction);
|
||||
}
|
||||
|
||||
@ -805,7 +849,7 @@ function updateDefaultBitrate() {
|
||||
var res = $('#selectResolution').data('value');
|
||||
var frameRate = $('#selectFramerate').data('value').toString();
|
||||
|
||||
if (res ==="1920:1080") {
|
||||
if (res === "1920:1080") {
|
||||
if (frameRate === "30") { // 1080p, 30fps
|
||||
$('#bitrateSlider')[0].MaterialSlider.change('10');
|
||||
} else { // 1080p, 60fps
|
||||
@ -831,18 +875,18 @@ function updateDefaultBitrate() {
|
||||
saveBitrate();
|
||||
}
|
||||
|
||||
function onWindowLoad(){
|
||||
function onWindowLoad() {
|
||||
console.log('%c[index.js]', 'color: green;', 'Moonlight\'s main window loaded');
|
||||
// don't show the game selection div
|
||||
$('#gameSelection').css('display', 'none');
|
||||
|
||||
loadWindowState();
|
||||
|
||||
if(chrome.storage) {
|
||||
if (chrome.storage) {
|
||||
// load stored resolution prefs
|
||||
chrome.storage.sync.get('resolution', function(previousValue) {
|
||||
if(previousValue.resolution != null) {
|
||||
$('.resolutionMenu li').each(function () {
|
||||
if (previousValue.resolution != null) {
|
||||
$('.resolutionMenu li').each(function() {
|
||||
if ($(this).data('value') === previousValue.resolution) {
|
||||
$('#selectResolution').text($(this).text()).data('value', previousValue.resolution);
|
||||
}
|
||||
@ -852,7 +896,7 @@ function onWindowLoad(){
|
||||
|
||||
// Load stored remote audio prefs
|
||||
chrome.storage.sync.get('remoteAudio', function(previousValue) {
|
||||
if(previousValue.remoteAudio == null) {
|
||||
if (previousValue.remoteAudio == null) {
|
||||
document.querySelector('#externalAudioBtn').MaterialIconToggle.uncheck();
|
||||
} else if (previousValue.remoteAudio == false) {
|
||||
document.querySelector('#externalAudioBtn').MaterialIconToggle.uncheck();
|
||||
@ -863,8 +907,8 @@ function onWindowLoad(){
|
||||
|
||||
// load stored framerate prefs
|
||||
chrome.storage.sync.get('frameRate', function(previousValue) {
|
||||
if(previousValue.frameRate != null) {
|
||||
$('.framerateMenu li').each(function () {
|
||||
if (previousValue.frameRate != null) {
|
||||
$('.framerateMenu li').each(function() {
|
||||
if ($(this).data('value') === previousValue.frameRate) {
|
||||
$('#selectFramerate').text($(this).text()).data('value', previousValue.frameRate);
|
||||
}
|
||||
|
||||
@ -11,7 +11,10 @@ var callbacks_ids = 1;
|
||||
var sendMessage = function(method, params) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var id = callbacks_ids++;
|
||||
callbacks[id] = {'resolve': resolve, 'reject': reject};
|
||||
callbacks[id] = {
|
||||
'resolve': resolve,
|
||||
'reject': reject
|
||||
};
|
||||
|
||||
common.naclModule.postMessage({
|
||||
'callbackId': id,
|
||||
@ -33,16 +36,16 @@ function handleMessage(msg) {
|
||||
delete callbacks[msg.data.callbackId]
|
||||
} else { // else, it's just info, or an event
|
||||
console.log('%c[messages.js, handleMessage]', 'color:gray;', 'Message data: ', msg.data)
|
||||
if(msg.data === 'streamTerminated') { // if it's a recognized event, notify the appropriate function
|
||||
if (msg.data === 'streamTerminated') { // if it's a recognized event, notify the appropriate function
|
||||
$('#loadingSpinner').css('display', 'none'); // This is a fallback for RTSP handshake failing, which immediately terminates the stream.
|
||||
$('body').css('backgroundColor', '#282C38');
|
||||
|
||||
// Release our keep awake request
|
||||
chrome.power.releaseKeepAwake();
|
||||
|
||||
api.refreshServerInfo().then(function (ret) { // refresh the serverinfo to acknowledge the currently running app
|
||||
api.getAppList().then(function (appList) {
|
||||
appList.forEach(function (app) {
|
||||
api.refreshServerInfo().then(function(ret) { // refresh the serverinfo to acknowledge the currently running app
|
||||
api.getAppList().then(function(appList) {
|
||||
appList.forEach(function(app) {
|
||||
stylizeBoxArt(api, app.id); // and reapply stylization to indicate what's currently running
|
||||
});
|
||||
});
|
||||
@ -54,20 +57,20 @@ function handleMessage(msg) {
|
||||
(windowState == 'normal') && chrome.app.window.current().restore();
|
||||
});
|
||||
|
||||
} else if(msg.data === 'Connection Established') {
|
||||
} else if (msg.data === 'Connection Established') {
|
||||
$('#loadingSpinner').css('display', 'none');
|
||||
$('body').css('backgroundColor', 'black');
|
||||
|
||||
// Keep the display awake while streaming
|
||||
chrome.power.requestKeepAwake("display");
|
||||
} else if(msg.data.indexOf('ProgressMsg: ') === 0) {
|
||||
} else if (msg.data.indexOf('ProgressMsg: ') === 0) {
|
||||
$('#loadingMessage').text(msg.data.replace('ProgressMsg: ', ''));
|
||||
} else if(msg.data.indexOf('TransientMsg: ') === 0) {
|
||||
} else if (msg.data.indexOf('TransientMsg: ') === 0) {
|
||||
snackbarLog(msg.data.replace('TransientMsg: ', ''));
|
||||
} else if(msg.data.indexOf('DialogMsg: ') === 0) {
|
||||
} else if (msg.data.indexOf('DialogMsg: ') === 0) {
|
||||
// FIXME: Really use a dialog
|
||||
snackbarLogLong(msg.data.replace('DialogMsg: ', ''));
|
||||
} else if(msg.data === 'displayVideo') {
|
||||
} else if (msg.data === 'displayVideo') {
|
||||
$("#listener").addClass("fullscreen");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
function guuid() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
|
||||
var r = Math.random() * 16 | 0,
|
||||
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
function uniqueid() {
|
||||
return 'xxxxxxxxxxxxxxxx'.replace(/[x]/g, function(c) {
|
||||
var r = Math.random()*16|0;
|
||||
var r = Math.random() * 16 | 0;
|
||||
return r.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
function generateRemoteInputKey() {
|
||||
return 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'.replace(/[x]/g, function(c) {
|
||||
var r = Math.random()*16|0;
|
||||
var r = Math.random() * 16 | 0;
|
||||
return r.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
function generateRemoteInputKeyId() {
|
||||
return ((Math.random()-0.5) * 0x7FFFFFFF)|0;
|
||||
return ((Math.random() - 0.5) * 0x7FFFFFFF) | 0;
|
||||
}
|
||||
|
||||
function getConnectedGamepadMask() {
|
||||
@ -51,13 +52,13 @@ function getConnectedGamepadMask() {
|
||||
}
|
||||
}
|
||||
|
||||
console.log('%c[utils.js, getConnectedGamepadMask]', 'color:gray;', 'Detected '+count+' gamepads');
|
||||
console.log('%c[utils.js, getConnectedGamepadMask]', 'color:gray;', 'Detected ' + count + ' gamepads');
|
||||
return mask;
|
||||
}
|
||||
|
||||
String.prototype.toHex = function() {
|
||||
var hex = '';
|
||||
for(var i = 0; i < this.length; i++) {
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
hex += '' + this.charCodeAt(i).toString(16);
|
||||
}
|
||||
return hex;
|
||||
@ -88,20 +89,20 @@ function NvHTTP(address, clientUid, userEnteredAddress = '') {
|
||||
_self = this;
|
||||
};
|
||||
|
||||
function _arrayBufferToBase64( buffer ) {
|
||||
function _arrayBufferToBase64(buffer) {
|
||||
var binary = '';
|
||||
var bytes = new Uint8Array( buffer );
|
||||
var bytes = new Uint8Array(buffer);
|
||||
var len = bytes.byteLength;
|
||||
for (var i = 0; i < len; i++) {
|
||||
binary += String.fromCharCode( bytes[ i ] );
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return window.btoa( binary );
|
||||
return window.btoa(binary);
|
||||
}
|
||||
|
||||
function _base64ToArrayBuffer(base64) {
|
||||
var binary_string = window.atob(base64);
|
||||
var len = binary_string.length;
|
||||
var bytes = new Uint8Array( len );
|
||||
var bytes = new Uint8Array(len);
|
||||
for (var i = 0; i < len; i++) {
|
||||
bytes[i] = binary_string.charCodeAt(i);
|
||||
}
|
||||
@ -109,12 +110,12 @@ function _base64ToArrayBuffer(base64) {
|
||||
}
|
||||
|
||||
NvHTTP.prototype = {
|
||||
refreshServerInfo: function () {
|
||||
refreshServerInfo: function() {
|
||||
// try HTTPS first
|
||||
return sendMessage('openUrl', [ this._baseUrlHttps + '/serverinfo?' + this._buildUidStr(), false]).then(function(ret) {
|
||||
return sendMessage('openUrl', [this._baseUrlHttps + '/serverinfo?' + this._buildUidStr(), false]).then(function(ret) {
|
||||
if (!this._parseServerInfo(ret)) { // if that fails
|
||||
// try HTTP as a failover. Useful to clients who aren't paired yet
|
||||
return sendMessage('openUrl', [ this._baseUrlHttp + '/serverinfo?' + this._buildUidStr(), false]).then(function(retHttp) {
|
||||
return sendMessage('openUrl', [this._baseUrlHttp + '/serverinfo?' + this._buildUidStr(), false]).then(function(retHttp) {
|
||||
this._parseServerInfo(retHttp);
|
||||
}.bind(this));
|
||||
}
|
||||
@ -124,11 +125,11 @@ NvHTTP.prototype = {
|
||||
// refreshes the server info using a given address. This is useful for testing whether we can successfully ping a host at a given address
|
||||
refreshServerInfoAtAddress: function(givenAddress) {
|
||||
// try HTTPS first
|
||||
return sendMessage('openUrl', [ 'https://' + givenAddress + ':47984' + '/serverinfo?' + this._buildUidStr(), false]).then(function(ret) {
|
||||
return sendMessage('openUrl', ['https://' + givenAddress + ':47984' + '/serverinfo?' + this._buildUidStr(), false]).then(function(ret) {
|
||||
if (!this._parseServerInfo(ret)) { // if that fails
|
||||
console.log('%c[utils.js, utils.js, refreshServerInfoAtAddress]', 'color: gray;', 'Failed to parse serverinfo from HTTPS, falling back to HTTP');
|
||||
// try HTTP as a failover. Useful to clients who aren't paired yet
|
||||
return sendMessage('openUrl', [ 'http://' + givenAddress + ':47989' + '/serverinfo?' + this._buildUidStr(), false]).then(function(retHttp) {
|
||||
return sendMessage('openUrl', ['http://' + givenAddress + ':47989' + '/serverinfo?' + this._buildUidStr(), false]).then(function(retHttp) {
|
||||
return this._parseServerInfo(retHttp);
|
||||
}.bind(this));
|
||||
}
|
||||
@ -216,7 +217,7 @@ NvHTTP.prototype = {
|
||||
string += 'gpu type: ' + this.gputype + '\r\n';
|
||||
string += 'number of apps: ' + this.numofapps + '\r\n';
|
||||
string += 'supported display modes: ' + '\r\n';
|
||||
for(var displayMode in this.supportedDisplayModes) {
|
||||
for (var displayMode in this.supportedDisplayModes) {
|
||||
string += '\t' + displayMode + ': ' + this.supportedDisplayModes[displayMode] + '\r\n';
|
||||
}
|
||||
return string;
|
||||
@ -226,11 +227,11 @@ NvHTTP.prototype = {
|
||||
$xml = this._parseXML(xmlStr);
|
||||
$root = $xml.find('root');
|
||||
|
||||
if($root.attr("status_code") != 200) {
|
||||
if ($root.attr("status_code") != 200) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if(this.serverUid != $root.find('uniqueid').text().trim() && this.serverUid != "") {
|
||||
if (this.serverUid != $root.find('uniqueid').text().trim() && this.serverUid != "") {
|
||||
// if we received a UID that isn't the one we expected, fail.
|
||||
return false;
|
||||
}
|
||||
@ -253,10 +254,10 @@ NvHTTP.prototype = {
|
||||
var yres = parseInt($(value).find('Height').text());
|
||||
var xres = parseInt($(value).find('Width').text());
|
||||
var fps = parseInt($(value).find('RefreshRate').text());
|
||||
if(!this.supportedDisplayModes[yres + ':' + xres]) {
|
||||
if (!this.supportedDisplayModes[yres + ':' + xres]) {
|
||||
this.supportedDisplayModes[yres + ':' + xres] = [];
|
||||
}
|
||||
if(!this.supportedDisplayModes[yres + ':' + xres].includes(fps)) {
|
||||
if (!this.supportedDisplayModes[yres + ':' + xres].includes(fps)) {
|
||||
this.supportedDisplayModes[yres + ':' + xres].push(fps);
|
||||
}
|
||||
}.bind(this));
|
||||
@ -275,11 +276,11 @@ NvHTTP.prototype = {
|
||||
return true;
|
||||
},
|
||||
|
||||
getAppById: function (appId) {
|
||||
return this.getAppList().then(function (list) {
|
||||
getAppById: function(appId) {
|
||||
return this.getAppList().then(function(list) {
|
||||
var retApp = null;
|
||||
|
||||
list.some(function (app) {
|
||||
list.some(function(app) {
|
||||
if (app.id == appId) {
|
||||
retApp = app;
|
||||
return true;
|
||||
@ -292,11 +293,11 @@ NvHTTP.prototype = {
|
||||
});
|
||||
},
|
||||
|
||||
getAppByName: function (appName) {
|
||||
return this.getAppList().then(function (list) {
|
||||
getAppByName: function(appName) {
|
||||
return this.getAppList().then(function(list) {
|
||||
var retApp = null;
|
||||
|
||||
list.some(function (app) {
|
||||
list.some(function(app) {
|
||||
if (app.title == appName) {
|
||||
retApp = app;
|
||||
return true;
|
||||
@ -309,8 +310,8 @@ NvHTTP.prototype = {
|
||||
});
|
||||
},
|
||||
|
||||
getAppListWithCacheFlush: function () {
|
||||
return sendMessage('openUrl', [this._baseUrlHttps + '/applist?' + this._buildUidStr(), false]).then(function (ret) {
|
||||
getAppListWithCacheFlush: function() {
|
||||
return sendMessage('openUrl', [this._baseUrlHttps + '/applist?' + this._buildUidStr(), false]).then(function(ret) {
|
||||
$xml = this._parseXML(ret);
|
||||
$root = $xml.find("root");
|
||||
|
||||
@ -337,9 +338,9 @@ NvHTTP.prototype = {
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
getAppList: function () {
|
||||
getAppList: function() {
|
||||
if (this._memCachedApplist) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
console.log('%c[utils.js, utils.js]', 'color: gray;', 'Returning memory-cached apps list');
|
||||
resolve(this._memCachedApplist);
|
||||
return;
|
||||
@ -351,22 +352,22 @@ NvHTTP.prototype = {
|
||||
|
||||
// returns the box art of the given appID.
|
||||
// three layers of response time are possible: memory cached (in javascript), storage cached (in chrome.storage.local), and streamed (host sends binary over the network)
|
||||
getBoxArt: function (appId) {
|
||||
getBoxArt: function(appId) {
|
||||
if (chrome.storage) {
|
||||
// This may be bad practice to push/pull this much data through local storage?
|
||||
return new Promise(function (resolve, reject) {
|
||||
chrome.storage.local.get('boxart-'+appId, function(storageData) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
chrome.storage.local.get('boxart-' + appId, function(storageData) {
|
||||
// if we already have it, load it.
|
||||
if (storageData !== undefined && Object.keys(storageData).length !== 0 && storageData['boxart-'+appId].constructor !== Object) {
|
||||
if (storageData !== undefined && Object.keys(storageData).length !== 0 && storageData['boxart-' + appId].constructor !== Object) {
|
||||
console.log('%c[utils.js, getBoxArt]', 'color: gray;', 'Returning storage-cached box art for app: ', appId);
|
||||
resolve(storageData['boxart-'+appId]);
|
||||
resolve(storageData['boxart-' + appId]);
|
||||
return;
|
||||
}
|
||||
|
||||
// otherwise, put it in our cache, then return it
|
||||
sendMessage('openUrl', [
|
||||
this._baseUrlHttps +
|
||||
'/appasset?'+this._buildUidStr() +
|
||||
'/appasset?' + this._buildUidStr() +
|
||||
'&appid=' + appId +
|
||||
'&AssetType=2&AssetIdx=0',
|
||||
true
|
||||
@ -374,12 +375,14 @@ NvHTTP.prototype = {
|
||||
var reader = new FileReader();
|
||||
reader.onloadend = function() {
|
||||
var obj = {};
|
||||
obj['boxart-'+appId] = this.result;
|
||||
obj['boxart-' + appId] = this.result;
|
||||
chrome.storage.local.set(obj, function(onSuccess) {});
|
||||
console.log('%c[utils.js, utils.js, getBoxArt]', 'color: gray;', 'Returning network-fetched box art');
|
||||
resolve(this.result);
|
||||
}
|
||||
reader.readAsDataURL(new Blob([boxArtBuffer], {type: "image/png"}));
|
||||
reader.readAsDataURL(new Blob([boxArtBuffer], {
|
||||
type: "image/png"
|
||||
}));
|
||||
}.bind(this), function(error) {
|
||||
console.error('%c[utils.js, utils.js, getBoxArt]', 'color: gray;', 'Box-art request failed!', error);
|
||||
reject(error);
|
||||
@ -392,7 +395,7 @@ NvHTTP.prototype = {
|
||||
console.warn('%c[utils.js, utils.js, getBoxArt]', 'color: gray;', 'chrome.storage not detected! Box art will not be saved!');
|
||||
return sendMessage('openUrl', [
|
||||
this._baseUrlHttps +
|
||||
'/appasset?'+this._buildUidStr() +
|
||||
'/appasset?' + this._buildUidStr() +
|
||||
'&appid=' + appId +
|
||||
'&AssetType=2&AssetIdx=0',
|
||||
true
|
||||
@ -400,7 +403,7 @@ NvHTTP.prototype = {
|
||||
}
|
||||
},
|
||||
|
||||
launchApp: function (appId, mode, sops, rikey, rikeyid, localAudio, surroundAudioInfo, gamepadMask) {
|
||||
launchApp: function(appId, mode, sops, rikey, rikeyid, localAudio, surroundAudioInfo, gamepadMask) {
|
||||
return sendMessage('openUrl', [
|
||||
this._baseUrlHttps +
|
||||
'/launch?' + this._buildUidStr() +
|
||||
@ -414,12 +417,12 @@ NvHTTP.prototype = {
|
||||
'&remoteControllersBitmap=' + gamepadMask +
|
||||
'&gcmap=' + gamepadMask,
|
||||
false
|
||||
]).then(function (ret) {
|
||||
]).then(function(ret) {
|
||||
return true;
|
||||
});
|
||||
},
|
||||
|
||||
resumeApp: function (rikey, rikeyid, surroundAudioInfo) {
|
||||
resumeApp: function(rikey, rikeyid, surroundAudioInfo) {
|
||||
return sendMessage('openUrl', [
|
||||
this._baseUrlHttps +
|
||||
'/resume?' + this._buildUidStr() +
|
||||
@ -427,12 +430,12 @@ NvHTTP.prototype = {
|
||||
'&rikeyid=' + rikeyid +
|
||||
'&surroundAudioInfo=' + surroundAudioInfo,
|
||||
false
|
||||
]).then(function (ret) {
|
||||
]).then(function(ret) {
|
||||
return true;
|
||||
});
|
||||
},
|
||||
|
||||
quitApp: function () {
|
||||
quitApp: function() {
|
||||
return sendMessage('openUrl', [this._baseUrlHttps + '/cancel?' + this._buildUidStr(), false])
|
||||
// Refresh server info after quitting because it may silently fail if the
|
||||
// session belongs to a different client.
|
||||
@ -441,15 +444,15 @@ NvHTTP.prototype = {
|
||||
},
|
||||
|
||||
pair: function(randomNumber) {
|
||||
return this.refreshServerInfo().then(function () {
|
||||
return this.refreshServerInfo().then(function() {
|
||||
if (this.paired)
|
||||
return true;
|
||||
|
||||
if (this.currentGame != 0)
|
||||
return false;
|
||||
|
||||
return sendMessage('pair', [this.serverMajorVersion.toString(), this.address, randomNumber]).then(function (pairStatus) {
|
||||
return sendMessage('openUrl', [this._baseUrlHttps + '/pair?uniqueid=' + this.clientUid + '&devicename=roth&updateState=1&phrase=pairchallenge', false]).then(function (ret) {
|
||||
return sendMessage('pair', [this.serverMajorVersion.toString(), this.address, randomNumber]).then(function(pairStatus) {
|
||||
return sendMessage('openUrl', [this._baseUrlHttps + '/pair?uniqueid=' + this.clientUid + '&devicename=roth&updateState=1&phrase=pairchallenge', false]).then(function(ret) {
|
||||
$xml = this._parseXML(ret);
|
||||
this.paired = $xml.find('paired').html() == "1";
|
||||
return this.paired;
|
||||
@ -458,11 +461,11 @@ NvHTTP.prototype = {
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
_buildUidStr: function () {
|
||||
_buildUidStr: function() {
|
||||
return 'uniqueid=' + this.clientUid + '&uuid=' + guuid();
|
||||
},
|
||||
|
||||
_parseXML: function (xmlData) {
|
||||
_parseXML: function(xmlData) {
|
||||
return $($.parseXML(xmlData.toString()));
|
||||
},
|
||||
};
|
||||
|
||||
1
static/res/applist_empty.svg
Normal file
1
static/res/applist_empty.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 512 256" width="512" height="256"><defs><clipPath id="_clipPath_yIRtlut3od2o3W0V0tyVSEn4O7rQwUEb"><rect width="512" height="256"/></clipPath></defs><g clip-path="url(#_clipPath_yIRtlut3od2o3W0V0tyVSEn4O7rQwUEb)"><g id="Group"><defs><filter id="WcPFsRr92txvAquqtQLJDA42eOuH20Tm" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#WcPFsRr92txvAquqtQLJDA42eOuH20Tm)"><path d="M 184 28 L 328 28 C 329.656 28 331 29.344 331 31 L 331 225 C 331 226.656 329.656 228 328 228 L 184 228 C 182.344 228 181 226.656 181 225 L 181 31 C 181 29.344 182.344 28 184 28 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_add_circle_48px"><path d=" M 232 104 L 280 104 L 280 152 L 232 152 L 232 104 Z " fill="none"/><path d=" M 256 108 C 244.95 108 236 116.95 236 128 C 236 139.05 244.95 148 256 148 C 267.05 148 276 139.05 276 128 C 276 116.95 267.05 108 256 108 Z M 266 130 L 258 130 L 258 138 L 254 138 L 254 130 L 246 130 L 246 126 L 254 126 L 254 118 L 258 118 L 258 126 L 266 126 L 266 130 Z " fill="rgb(0,163,198)"/></g></g><g id="Group"><defs><filter id="6XR36XqPb13ScFas2P9OjS9OpNZIfllA" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#6XR36XqPb13ScFas2P9OjS9OpNZIfllA)"><path d="M 54.75 53 L 162.75 53 C 163.992 53 165 54.008 165 55.25 L 165 200.75 C 165 201.992 163.992 203 162.75 203 L 54.75 203 C 53.508 203 52.5 201.992 52.5 200.75 L 52.5 55.25 C 52.5 54.008 53.508 53 54.75 53 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_gamepad_48px"><path d=" M 96.75 116 L 120.75 116 L 120.75 140 L 96.75 140 L 96.75 116 Z " fill="none"/><path d=" M 111.75 123.5 L 111.75 118 L 105.75 118 L 105.75 123.5 L 108.75 126.5 L 111.75 123.5 Z M 104.25 125 L 98.75 125 L 98.75 131 L 104.25 131 L 107.25 128 L 104.25 125 Z M 105.75 132.5 L 105.75 138 L 111.75 138 L 111.75 132.5 L 108.75 129.5 L 105.75 132.5 Z M 113.25 125 L 110.25 128 L 113.25 131 L 118.75 131 L 118.75 125 L 113.25 125 Z " fill="rgb(39,39,39)"/></g></g><g id="Group"><defs><filter id="UdSh6fub9y3Hcxceeait0RXX4mwjJMX0" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#UdSh6fub9y3Hcxceeait0RXX4mwjJMX0)"><path d="M 349.25 53 L 457.25 53 C 458.492 53 459.5 54.008 459.5 55.25 L 459.5 200.75 C 459.5 201.992 458.492 203 457.25 203 L 349.25 203 C 348.008 203 347 201.992 347 200.75 L 347 55.25 C 347 54.008 348.008 53 349.25 53 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_gamepad_48px"><path d=" M 391.25 116 L 415.25 116 L 415.25 140 L 391.25 140 L 391.25 116 Z " fill="none"/><path d=" M 406.25 123.5 L 406.25 118 L 400.25 118 L 400.25 123.5 L 403.25 126.5 L 406.25 123.5 Z M 398.75 125 L 393.25 125 L 393.25 131 L 398.75 131 L 401.75 128 L 398.75 125 Z M 400.25 132.5 L 400.25 138 L 406.25 138 L 406.25 132.5 L 403.25 129.5 L 400.25 132.5 Z M 407.75 125 L 404.75 128 L 407.75 131 L 413.25 131 L 413.25 125 L 407.75 125 Z " fill="rgb(39,39,39)"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
1
static/res/applist_error.svg
Normal file
1
static/res/applist_error.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 512 256" width="512" height="256"><defs><clipPath id="_clipPath_q3Ua5WPG9X3dA70MRZ1ug2ARElMiysSJ"><rect width="512" height="256"/></clipPath></defs><g clip-path="url(#_clipPath_q3Ua5WPG9X3dA70MRZ1ug2ARElMiysSJ)"><g id="Group"><defs><filter id="cHVudzbrBQ2CJG0jNPFm7Epib205WyaO" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#cHVudzbrBQ2CJG0jNPFm7Epib205WyaO)"><path d="M 184 28 L 328 28 C 329.656 28 331 29.344 331 31 L 331 225 C 331 226.656 329.656 228 328 228 L 184 228 C 182.344 228 181 226.656 181 225 L 181 31 C 181 29.344 182.344 28 184 28 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_warning_48px"><path d=" M 232 104 L 280 104 L 280 152 L 232 152 L 232 104 Z " fill="none"/><path d=" M 234 146 L 278 146 L 256 108 L 234 146 Z M 258 140 L 254 140 L 254 136 L 258 136 L 258 140 Z M 258 132 L 254 132 L 254 124 L 258 124 L 258 132 Z " fill="rgb(244,67,54)"/></g></g><g id="Group"><defs><filter id="mus5hysAZhLwu6bXMOLrMCeg8QRvpyK5" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#mus5hysAZhLwu6bXMOLrMCeg8QRvpyK5)"><path d="M 54.75 53 L 162.75 53 C 163.992 53 165 54.008 165 55.25 L 165 200.75 C 165 201.992 163.992 203 162.75 203 L 54.75 203 C 53.508 203 52.5 201.992 52.5 200.75 L 52.5 55.25 C 52.5 54.008 53.508 53 54.75 53 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_gamepad_48px"><path d=" M 96.75 116 L 120.75 116 L 120.75 140 L 96.75 140 L 96.75 116 Z " fill="none"/><path d=" M 111.75 123.5 L 111.75 118 L 105.75 118 L 105.75 123.5 L 108.75 126.5 L 111.75 123.5 Z M 104.25 125 L 98.75 125 L 98.75 131 L 104.25 131 L 107.25 128 L 104.25 125 Z M 105.75 132.5 L 105.75 138 L 111.75 138 L 111.75 132.5 L 108.75 129.5 L 105.75 132.5 Z M 113.25 125 L 110.25 128 L 113.25 131 L 118.75 131 L 118.75 125 L 113.25 125 Z " fill="rgb(39,39,39)"/></g></g><g id="Group"><defs><filter id="secyACecQxmUzvUd03msvhsmzkojlvlZ" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#secyACecQxmUzvUd03msvhsmzkojlvlZ)"><path d="M 349.25 53 L 457.25 53 C 458.492 53 459.5 54.008 459.5 55.25 L 459.5 200.75 C 459.5 201.992 458.492 203 457.25 203 L 349.25 203 C 348.008 203 347 201.992 347 200.75 L 347 55.25 C 347 54.008 348.008 53 349.25 53 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_gamepad_48px"><path d=" M 391.25 116 L 415.25 116 L 415.25 140 L 391.25 140 L 391.25 116 Z " fill="none"/><path d=" M 406.25 123.5 L 406.25 118 L 400.25 118 L 400.25 123.5 L 403.25 126.5 L 406.25 123.5 Z M 398.75 125 L 393.25 125 L 393.25 131 L 398.75 131 L 401.75 128 L 398.75 125 Z M 400.25 132.5 L 400.25 138 L 406.25 138 L 406.25 132.5 L 403.25 129.5 L 400.25 132.5 Z M 407.75 125 L 404.75 128 L 407.75 131 L 413.25 131 L 413.25 125 L 407.75 125 Z " fill="rgb(39,39,39)"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
1
static/res/placeholder_error.svg
Normal file
1
static/res/placeholder_error.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 300 400" width="300" height="400"><defs><clipPath id="_clipPath_7VrBmLEdSmb7vTXt6k0koa8xYu1zCaFz"><rect width="300" height="400"/></clipPath></defs><g clip-path="url(#_clipPath_7VrBmLEdSmb7vTXt6k0koa8xYu1zCaFz)"><rect width="300" height="400" style="fill:rgb(29,29,29)"/><g id="ic_warning_black_48px"><path d=" M 102 152 L 198 152 L 198 248 L 102 248 L 102 152 Z " fill="none"/><path d=" M 106 236 L 194 236 L 150 160 L 106 236 Z M 154 224 L 146 224 L 146 216 L 154 216 L 154 224 Z M 154 208 L 146 208 L 146 192 L 154 192 L 154 208 Z " fill="rgb(39,39,39)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 762 B |
1
static/res/placeholder_game.svg
Normal file
1
static/res/placeholder_game.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 300 400" width="300" height="400"><defs><clipPath id="_clipPath_BVjMtbR4dEXaBuo9qBU4zJA4ZPJHGfxW"><rect width="300" height="400"/></clipPath></defs><g clip-path="url(#_clipPath_BVjMtbR4dEXaBuo9qBU4zJA4ZPJHGfxW)"><clipPath id="_clipPath_UBQAdzuop4HX8nHiyTz6R71FUYdEnoXn"><rect x="0" y="0" width="300" height="400" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,255,255)"/></clipPath><g clip-path="url(#_clipPath_UBQAdzuop4HX8nHiyTz6R71FUYdEnoXn)"><g id="Group"><rect x="0" y="0" width="300" height="400" transform="matrix(1,0,0,1,0,0)" fill="rgb(29,29,29)"/><g id="ic_gamepad_48px"><path d=" M 101 151 L 199 151 L 199 249 L 101 249 L 101 151 Z " fill="none"/><path d=" M 162.25 181.625 L 162.25 159.167 L 137.75 159.167 L 137.75 181.625 L 150 193.875 L 162.25 181.625 Z M 131.625 187.75 L 109.167 187.75 L 109.167 212.25 L 131.625 212.25 L 143.875 200 L 131.625 187.75 Z M 137.75 218.375 L 137.75 240.833 L 162.25 240.833 L 162.25 218.375 L 150 206.125 L 137.75 218.375 Z M 168.375 187.75 L 156.125 200 L 168.375 212.25 L 190.833 212.25 L 190.833 187.75 L 168.375 187.75 Z " fill="rgb(39,39,39)"/></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
x
Reference in New Issue
Block a user