Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-05-29 16:40:17 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'screenshareElectronApp' of github.com:MiladNazeri/hifi into screenshareElectronApp

Browse source
This commit is contained in:
milad 2019-11-12 11:37:10 -08:00
commit 05f5863f85
4 changed files with 84 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
screenshare/src/app.js
View file

@ -64,10 +64,12 @@ function togglePage(){
if (currentPage === "mainPage") { if (currentPage === "mainPage") {
currentPage = "confirmationPage"; currentPage = "confirmationPage";
document.getElementById("select_screen").style.display = "none"; document.getElementById("select_screen").style.display = "none";
document.getElementById("subtitle").innerHTML = "Confirm that you'd like to share this content.";
document.getElementById("confirmation_screen").style.display = "block"; document.getElementById("confirmation_screen").style.display = "block";
} else { } else {
currentPage = "mainPage"; currentPage = "mainPage";
document.getElementById("select_screen").style.display = "block"; document.getElementById("select_screen").style.display = "block";
document.getElementById("subtitle").innerHTML = "Please select the content you'd like to share.";
document.getElementById("confirmation_screen").style.display = "none"; document.getElementById("confirmation_screen").style.display = "none";
} }
} }

10
screenshare/src/index.html
View file

@ -5,7 +5,7 @@
<body id="main"> <body id="main">
<div id="title" class="text_title"> <div id="title" class="text_title">
<h1>Share your screen</h1> <h1>Share your screen</h1>
<h3>Please select the content you'd like to share.</h3> <h3 id="subtitle">Please select the content you'd like to share.</h3>
</div> </div>
<button id="screenshare" onclick="stopSharing()" style="display: none;">Stop Screenshare</button> <button id="screenshare" onclick="stopSharing()" style="display: none;">Stop Screenshare</button>
<div id="select_screen"> <div id="select_screen">
@ -17,7 +17,7 @@
<!-- <div class="box"> --> <!-- <div class="box"> -->
<!-- <div class="heading"> --> <!-- <div class="heading"> -->
<!-- <div class="circle"></div> --> <!-- <div class="circle"></div> -->
<!-- <span class="screen_label">Screen 1</span> --> <!-- <span class=" abel">Screen 1</span> -->
<!-- </div> heading --> <!-- </div> heading -->
<!-- <div class="image"> --> <!-- <div class="image"> -->
<!-- </div> --> <!-- </div> -->
@ -41,10 +41,10 @@
</p> </p>
</div> </div>
<div id="button_selection"> <div id="button_selection">
<div id="yes" class="button_confirmation" style="color: #ffffff" onClick="screenConfirmed(true)"> <div id="yes" class="button_confirmation" onClick="screenConfirmed(true)">
Yes, share this content Yes, share this content
</div> </div>
<div id="no" class="button_confirmation" style="color: #009ee0" onClick="screenConfirmed(false)"> <div id="no" class="button_confirmation" onClick="screenConfirmed(false)">
No, don't share this content No, don't share this content
</div> </div>
</div> button_selection </div> button_selection
@ -52,4 +52,4 @@
<script src="app.js"></script> <script src="app.js"></script>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script> <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
</body> </body>
</html> </html>

7
screenshare/src/main.js
View file

