Skip to content

Commit

Permalink
Merge pull request #95 from Genymobile/dev/PLAYER-33-adding-example-f…
Browse files Browse the repository at this point in the history 
…or-use-player

[PLAYER-33] adding an example folder with a wrapper for the player
  • Loading branch information
@jparez
jparez authored Sep 2, 2024
2 parents c11235a + d08302b commit 2cf0112
Show file tree
Hide file tree
Showing 7 changed files with 585 additions and 3 deletions.
162 changes: 162 additions & 0 deletions example/geny-window.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
/* Variables */
:root {
--primaryColor: #e6195e;
--errorColor: #dc3545;
--errorBgColor: #f8d7da;
}

/* CSS helper */
.mb-1 {
margin-bottom: 5px;
}

.mb-3 {
margin-bottom: 15px;
}

/* global */
* {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h3 {
font-family: sans-serif;
font-weight: 300;
}

a {
color: #19e6a1;
text-decoration: none;
}

a:hover {
color: var(--primaryColor);
}

ul {
padding: 5px 15px;
}
hr {
color: var(--primaryColor);
width: 100%;
}

.note {
font-size: 14px;
color: #110f0f;
background-color: #fffacd;
margin-bottom: 20px;
line-height: 1.4;
padding: 5px 10px;
border-radius: 2px;
}

#snackbar {
visibility: hidden;
min-width: 250px;
background-color: var(--errorBgColor);
color: var(--errorColor);
text-align: center;
margin: 0 auto;
height: auto;
border-radius: 5px;
display: flex;
padding: 5px 15px;
align-items: center;
width: auto;
flex-grow: 1;
margin: 0px 100px;
}
#snackbar.show {
visibility: visible;
}
/* Page */
body {
margin: 0;
background: #000;
display: flex;
flex-direction: column;
height: 100vh;
}

header {
padding: 10px 0;
background-color: #1e1e1e;
display: flex;
justify-content: flex-start;
}

#logo {
height: 64px;
min-width: 225px;
background-size: contain;
background-repeat: no-repeat;
background-image: url('./logo.png');
margin: 0 0 0 10px;
flex-grow: 0;
}

#main {
display: flex;
flex-grow: 1;
position: relative;
}

#sidebar {
display: flex;
flex-direction: column;
min-width: 300px;
max-width: 300px;
background-color: #1e1e1e;
color: #fff;
padding: 10px;
box-sizing: border-box;
margin-right: 20px;
padding-top: 20px;
}

#sidebar .actions {
display: flex;
justify-content: space-around;
}

#sidebar .actions > button {
width: 30px;
height: 30px;
cursor: pointer;
}

#player {
background-color: #000;
color: #fff;
padding: 10px;
box-sizing: border-box;
margin-right: 20px;
margin: 0 auto;
max-width: 90%;
max-height: 95vh;
}

#fe-player {
margin: 10px;
margin: 0;
color: #fff;
font-size: 14px;
font-family: 'Roboto', sans-serif;
}

#fe-player .gm-wrapper {
display: flex !important;
}

#fe-player .gm-toolbar {
top: 0;
height: 100%;
background-color: #1e1e1e;
}

@media screen and (max-width: 800px) {
#fe-player.landscape {
max-width: 400px;
width: auto;
}
}
85 changes: 85 additions & 0 deletions example/geny-window.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!doctype html>
<html>
<head>
<title>geny SaaS example</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="geny-window.css" />
<script src="geny-window.js"></script>

<!--load the player files -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@genymotion/[email protected]/dist/css/device-renderer.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@genymotion/[email protected]/dist/js/device-renderer.min.js"></script>

<!--
//to use maps option in gps widget you need to load google maps api and forward you google pai key
<script src="https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEAPIKEY" async defer></script>
--></head>

<body>
<header>
<a href="https://www.genymotion.com/" target="_blank" id="logo"></a>
<div id="snackbar"></div>
</header>

<div id="main">
<div id="sidebar">
<h3>Start a new instance</h3>
<input type="password" id="apiToken" placeholder="Your Api Token" value="" />
<a href="https://www.genymotion.com/blog/api-tokens-for-genymotion-saas/" target="_blank" class="mb-3">
👉 How to get an API token
</a>

<input type="text" id="recipeUuid" placeholder="Recipe uuid" class="mb-3" />

<div>
☝️ Recipe uuid from <a href="https://cloud.geny.io/recipes" target="_blank"> SaaS </a>
or
<a href="https://docs.genymotion.com/gmsaas/03_Commands/#list-recipes" target="_blank"> gmsaas </a>
</div>
<div class="mb-3">👇 Or Select a device from here</div>
<select id="listRecipes" class="mb-3" place>
<option value="" selected disabled>No recipes fetched, give a valid api token</option>
</select>
<div class="actions mb-3">
<button id="start">▶</button>
<button id="stop">⏹</button>
</div>
<hr />
<h3>Connect to an existing instance</h3>
<input
type="text"
id="wsAddress"
placeholder="Instance uuid or Websocket address"
value=""
class="mb-3"
/>
<div class="note" id="input-note">
<ul>
<li><strong>Instance uuid:</strong> the uuid of a launched device.</li>
<li>
<strong>Websocket address:</strong> a WebSocket address (starting with "wss://") of a
launched device.
</li>
</ul>
</div>
<div class="actions">
<button id="connectExistingInstance">🔌</button>
</div>
<hr />
<h3>More about geny product and integration</h3>
<a href="https://www.genymotion.com" target="_blank" class="mb-1"> 👉 Our products </a>
<a href="https://docs.genymotion.com/gmsaas/" target="_blank" class="mb-1"> 👉 Our CLI, gmsaas </a>
<a href="https://github.com/Genymobile/genymotion-device-web-player" target="_blank" class="mb-1">
👉 Player documentation
</a>
</div>
<div id="player">
<div id="fe-player"></div>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 2cf0112

Please sign in to comment.