Merge pull request #227 from Calcyfer/master

UI Modernization
This commit is contained in:
Cameron Gutman authored and GitHub committed 2017-05-07 15:32:25 -07:00
commit ed79eb6b31
20 files changed
+607 -283

No files matched your search

+158 -125
View File
@@ -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>
</html>
</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>
+1 -1
View File
@@ -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
View 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';
}
+3 -2
View File
@@ -1,8 +1,9 @@
/**
* material-design-lite - Material Design Components in CSS, JS and HTML
* @version v1.1.3
* @version v1.3.0
* @license Apache-2.0
* @copyright 2015 Google, Inc.
* @link https://github.com/google/material-design-lite
*/
@charset "UTF-8";html{color:rgba(0,0,0,.87)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.hidden{display:none!important}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,*:before,*:after,*:first-letter{background:transparent!important;color:#000!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}a,.mdl-accordion,.mdl-button,.mdl-card,.mdl-checkbox,.mdl-dropdown-menu,.mdl-icon-toggle,.mdl-item,.mdl-radio,.mdl-slider,.mdl-switch,.mdl-tabs__tab{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(255,255,255,0)}html{width:100%;height:100%;-ms-touch-action:manipulation;touch-action:manipulation}body{width:100%;min-height:100%}main{display:block}*[hidden]{display:none!important}html,body{font-family:"Helvetica","Arial",sans-serif;font-size:14px;font-weight:400;line-height:20px}h1,h2,h3,h4,h5,h6,p{padding:0}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400;line-height:1.35;letter-spacing:-.02em;opacity:.54;font-size:.6em}h1{font-size:56px;line-height:1.35;letter-spacing:-.02em;margin:24px 0}h1,h2{font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400}h2{font-size:45px;line-height:48px}h2,h3{margin:24px 0}h3{font-size:34px;line-height:40px}h3,h4{font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400}h4{font-size:24px;line-height:32px;-moz-osx-font-smoothing:grayscale;margin:24px 0 16px}h5{font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}h5,h6{font-family:"Roboto","Helvetica","Arial",sans-serif;margin:24px 0 16px}h6{font-size:16px;letter-spacing:.04em}h6,p{font-weight:400;line-height:24px}p{font-size:14px;letter-spacing:0;margin:0 0 16px}a{color:rgb(255,171,64);font-weight:500}blockquote{font-family:"Roboto","Helvetica","Arial",sans-serif;position:relative;font-size:24px;font-weight:300;font-style:italic;line-height:1.35;letter-spacing:.08em}blockquote:before{position:absolute;left:-.5em;content:'“'}blockquote:after{content:'”';margin-left:-.05em}mark{background-color:#f4ff81}dt{font-weight:700}address{font-size:12px;line-height:1;font-style:normal}address,ul,ol{font-weight:400;letter-spacing:0}ul,ol{font-size:14px;line-height:24px}.mdl-typography--display-4,.mdl-typography--display-4-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:112px;font-weight:300;line-height:1;letter-spacing:-.04em}.mdl-typography--display-4-color-contrast{opacity:.54}.mdl-typography--display-3,.mdl-typography--display-3-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:56px;font-weight:400;line-height:1.35;letter-spacing:-.02em}.mdl-typography--display-3-color-contrast{opacity:.54}.mdl-typography--display-2,.mdl-typography--display-2-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:45px;font-weight:400;line-height:48px}.mdl-typography--display-2-color-contrast{opacity:.54}.mdl-typography--display-1,.mdl-typography--display-1-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:34px;font-weight:400;line-height:40px}.mdl-typography--display-1-color-contrast{opacity:.54}.mdl-typography--headline,.mdl-typography--headline-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:24px;font-weight:400;line-height:32px;-moz-osx-font-smoothing:grayscale}.mdl-typography--headline-color-contrast{opacity:.87}.mdl-typography--title,.mdl-typography--title-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}.mdl-typography--title-color-contrast{opacity:.87}.mdl-typography--subhead,.mdl-typography--subhead-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:.04em}.mdl-typography--subhead-color-contrast{opacity:.87}.mdl-typography--body-2,.mdl-typography--body-2-color-contrast{font-size:14px;font-weight:70Line truncated
@charset "UTF-8";html{color:rgba(0,0,0,.87)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.hidden{display:none!important}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,*:before,*:after,*:first-letter{background:transparent!important;color:#000!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}a,.mdl-accordion,.mdl-button,.mdl-card,.mdl-checkbox,.mdl-dropdown-menu,.mdl-icon-toggle,.mdl-item,.mdl-radio,.mdl-slider,.mdl-switch,.mdl-tabs__tab{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(255,255,255,0)}html{width:100%;height:100%;-ms-touch-action:manipulation;touch-action:manipulation}body{width:100%;min-height:100%;margin:0}main{display:block}*[hidden]{display:none!important}html,body{font-family:"Helvetica","Arial",sans-serif;font-size:14px;font-weight:400;line-height:20px}h1,h2,h3,h4,h5,h6,p{padding:0}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400;line-height:1.35;letter-spacing:-.02em;opacity:.54;font-size:.6em}h1{font-size:56px;line-height:1.35;letter-spacing:-.02em;margin:24px 0}h1,h2{font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400}h2{font-size:45px;line-height:48px}h2,h3{margin:24px 0}h3{font-size:34px;line-height:40px}h3,h4{font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400}h4{font-size:24px;line-height:32px;-moz-osx-font-smoothing:grayscale;margin:24px 0 16px}h5{font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}h5,h6{font-family:"Roboto","Helvetica","Arial",sans-serif;margin:24px 0 16px}h6{font-size:16px;letter-spacing:.04em}h6,p{font-weight:400;line-height:24px}p{font-size:14px;letter-spacing:0;margin:0 0 16px}a{color:#ff4081;font-weight:500}blockquote{font-family:"Roboto","Helvetica","Arial",sans-serif;position:relative;font-size:24px;font-weight:300;font-style:italic;line-height:1.35;letter-spacing:.08em}blockquote:before{position:absolute;left:-.5em;content:'“'}blockquote:after{content:'”';margin-left:-.05em}mark{background-color:#f4ff81}dt{font-weight:700}address{font-size:12px;line-height:1;font-style:normal}address,ul,ol{font-weight:400;letter-spacing:0}ul,ol{font-size:14px;line-height:24px}.mdl-typography--display-4,.mdl-typography--display-4-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:112px;font-weight:300;line-height:1;letter-spacing:-.04em}.mdl-typography--display-4-color-contrast{opacity:.54}.mdl-typography--display-3,.mdl-typography--display-3-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:56px;font-weight:400;line-height:1.35;letter-spacing:-.02em}.mdl-typography--display-3-color-contrast{opacity:.54}.mdl-typography--display-2,.mdl-typography--display-2-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:45px;font-weight:400;line-height:48px}.mdl-typography--display-2-color-contrast{opacity:.54}.mdl-typography--display-1,.mdl-typography--display-1-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:34px;font-weight:400;line-height:40px}.mdl-typography--display-1-color-contrast{opacity:.54}.mdl-typography--headline,.mdl-typography--headline-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:24px;font-weight:400;line-height:32px;-moz-osx-font-smoothing:grayscale}.mdl-typography--headline-color-contrast{opacity:.87}.mdl-typography--title,.mdl-typography--title-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}.mdl-typography--title-color-contrast{opacity:.87}.mdl-typography--subhead,.mdl-typography--subhead-color-contrast{font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:.04em}.mdl-typography--subhead-color-contrast{opacity:.87}.mdl-typography--body-2,.mdl-typography--body-2-color-contrast{font-size:14px;font-weight:7Line truncated
/*# sourceMappingURL=material.min.css.map */
+104
View 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 */
+183 -82
View File
@@ -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;
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.
Binary file not shown.
+95 -54
View File
@@ -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 : {};
+3 -3
View File
@@ -1,10 +1,10 @@
/**
* material-design-lite - Material Design Components in CSS, JS and HTML
* @version v1.1.3
* @version v1.3.0
* @license Apache-2.0
* @copyright 2015 Google, Inc.
* @link https://github.com/google/material-design-lite
*/
!function(){"use strict";function e(e,t){if(e){if(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)){var s=document.createElement("span");s.classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),s.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT);var i=document.createElement("span");i.classList.add(t.CssClasses_.MDL_RIPPLE),s.appendChild(i),e.appendChild(s)}e.addEventListener("click",function(s){s.preventDefault();var i=e.href.split("#")[1],n=t.element_.querySelector("#"+i);t.resetTabState_(),t.resetPanelState_(),e.classList.add(t.CssClasses_.ACTIVE_CLASS),n.classList.add(t.CssClasses_.ACTIVE_CLASS)})}}function t(e,t,s,i){function n(){var n=e.href.split("#")[1],a=i.content_.querySelector("#"+n);i.resetTabState_(t),i.resetPanelState_(s),e.classList.add(i.CssClasses_.IS_ACTIVE),a.classList.add(i.CssClasses_.IS_ACTIVE)}if(i.tabBar_.classList.contains(i.CssClasses_.JS_RIPPLE_EFFECT)){var a=document.createElement("span");a.classList.add(i.CssClasses_.RIPPLE_CONTAINER),a.classList.add(i.CssClasses_.JS_RIPPLE_EFFECT);var l=document.createElement("span");l.classList.add(i.CssClasses_.RIPPLE),a.appendChild(l),e.appendChild(a)}e.addEventListener("click",function(t){"#"===e.getAttribute("href").charAt(0)&&(t.preventDefault(),n())}),e.show=n}var s={upgradeDom:function(e,t){},upgradeElement:function(e,t){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,t){},register:function(e){},downgradeElements:function(e){}};s=function(){function e(e,t){for(var s=0;s<h.length;s++)if(h[s].className===e)return"undefined"!=typeof t&&(h[s]=t),h[s];return!1}function t(e){var t=e.getAttribute("data-upgraded");return null===t?[""]:t.split(",")}function s(e,s){var i=t(e);return-1!==i.indexOf(s)}function i(t,s){if("undefined"==typeof t&&"undefined"==typeof s)for(var a=0;a<h.length;a++)i(h[a].className,h[a].cssClass);else{var l=t;if("undefined"==typeof s){var o=e(l);o&&(s=o.cssClass)}for(var r=document.querySelectorAll("."+s),_=0;_<r.length;_++)n(r[_],l)}}function n(i,n){if(!("object"==typeof i&&i instanceof Element))throw new Error("Invalid argument provided to upgrade MDL element.");var a=t(i),l=[];if(n)s(i,n)||l.push(e(n));else{var o=i.classList;h.forEach(function(e){o.contains(e.cssClass)&&-1===l.indexOf(e)&&!s(i,e.className)&&l.push(e)})}for(var r,_=0,d=l.length;d>_;_++){if(r=l[_],!r)throw new Error("Unable to find a registered component for the given class.");a.push(r.className),i.setAttribute("data-upgraded",a.join(","));var C=new r.classConstructor(i);C[p]=r,c.push(C);for(var u=0,E=r.callbacks.length;E>u;u++)r.callbacks[u](i);r.widget&&(i[r.className]=C);var m;"CustomEvent"in window&&"function"==typeof window.CustomEvent?m=new Event("mdl-componentupgraded",{bubbles:!0,cancelable:!1}):(m=document.createEvent("Events"),m.initEvent("mdl-componentupgraded",!0,!0)),i.dispatchEvent(m)}}function a(e){Array.isArray(e)||(e="function"==typeof e.item?Array.prototype.slice.call(e):[e]);for(var t,s=0,i=e.length;i>s;s++)t=e[s],t instanceof HTMLElement&&(n(t),t.children.length>0&&a(t.children))}function l(t){var s="undefined"==typeof t.widget&&"undefined"==typeof t.widget,i=!0;s||(i=t.widget||t.widget);var n={classConstructor:t.constructor||t.constructor,className:t.classAsString||t.classAsString,cssClass:t.cssClass||t.cssClass,widget:i,callbacks:[]};if(h.forEach(function(e){if(e.cssClass===n.cssClass)throw new Error("The provided cssClass has already been registered: "+e.cssClass);if(e.className===n.className)throw new Error("The provided className has already been registered")}),t.constructor.prototype.hasOwnProperty(p))throw new Error("MDL component classes must not have "+p+" defined as a property.");var a=e(t.classAsString,n);a||h.push(n)}function o(t,s){var i=e(t);i&&i.callbacks.push(s)}function r(){for(var e=0;e<h.length;e++)i(h[e].className)}function _(e){if(e){var t=c.indexOf(e);c.splice(t,1);var s=e.element_.getAttribute("data-upgraded").split(","),i=s.indexOf(e[p].classAsString);s.splice(i,1),e.element_.setAttribute("data-upgraded",s.join(","));var n;"CustomEvent"in window&&"function"==typeof window.CustomEvent?n=new Event("mdl-componentdowngraded",{bubbles:!0,cancelable:!1}):(n=document.createEvent("Events"),n.initEvent("mdl-componentdowngraded",!0,!0))}}function d(e){var t=function(e){c.filter(function(t){return t.element_===e}).forEach(_)};if(e instanceof Array||e instanceof NodeList)for(var s=0;s<e.length;s++)t(e[s]);else{if(!(e instanceof Node))throw new Error("Invalid argument provided to downgrade MDL nodes.");t(e)}}var h=[],c=[],p="mdlComponentConfigInternal_";return{upgradeDom:i,upgradeElement:n,upgradeElements:a,upgradeAllRegistered:r,registerUpgradedCallback:o,register:l,downgradeElements:d}}(),s.ComponentConfigPublic,s.ComponentConfig,s.Component,s.upgradeDom=s.upgradeDom,s.upgradeElement=s.upgradeElement,s.upgradeElements=s.upgradeElements,s.upgradeAllRegistered=s.upgradeAllRegistered,s.registerUpgradedCallback=s.registerUpgradedCallback,s.register=s.register,s.Line truncated
this.setActionHidden_(!1)),this.textElement_.textContent=this.message_,this.element_.classList.add(this.cssClasses_.ACTIVE),this.element_.setAttribute("aria-hidden","false"),setTimeout(this.cleanup_.bind(this),this.timeout_)},C.prototype.showSnackbar=function(e){if(void 0===e)throw new Error("Please provide a data object with at least a message to display.");if(void 0===e.message)throw new Error("Please provide a message to be displayed.");if(e.actionHandler&&!e.actionText)throw new Error("Please provide action text with the handler.");this.active?this.queuedNotifications_.push(e):(this.active=!0,this.message_=e.message,e.timeout?this.timeout_=e.timeout:this.timeout_=2750,e.actionHandler&&(this.actionHandler_=e.actionHandler),e.actionText&&(this.actionText_=e.actionText),this.displaySnackbar_())},C.prototype.showSnackbar=C.prototype.showSnackbar,C.prototype.checkQueue_=function(){this.queuedNotifications_.length>0&&this.showSnackbar(this.queuedNotifications_.shift())},C.prototype.cleanup_=function(){this.element_.classList.remove(this.cssClasses_.ACTIVE),setTimeout(function(){this.element_.setAttribute("aria-hidden","true"),this.textElement_.textContent="",Boolean(this.actionElement_.getAttribute("aria-hidden"))||(this.setActionHidden_(!0),this.actionElement_.textContent="",this.actionElement_.removeEventListener("click",this.actionHandler_)),this.actionHandler_=void 0,this.message_=void 0,this.actionText_=void 0,this.active=!1,this.checkQueue_()}.bind(this),this.Constant_.ANIMATION_LENGTH)},C.prototype.setActionHidden_=function(e){e?this.actionElement_.setAttribute("aria-hidden","true"):this.actionElement_.removeAttribute("aria-hidden")},s.register({constructor:C,classAsString:"MaterialSnackbar",cssClass:"mdl-js-snackbar",widget:!0});var u=function(e){this.element_=e,this.init()};window.MaterialSpinner=u,u.prototype.Constant_={MDL_SPINNER_LAYER_COUNT:4},u.prototype.CssClasses_={MDL_SPINNER_LAYER:"mdl-spinner__layer",MDL_SPINNER_CIRCLE_CLIPPER:"mdl-spinner__circle-clipper",MDL_SPINNER_CIRCLE:"mdl-spinner__circle",MDL_SPINNER_GAP_PATCH:"mdl-spinner__gap-patch",MDL_SPINNER_LEFT:"mdl-spinner__left",MDL_SPINNER_RIGHT:"mdl-spinner__right"},u.prototype.createLayer=function(e){var t=document.createElement("div");t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER),t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER+"-"+e);var s=document.createElement("div");s.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER),s.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);var i=document.createElement("div");i.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);var n=document.createElement("div");n.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER),n.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);for(var a=[s,i,n],l=0;l<a.length;l++){var o=document.createElement("div");o.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE),a[l].appendChild(o)}t.appendChild(s),t.appendChild(i),t.appendChild(n),this.element_.appendChild(t)},u.prototype.createLayer=u.prototype.createLayer,u.prototype.stop=function(){this.element_.classList.remove("is-active")},u.prototype.stop=u.prototype.stop,u.prototype.start=function(){this.element_.classList.add("is-active")},u.prototype.start=u.prototype.start,u.prototype.init=function(){if(this.element_){for(var e=1;e<=this.Constant_.MDL_SPINNER_LAYER_COUNT;e++)this.createLayer(e);this.element_.classList.add("is-upgraded")}},s.register({constructor:u,classAsString:"MaterialSpinner",cssClass:"mdl-js-spinner",widget:!0});var E=function(e){this.element_=e,this.init()};window.MaterialSwitch=E,E.prototype.Constant_={TINY_TIMEOUT:.001},E.prototype.CssClasses_={INPUT:"mdl-switch__input",TRACK:"mdl-switch__track",THUMB:"mdl-switch__thumb",FOCUS_HELPER:"mdl-switch__focus-helper",RIPPLE_EFFECT:"mdl-js-ripple-effect",RIPPLE_IGNORE_EVENTS:"mdl-js-ripple-effect--ignore-events",RIPPLE_CONTAINER:"mdl-switch__ripple-container",RIPPLE_CENTER:"mdl-ripple--center",RIPPLE:"mdl-ripple",IS_FOCUSED:"is-focused",IS_DISABLED:"is-disabled",IS_CHECKED:"is-checked"},E.prototype.onChange_=function(e){this.updateClasses_()},E.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},E.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},E.prototype.onMouseUp_=function(e){this.blur_()},E.prototype.updateClasses_=function(){this.checkDisabled(),this.checkToggleState()},E.prototype.blur_=function(){window.setTimeout(function(){this.inputElement_.blur()}.bind(this),this.Constant_.TINY_TIMEOUT)},E.prototype.checkDisabled=function(){this.inputElement_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},E.prototype.checkDisabled=E.prototype.checkDisabled,E.prototype.checkToggleState=function(){this.inputElement_.checked?this.element_.classList.add(this.CssClasses_.IS_CHECKED):this.element_.classList.remove(this.CssClasses_.IS_CHECKED)},E.prototype.checkToggleState=E.prototype.checkToLine truncated
!function(){"use strict";function e(e,t){if(e){if(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)){var s=document.createElement("span");s.classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),s.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT);var i=document.createElement("span");i.classList.add(t.CssClasses_.MDL_RIPPLE),s.appendChild(i),e.appendChild(s)}e.addEventListener("click",function(s){if("#"===e.getAttribute("href").charAt(0)){s.preventDefault();var i=e.href.split("#")[1],n=t.element_.querySelector("#"+i);t.resetTabState_(),t.resetPanelState_(),e.classList.add(t.CssClasses_.ACTIVE_CLASS),n.classList.add(t.CssClasses_.ACTIVE_CLASS)}})}}function t(e,t,s,i){function n(){var n=e.href.split("#")[1],a=i.content_.querySelector("#"+n);i.resetTabState_(t),i.resetPanelState_(s),e.classList.add(i.CssClasses_.IS_ACTIVE),a.classList.add(i.CssClasses_.IS_ACTIVE)}if(i.tabBar_.classList.contains(i.CssClasses_.JS_RIPPLE_EFFECT)){var a=document.createElement("span");a.classList.add(i.CssClasses_.RIPPLE_CONTAINER),a.classList.add(i.CssClasses_.JS_RIPPLE_EFFECT);var l=document.createElement("span");l.classList.add(i.CssClasses_.RIPPLE),a.appendChild(l),e.appendChild(a)}i.tabBar_.classList.contains(i.CssClasses_.TAB_MANUAL_SWITCH)||e.addEventListener("click",function(t){"#"===e.getAttribute("href").charAt(0)&&(t.preventDefault(),n())}),e.show=n}var s={upgradeDom:function(e,t){},upgradeElement:function(e,t){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,t){},register:function(e){},downgradeElements:function(e){}};s=function(){function e(e,t){for(var s=0;s<c.length;s++)if(c[s].className===e)return"undefined"!=typeof t&&(c[s]=t),c[s];return!1}function t(e){var t=e.getAttribute("data-upgraded");return null===t?[""]:t.split(",")}function s(e,s){var i=t(e);return i.indexOf(s)!==-1}function i(e,t,s){if("CustomEvent"in window&&"function"==typeof window.CustomEvent)return new CustomEvent(e,{bubbles:t,cancelable:s});var i=document.createEvent("Events");return i.initEvent(e,t,s),i}function n(t,s){if("undefined"==typeof t&&"undefined"==typeof s)for(var i=0;i<c.length;i++)n(c[i].className,c[i].cssClass);else{var l=t;if("undefined"==typeof s){var o=e(l);o&&(s=o.cssClass)}for(var r=document.querySelectorAll("."+s),_=0;_<r.length;_++)a(r[_],l)}}function a(n,a){if(!("object"==typeof n&&n instanceof Element))throw new Error("Invalid argument provided to upgrade MDL element.");var l=i("mdl-componentupgrading",!0,!0);if(n.dispatchEvent(l),!l.defaultPrevented){var o=t(n),r=[];if(a)s(n,a)||r.push(e(a));else{var _=n.classList;c.forEach(function(e){_.contains(e.cssClass)&&r.indexOf(e)===-1&&!s(n,e.className)&&r.push(e)})}for(var d,h=0,u=r.length;h<u;h++){if(d=r[h],!d)throw new Error("Unable to find a registered component for the given class.");o.push(d.className),n.setAttribute("data-upgraded",o.join(","));var E=new d.classConstructor(n);E[C]=d,p.push(E);for(var m=0,L=d.callbacks.length;m<L;m++)d.callbacks[m](n);d.widget&&(n[d.className]=E);var I=i("mdl-componentupgraded",!0,!1);n.dispatchEvent(I)}}}function l(e){Array.isArray(e)||(e=e instanceof Element?[e]:Array.prototype.slice.call(e));for(var t,s=0,i=e.length;s<i;s++)t=e[s],t instanceof HTMLElement&&(a(t),t.children.length>0&&l(t.children))}function o(t){var s="undefined"==typeof t.widget&&"undefined"==typeof t.widget,i=!0;s||(i=t.widget||t.widget);var n={classConstructor:t.constructor||t.constructor,className:t.classAsString||t.classAsString,cssClass:t.cssClass||t.cssClass,widget:i,callbacks:[]};if(c.forEach(function(e){if(e.cssClass===n.cssClass)throw new Error("The provided cssClass has already been registered: "+e.cssClass);if(e.className===n.className)throw new Error("The provided className has already been registered")}),t.constructor.prototype.hasOwnProperty(C))throw new Error("MDL component classes must not have "+C+" defined as a property.");var a=e(t.classAsString,n);a||c.push(n)}function r(t,s){var i=e(t);i&&i.callbacks.push(s)}function _(){for(var e=0;e<c.length;e++)n(c[e].className)}function d(e){if(e){var t=p.indexOf(e);p.splice(t,1);var s=e.element_.getAttribute("data-upgraded").split(","),n=s.indexOf(e[C].classAsString);s.splice(n,1),e.element_.setAttribute("data-upgraded",s.join(","));var a=i("mdl-componentdowngraded",!0,!1);e.element_.dispatchEvent(a)}}function h(e){var t=function(e){p.filter(function(t){return t.element_===e}).forEach(d)};if(e instanceof Array||e instanceof NodeList)for(var s=0;s<e.length;s++)t(e[s]);else{if(!(e instanceof Node))throw new Error("Invalid argument provided to downgrade MDL nodes.");t(e)}}var c=[],p=[],C="mdlComponentConfigInternal_";return{upgradeDom:n,upgradeElement:a,upgradeElements:l,upgradeAllRegistered:_,registerUpgradedCallback:r,register:o,downgradeElements:h}}(),s.ComponentConfigPublic,s.ComponentConfig,s.Component,s.upgradeDom=s.upgradeDom,s.upgradeElement=s.upgradeElement,s.upgradeElements=s.upgradeElements,s.upgradeAllRegistered=s.upgradeAllRegistered,s.registLine truncated
this.actionHandler_&&(this.actionElement_.textContent=this.actionText_,this.actionElement_.addEventListener("click",this.actionHandler_),this.setActionHidden_(!1)),this.textElement_.textContent=this.message_,this.element_.classList.add(this.cssClasses_.ACTIVE),this.element_.setAttribute("aria-hidden","false"),setTimeout(this.cleanup_.bind(this),this.timeout_)},C.prototype.showSnackbar=function(e){if(void 0===e)throw new Error("Please provide a data object with at least a message to display.");if(void 0===e.message)throw new Error("Please provide a message to be displayed.");if(e.actionHandler&&!e.actionText)throw new Error("Please provide action text with the handler.");this.active?this.queuedNotifications_.push(e):(this.active=!0,this.message_=e.message,e.timeout?this.timeout_=e.timeout:this.timeout_=2750,e.actionHandler&&(this.actionHandler_=e.actionHandler),e.actionText&&(this.actionText_=e.actionText),this.displaySnackbar_())},C.prototype.showSnackbar=C.prototype.showSnackbar,C.prototype.checkQueue_=function(){this.queuedNotifications_.length>0&&this.showSnackbar(this.queuedNotifications_.shift())},C.prototype.cleanup_=function(){this.element_.classList.remove(this.cssClasses_.ACTIVE),setTimeout(function(){this.element_.setAttribute("aria-hidden","true"),this.textElement_.textContent="",Boolean(this.actionElement_.getAttribute("aria-hidden"))||(this.setActionHidden_(!0),this.actionElement_.textContent="",this.actionElement_.removeEventListener("click",this.actionHandler_)),this.actionHandler_=void 0,this.message_=void 0,this.actionText_=void 0,this.active=!1,this.checkQueue_()}.bind(this),this.Constant_.ANIMATION_LENGTH)},C.prototype.setActionHidden_=function(e){e?this.actionElement_.setAttribute("aria-hidden","true"):this.actionElement_.removeAttribute("aria-hidden")},s.register({constructor:C,classAsString:"MaterialSnackbar",cssClass:"mdl-js-snackbar",widget:!0});var u=function(e){this.element_=e,this.init()};window.MaterialSpinner=u,u.prototype.Constant_={MDL_SPINNER_LAYER_COUNT:4},u.prototype.CssClasses_={MDL_SPINNER_LAYER:"mdl-spinner__layer",MDL_SPINNER_CIRCLE_CLIPPER:"mdl-spinner__circle-clipper",MDL_SPINNER_CIRCLE:"mdl-spinner__circle",MDL_SPINNER_GAP_PATCH:"mdl-spinner__gap-patch",MDL_SPINNER_LEFT:"mdl-spinner__left",MDL_SPINNER_RIGHT:"mdl-spinner__right"},u.prototype.createLayer=function(e){var t=document.createElement("div");t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER),t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER+"-"+e);var s=document.createElement("div");s.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER),s.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);var i=document.createElement("div");i.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);var n=document.createElement("div");n.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER),n.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);for(var a=[s,i,n],l=0;l<a.length;l++){var o=document.createElement("div");o.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE),a[l].appendChild(o)}t.appendChild(s),t.appendChild(i),t.appendChild(n),this.element_.appendChild(t)},u.prototype.createLayer=u.prototype.createLayer,u.prototype.stop=function(){this.element_.classList.remove("is-active")},u.prototype.stop=u.prototype.stop,u.prototype.start=function(){this.element_.classList.add("is-active")},u.prototype.start=u.prototype.start,u.prototype.init=function(){if(this.element_){for(var e=1;e<=this.Constant_.MDL_SPINNER_LAYER_COUNT;e++)this.createLayer(e);this.element_.classList.add("is-upgraded")}},s.register({constructor:u,classAsString:"MaterialSpinner",cssClass:"mdl-js-spinner",widget:!0});var E=function(e){this.element_=e,this.init()};window.MaterialSwitch=E,E.prototype.Constant_={TINY_TIMEOUT:.001},E.prototype.CssClasses_={INPUT:"mdl-switch__input",TRACK:"mdl-switch__track",THUMB:"mdl-switch__thumb",FOCUS_HELPER:"mdl-switch__focus-helper",RIPPLE_EFFECT:"mdl-js-ripple-effect",RIPPLE_IGNORE_EVENTS:"mdl-js-ripple-effect--ignore-events",RIPPLE_CONTAINER:"mdl-switch__ripple-container",RIPPLE_CENTER:"mdl-ripple--center",RIPPLE:"mdl-ripple",IS_FOCUSED:"is-focused",IS_DISABLED:"is-disabled",IS_CHECKED:"is-checked"},E.prototype.onChange_=function(e){this.updateClasses_()},E.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},E.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},E.prototype.onMouseUp_=function(e){this.blur_()},E.prototype.updateClasses_=function(){this.checkDisabled(),this.checkToggleState()},E.prototype.blur_=function(){window.setTimeout(function(){this.inputElement_.blur()}.bind(this),this.Constant_.TINY_TIMEOUT)},E.prototype.checkDisabled=function(){this.inputElement_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},E.prototype.checkDisabled=E.prototype.checkDisabled,E.prototype.checkToggleState=function(){this.inputElement_.checked?this.element_.classList.add(tLine truncated
//# sourceMappingURL=material.min.js.map
+2
View File
@@ -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) {
-4
View File
@@ -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

@@ -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

-4
View File
@@ -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

@@ -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

@@ -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
View 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

@@ -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