mirror of
https://github.com/moonlight-stream/moonlight-chrome.git
synced 2025-08-17 16:46:31 +00:00
Cameron Gutman
GitHub
commit
ed79eb6b31
281
index.html
281
index.html
@ -1,141 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="-1">
|
||||
<title>Moonlight</title>
|
||||
<link rel="stylesheet" href="static/css/material.min.css">
|
||||
<link rel="stylesheet" href="static/css/style.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 mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Navigation on the right -->
|
||||
<img src="static/res/ic_arrow_back_white_24px.svg" id='backIcon'></img>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Moonlight</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="cancel-current" id="quitCurrentApp">
|
||||
<img src="static\res\ic_remove_circle_white_24px.svg">
|
||||
<span class="game-title">Quit Current App</span>
|
||||
<head>
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="-1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Moonlight</title>
|
||||
<link rel="stylesheet" href="static/css/roboto.css">
|
||||
<link rel="stylesheet" href="static/css/material.min.css">
|
||||
<link rel="stylesheet" href="static/css/style.css">
|
||||
<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">
|
||||
<header id="main-navigation" class="mdl-layout__header mdl-layout__header--transparent">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span id='backIcon'><i class="material-icons">keyboard_arrow_left</i></span>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">MOON<span>LIGHT</span></span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
|
||||
<div class="nav-menu-parent">
|
||||
<div id="resolutionMenu">
|
||||
<button id="selectResolution" data-value="1920:1080" class="mdl-button mdl-js-button">
|
||||
1080p
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<div id="resolutionTooltip" class="mdl-tooltip" for="resolutionMenu">
|
||||
Resolution
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main-content" class="mdl-layout__content">
|
||||
|
||||
<div id="streamSettings">
|
||||
<div class="mdl-select">
|
||||
<select id="selectResolution">
|
||||
<option value="1280:720">720p</option>
|
||||
<option value="1920:1080">1080p</option>
|
||||
<option value="3840:2160">4K</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mdl-select">
|
||||
<select id="selectFramerate">
|
||||
<option value="30">30 FPS</option>
|
||||
<option value="60">60 FPS</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="remoteAudioEnabledSwitch" id="remoteAudioEnabledSwitchContainer">
|
||||
<input type="checkbox" id="remoteAudioEnabledSwitch" class="mdl-switch__input" checked>
|
||||
<span class="mdl-switch__label">Remote audio off/on</span>
|
||||
</label>
|
||||
<output id='bitrateField'>10 Mbps</output>
|
||||
<input id="bitrateSlider" class="mdl-slider mdl-js-slider" type="range" min="0" max="100" step="0.5" value="10">
|
||||
</div>
|
||||
<div class="nav-menu-parent">
|
||||
<div id="framerateMenu">
|
||||
<button id="selectFramerate" data-value="60" class="mdl-button mdl-js-button">
|
||||
60 FPS
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="hostSettings">
|
||||
<div class="mdl-grid" id='host-grid'>
|
||||
<div class='mdl-cell mdl-cell--3-col host-cell mdl-button mdl-js-button mdl-js-ripple-effect' id='addHostCell'>
|
||||
<img src="static/res/ic_add_circle_white_24px.svg" id='addHostIcon'></img>
|
||||
Add Host
|
||||
<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>
|
||||
|
||||
<div id="framerateTooltip" class="mdl-tooltip" for="framerateMenu">
|
||||
Framerate
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-menu-parent">
|
||||
<div id="bandwidthMenu">
|
||||
<button id='bitrateField' class="mdl-button">10 Mbps</button>
|
||||
</div>
|
||||
|
||||
<div class="bitrateMenu mdl-menu mdl-js-menu mdl-js-ripple-effect" for="bandwidthMenu">
|
||||
<input id="bitrateSlider" class="mdl-slider mdl-js-slider" type="range" min="0" max="100" step="0.5" value="10">
|
||||
</div>
|
||||
|
||||
<div id="bandwidthTooltip" class="mdl-tooltip" for="bandwidthMenu">
|
||||
Bandwidth
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label id="externalAudioBtn" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="remoteAudioEnabledSwitch">
|
||||
<input type="checkbox" id="remoteAudioEnabledSwitch" class="mdl-icon-toggle__input" checked>
|
||||
<i class="mdl-icon-toggle__label material-icons">volume_up</i>
|
||||
</label>
|
||||
<div id="externalAudioTooltip" class="mdl-tooltip" for="externalAudioBtn">
|
||||
Remote audio is ON
|
||||
</div>
|
||||
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="quitCurrentApp">
|
||||
<i class="material-icons">remove_circle_outline</i>
|
||||
Quit Current App
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main-content" class="mdl-layout__content">
|
||||
<div id="host-grid">
|
||||
<div class="page-title">MoonLight Hosts</div>
|
||||
<div class="add-host-card mdl-card mdl-shadow--4dp" id='addHostCell'>
|
||||
<div class="mdl-card__title mdl-card--expand" id="addHostIcon">
|
||||
<h2 class="mdl-card__title-text" >Add Host</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="game-grid" class="mdl-grid">
|
||||
<div id="game-grid">
|
||||
<div class="page-title">Your Games</div>
|
||||
</div>
|
||||
|
||||
<div id="listener"></div> <!-- NaCl module placeholder. NaCl gets thrown into here -->
|
||||
|
||||
<div id="listener"></div>
|
||||
<!-- NaCl module placeholder. NaCl gets thrown into here -->
|
||||
<div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
|
||||
<h5 id="loadingMessage"></h5>
|
||||
</div>
|
||||
|
||||
<div id="naclSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
|
||||
<h5 id="naclSpinnerMessage"></h5>
|
||||
</div>
|
||||
</main>
|
||||
</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">
|
||||
<h3 class="mdl-dialog__title">Pairing</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<p id="pairingDialogText">
|
||||
Please enter the number XXXX on the GFE dialog on the computer. This dialog will be dismissed once complete
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<h3 class="mdl-dialog__title">Quit Running App?</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<p id="quitAppDialogText">
|
||||
Y is already running. Would you like to quit Y?
|
||||
</p>
|
||||
</div>
|
||||
<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="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">
|
||||
<h3 class="mdl-dialog__title">Delete PC</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<p id="deleteHostDialogText">
|
||||
Are you sure you want to delete this host?
|
||||
</p>
|
||||
</div>
|
||||
<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="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">
|
||||
<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"/>
|
||||
<label class="mdl-textfield__label" for="dialogInputHost">IP Address or Hostname of Geforce PC</label>
|
||||
</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">
|
||||
Please enter the number XXXX on the GFE dialog on the computer. This dialog will be dismissed once complete
|
||||
</p>
|
||||
</div>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelPairingDialog">Cancel</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="quitAppDialog" class="mdl-dialog">
|
||||
<h3 class="mdl-dialog__title">Quit Running App?</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<p id="quitAppDialogText">
|
||||
Y is already running. Would you like to quit Y?
|
||||
</p>
|
||||
</div>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelQuitApp">No</button>
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueQuitApp">Yes</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="deleteHostDialog" class="mdl-dialog">
|
||||
<h3 class="mdl-dialog__title">Delete PC</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<p id="deleteHostDialogText">
|
||||
Are you sure you want to delete this host?
|
||||
</p>
|
||||
</div>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelDeleteHost">No</button>
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueDeleteHost">Yes</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="addHostDialog" class="mdl-dialog">
|
||||
<h3 class="mdl-dialog__title">Add PC Manually</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<p>IP Address or Hostname of Geforce PC</p>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<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>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelAddHost">Cancel</button>
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueAddHost">Continue</button>
|
||||
</div>
|
||||
</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>
|
||||
</body>
|
||||
</div>
|
||||
<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="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">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -13,7 +13,7 @@
|
||||
"app": {
|
||||
"background": {
|
||||
"persistent": false,
|
||||
"css": ["static/css/material.min.css", "static/css/style.css"],
|
||||
"css": ["static/css/material.min.css", "static/css/material-icons.css", "static/css/style.css", "static/css/roboto.css"],
|
||||
"scripts": ["static/js/jquery-2.2.0.min.js", "static/js/material.min.js", "static/js/common.js", "static/js/background.js"]
|
||||
}
|
||||
},
|
||||
|
||||
33
static/css/material-icons.css
Normal file
33
static/css/material-icons.css
Normal file
@ -0,0 +1,33 @@
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(../fonts/MaterialIcons-Regular.woff2) format('woff2')
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
5
static/css/material.min.css
vendored
5
static/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
104
static/css/roboto.css
Normal file
104
static/css/roboto.css
Normal file
@ -0,0 +1,104 @@
|
||||
/* BEGIN Thin */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Thin.woff2") format("woff2");
|
||||
font-weight: 100;
|
||||
font-style: normal; }
|
||||
/* END Thin */
|
||||
/* BEGIN Thin Italic */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-ThinItalic.woff2") format("woff2");
|
||||
font-weight: 100;
|
||||
font-style: italic; }
|
||||
/* END Thin Italic */
|
||||
/* BEGIN Light */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Light.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal; }
|
||||
/* END Light */
|
||||
/* BEGIN Light Italic */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-LightItalic.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic; }
|
||||
/* END Light Italic */
|
||||
/* BEGIN Regular */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Regular.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal; }
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Regular.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
/* END Regular */
|
||||
/* BEGIN Italic */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic; }
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Italic.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: italic; }
|
||||
/* END Italic */
|
||||
/* BEGIN Medium */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal; }
|
||||
/* END Medium */
|
||||
/* BEGIN Medium Italic */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-MediumItalic.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: italic; }
|
||||
/* END Medium Italic */
|
||||
/* BEGIN Bold */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal; }
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Bold.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: normal; }
|
||||
/* END Bold */
|
||||
/* BEGIN Bold Italic */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-BoldItalic.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: italic; }
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-BoldItalic.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: italic; }
|
||||
/* END Bold Italic */
|
||||
/* BEGIN Black */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-Black.woff2") format("woff2");
|
||||
font-weight: 900;
|
||||
font-style: normal; }
|
||||
/* END Black */
|
||||
/* BEGIN Black Italic */
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url("../fonts/Roboto/Roboto-BlackItalic.woff2") format("woff2");
|
||||
font-weight: 900;
|
||||
font-style: italic; }
|
||||
/* END Black Italic */
|
||||
@ -1,7 +1,98 @@
|
||||
.mdl-layout__header-row {
|
||||
body {
|
||||
background-color: #282C38;
|
||||
color: #fff;
|
||||
margin: 0 72px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
.page-title {
|
||||
font-weight: 300;
|
||||
font-size: 26px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
span.mdl-layout-title {
|
||||
font-weight: 300;
|
||||
}
|
||||
span.mdl-layout-title > span {
|
||||
font-weight: 900;
|
||||
color: #00A3C6;
|
||||
}
|
||||
|
||||
.mdl-layout__header-row {
|
||||
padding: 0 80px 0 80px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 80px 0 80px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#host-grid .mdl-card {
|
||||
flex-basis: 50% !important;
|
||||
}
|
||||
#game-grid .mdl-card {
|
||||
height: 100px !important;
|
||||
width: 75px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) and (max-width: 800px) {
|
||||
#host-grid .mdl-card {
|
||||
flex-basis: 33% !important;
|
||||
}
|
||||
#game-grid .mdl-card {
|
||||
height: 150px !important;
|
||||
width: 112.5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) and (max-width: 1024px) {
|
||||
main {
|
||||
padding: 0 72px 0 72px !important;
|
||||
}
|
||||
.mdl-layout__header-row {
|
||||
padding: 0 72px 0 72px !important;
|
||||
}
|
||||
#host-grid .mdl-card {
|
||||
flex-basis: 25% !important;
|
||||
}
|
||||
#game-grid .mdl-card {
|
||||
height: 200px !important;
|
||||
width: 150px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
#game-grid .mdl-card {
|
||||
height: 300px !important;
|
||||
width: 225px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu-parent {
|
||||
position: relative;
|
||||
}
|
||||
.mdl-menu__outline {
|
||||
background-color: #333846;
|
||||
color: white;
|
||||
}
|
||||
.mdl-menu__item {
|
||||
color: white;
|
||||
}
|
||||
.mdl-menu__item:hover {
|
||||
background-color: #00A3C6;
|
||||
}
|
||||
#bitrateField {
|
||||
width: 100px;
|
||||
height: 36px;
|
||||
overflow: hidden;
|
||||
text-transform: none;
|
||||
}
|
||||
.bitrateMenu {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.mdl-button {
|
||||
color: #fff !important;
|
||||
}
|
||||
@ -13,27 +104,20 @@
|
||||
color:#fff;
|
||||
padding:25px;
|
||||
}
|
||||
.host-container {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 150px !important;
|
||||
height: 150px !important;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#backIcon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-left: -20px;
|
||||
padding-right: 20px;
|
||||
height: 24px;
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
left: 28px;
|
||||
}
|
||||
#backIcon:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.mdl-dialog {
|
||||
border: none;
|
||||
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
|
||||
width: 400px;
|
||||
background-color: #333846;
|
||||
color: white;
|
||||
}
|
||||
.mdl-dialog__title {
|
||||
padding: 24px 24px 0;
|
||||
@ -42,7 +126,13 @@
|
||||
}
|
||||
.mdl-dialog__content {
|
||||
padding: 20px 24px 24px 24px;
|
||||
color: rgba(0,0,0, 0.54);
|
||||
color: rgba(255, 255, 255, 0.90);
|
||||
}
|
||||
.mdl-textfield__input {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.90);
|
||||
}
|
||||
.mdl-textfield__label {
|
||||
color: rgba(255, 255, 255, 0.90);
|
||||
}
|
||||
#naclSpinner {
|
||||
display: none;
|
||||
@ -76,31 +166,84 @@
|
||||
.mdl-snackbar {
|
||||
min-width:0px;
|
||||
}
|
||||
main {
|
||||
padding: 50px 100px;
|
||||
#host-grid, #game-grid {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#bitrateField {
|
||||
#host-grid .mdl-card {
|
||||
flex-basis: 15%;
|
||||
}
|
||||
#game-grid .mdl-card {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
}
|
||||
#host-grid .mdl-card, #game-grid .mdl-card {
|
||||
text-align: center;
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
min-height: 170px;
|
||||
margin: 15px;
|
||||
cursor: pointer;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
#hostSettings {
|
||||
padding: 5px 10px;
|
||||
border: 1px dashed;
|
||||
margin: 10px 0;
|
||||
#host-grid .mdl-card:hover, #game-grid .mdl-card:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
#hostSettings p {
|
||||
#host-grid .mdl-card__title {
|
||||
padding: 0;
|
||||
}
|
||||
#host-grid .mdl-card__title .mdl-card__title-text {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
padding: 10px 15px;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
#game-grid .mdl-card img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#game-grid .game-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
min-height: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
#game-grid .game-title span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.add-host-card > .mdl-card__title {
|
||||
color: #fff;
|
||||
background:
|
||||
url('../res/ic_add_to_queue_white_48px.svg') center no-repeat #3E4454;
|
||||
}
|
||||
.host-container > .mdl-card__title {
|
||||
color: #fff;
|
||||
background:
|
||||
url('../res/ic_tv_white_48px.svg') center no-repeat #3E4454;
|
||||
}
|
||||
#host-grid p {
|
||||
margin: 0;
|
||||
}
|
||||
#hostSettings .mdl-textfield {
|
||||
#host-grid .mdl-textfield {
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#hostSettings #GFEHostIPField {
|
||||
#host-grid #GFEHostIPField {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
#hostSettings #selectHost {
|
||||
#host-grid #selectHost {
|
||||
padding: 0px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
@ -109,22 +252,22 @@ main {
|
||||
margin-right: 20px;
|
||||
background: none;
|
||||
}
|
||||
#hostSettings .button-holder {
|
||||
#host-grid .button-holder {
|
||||
padding: 0px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.remove-host {
|
||||
position:absolute;
|
||||
right:0px;
|
||||
top:0px;
|
||||
right:5px;
|
||||
top:5px;
|
||||
width:24px;
|
||||
height:24px;
|
||||
margin-top: 15px;
|
||||
/*to account for the shadow*/
|
||||
cursor:pointer;
|
||||
z-index: 5;
|
||||
background: url('\\static\\res\\ic_remove_circle_white_24px.svg') no-repeat;
|
||||
background-image: url('../res/ic_remove_circle_outline_white_48px.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px 20px;
|
||||
background-position: center;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -144,63 +287,21 @@ main {
|
||||
}
|
||||
.fullscreen {
|
||||
height: 100vh !important;
|
||||
overflow: none !important;
|
||||
overflow: hidden !important;
|
||||
margin: auto !important;
|
||||
padding: 0 !important;
|
||||
width 100%;
|
||||
border: none !important;
|
||||
}
|
||||
.box-art {
|
||||
background-color: transparent;
|
||||
}
|
||||
.box-art > img {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
|
||||
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
|
||||
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
|
||||
}
|
||||
.box-art:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.current-game {
|
||||
border: 3px solid green;
|
||||
}
|
||||
.not-current-game {
|
||||
border: 1px solid black;
|
||||
}
|
||||
.game-title {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.host-cell {
|
||||
display: inline-block;
|
||||
width: 150px !important;
|
||||
height: 150px !important;
|
||||
background-color: #000;
|
||||
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
|
||||
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
|
||||
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #00A3C6;
|
||||
}
|
||||
.host-cell-inactive {
|
||||
border: 3px solid red;
|
||||
border: 3px solid #8e0000;
|
||||
}
|
||||
.host-cell:hover {
|
||||
cursor: pointer;
|
||||
color: #000 !important;
|
||||
}
|
||||
.host-cell:hover img {
|
||||
-webkit-filter: invert(100%);
|
||||
filter: invert(100%);
|
||||
}
|
||||
.host-cell img {
|
||||
width: 80px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cancel-current:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
Binary file not shown.
BIN
static/fonts/MaterialIcons-Regular.woff2
Normal file
BIN
static/fonts/MaterialIcons-Regular.woff2
Normal file
Binary file not shown.
@ -11,8 +11,8 @@ var windowState = 'normal'; // chrome's windowState, possible values: 'normal' o
|
||||
function attachListeners() {
|
||||
changeUiModeForNaClLoad();
|
||||
|
||||
$('#selectResolution').on('change', saveResolution);
|
||||
$('#selectFramerate').on('change', saveFramerate);
|
||||
$('.resolutionMenu li').on('click', saveResolution);
|
||||
$('.framerateMenu li').on('click', saveFramerate);
|
||||
$('#bitrateSlider').on('input', updateBitrateField); // input occurs every notch you slide
|
||||
$('#bitrateSlider').on('change', saveBitrate); // change occurs once the mouse lets go.
|
||||
$("#remoteAudioEnabledSwitch").on('click', saveRemoteAudio);
|
||||
@ -64,15 +64,15 @@ function onBoundsChanged() {
|
||||
}
|
||||
|
||||
function changeUiModeForNaClLoad() {
|
||||
$('.mdl-layout__header').children().hide();
|
||||
$('#main-navigation').children().hide();
|
||||
$("#main-content").children().not("#listener, #naclSpinner").hide();
|
||||
$('#naclSpinnerMessage').text('Loading Moonlight plugin...');
|
||||
$('#naclSpinner').css('display', 'inline-block');
|
||||
}
|
||||
|
||||
function restoreUiAfterNaClLoad() {
|
||||
$('.mdl-layout__header').children().not("#quitCurrentApp").show();
|
||||
$("#main-content").children().not("#listener, #naclSpinner, #gameSelection").show();
|
||||
$('#main-navigation').children().not("#quitCurrentApp").show();
|
||||
$("#main-content").children().not("#listener, #naclSpinner, #game-grid").show();
|
||||
$('#naclSpinner').hide();
|
||||
$('#loadingSpinner').css('display', 'none');
|
||||
showHostsAndSettingsMode();
|
||||
@ -322,10 +322,11 @@ function addHost() {
|
||||
|
||||
|
||||
// host is an NvHTTP object
|
||||
function addHostToGrid(host, ismDNSDiscovered=false) {
|
||||
var outerDiv = $("<div>", {class: 'host-container mdl-cell--3-col', id: 'host-container-' + host.serverUid });
|
||||
var cell = $("<div>", {class: 'mdl-cell mdl-cell--3-col host-cell mdl-button mdl-js-button mdl-js-ripple-effect', id: 'hostgrid-' + host.serverUid, html:host.hostname });
|
||||
$(cell).prepend($("<img>", {src: "static/res/ic_desktop_windows_white_24px.svg"}));
|
||||
function addHostToGrid(host, ismDNSDiscovered) {
|
||||
|
||||
var outerDiv = $("<div>", {class: 'host-container mdl-card mdl-shadow--4dp', id: 'host-container-' + host.serverUid });
|
||||
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});
|
||||
removalButton.off('click');
|
||||
removalButton.click(function () {
|
||||
@ -347,7 +348,7 @@ function addHostToGrid(host, ismDNSDiscovered=false) {
|
||||
function removeClicked(host) {
|
||||
var deleteHostDialog = document.querySelector('#deleteHostDialog');
|
||||
document.getElementById('deleteHostDialogText').innerHTML =
|
||||
' Are you sure you want like to delete ' + host.hostname + '?';
|
||||
' Are you sure you want to delete ' + host.hostname + '?';
|
||||
deleteHostDialog.showModal();
|
||||
|
||||
$('#cancelDeleteHost').off('click');
|
||||
@ -393,8 +394,9 @@ function showApps(host) {
|
||||
console.log('Moved into showApps, but `host` did not initialize properly! Failing.');
|
||||
return;
|
||||
}
|
||||
console.log(host);
|
||||
$('#quitCurrentApp').show();
|
||||
$("#game-grid").empty();
|
||||
$("#gameList .game-container").remove();
|
||||
|
||||
// Show a spinner while the applist loads
|
||||
$('#naclSpinnerMessage').text('Loading apps...');
|
||||
@ -403,6 +405,8 @@ function showApps(host) {
|
||||
host.getAppList().then(function (appList) {
|
||||
$('#naclSpinner').hide();
|
||||
|
||||
$("#game-grid").show();
|
||||
|
||||
// if game grid is populated, empty it
|
||||
appList.forEach(function (app) {
|
||||
host.getBoxArt(app.id).then(function (resolvedPromise) {
|
||||
@ -412,7 +416,13 @@ function showApps(host) {
|
||||
// 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 imageBlob = new Blob([resolvedPromise], {type: "image/png"});
|
||||
$("#game-grid").append($("<div>", {html:$("<img \>", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id, name: app.title }), class: 'box-art mdl-cell mdl-cell--3-col'}).append($("<span>", {html: app.title, class:"game-title"})));
|
||||
var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: URL.createObjectURL(imageBlob) });
|
||||
$(outerDiv).append($("<img \>", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id, name: app.title }));
|
||||
$(outerDiv).append($("<div>", {class: "game-title", html: $("<span>", {html: app.title} )}));
|
||||
$("#game-grid").append(outerDiv);
|
||||
|
||||
|
||||
// $("#gameList").append($("<div>", {html:$("<img \>", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id, name: app.title }), class: 'box-art mdl-cell mdl-cell--3-col'}).append($("<span>", {html: app.title, class:"game-title"})));
|
||||
$('#game-'+app.id).on('click', function () {
|
||||
startGame(host, app.id);
|
||||
});
|
||||
@ -430,7 +440,11 @@ function showApps(host) {
|
||||
// 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
|
||||
$("#game-grid").append($("<div>", {html:$("<img \>", {src: "static/res/no_app_image.png", id: 'game-'+app.id, name: app.title }), class: 'box-art mdl-cell mdl-cell--3-col'}).append($("<span>", {html: app.title, class:"game-title"})));
|
||||
var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: URL.createObjectURL(imageBlob) });
|
||||
$(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);
|
||||
});
|
||||
@ -454,14 +468,15 @@ function showApps(host) {
|
||||
// set the layout to the initial mode you see when you open moonlight
|
||||
function showHostsAndSettingsMode() {
|
||||
console.log('entering show hosts and settings mode.');
|
||||
$("#main-navigation").show();
|
||||
$(".nav-menu-parent").show();
|
||||
$("#externalAudioBtn").show();
|
||||
$("#main-content").children().not("#listener, #loadingSpinner, #naclSpinner").show();
|
||||
$('#game-grid').hide();
|
||||
$('#backIcon').hide();
|
||||
$('#quitCurrentApp').hide();
|
||||
$(".mdl-layout__header").show();
|
||||
$("#main-content").children().not("#listener, #loadingSpinner, #naclSpinner").show();
|
||||
$("#game-grid").hide();
|
||||
$("#main-content").removeClass("fullscreen");
|
||||
$("#listener").removeClass("fullscreen");
|
||||
$("body").css('backgroundColor', 'white');
|
||||
// We're no longer in a host-specific screen. Null host, and add it back to the polling list
|
||||
if(api) {
|
||||
beginBackgroundPollingOfHost(api);
|
||||
@ -472,13 +487,15 @@ function showHostsAndSettingsMode() {
|
||||
function showAppsMode() {
|
||||
console.log("entering show apps mode.");
|
||||
$('#backIcon').show();
|
||||
$(".mdl-layout__header").show();
|
||||
$("#main-navigation").show();
|
||||
$("#main-content").children().not("#listener, #loadingSpinner, #naclSpinner").show();
|
||||
$("#streamSettings").hide();
|
||||
$("#hostSettings").hide();
|
||||
$(".nav-menu-parent").hide();
|
||||
$("#externalAudioBtn").hide();
|
||||
$("#host-grid").hide();
|
||||
$("#settings").hide();
|
||||
$("#main-content").removeClass("fullscreen");
|
||||
$("#listener").removeClass("fullscreen");
|
||||
$("body").css('backgroundColor', 'white');
|
||||
}
|
||||
|
||||
|
||||
@ -527,9 +544,9 @@ function startGame(host, appID) {
|
||||
return;
|
||||
}
|
||||
|
||||
var frameRate = $("#selectFramerate").val();
|
||||
var streamWidth = $('#selectResolution option:selected').val().split(':')[0];
|
||||
var streamHeight = $('#selectResolution option:selected').val().split(':')[1];
|
||||
var frameRate = $('#selectFramerate').data('value').toString();
|
||||
var streamWidth = $('#selectResolution').data('value').split(':')[0];
|
||||
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('startRequest:' + host.address + ":" + streamWidth + ":" + streamHeight + ":" + frameRate + ":" + bitrate);
|
||||
@ -551,7 +568,7 @@ function startGame(host, appID) {
|
||||
});
|
||||
}
|
||||
|
||||
remote_audio_enabled = $("#remoteAudioEnabledSwitch").parent().hasClass('is-checked') ? 1 : 0;
|
||||
var remote_audio_enabled = $("#remoteAudioEnabledSwitch").parent().hasClass('is-checked') ? 1 : 0;
|
||||
|
||||
host.launchApp(appID,
|
||||
streamWidth + "x" + streamHeight + "x" + frameRate,
|
||||
@ -576,10 +593,9 @@ function playGameMode() {
|
||||
console.log("entering play game mode");
|
||||
isInGame = true;
|
||||
|
||||
$(".mdl-layout__header").hide();
|
||||
$("#main-navigation").hide();
|
||||
$("#main-content").children().not("#listener, #loadingSpinner").hide();
|
||||
$("#main-content").addClass("fullscreen");
|
||||
$("body").css('backgroundColor', 'black');
|
||||
|
||||
chrome.app.window.current().fullscreen();
|
||||
fullscreenNaclModule();
|
||||
@ -589,8 +605,8 @@ function playGameMode() {
|
||||
|
||||
// Maximize the size of the nacl module by scaling and resizing appropriately
|
||||
function fullscreenNaclModule() {
|
||||
var streamWidth = $('#selectResolution option:selected').val().split(':')[0];
|
||||
var streamHeight = $('#selectResolution option:selected').val().split(':')[1];
|
||||
var streamWidth = $('#selectResolution').data('value').split(':')[0];
|
||||
var streamHeight = $('#selectResolution').data('value').split(':')[1];
|
||||
var screenWidth = window.innerWidth;
|
||||
var screenHeight = window.innerHeight;
|
||||
|
||||
@ -678,13 +694,17 @@ function storeData(key, data, callbackFunction) {
|
||||
}
|
||||
|
||||
function saveResolution() {
|
||||
var chosenResolution = $(this).data('value');
|
||||
$('#selectResolution').text($(this).text()).data('value', chosenResolution);
|
||||
storeData('resolution', chosenResolution, null);
|
||||
updateDefaultBitrate();
|
||||
storeData('resolution', $('#selectResolution').val(), null);
|
||||
}
|
||||
|
||||
function saveFramerate() {
|
||||
var chosenFramerate = $(this).data('value');
|
||||
$('#selectFramerate').text($(this).text()).data('value', chosenFramerate);
|
||||
storeData('frameRate', chosenFramerate, null);
|
||||
updateDefaultBitrate();
|
||||
storeData('frameRate', $('#selectFramerate').val(), null);
|
||||
}
|
||||
|
||||
// storing data in chrome.storage takes the data as an object, and shoves it into JSON to store
|
||||
@ -703,31 +723,33 @@ function saveBitrate() {
|
||||
}
|
||||
|
||||
function saveRemoteAudio() {
|
||||
console.log('saving remote audio state');
|
||||
// problem: when off, and the app is just starting, a tick to the switch doesn't always toggle it
|
||||
// second problem: this callback is called immediately after clicking, so the HTML class `is-checked` isn't toggled yet
|
||||
// to solve the second problem, we invert the boolean. This has worked in all cases I've tried, except for the first case
|
||||
storeData('remoteAudio', !$("#remoteAudioEnabledSwitch").parent().hasClass('is-checked'), null);
|
||||
// MaterialDesignLight uses the mouseup trigger, so we give it some time to change the class name before
|
||||
// checking the new state
|
||||
setTimeout(function() {
|
||||
var remoteAudioState = $("#remoteAudioEnabledSwitch").parent().hasClass('is-checked');
|
||||
console.log('saving remote audio state : ' + remoteAudioState);
|
||||
storeData('remoteAudio', remoteAudioState, null);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function updateDefaultBitrate() {
|
||||
var res = $('#selectResolution').val();
|
||||
var frameRate = $('#selectFramerate').val();
|
||||
var res = $('#selectResolution').data('value');
|
||||
var frameRate = $('#selectFramerate').data('value').toString();
|
||||
|
||||
if (res.lastIndexOf("1920:1080", 0) === 0) {
|
||||
if (frameRate.lastIndexOf("30", 0) === 0) { // 1080p, 30fps
|
||||
if (res ==="1920:1080") {
|
||||
if (frameRate === "30") { // 1080p, 30fps
|
||||
$('#bitrateSlider')[0].MaterialSlider.change('10');
|
||||
} else { // 1080p, 60fps
|
||||
$('#bitrateSlider')[0].MaterialSlider.change('20');
|
||||
}
|
||||
} else if (res.lastIndexOf("1280:720") === 0) {
|
||||
if (frameRate.lastIndexOf("30", 0) === 0) { // 720, 30fps
|
||||
} else if (res === "1280:720") {
|
||||
if (frameRate === "30") { // 720, 30fps
|
||||
$('#bitrateSlider')[0].MaterialSlider.change('5');
|
||||
} else { // 720, 60fps
|
||||
$('#bitrateSlider')[0].MaterialSlider.change('10');
|
||||
}
|
||||
} else if (res.lastIndexOf("3840:2160", 0) === 0) {
|
||||
if (frameRate.lastIndexOf("30", 0) === 0) { // 2160p, 30fps
|
||||
} else if (res === "3840:2160") {
|
||||
if (frameRate === "30") { // 2160p, 30fps
|
||||
$('#bitrateSlider')[0].MaterialSlider.change('40');
|
||||
} else { // 2160p, 60fps
|
||||
$('#bitrateSlider')[0].MaterialSlider.change('80');
|
||||
@ -750,33 +772,51 @@ function onWindowLoad(){
|
||||
if(chrome.storage) {
|
||||
// load stored resolution prefs
|
||||
chrome.storage.sync.get('resolution', function(previousValue) {
|
||||
$('#selectResolution').val(previousValue.resolution != null ? previousValue.resolution : '1280:720');
|
||||
});
|
||||
chrome.storage.sync.get('remoteAudio', function(previousValue) {
|
||||
if(previousValue.remoteAudio == null) {
|
||||
document.querySelector('#remoteAudioEnabledSwitchContainer').MaterialSwitch.off();
|
||||
return;
|
||||
} else if(previousValue.remoteAudio == false) {
|
||||
document.querySelector('#remoteAudioEnabledSwitchContainer').MaterialSwitch.off();
|
||||
} else {
|
||||
document.querySelector('#remoteAudioEnabledSwitchContainer').MaterialSwitch.on();
|
||||
if(previousValue.resolution != null) {
|
||||
$('.resolutionMenu li').each(function () {
|
||||
if ($(this).data('value') === previousValue.resolution) {
|
||||
$('#selectResolution').text($(this).text()).data('value', previousValue.resolution);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Load stored remote audio prefs
|
||||
chrome.storage.sync.get('remoteAudio', function(previousValue) {
|
||||
if(previousValue.remoteAudio == null) {
|
||||
document.querySelector('#externalAudioBtn').MaterialIconToggle.check();
|
||||
return;
|
||||
} else if(previousValue.remoteAudio == false) {
|
||||
document.querySelector('#externalAudioBtn').MaterialIconToggle.uncheck();
|
||||
} else {
|
||||
document.querySelector('#externalAudioBtn').MaterialIconToggle.check();
|
||||
}
|
||||
});
|
||||
|
||||
// load stored framerate prefs
|
||||
chrome.storage.sync.get('frameRate', function(previousValue) {
|
||||
$('#selectFramerate').val(previousValue.frameRate != null ? previousValue.frameRate : '60');
|
||||
if(previousValue.frameRate != null) {
|
||||
$('.framerateMenu li').each(function () {
|
||||
if ($(this).data('value') === previousValue.frameRate) {
|
||||
$('#selectFramerate').text($(this).text()).data('value', previousValue.frameRate);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// load stored bitrate prefs
|
||||
chrome.storage.sync.get('bitrate', function(previousValue) {
|
||||
$('#bitrateSlider')[0].MaterialSlider.change(previousValue.bitrate != null ? previousValue.bitrate : '10');
|
||||
updateBitrateField();
|
||||
});
|
||||
|
||||
// load the HTTP cert if we have one.
|
||||
chrome.storage.sync.get('cert', function(savedCert) {
|
||||
if (savedCert.cert != null) { // we have a saved cert
|
||||
pairingCert = savedCert.cert;
|
||||
}
|
||||
});
|
||||
|
||||
chrome.storage.sync.get('uniqueid', function(savedUniqueid) {
|
||||
if (savedUniqueid.uniqueid != null) { // we have a saved uniqueid
|
||||
myUniqueid = savedUniqueid.uniqueid;
|
||||
@ -785,6 +825,7 @@ function onWindowLoad(){
|
||||
storeData('uniqueid', myUniqueid, null);
|
||||
}
|
||||
});
|
||||
|
||||
// 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 : {};
|
||||
|
||||
6
static/js/material.min.js
vendored
6
static/js/material.min.js
vendored
File diff suppressed because one or more lines are too long
@ -22,6 +22,7 @@ function handleMessage(msg) {
|
||||
console.log(msg.data);
|
||||
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');
|
||||
|
||||
api.refreshServerInfo().then(function (ret) { // refresh the serverinfo to acknowledge the currently running app
|
||||
api.getAppList().then(function (appList) {
|
||||
@ -39,6 +40,7 @@ function handleMessage(msg) {
|
||||
|
||||
} else if(msg.data === 'Connection Established') {
|
||||
$('#loadingSpinner').css('display', 'none');
|
||||
$('body').css('backgroundColor', 'black');
|
||||
} else if(msg.data.indexOf('ProgressMsg: ') === 0) {
|
||||
$('#loadingMessage').text(msg.data.replace('ProgressMsg: ', ''));
|
||||
} else if(msg.data.indexOf('TransientMsg: ') === 0) {
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 264 B |
4
static/res/ic_add_to_queue_white_48px.svg
Normal file
4
static/res/ic_add_to_queue_white_48px.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-7v2h-3v3h-2v-3H8v-2h3V7h2v3h3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 313 B |
@ -1,4 +0,0 @@
|
||||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 224 B |
@ -1,4 +0,0 @@
|
||||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 274 B |
4
static/res/ic_remove_circle_outline_white_48px.svg
Normal file
4
static/res/ic_remove_circle_outline_white_48px.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 303 B |
@ -1,4 +0,0 @@
|
||||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 246 B |
9
static/res/ic_remove_from_queue_white_48px.svg
Normal file
9
static/res/ic_remove_from_queue_white_48px.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<path d="M0 0h24v24H0V0z" id="a"/>
|
||||
</defs>
|
||||
<clipPath id="b">
|
||||
<use overflow="visible" xlink:href="#a"/>
|
||||
</clipPath>
|
||||
<path clip-path="url(#b)" d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-7v2H8v-2h8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 467 B |
4
static/res/ic_tv_white_48px.svg
Normal file
4
static/res/ic_tv_white_48px.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 273 B |
4
static/res/ic_videogame_asset_white_48px.svg
Normal file
4
static/res/ic_videogame_asset_white_48px.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0v24h24V0H0zm23 16c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h18c1.1 0 2 .9 2 2v8z" fill="none"/>
|
||||
<path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 501 B |
Loading…
x
Reference in New Issue
Block a user