moonlight-stream/moonlight-chrome
1
0
Fork 0
mirror of https://github.com/moonlight-stream/moonlight-chrome.git synced 2025-08-17 16:46:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modernized the UI

Browse Source 
Updated Material Design Light
Added the Roboto font
Updated the icons font
Replaced existing icons
This commit is contained in:
Calcyfer 2017-05-02 21:24:50 +02:00
parent 476703d442
commit 4242eaa37b
19 changed files with 605 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
index.html
View File

@ -1,85 +1,124 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1"> <meta http-equiv="Expires" content="-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moonlight</title> <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/material.min.css">
<link rel="stylesheet" href="static/css/style.css"> <link rel="stylesheet" href="static/css/style.css">
</head> <link rel="stylesheet" href="static/css/material-icons.css">
<body data-name="moonlight-chrome" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}"> </head>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <body data-name="moonlight-chrome" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}">
<header class="mdl-layout__header"> <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"> <div class="mdl-layout__header-row">
<!-- Navigation on the right --> <span id='backIcon'><i class="material-icons">keyboard_arrow_left</i></span>
<img src="static/res/ic_arrow_back_white_24px.svg" id='backIcon'></img>
<!-- Title --> <!-- Title -->
<span class="mdl-layout-title">Moonlight</span> <span class="mdl-layout-title">MOON<span>LIGHT</span></span>
<!-- Add spacer, to align navigation to the right --> <!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div> <div class="mdl-layout-spacer"></div>
<div class="cancel-current" id="quitCurrentApp"> <!-- Navigation -->
<img src="static\res\ic_remove_circle_white_24px.svg"> <nav class="mdl-navigation">
<span class="game-title">Quit Current App</span>
</div>
</div>
</header>
<main id="main-content" class="mdl-layout__content">
<div id="streamSettings"> <div class="nav-menu-parent">
<div class="mdl-select"> <div id="resolutionMenu">
<select id="selectResolution"> <button id="selectResolution" data-value="1920:1080" class="mdl-button mdl-js-button">
<option value="1280:720">720p</option> 1080p
<option value="1920:1080">1080p</option> </button>
<option value="3840:2160">4K</option>
</select>
</div> </div>
<div class="mdl-select">
<select id="selectFramerate"> <ul class="resolutionMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
<option value="30">30 FPS</option> for="selectResolution">
<option value="60">60 FPS</option> <li class="mdl-menu__item" data-value="1280:720">720p</li>
</select> <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>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="remoteAudioEnabledSwitch" id="remoteAudioEnabledSwitchContainer"> </div>
<input type="checkbox" id="remoteAudioEnabledSwitch" class="mdl-switch__input" checked>
<span class="mdl-switch__label">Remote audio off/on</span> <div class="nav-menu-parent">
</label> <div id="framerateMenu">
<output id='bitrateField'>10 Mbps</output> <button id="selectFramerate" data-value="60" class="mdl-button mdl-js-button">
60 FPS
</button>
</div>
<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"> <input id="bitrateSlider" class="mdl-slider mdl-js-slider" type="range" min="0" max="100" step="0.5" value="10">
</div> </div>
<div id="hostSettings"> <div id="bandwidthTooltip" class="mdl-tooltip" for="bandwidthMenu">
<div class="mdl-grid" id='host-grid'> Bandwidth
<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
</div>
</div> </div>
</div> </div>
<div id="game-grid" class="mdl-grid"> <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> </div>
<div id="listener"></div> <!-- NaCl module placeholder. NaCl gets thrown into here --> <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">
<div class="page-title">Your Games</div>
</div>
<div id="listener"></div>
<!-- NaCl module placeholder. NaCl gets thrown into here -->
<div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"> <div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
<h5 id="loadingMessage"></h5> <h5 id="loadingMessage"></h5>
</div> </div>
<div id="naclSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"> <div id="naclSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
<h5 id="naclSpinnerMessage"></h5> <h5 id="naclSpinnerMessage"></h5>
</div> </div>
</main> </main>
</div> </div>
<script defer src="static/js/jquery-2.2.0.min.js"></script> <script defer src="static/js/jquery-2.2.0.min.js"></script>
<script defer src="static/js/material.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/messages.js"></script>
<script type="text/javascript" src="static/js/common.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/index.js"></script>
<script type="text/javascript" src="static/js/utils.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/dns.js"></script>
<script type="text/javascript" src="static/js/mdns-browser/main.js"></script> <script type="text/javascript" src="static/js/mdns-browser/main.js"></script>
<dialog id="pairingDialog" class="mdl-dialog">
<dialog id="pairingDialog" class="mdl-dialog">
<h3 class="mdl-dialog__title">Pairing</h3> <h3 class="mdl-dialog__title">Pairing</h3>
<div class="mdl-dialog__content"> <div class="mdl-dialog__content">
<p id="pairingDialogText"> <p id="pairingDialogText">
@ -87,11 +126,10 @@
</p> </p>
</div> </div>
<div class="mdl-dialog__actions"> <div class="mdl-dialog__actions">
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelPairingDialog">Cancel</button> <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="cancelPairingDialog">Cancel</button>
</div> </div>
</dialog> </dialog>
<dialog id="quitAppDialog" class="mdl-dialog">
<dialog id="quitAppDialog" class="mdl-dialog">
<h3 class="mdl-dialog__title">Quit Running App?</h3> <h3 class="mdl-dialog__title">Quit Running App?</h3>
<div class="mdl-dialog__content"> <div class="mdl-dialog__content">
<p id="quitAppDialogText"> <p id="quitAppDialogText">
@ -99,12 +137,11 @@
</p> </p>
</div> </div>
<div class="mdl-dialog__actions"> <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 mdl-js-ripple-effect" id="cancelQuitApp">No</button>
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueQuitApp">Yes</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> </div>
</dialog> </dialog>
<dialog id="deleteHostDialog" class="mdl-dialog">
<dialog id="deleteHostDialog" class="mdl-dialog">
<h3 class="mdl-dialog__title">Delete PC</h3> <h3 class="mdl-dialog__title">Delete PC</h3>
<div class="mdl-dialog__content"> <div class="mdl-dialog__content">
<p id="deleteHostDialogText"> <p id="deleteHostDialogText">
@ -112,30 +149,26 @@
</p> </p>
</div> </div>
<div class="mdl-dialog__actions"> <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 mdl-js-ripple-effect" id="cancelDeleteHost">No</button>
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueDeleteHost">Yes</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> </div>
</dialog> </dialog>
<dialog id="addHostDialog" class="mdl-dialog">
<dialog id="addHostDialog" class="mdl-dialog"> <h3 class="mdl-dialog__title">Add Host Manually</h3>
<h3 class="mdl-dialog__title">Add PC Manually</h3>
<div class="mdl-dialog__content"> <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"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="dialogInputHost"/> <input class="mdl-textfield__input" type="text" id="dialogInputHost"/>
<label class="mdl-textfield__label" for="dialogInputHost">IP Address or Hostname of Geforce PC</label> <label class="mdl-textfield__label" for="dialogInputHost">IP Address or Hostname of Geforce PC</label>
</div> </div>
</div> </div>
<div class="mdl-dialog__actions"> <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 mdl-js-ripple-effect" id="cancelAddHost">Cancel</button>
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueAddHost">Continue</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> </div>
</dialog> </dialog>
<div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
<div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
<div class="mdl-snackbar__text"></div> <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. --> <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> </div>
</body> </body>
</html> </html>