@ -22,8 +22,8 @@ function createWindow(){
const zoomFactor = 1.0; const zoomFactor = 1.0;
window = new BrowserWindow({ window = new BrowserWindow({
backgroundColor: "#000000", backgroundColor: "#000000",
width: 1280 * zoomFactor, width: 940 * zoomFactor,
height: 720 * zoomFactor, height: 660 * zoomFactor,
center: true, center: true,
frame: true, frame: true,
useContentSize: true, useContentSize: true,
@ -50,5 +50,6 @@ console.log("setting up on ready");
app.on('ready', function() { app.on('ready', function() {
console.log("app ready"); console.log("app ready");
createWindow(); createWindow();
console.log("sending info");
window.webContents.send('connectionInfo', JSON.stringify(connectionInfo))
}); });

127
screenshare/src/styles.css
View file

@ -6,14 +6,8 @@ body {
/* -webkit-align-items: center; */ /* -webkit-align-items: center; */
/* -webkit-flex-direction: column; */ /* -webkit-flex-direction: column; */
font-family: "Graphik"; font-family: "Graphik";
margin: 0px; margin: 0px 22px 10px 22px;
} }
html::-webkit-scrollbar {
overflow: scroll;
overflow-x: hidden;
width: 0px;
}
#confirmation_screen { #confirmation_screen {
/* background-color: orange; */ /* background-color: orange; */
@ -25,7 +19,7 @@ html::-webkit-scrollbar {
} }
#confirmation_text { #confirmation_text {
margin-top: 25px; margin-top: 65px;
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
} }
@ -44,9 +38,39 @@ html::-webkit-scrollbar {
flex-direction: column; flex-direction: column;
} }
.button_confirmation {
margin: 4px;
cursor: pointer;
width: 250px;
height: 75px;
line-height: 75px;
text-align: center;
vertical-align: middle;
color: white
}
#no {
color: rgba(1, 152, 203,0.7);
}
#no:hover {
color: rgba(1, 152, 203,1);
}
#yes {
outline: solid white 2px;
}
#yes:hover {
background: #0198CB;
}
yes:hover + #yes_background {
display: block;
}
#share_pick { #share_pick {
/* background-color: blue; */ margin-top: 60px;
} }
.text_title { .text_title {
@ -59,19 +83,13 @@ html::-webkit-scrollbar {
} }
#title { #title {
margin-left: 21px;
margin-top: 21px; margin-top: 21px;
} }
#selects {
margin-left: 21px;
margin-top: 70px;
}
h1 { h1 {
line-height: 48px; line-height: 48px;
font-size: 48px; font-size: 48px;
margin: 0px 0px 0px 0px; margin: 0px;
} }
h3 { h3 {
@ -91,11 +109,15 @@ h3 {
border-radius: 3px; border-radius: 3px;
} }
#selects {
margin-right: 19px;
padding-left: 3px;
}
.screen_label { .screen_label {
max-width: 220px; max-width: 220px;
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
margin-left: 15px;
color: white; color: white;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -104,40 +126,39 @@ h3 {
.icon { .icon {
display: inline-block; display: inline-block;
background: #C4C4C4; background: #000000;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; margin-right: 15px;
}
.circle:hover{
background-color: yellow;
cursor: pointer;
}
.button_confirmation {
margin: 4px;
cursor: pointer;
width: 250px;
height: 75px;
line-height: 75px;
text-align: center;
vertical-align: middle;
}
.button_confirmation:hover {
outline: solid white 2px;
width: 250px;
} }
.box { .box {
/* background-color: orange; */
height: 165px; height: 165px;
width: 265px; width: 265px;
display: inline-block; display: inline-block;
margin-left: 35px; margin-left: 35px;
margin-bottom: 40px; margin-top: 60px;
margin-top: 20px; cursor: pointer;
}
.box:nth-child(1) {
margin-top: 0 !important;
}
.box:nth-child(2) {
margin-top: 0 !important;
}
.box:nth-child(3) {
margin-top: 0 !important;
}
.box:nth-child(3n) {
margin-right: 0 !important;
}
.box:nth-child(3n+1) {
margin-left: 0 !important;
} }
.heading { .heading {
@ -147,11 +168,11 @@ h3 {
} }
.image { .image {
background-color: blue;
width: 265px; width: 265px;
height: 165px; height: 165px;
max-height: 165px; max-height: 165px;
max-width: 265px; max-width: 265px;
margin: 0px;
} }
.image:hover { .image:hover {
@ -159,7 +180,6 @@ h3 {
} }
.image_no_hover { .image_no_hover {
background-color: blue;
width: 265px; width: 265px;
height: 165px; height: 165px;
max-height: 165px; max-height: 165px;
@ -169,37 +189,36 @@ h3 {
img { img {
width: 265px; width: 265px;
height: 165px; height: 165px;
margin: 0px;
} }
.scrollbar { .scrollbar {
float: right; float: right;
height: 470px; height: 500px;
margin-right: 20px;
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
margin-top: 40px;
} }
#style-1::-webkit-scrollbar { #style-1::-webkit-scrollbar {
width: 15px; width: 9px;
background-color: red; overflow: scroll;
overflow-x: hidden;
} }
#style-1::-webkit-scrollbar-thumb { #style-1::-webkit-scrollbar-thumb {
background-color: #0198CB; background-color: #0198CB;
width: 9px;
} }
#style-1::-webkit-scrollbar-track { #style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #848484; background-color: #848484;
margin-right: 22px; width: 9px;
} }
/* /*
button { button {
display: inline-block; display: inline-block;
@ -227,4 +246,4 @@ button:active,
button.active { button.active {
background: -webkit-linear-gradient(#E3E3E3 40%, #F9F9F9 70%); background: -webkit-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%); background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
} */ } */