Rooba
/
synclounge
mirror of https://github.com/synclounge/synclounge.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15 from samcm/updated-ui 

Updated-UI
This commit is contained in:
samcm 2016-12-13 17:44:29 +13:00 committed by GitHub
parent efb6fca323 2cbaae3625
commit 98c2bb9592
8 changed files with 3599 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3340
app/css/animate.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

8
app/css/scroll.css
View File

@ -19,23 +19,23 @@
::-webkit-scrollbar {
width: 5px; /* 1px wider than Lion. */
/* This is more usable for users trying to click it. */
background-color: rgba(0,0,0,0);
background-color: rgba(229,160,13,0);
-webkit-border-radius: 100px;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
background-color: rgba(0, 0, 0, 0.09);
background-color: rgba(229, 160, 13, 1);
}
/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
/* This is the EXACT color of Mac OS scrollbars.
Yes, I pulled out digital color meter */
background: rgba(0,0,0,0.5);
background: rgba(229,160,13,1);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
background: rgba(0,0,0,0.61); /* Some darker color when you click it */
background: rgba(229,160,13,0.61); /* Some darker color when you click it */
-webkit-border-radius: 100px;
}

40
app/css/style.css
View File

@ -1,4 +1,10 @@
body { min-width:650px; }
body {
min-width:650px;
}
.container-test {
top: 0px;
}
.plex-shark {
background-color: #282A2D !important;
@ -12,8 +18,12 @@ body { min-width:650px; }
background-color: #3F4245 !important;
}
.plex-riverbed-text {
color: #3F4245;
}
.plex-white {
background-color: #F2F3F4 !important;
background-color: #F9F9F9 !important;
}
@ -53,20 +63,20 @@ body { min-width:650px; }
.plexTogetherInfo {
position: absolute;
bottom: 0px;
bottom: 2px;
/* border-top: 1px solid #F2F3F4; */
box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.16);
padding-top: 3px;
height: 199px
/* padding-top: 7.5px; */
height: 51px
}
.plexTogetherInfoButton {
position: absolute;
bottom: 0px;
/* border-top: 1px solid #F2F3F4; */
/* box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.16); */
padding-top: 3px;
height: 42px
box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.16);
padding-top: 7.5px;
height: 51px
}
.plexAccountInfo {
@ -107,7 +117,7 @@ body { min-width:650px; }
}
.sideNav {
background-color: #3F4245;
background-color: #282A2D;
cursor: default;
}
@ -115,6 +125,12 @@ body { min-width:650px; }
background-color: #282A2D;
}
.topbar {
width: 165px;
height: 50px;
display: block;
}
/* Photon */
.window {
@ -156,7 +172,7 @@ body { min-width:650px; }
}
.sidebar {
background-color: #3F4245
background-color: #282A2D
}
.nav-group-title {
@ -189,7 +205,7 @@ Main Components
-------------------------------- */
.cd-accordion-menu {
width: 100%;
background: #3F4245;
background: #282A2D;
/* margin: 4em auto; */
/* box-shadow: 0 4px 40px #70ac76; */
}
@ -212,7 +228,7 @@ Main Components
position: relative;
display: block;
padding: 18px 18px 18px 64px;
background: #3F4245;
background: #282A2D;
box-shadow: inset 0 -1px #555960;
color: #ffffff;
font-size: 1.6rem;

249
app/home.html
View File

@ -1,85 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<title>Plex Together</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/photon.min2.css">
<link rel="stylesheet" type="text/css" href="css/materialize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/scroll.css">
<link rel="stylesheet" type="text/css" href="css/titlebar.css">
<link rel="stylesheet" href="./css/submitButton/component.css">
<link rel="stylesheet" href="./css/submitButton/normalize.css">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<head>
<title>Plex Together</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/photon.min2.css">
<link rel="stylesheet" type="text/css" href="css/materialize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/scroll.css">
<link rel="stylesheet" type="text/css" href="css/titlebar.css">
<link rel="stylesheet" href="./css/submitButton/component.css">
<link rel="stylesheet" href="./css/submitButton/normalize.css">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Javascript -->
<script src="js/vendor/jquery.min.js"></script>
<script type="text/javascript">
window.Hammer = require('./js/hammer.min.js');
</script>
<script src="js/materialize.js"></script>
<!-- <script src="js/menu.js" charset="utf-8"></script> -->
</head>
<!-- Javascript -->
<script src="js/vendor/jquery.min.js"></script>
<script type="text/javascript">
window.Hammer = require('./js/hammer.min.js');
</script>
<script src="js/materialize.js"></script>
<!-- <script src="js/menu.js" charset="utf-8"></script> -->
</head>
<body>
<div class="window">
<div class="window-content">
<div id="TopBar" style="display:block">
</div>
<div class="container">
<div class="pane-group plex-riverbed" style="top: 64px">
<div class="pane-sm sidebar plexServerClientInfo" style="height: 100%">
<ul class="cd-accordion-menu animated">
<li class="has-children">
<input type="checkbox" name ="group-1" id="group-1" checked>
<label for="group-1" style="color: #E5A00D;">Plex Player
<i class="material-icons right" style="float: right; color: #F2F3F4; margin-top: -1px; margin-right: -22px; opacity: 0.5;">arrow_drop_down</i>
<!-- <p class="playerDropdown" style="float: right; color: #F2F3F4; margin-top: 0px; margin-right: -15px; opacity: 0.5;">Hide</p> -->
</label>
<ul id=plexPlayers>
<li style="line-height: 24px"><a href="#0"></a></li>
<li style="line-height: 24px"><a href="#0"></a></li>
<li style="line-height: 24px"><a href="#0"></a></li>
</ul>
</li>
</ul>
<ul class="cd-accordion-menu animated">
<li class="has-children">
<input type="checkbox" name ="group-2" id="group-2" checked>
<label for="group-2" style="color: #E5A00D;">Plex Server
<i class="material-icons right" style="float: right; color: #F2F3F4; margin-top: -1px; margin-right: -22px; opacity: 0.5;">arrow_drop_down</i>
<!-- <p class="serverDropdown" style="float: right; color: #F2F3F4; margin-top: 0px; margin-right: -15px; opacity: 0.5;">Hide</p> -->
</label>
<ul id=plexServers>
<body>
<div class="window">
<div class="window-content">
<div class="container">
<div class="pane-group plex-shark">
<div class="topbar" id="TopBar"></div>
<div class="pane-sm sidebar plexServerClientInfo" style="height: calc(100% - 50px); top: 50px;box-shadow:0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 2px 0px 0 rgba(0, 0, 0, 0.12);">
<ul class="cd-accordion-menu animated" style="margin: 0">
<li class="has-children">
<input type="checkbox" name="group-1" id="group-1" checked>
<label for="group-1" style="color: #E5A00D; margin: 0; padding-top: 5px">Plex Player
<i class="material-icons right" style="float: right; color: #F2F3F4; margin-top: -1px; margin-right: -22px; opacity: 0.5;">arrow_drop_down</i>
<!-- <p class="playerDropdown" style="float: right; color: #F2F3F4; margin-top: 0px; margin-right: -15px; opacity: 0.5;">Hide</p> -->
</label>
<ul id=plexPlayers>
<li style="line-height: 24px">
<a href="#0"></a>
</li>
<li style="line-height: 24px">
<a href="#0"></a>
</li>
<li style="line-height: 24px">
<a href="#0"></a>
</li>
</ul>
</li>
</ul>
<ul class="cd-accordion-menu animated" style="margin: 0">
<li class="has-children">
<input type="checkbox" name="group-2" id="group-2" checked>
<label for="group-2" style="color: #E5A00D; margin: 0">Plex Server
<i class="material-icons right" style="float: right; color: #F2F3F4; margin-top: -1px; margin-right: -22px; opacity: 0.5;">arrow_drop_down</i>
<!-- <p class="serverDropdown" style="float: right; color: #F2F3F4; margin-top: 0px; margin-right: -15px; opacity: 0.5;">Hide</p> -->
</label>
<ul id=plexServers>
<li style="line-height: 24px"><a href="#0">Image</a></li>
<li style="line-height: 24px"><a href="#0">Image</a></li>
<li style="line-height: 24px"><a href="#0">Image</a></li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
<div>
<h5 class="nav-group-title">PT Server</h5>
<span class="nav-group-item" id="plexTogetherServerAddress">
</span>
<h5 class="nav-group-title">PT Room</h5>
<span class="nav-group-item" id="plexTogetherRoomName">
</span>
<h5 class="nav-group-title">PT Password</h5>
<span class="nav-group-item" id="plexTogetherRoomPassword">
</span>
</div>
<div class="pane-sm sidebar plexTogetherInfo" id="plexTogetherInfo" style="display: none;">
<div>
<h5 class="nav-group-title">PT Server</h5>
<span class="nav-group-item" id="plexTogetherServerAddress">
Address
</span>
<h5 class="nav-group-title">PT Room</h5>
<span class="nav-group-item" id="plexTogetherRoomName">
Room
</span>
<h5 class="nav-group-title">PT Password</h5>
<span class="nav-group-item" id="plexTogetherRoomPassword">
Password
</span>
</div>
<div class="pane-sm sidebar plexTogetherInfo" id="userMetadata" style="display: none; height: 300px; bottom: 51px">
<div class="row"></div>
<div class="row" style="margin-bottom: 0">
<div class="col s12 center">
<img id=metaThumb src="img/artwork.jpg" style="width: 80%">
</div>
<div class="col s12 center white-text" id=metaUnder >
Episode Title
<br> Season - Episode
</div>
<div class="col s4 center">
<i class="material-icons center white-text" onclick="PlexClientStepBack()">replay</i>
</div>
<div class="col s4 center">
<i class="material-icons center white-text" onclick="PlexClientPlayPause()">play_circle_outline</i>
</div>
<div class="col s4 center">
<i class="material-icons center white-text" onclick="PlexClientStepForward()">forward_30</i>
</div>
</div>
</div>
<div class="pane-sm sidebar plexTogetherInfo" id="plexTogetherInfo" style="display: none;">
<div class="disconnect" onclick="handleDisconnect()" style="display: block; padding-top: 10px">
<a class="waves-effect waves-light btn disconnect" style="width:159px; background-color: #E5A00D; left: 3px">Disconnect</a>
<a class="waves-effect waves-light btn disconnect" style="width:159px; background-color: #E5A00D; left: 3px">Leave Room</a>
</div>
</div>
<div class="pane-sm sidebar plexTogetherInfoButton" id="plexTogetherInfoButton" style="display: block;">
@ -87,63 +107,42 @@
<a class="waves-effect waves-light btn ptsettings" style="width:159px; background-color: #E5A00D; left: 3px">Join Room</a>
</div>
</div>
<div class="pane page-pane plex-white" style="overflow-y: scroll; padding-right: 0px; margin-bottom: 0px; position: inherit; left: 165px; width: calc(100% - 165px); height: 100%;">
<ul class="collection page-userlist" style="margin-top:0; width: 100%">
<li class="collection-item avatar ptuser mainUser" mainuser="true" username="" style="padding-bottom:0; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0);">
<img src="img/safetyAvatar.png" alt="" id = "ptmain-avatar" class="circle ptuser-avatar" style="box-shadow: 0 0 0 2px #E5A00D">
<span class="title ptuser-username">PlexTogether User</span>
<div class="ptuser-title">Select a player and join a room</div>
<div class="row" style="margin-bottom:0">
<div class="col s10">
<div class="progress">
<div class="determinate ptuser-percent" style="width: 0%"></div>
</div>
</div>
<div class="col s1" id="metaDropdownDiv" style="display:none">
<i class="material-icons" id="metaDropdown" style="margin-left: -24px; margin-top: -5px; font-size: 30px; color: #3F4245;">arrow_drop_down</i>
<p class="ptuser-time" style="color: #E5A00D; margin-left:-138px; margin-top:-42px;">00:00:00 / 00:00:00</p>
</div>
<div class="col s1">
<a href="#!" class="secondary-content ptuser-role" style="margin-top:9px;display:none"><i class="material-icons" style="color: #E5A00D; font-size: 35px; ">star</i></a>
</div>
</div>
</li>
<li class="collection-item" id="userMetadata" style="display: none; padding-bottom:0px; padding-left: 11px; padding-right: 0px; width: 100%">
<div class="row plex-riverbed ptUserDropdown">
<div class="col s1" style="padding-left: 0px; margin-top: -10px;">
<img id="metaThumb" src="img/artwork.jpg" style="padding-bottom: 0%;height: 120px">
</div>
<div class="col s9">
<h2 id="metaTitle" class="white-text" style="margin-top: -5px; margin-left: -15px;">Placeholder Show</h2>
<h3 id="metaUnder" class="white-text" style="margin-top: -20px; margin-left: -15px; margin-bottom: 0px; opacity:0.5;">S5-E21</h3>
<p id="metaSummary" class="white-text" style="margin-left: -15px; font-style: italic; font-weight: 300;">Hey. I guess your metadata is still downloading!</p>
</div>
<div class="col s2">
<h4>Now Playing</h4>
<h3 id="metaPlayer" style="margin-top: -15px; margin-left: -15px; text-align: right; margin-right: 18px;font-size:16px">Player</h3>
<h3 id="metaServer" style="margin-top: -15px; margin-left: -15px; text-align: right; margin-right: 18px;font-size:16px">Server</h3>
</div>
<div class="pane-group plex-white" style="left: 165px">
<div class="pane page-pane plex-white container-test" style="overflow-y: scroll; padding-right: 0px; margin-bottom: 0px; position: inherit; width: 100%">
<ul class="collection page-userlist" style="margin-top:0; width: 100%">
<li class="collection-item avatar ptuser mainUser" mainuser="true" username="" style="padding-bottom:0; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0);">
<img src="img/safetyAvatar.png" alt="" id="ptmain-avatar" class="circle ptuser-avatar" style="box-shadow: 0 0 0 2px #E5A00D">
<span class="title ptuser-username">PlexTogether User</span>
<div class="ptuser-title">Select a player and join a room</div>
<div class="row" style="margin-bottom:0">
<div class="col s10">
<div class="progress">
<div class="determinate ptuser-percent" style="width: 0%"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col s1" id="metaDropdownDiv" style="display:none">
<p class="ptuser-time" style="color: #E5A00D; margin-left:-138px; margin-top:-14px;">00:00:00 / 00:00:00</p>
</div>
<div class="col s1">
<a href="#!" class="secondary-content ptuser-role" style="margin-top:9px;display:none"><i class="material-icons" style="color: #E5A00D; font-size: 35px; ">star</i></a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/titlebar.js"></script>
<script src="js/home.js"></script>
<script>
// dropdown
// console.log(document.getElementByClass('dropdown-button'))
//console.log($('#dropdown-button'))
$(document).ready(function(){
$(".dropdown-button").dropdown();
})
</div>
<script src="js/titlebar.js"></script>
<script src="js/home.js"></script>
<!-- <script src="js/plex/PlexClient.js"></script> -->
<script>
$(document).ready(function() {
$(".dropdown-button").dropdown();
});
</script>
</body>
</script>
</body>
</html>

BIN
app/img/poster.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

63
app/js/home.js
View File

@ -35,22 +35,6 @@ ipcRenderer.on('home-tab-me-avatar-result', function(event, result, path) {
document.getElementById('meAvatar').src = relPath
})
ipcRenderer.on('home-tab-initialize-result', function(event, username, clients, servers) {
$('#metaDropdown').click(function() {
global.renderLog.info('dropdown')
if (arrowDirection == 'arrow_drop_down'){
$(this).parent().find('#userMetadata').html('arrow_drop_down');
$(this).html('arrow_drop_up');
$('#userMetadata').css('display', 'block');
$('#mainUser').css('box-shadow', '0 2px 5px 0 rgba(0, 0, 0, 0.16)');
arrowDirection = 'arrow_drop_up'
} else {
$(this).parent().find('#userMetadata').html('arrow_drop_down');
$(this).html('arrow_drop_down');
$('#userMetadata').css('display', 'none');
$('#mainUser').css('box-shadow', '0 2px 5px 0 rgba(0, 0, 0, 0)');
arrowDirection = 'arrow_drop_down'
}
});
updateSelfUserUsername(username)
ipcRenderer.send('ptmain-thumb-download')
@ -166,7 +150,6 @@ ipcRenderer.on('home-tab-clientclicked-result',function(event,result,client){
checkRatingKey()
},5000)
metadataIntervals.push(ratingKeyInterval)
document.getElementById('metaPlayer').innerHTML = client.name
} else {
//The swap wasn't a success, reflect this!'
@ -258,7 +241,7 @@ function updateMeta(server){
// we just want a timed update
var plex = remote.getGlobal('plex')
var metadata = plex.chosenClient.clientPlayingMetadata
document.getElementById('metaServer').innerHTML = server.name
// document.getElementById('metaServer').innerHTML = server.name
ipcRenderer.send('home-metadata-download',server,metadata)
}
// This is the reply from the above
@ -282,7 +265,7 @@ ipcRenderer.on('home-metadata-download-result',function(event,result,path){
}
var under
if (metadata.type == 'episode'){
under = metadata.title + ' - S' + season + '&#183E' + episode
under = metadata.title + '<br>S' + season + '&#183E' + episode
} else {
if (metadata.tagline == undefined) {
metadata.tagline = ''
@ -291,23 +274,12 @@ ipcRenderer.on('home-metadata-download-result',function(event,result,path){
}
document.getElementById('metaThumb').src = path + '#' + new Date().getTime()
var originalTitle = title
if (title.length > 40){
document.getElementById('metaTitle').style.fontSize = '32px'
}
if (originalTitle.length > 50){
originalTitle = originalTitle.substring(0,50)
title = originalTitle + '...'
}
document.getElementById('metaTitle').innerHTML = title
document.getElementById('metaUnder').innerHTML = under
var summary = metadata.summary
if (summary.length > 280){
summary = summary.substring(0,280)
summary = summary + '...'
}
document.getElementById('metaSummary').innerHTML = summary
//Display Metadata + play controls
$('#userMetadata').css('display', 'block');
$('.plexServerClientInfo').css({'height': 'calc(100% - 401px)'})
}
})
ipcRenderer.on('ptuser-thumb-download-result',function(event,result,path,userData){
@ -1015,6 +987,25 @@ function getPercent(current,max){
}
return percent
}
function PlexClientPlayPause(){
var plex = remote.getGlobal('plex')
if (plex.chosenClient.lastTimelineObject.state == 'paused') {
plex.chosenClient.pressPlay(function(){})
}
if (plex.chosenClient.lastTimelineObject.state == 'playing') {
plex.chosenClient.pressPause(function(){})
}}
function PlexClientStepBack(){
var plex = remote.getGlobal('plex')
plex.chosenClient.stepBack(function(){})
}
function PlexClientStepForward(){
var plex = remote.getGlobal('plex')
plex.chosenClient.stepForward(function(){})
}
function getTimeFromMs(ms){
var hours = ms / (1000*60*60)
var absoluteHours = Math.floor(hours)
@ -1070,7 +1061,7 @@ ipcRenderer.on('pt-server-hideInfo',function(event){
function ptserverShowInfo() {
document.getElementById('plexTogetherInfoButton').style.display = 'none'
document.getElementById('plexTogetherInfo').style.display = 'block'
$('.plexServerClientInfo').css({"height": "100%"})
$('.plexServerClientInfo').css({"height": "calc(100% - 401px)"})
}
function ptserverHideInfo() {
document.getElementById('plexTogetherInfo').style.display = 'none'

23
app/js/plex/PlexClient.js
View File

@ -213,6 +213,7 @@ module.exports = function PlexClient(){
}
})
}
this.pressStop = function(callback){
//Press pause on the client
this.hitApi('/player/playback/stop',{'wait':0},this.chosenConnection,function(result){
@ -235,6 +236,28 @@ module.exports = function PlexClient(){
}
})
}
this.stepBack = function(callback){
//Seek to a time (in ms)
this.hitApi('/player/playback/stepBack',{'wait':0},this.chosenConnection,function(result){
if (result){
//Valid response back from the client
return callback(result)
} else {
return callback(null)
}
})
}
this.stepForward = function(callback){
//Seek to a time (in ms)
this.hitApi('/player/playback/stepForward',{'wait':0},this.chosenConnection,function(result){
if (result){
//Valid response back from the client
return callback(result)
} else {
return callback(null)
}
})
}
this.getRatingKey = function(callback){
//Get the ratingKey, aka the mediaId, of the item playing

94
app/js/titlebar.js
View File

@ -5,54 +5,56 @@ var remote = require('electron').remote
var ALT = 18;
// Setup our top bar
let macTop = '<ul id="dropdown1" class="dropdown-content" style="width: 150px; top: 60px; right: 6px;">\
let macTop = '<ul id="dropdown1" class="dropdown-content" style="width: 150px; top: 5px; left: 170px;">\
<li class="hide"><a>Refresh</a></li>\
<li class="hide"><a class="preferences">Preferences</a></li>\
<li><a class="about">About</a></li>\
<li class="divider"></li>\
<li><a href="#!" onclick="logoutPlexTv()">Sign Out</a></li>\
</ul>\
<nav style="height: 64px; position: fixed; top: 0;">\
<div class="titlebar windowDrag">\
<div class="titlebar-stoplight">\
<div class="titlebar-close mainClose">\
<svg x="0px" y="0px" viewBox="0 0 6.4 6.4">\
<polygon fill="#4d0000" points="6.4,0.8 5.6,0 3.2,2.4 0.8,0 0,0.8 2.4,3.2 0,5.6 0.8,6.4 3.2,4 5.6,6.4 6.4,5.6 4,3.2"></polygon>\
</svg>\
</div>\
<div class="titlebar-minimize mainMinimise">\
<svg x="0px" y="0px" viewBox="0 0 8 1.1">\
<rect fill="#995700" width="6" height="1.1"></rect>\
</svg>\
</div>\
<div class="titlebar-fullscreen mainMaximise">\
<svg class="fullscreen-svg" x="0px" y="0px" viewBox="0 0 6 5.9">\
<path fill="#006400" d="M5.4,0h-4L6,4.5V0.6C5.7,0.6,5.3,0.3,5.4,0z"></path>\
<path fill="#006400" d="M0.6,5.9h4L0,1.4l0,3.9C0.3,5.3,0.6,5.6,0.6,5.9z"></path>\
</svg>\
<svg class="maximize-svg" x="0px" y="0px" viewBox="0 0 7.9 7.9">\
<polygon fill="#006400" points="7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5"></polygon>\
</svg>\
</div>\
</div>\
</div>\
<div class="nav-wrapper windowDrag">\
<a style="margin-top: -12px;" class="brand-logo right">\
<div class="windowNoDrag dropdown-button" data-activates="dropdown1">\
<img src="img/safetyAvatar.png" alt="" id="meAvatar" class="circle ptuser-avatar plexNavAccount right" style="margin-right:10px">\
<i class="material-icons navDropdown" style="float: right; color: #F2F3F4; margin-top: 10px; margin-right: -60px; opacity: 0.5">arrow_drop_down</i>\
</div>\
</a>\
</div>\
</nav>'
let winTop = '<ul id="dropdown1" class="dropdown-content" style="width: 150px; top: 62px; left: -2px;">\
<div class="titlebar windowDrag">\
<div class="titlebar-stoplight">\
<div class="titlebar-close mainClose">\
<svg x="0px" y="0px" viewBox="0 0 6.4 6.4">\
<polygon fill="#4d0000" points="6.4,0.8 5.6,0 3.2,2.4 0.8,0 0,0.8 2.4,3.2 0,5.6 0.8,6.4 3.2,4 5.6,6.4 6.4,5.6 4,3.2"></polygon>\
</svg>\
</div>\
<div class="titlebar-minimize mainMinimise">\
<svg x="0px" y="0px" viewBox="0 0 8 1.1">\
<rect fill="#995700" width="6" height="1.1"></rect>\
</svg>\
</div>\
<div class="titlebar-fullscreen mainMaximise">\
<svg class="fullscreen-svg" x="0px" y="0px" viewBox="0 0 6 5.9">\
<path fill="#006400" d="M5.4,0h-4L6,4.5V0.6C5.7,0.6,5.3,0.3,5.4,0z"></path>\
<path fill="#006400" d="M0.6,5.9h4L0,1.4l0,3.9C0.3,5.3,0.6,5.6,0.6,5.9z"></path>\
</svg>\
<svg class="maximize-svg" x="0px" y="0px" viewBox="0 0 7.9 7.9">\
<polygon fill="#006400" points="7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5"></polygon>\
</svg>\
</div>\
</div>\
<div class="nav-wrapper windowDrag">\
<a class="brand-logo right" style="padding-top: 5px">\
<div class="windowNoDrag dropdown-button" data-activates="dropdown1"> <img src="/Users/georgecordalis/Library/Application Support/PlexTogether/Users/Midnite.jpg" alt="" id="meAvatar" class="circle ptuser-avatar plexNavAccount right" style="margin-right:10px"> <i class="material-icons navDropdown" style="float: right;color: #F2F3F4;margin-top: 27px;margin-right: -53px;opacity: 0.5;">arrow_drop_down</i> </div>\
<ul id="dropdown1" class="dropdown-content" style="width: 150px; top: 5px; left: 170px; position: absolute; opacity: 1; display: none;">\
<li class="hide"><a>Refresh</a></li>\
<li class="hide"><a class="preferences">Preferences</a></li>\
<li><a class="about">About</a></li>\
<li class="divider"></li>\
<li><a href="#!" onclick="logoutPlexTv()">Sign Out</a></li>\
</ul>\
</a>\
</div>\
</div>'
let winTop = '<ul id="dropdown1" class="dropdown-content" style="width: 150px; top: 5px; left: 170px;">\
<li class="hide"><a>Refresh</a></li>\
<li class="hide"><a class="preferences">Preferences</a></li>\
<li><a class="about">About</a></li>\
<li class="divider"></li>\
<li><a href="#!" onclick="logoutPlexTv()">Sign Out</a></li>\
</ul>\
<nav style="height: 64px; position: fixed; top: 0;">\
<nav style="height: 55px; width:165px; position: fixed; top: 0; box-shadow:0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 1px 0px 0 rgba(0, 0, 0, 0.12);">\
<div class="nav-wrapper windowDrag">\
<a style="margin-left: 8px; margin-top: 8px;" class="brand-logo">\
<div class="windowNoDrag dropdown-button" data-activates="dropdown1">\
@ -60,13 +62,23 @@ let winTop = '<ul id="dropdown1" class="dropdown-content" style="width: 150px; t
<i class="material-icons navDropdown" style="float: right; color: #F2F3F4; margin-top: 7px; margin-left: -10px;">arrow_drop_down</i>\
</div>\
</a>\
<ul class="right windowNoDrag" style="position: fixed; top:0; right: 0; margin-right: 10px">\
<li class="mainMinimise" style="padding-top:7px"><i class="material-icons menuButtons">remove</i></li>\
<li class="mainMaximise"><i class="material-icons">crop_square</i></li>\
<li class="mainClose"><i class="material-icons menuButtons">close</i></li>\
</div>\
</nav>\
<nav style="left: 165px; height: 60px; width: calc(100% - 165px); position: fixed; top: -5px;box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 1px 0px 0 rgba(0, 0, 0, 0.12);" class="plex-white">\
<div class="nav-wrapper windowDrag">\
<ul class="right windowNoDrag" style="position: fixed; margin-top:0; right: 0; margin-right: 10px">\
<li class="mainMinimise plex-riverbed-text" style="padding-top:8px"><i class="material-icons menuButtons">remove</i></li>\
<li class="mainMaximise plex-riverbed-text"><i class="material-icons">crop_square</i></li>\
<li class="mainClose plex-riverbed-text"><i class="material-icons menuButtons">close</i></li>\
</ul>\
</div>\
</nav>'
</nav>\
<style>\
.container-test {\
top: 50px;\
height: calc(100% - 50px);\
}\
</style>'
if (process.platform == 'win32') {
document.getElementById('TopBar').innerHTML = winTop
} else {