2
manifest.json
View File

@ -13,7 +13,7 @@
"app": { "app": {
"background": { "background": {
"persistent": false, "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"] "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
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';
}

5
static/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

104
static/css/roboto.css Normal file
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 */

263
static/css/style.css
View File

@ -1,7 +1,98 @@
.mdl-layout__header-row { body {
background-color: #282C38;
color: #fff; 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 { .mdl-button {
color: #fff !important; color: #fff !important;
} }
@ -13,27 +104,20 @@
color:#fff; color:#fff;
padding:25px; padding:25px;
} }
.host-container {
position: relative;
cursor: pointer;
width: 150px !important;
height: 150px !important;
margin-right: 16px;
margin-bottom: 16px;
}
#backIcon { #backIcon {
height: 32px;
width: 32px; width: 32px;
margin-left: -20px; height: 24px;
padding-right: 20px; position: fixed;
top: 16px;
left: 28px;
} }
#backIcon:hover { #backIcon:hover {
cursor: pointer; cursor: pointer;
} }
.mdl-dialog { .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 { .mdl-dialog__title {
padding: 24px 24px 0; padding: 24px 24px 0;
@ -42,7 +126,13 @@
} }
.mdl-dialog__content { .mdl-dialog__content {
padding: 20px 24px 24px 24px; 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 { #naclSpinner {
display: none; display: none;
@ -76,31 +166,84 @@
.mdl-snackbar { .mdl-snackbar {
min-width:0px; min-width:0px;
} }
main { #host-grid, #game-grid {
padding: 50px 100px; 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; text-align: center;
display: block; width: 170px;
padding-top: 15px; height: 170px;
min-height: 170px;
margin: 15px;
cursor: pointer;
transition: all .2s ease-in-out;
} }
#hostSettings { #host-grid .mdl-card:hover, #game-grid .mdl-card:hover {
padding: 5px 10px; transform: scale(1.1);
border: 1px dashed;
margin: 10px 0;
} }
#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; margin: 0;
} }
#hostSettings .mdl-textfield { #host-grid .mdl-textfield {
width: 200px; width: 200px;
margin-right: 20px; margin-right: 20px;
margin-bottom: 0px; margin-bottom: 0px;
} }
#hostSettings #GFEHostIPField { #host-grid #GFEHostIPField {
padding-bottom: 0px; padding-bottom: 0px;
} }
#hostSettings #selectHost { #host-grid #selectHost {
padding: 0px; padding: 0px;
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
@ -109,22 +252,22 @@ main {
margin-right: 20px; margin-right: 20px;
background: none; background: none;
} }
#hostSettings .button-holder { #host-grid .button-holder {
padding: 0px; padding: 0px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.remove-host { .remove-host {
position:absolute; position:absolute;
right:0px; right:5px;
top:0px; top:5px;
width:24px; width:24px;
height:24px; height:24px;
margin-top: 15px;
/*to account for the shadow*/
cursor:pointer;
z-index: 5; 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; border: 0;
cursor: pointer; cursor: pointer;
} }
@ -144,63 +287,21 @@ main {
} }
.fullscreen { .fullscreen {
height: 100vh !important; height: 100vh !important;
overflow: none !important; overflow: hidden !important;
margin: auto !important; margin: auto !important;
padding: 0 !important; padding: 0 !important;
width 100%;
border: none !important; 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 { .current-game {
border: 3px solid green; border: 2px solid #00A3C6;
}
.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;
} }
.host-cell-inactive { .host-cell-inactive {
border: 3px solid red; border: 3px solid #8e0000;
} }
.host-cell:hover { .host-cell:hover {
cursor: pointer; cursor: pointer;
color: #000 !important; 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 { .cancel-current:hover {
cursor: pointer; cursor: pointer;
} }

BIN
static/fonts/MaterialIcons-Regular.woff
View File

Binary file not shown.

BIN
static/fonts/MaterialIcons-Regular.woff2 Normal file
View File

Binary file not shown.

149
static/js/index.js
View File

@ -11,8 +11,8 @@ var windowState = 'normal'; // chrome's windowState, possible values: 'normal' o
function attachListeners() { function attachListeners() {
changeUiModeForNaClLoad(); changeUiModeForNaClLoad();
$('#selectResolution').on('change', saveResolution); $('.resolutionMenu li').on('click', saveResolution);
$('#selectFramerate').on('change', saveFramerate); $('.framerateMenu li').on('click', saveFramerate);
$('#bitrateSlider').on('input', updateBitrateField); // input occurs every notch you slide $('#bitrateSlider').on('input', updateBitrateField); // input occurs every notch you slide
$('#bitrateSlider').on('change', saveBitrate); // change occurs once the mouse lets go. $('#bitrateSlider').on('change', saveBitrate); // change occurs once the mouse lets go.
$("#remoteAudioEnabledSwitch").on('click', saveRemoteAudio); $("#remoteAudioEnabledSwitch").on('click', saveRemoteAudio);
@ -64,15 +64,15 @@ function onBoundsChanged() {
} }
function changeUiModeForNaClLoad() { function changeUiModeForNaClLoad() {
$('.mdl-layout__header').children().hide(); $('#main-navigation').children().hide();
$("#main-content").children().not("#listener, #naclSpinner").hide(); $("#main-content").children().not("#listener, #naclSpinner").hide();
$('#naclSpinnerMessage').text('Loading Moonlight plugin...'); $('#naclSpinnerMessage').text('Loading Moonlight plugin...');
$('#naclSpinner').css('display', 'inline-block'); $('#naclSpinner').css('display', 'inline-block');
} }
function restoreUiAfterNaClLoad() { function restoreUiAfterNaClLoad() {
$('.mdl-layout__header').children().not("#quitCurrentApp").show(); $('#main-navigation').children().not("#quitCurrentApp").show();
$("#main-content").children().not("#listener, #naclSpinner, #gameSelection").show(); $("#main-content").children().not("#listener, #naclSpinner, #game-grid").show();
$('#naclSpinner').hide(); $('#naclSpinner').hide();
$('#loadingSpinner').css('display', 'none'); $('#loadingSpinner').css('display', 'none');
showHostsAndSettingsMode(); showHostsAndSettingsMode();
@ -322,10 +322,11 @@ function addHost() {
// host is an NvHTTP object // host is an NvHTTP object
function addHostToGrid(host, ismDNSDiscovered=false) { function addHostToGrid(host, ismDNSDiscovered) {
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 }); var outerDiv = $("<div>", {class: 'host-container mdl-card mdl-shadow--4dp', id: 'host-container-' + host.serverUid });
$(cell).prepend($("<img>", {src: "static/res/ic_desktop_windows_white_24px.svg"})); 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}); var removalButton = $("<div>", {class: "remove-host", id: "removeHostButton-" + host.serverUid});
removalButton.off('click'); removalButton.off('click');
removalButton.click(function () { removalButton.click(function () {
@ -347,7 +348,7 @@ function addHostToGrid(host, ismDNSDiscovered=false) {
function removeClicked(host) { function removeClicked(host) {
var deleteHostDialog = document.querySelector('#deleteHostDialog'); var deleteHostDialog = document.querySelector('#deleteHostDialog');
document.getElementById('deleteHostDialogText').innerHTML = 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(); deleteHostDialog.showModal();
$('#cancelDeleteHost').off('click'); $('#cancelDeleteHost').off('click');
@ -393,8 +394,9 @@ function showApps(host) {
console.log('Moved into showApps, but `host` did not initialize properly! Failing.'); console.log('Moved into showApps, but `host` did not initialize properly! Failing.');
return; return;
} }
console.log(host);
$('#quitCurrentApp').show(); $('#quitCurrentApp').show();
$("#game-grid").empty(); $("#gameList .game-container").remove();
// Show a spinner while the applist loads // Show a spinner while the applist loads
$('#naclSpinnerMessage').text('Loading apps...'); $('#naclSpinnerMessage').text('Loading apps...');
@ -403,6 +405,8 @@ function showApps(host) {
host.getAppList().then(function (appList) { host.getAppList().then(function (appList) {
$('#naclSpinner').hide(); $('#naclSpinner').hide();
$("#game-grid").show();
// if game grid is populated, empty it // if game grid is populated, empty it
appList.forEach(function (app) { appList.forEach(function (app) {
host.getBoxArt(app.id).then(function (resolvedPromise) { 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. // 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 // This isn't perfect: there's lots of RTTs before the logic prevents anything
var imageBlob = new Blob([resolvedPromise], {type: "image/png"}); 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 () { $('#game-'+app.id).on('click', function () {
startGame(host, app.id); startGame(host, app.id);
}); });
@ -430,7 +440,11 @@ function showApps(host) {
// double clicking the button will cause multiple box arts to appear. // double clicking the button will cause multiple box arts to appear.
// to mitigate this we ensure we don't add a duplicate. // 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 // 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 () { $('#game-'+app.id).on('click', function () {
startGame(host, app.id); startGame(host, app.id);
}); });
@ -454,14 +468,15 @@ function showApps(host) {
// set the layout to the initial mode you see when you open moonlight // set the layout to the initial mode you see when you open moonlight
function showHostsAndSettingsMode() { function showHostsAndSettingsMode() {
console.log('entering show hosts and settings mode.'); 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(); $('#backIcon').hide();
$('#quitCurrentApp').hide(); $('#quitCurrentApp').hide();
$(".mdl-layout__header").show();
$("#main-content").children().not("#listener, #loadingSpinner, #naclSpinner").show();
$("#game-grid").hide();
$("#main-content").removeClass("fullscreen"); $("#main-content").removeClass("fullscreen");
$("#listener").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 // We're no longer in a host-specific screen. Null host, and add it back to the polling list
if(api) { if(api) {
beginBackgroundPollingOfHost(api); beginBackgroundPollingOfHost(api);
@ -472,13 +487,15 @@ function showHostsAndSettingsMode() {
function showAppsMode() { function showAppsMode() {
console.log("entering show apps mode."); console.log("entering show apps mode.");
$('#backIcon').show(); $('#backIcon').show();
$(".mdl-layout__header").show(); $("#main-navigation").show();
$("#main-content").children().not("#listener, #loadingSpinner, #naclSpinner").show(); $("#main-content").children().not("#listener, #loadingSpinner, #naclSpinner").show();
$("#streamSettings").hide(); $("#streamSettings").hide();
$("#hostSettings").hide(); $(".nav-menu-parent").hide();
$("#externalAudioBtn").hide();
$("#host-grid").hide();
$("#settings").hide();
$("#main-content").removeClass("fullscreen"); $("#main-content").removeClass("fullscreen");
$("#listener").removeClass("fullscreen"); $("#listener").removeClass("fullscreen");
$("body").css('backgroundColor', 'white');
} }
@ -527,9 +544,9 @@ function startGame(host, appID) {
return; return;
} }
var frameRate = $("#selectFramerate").val(); var frameRate = $('#selectFramerate').data('value').toString();
var streamWidth = $('#selectResolution option:selected').val().split(':')[0]; var streamWidth = $('#selectResolution').data('value').split(':')[0];
var streamHeight = $('#selectResolution option:selected').val().split(':')[1]; 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. // we told the user it was in Mbps. We're dirty liars and use Kbps behind their back.
var bitrate = parseInt($("#bitrateSlider").val()) * 1000; var bitrate = parseInt($("#bitrateSlider").val()) * 1000;
console.log('startRequest:' + host.address + ":" + streamWidth + ":" + streamHeight + ":" + frameRate + ":" + bitrate); 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, host.launchApp(appID,
streamWidth + "x" + streamHeight + "x" + frameRate, streamWidth + "x" + streamHeight + "x" + frameRate,
@ -576,10 +593,9 @@ function playGameMode() {
console.log("entering play game mode"); console.log("entering play game mode");
isInGame = true; isInGame = true;
$(".mdl-layout__header").hide(); $("#main-navigation").hide();
$("#main-content").children().not("#listener, #loadingSpinner").hide(); $("#main-content").children().not("#listener, #loadingSpinner").hide();
$("#main-content").addClass("fullscreen"); $("#main-content").addClass("fullscreen");
$("body").css('backgroundColor', 'black');
chrome.app.window.current().fullscreen(); chrome.app.window.current().fullscreen();
fullscreenNaclModule(); fullscreenNaclModule();
@ -589,8 +605,8 @@ function playGameMode() {
// Maximize the size of the nacl module by scaling and resizing appropriately // Maximize the size of the nacl module by scaling and resizing appropriately
function fullscreenNaclModule() { function fullscreenNaclModule() {
var streamWidth = $('#selectResolution option:selected').val().split(':')[0]; var streamWidth = $('#selectResolution').data('value').split(':')[0];
var streamHeight = $('#selectResolution option:selected').val().split(':')[1]; var streamHeight = $('#selectResolution').data('value').split(':')[1];
var screenWidth = window.innerWidth; var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight; var screenHeight = window.innerHeight;
@ -678,13 +694,17 @@ function storeData(key, data, callbackFunction) {
} }
function saveResolution() { function saveResolution() {
var chosenResolution = $(this).data('value');
$('#selectResolution').text($(this).text()).data('value', chosenResolution);
storeData('resolution', chosenResolution, null);
updateDefaultBitrate(); updateDefaultBitrate();
storeData('resolution', $('#selectResolution').val(), null);
} }
function saveFramerate() { function saveFramerate() {
var chosenFramerate = $(this).data('value');
$('#selectFramerate').text($(this).text()).data('value', chosenFramerate);
storeData('frameRate', chosenFramerate, null);
updateDefaultBitrate(); updateDefaultBitrate();
storeData('frameRate', $('#selectFramerate').val(), null);
} }
// storing data in chrome.storage takes the data as an object, and shoves it into JSON to store // 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() { function saveRemoteAudio() {
console.log('saving remote audio state'); // MaterialDesignLight uses the mouseup trigger, so we give it some time to change the class name before
// problem: when off, and the app is just starting, a tick to the switch doesn't always toggle it // checking the new state
// second problem: this callback is called immediately after clicking, so the HTML class `is-checked` isn't toggled yet setTimeout(function() {
// to solve the second problem, we invert the boolean. This has worked in all cases I've tried, except for the first case var remoteAudioState = $("#remoteAudioEnabledSwitch").parent().hasClass('is-checked');
storeData('remoteAudio', !$("#remoteAudioEnabledSwitch").parent().hasClass('is-checked'), null); console.log('saving remote audio state : ' + remoteAudioState);
storeData('remoteAudio', remoteAudioState, null);
}, 100);
} }
function updateDefaultBitrate() { function updateDefaultBitrate() {
var res = $('#selectResolution').val(); var res = $('#selectResolution').data('value');
var frameRate = $('#selectFramerate').val(); var frameRate = $('#selectFramerate').data('value').toString();
if (res.lastIndexOf("1920:1080", 0) === 0) { if (res ==="1920:1080") {
if (frameRate.lastIndexOf("30", 0) === 0) { // 1080p, 30fps if (frameRate === "30") { // 1080p, 30fps
$('#bitrateSlider')[0].MaterialSlider.change('10'); $('#bitrateSlider')[0].MaterialSlider.change('10');
} else { // 1080p, 60fps } else { // 1080p, 60fps
$('#bitrateSlider')[0].MaterialSlider.change('20'); $('#bitrateSlider')[0].MaterialSlider.change('20');
} }
} else if (res.lastIndexOf("1280:720") === 0) { } else if (res === "1280:720") {
if (frameRate.lastIndexOf("30", 0) === 0) { // 720, 30fps if (frameRate === "30") { // 720, 30fps
$('#bitrateSlider')[0].MaterialSlider.change('5'); $('#bitrateSlider')[0].MaterialSlider.change('5');
} else { // 720, 60fps } else { // 720, 60fps
$('#bitrateSlider')[0].MaterialSlider.change('10'); $('#bitrateSlider')[0].MaterialSlider.change('10');
} }
} else if (res.lastIndexOf("3840:2160", 0) === 0) { } else if (res === "3840:2160") {
if (frameRate.lastIndexOf("30", 0) === 0) { // 2160p, 30fps if (frameRate === "30") { // 2160p, 30fps
$('#bitrateSlider')[0].MaterialSlider.change('40'); $('#bitrateSlider')[0].MaterialSlider.change('40');
} else { // 2160p, 60fps } else { // 2160p, 60fps
$('#bitrateSlider')[0].MaterialSlider.change('80'); $('#bitrateSlider')[0].MaterialSlider.change('80');
@ -750,33 +772,51 @@ function onWindowLoad(){
if(chrome.storage) { if(chrome.storage) {
// load stored resolution prefs // load stored resolution prefs
chrome.storage.sync.get('resolution', function(previousValue) { chrome.storage.sync.get('resolution', function(previousValue) {
$('#selectResolution').val(previousValue.resolution != null ? previousValue.resolution : '1280:720'); if(previousValue.resolution != null) {
}); $('.resolutionMenu li').each(function () {
chrome.storage.sync.get('remoteAudio', function(previousValue) { if ($(this).data('value') === previousValue.resolution) {
if(previousValue.remoteAudio == null) { $('#selectResolution').text($(this).text()).data('value', previousValue.resolution);
document.querySelector('#remoteAudioEnabledSwitchContainer').MaterialSwitch.off();
return;
} else if(previousValue.remoteAudio == false) {
document.querySelector('#remoteAudioEnabledSwitchContainer').MaterialSwitch.off();
} else {
document.querySelector('#remoteAudioEnabledSwitchContainer').MaterialSwitch.on();
} }
}); });
}
});
// 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 // load stored framerate prefs
chrome.storage.sync.get('frameRate', function(previousValue) { 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 // load stored bitrate prefs
chrome.storage.sync.get('bitrate', function(previousValue) { chrome.storage.sync.get('bitrate', function(previousValue) {
$('#bitrateSlider')[0].MaterialSlider.change(previousValue.bitrate != null ? previousValue.bitrate : '10'); $('#bitrateSlider')[0].MaterialSlider.change(previousValue.bitrate != null ? previousValue.bitrate : '10');
updateBitrateField(); updateBitrateField();
}); });
// load the HTTP cert if we have one. // load the HTTP cert if we have one.
chrome.storage.sync.get('cert', function(savedCert) { chrome.storage.sync.get('cert', function(savedCert) {
if (savedCert.cert != null) { // we have a saved cert if (savedCert.cert != null) { // we have a saved cert
pairingCert = savedCert.cert; pairingCert = savedCert.cert;
} }
}); });
chrome.storage.sync.get('uniqueid', function(savedUniqueid) { chrome.storage.sync.get('uniqueid', function(savedUniqueid) {
if (savedUniqueid.uniqueid != null) { // we have a saved uniqueid if (savedUniqueid.uniqueid != null) { // we have a saved uniqueid
myUniqueid = savedUniqueid.uniqueid; myUniqueid = savedUniqueid.uniqueid;
@ -785,6 +825,7 @@ function onWindowLoad(){
storeData('uniqueid', myUniqueid, null); storeData('uniqueid', myUniqueid, null);
} }
}); });
// load previously connected hosts, which have been killed into an object, and revive them back into a class // 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) { chrome.storage.sync.get('hosts', function(previousValue) {
hosts = previousValue.hosts != null ? previousValue.hosts : {}; hosts = previousValue.hosts != null ? previousValue.hosts : {};

6
static/js/material.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
static/res/ic_add_circle_white_24px.svg
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>
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

4
static/res/ic_add_to_queue_white_48px.svg Normal file
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 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>
Side by Side

After

Width:  |  Height:  |  Size: 313 B

4
static/res/ic_arrow_back_white_24px.svg
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>
Side by Side

Before

Width:  |  Height:  |  Size: 224 B

4
static/res/ic_desktop_windows_white_24px.svg
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="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>
Side by Side

Before

Width:  |  Height:  |  Size: 274 B

4
static/res/ic_remove_circle_outline_white_48px.svg Normal file
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="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>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

4
static/res/ic_remove_circle_white_24px.svg
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 11H7v-2h10v2z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 246 B

9
static/res/ic_remove_from_queue_white_48px.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

4
static/res/ic_tv_white_48px.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 273 B

4
static/res/ic_videogame_asset_white_48px.svg Normal file
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 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>
Side by Side

After

Width:  |  Height:  |  Size: 501 B