Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PLAYER-40] delete template feature #114

Merged
merged 2 commits into from
Nov 25, 2024
Merged

[PLAYER-40] delete template feature #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5166582
delete template feature
jparez Nov 14, 2024
c4c5517
deleted template folders
jparez Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@ or check the [PaaS documentation](https://docs.genymotion.com/paas/01_Requiremen

// See "Features & options" section for more details about options
const options = {
template: 'renderer', // template defines how renderer is displayed
token: 'i-XXXXXXXXXX', // token is the shared secret to connect to your VM
fileUpload: false, // requires fileUploadUrl
};
Expand Down Expand Up @@ -274,14 +273,6 @@ sendData({

A device renderer instance can be configured using the `options` argument (object). Possible configuration key / value are described below.

### `template`

- **Type:** `String`
- **Default:** `renderer`
- **Compatibility:** `PaaS`, `SaaS`
- **Details:**
Defines the layout of the renderer. Can be one of the following: `bootstrap`, `fullscreen`, `fullwindow`, `renderer`, `renderer_minimal`, `renderer_no_toolbar`, `renderer_partial`.

### `token`

- **Type:** `String`
Expand Down Expand Up @@ -333,6 +324,13 @@ A device renderer instance can be configured using the `options` argument (objec
}
```

### `showPhoneBorder`

- **Type:** `Boolean`
- **Default:** `false`
- **Details:**
Adds a mobile-style frame around the video to mimic the appearance of a smartphone screen.

### `streamResolution`

<img align="right" src="./doc/assets/ic-resolution_active_black.svg" alt="..."></img>
Expand Down
49 changes: 18 additions & 31 deletions example/geny-window.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
margin-left: 5px;
}

.d-flex{
.d-flex {
display: flex;
}

Expand Down Expand Up @@ -54,18 +54,19 @@ hr {
width: 100%;
}

summary, label {
summary,
label {
cursor: pointer;
}

input[type="text"] {
input[type='text'] {
width: 100%;
padding: 5px;
margin: 5px 0;
box-sizing: border-box;
}

input[type="checkbox"] {
input[type='checkbox'] {
cursor: pointer;
}
.note {
Expand Down Expand Up @@ -138,8 +139,14 @@ header {
color: #fff;
padding: 10px;
box-sizing: border-box;
margin-right: 20px;
padding-top: 20px;
height: calc(100vh - 84px);
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
#sidebar::-webkit-scrollbar {
display: none;
}

#sidebar .actions {
Expand All @@ -154,41 +161,21 @@ header {
}

#advancedSettings > * {
margin-bottom: 10px;
margin-bottom: 10px;
}

#player {
background-color: #000;
background-color: #1a1a1a;
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;
flex-grow: 1;
max-height: calc(100vh - 84px);
}

#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;
}
#fe-player .gm-video-wrapper {
padding: 10px 0 10px 10px;
}
41 changes: 23 additions & 18 deletions example/geny-window.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,47 +61,52 @@ <h3>Connect to an existing instance</h3>
<datalist id="instances-history"></datalist>
<div class="note" id="input-note">
<ul>
<li><strong>Instance uuid:</strong> the uuid of a launched device. <strong>(Genymotion SaaS only)</strong></li>
<li>
<strong>WebSocket address:</strong> the WebSocket address ("<i>wss://public ip address</i>") of the device. <strong>(Genymotion Device Image only)</strong>
<strong>Instance uuid:</strong> the uuid of a launched device.
<strong>(Genymotion SaaS only)</strong>
</li>
<li>
<strong>WebSocket address:</strong> the WebSocket address ("<i>wss://public ip address</i>")
of the device. <strong>(Genymotion Device Image only)</strong>
</li>
</ul>
</div>
<div class="actions">
<button id="connectExistingInstance">🔌</button>
</div>
<hr />
<h3>More about geny's products 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>
<hr />
<h3>Advanced settings</h3>
<details id="advancedSettings">
<summary>⚡⚙️</summary>
<div class="d-flex justify-content-between">
<label for="saveToken">
Save the token
</label>
<label for="saveToken"> Save the token </label>
<input name="saveToken" id="saveToken" type="checkbox" />
</div>
<div class="note">⚠️ can be read by anyone with access to local storage</div>

<div class="d-flex justify-content-between">
<label for="saveInstanceHistory">
Save instances history
</label>
<label for="saveInstanceHistory"> Save instances history </label>
<input name="saveInstanceHistory" id="saveInstanceHistory" type="checkbox" />
</div>
<div class="d-flex justify-content-between align-items-baseline">
<input name="apiBaseUrl" id="apiBaseUrl" type="text" placeholder="API base url (empty to fallback default)" />
<div class="actions ml-1 ">
<div class="d-flex justify-content-between align-items-baseline">
<input
name="apiBaseUrl"
id="apiBaseUrl"
type="text"
placeholder="API base url (empty to fallback default)"
/>
<div class="actions ml-1">
<button id="saveAPIBaseUrl">💾</button>
</div>
</div>
</details>
<hr />
<h3>More about geny's products 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>
Expand Down
26 changes: 11 additions & 15 deletions example/geny-window.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const getJWTToken = async (instanceUuid) => {
...requestInit,
method: 'POST',
body: JSON.stringify({
instance_uuid: instanceUuid,
instance_uuid: instanceUuid,
}),
});

Expand Down Expand Up @@ -112,8 +112,8 @@ const initPlayer = (webrtcAddress) => {
}

const options = {
template: 'renderer_partial',
token: jwtToken || apiToken,
showPhoneBorder: true,
};

const {DeviceRendererFactory} = window.genyDeviceWebPlayer;
Expand Down Expand Up @@ -180,7 +180,6 @@ const fetchRecipes = async () => {
}
};


// connect to an existing instance through an instance Uuid or an instance ws address
const connectInstance = async (wsAddress) => {
if (wsAddress.includes('wss://')) {
Expand Down Expand Up @@ -217,13 +216,9 @@ const generateInstanceHistoryList = () => {
const option = document.createElement('option');
option.value = instance;
datalist.appendChild(option);
}
);
});
};




document.addEventListener(
'DOMContentLoaded',
() => {
Expand All @@ -241,7 +236,7 @@ document.addEventListener(
});

// change recipeUuid when the user select a recipe
document.querySelector('#listRecipes').addEventListener('change', function (event) {
document.querySelector('#listRecipes').addEventListener('change', function () {
const selectedValue = document.querySelector('#listRecipes').value;
document.querySelector('#recipeUuid').value = selectedValue;
});
Expand All @@ -267,15 +262,16 @@ document.addEventListener(
await connectInstance(wsAddress);
});

// binding advanced settings
// fill ui with localstorage values if they exist
// binding advanced settings
// fill ui with localstorage values if they exist
document.querySelector('#saveToken').checked = localStorage.getItem('hasSaveToken') === 'true';
document.querySelector('#apiToken').value = localStorage.getItem('apiToken');
document.querySelector('#saveInstanceHistory').checked = localStorage.getItem('hasSaveInstanceHistory') === 'true';
document.querySelector('#saveInstanceHistory').checked =
localStorage.getItem('hasSaveInstanceHistory') === 'true';
generateInstanceHistoryList();
document.querySelector('#apiBaseUrl').value = baseUrlToFetch;

// save values on change
// save values on change
document.querySelector('#saveToken').addEventListener('click', (event) => {
localStorage.setItem('hasSaveToken', event.target.checked);
if (event.target.checked) {
Expand All @@ -291,8 +287,8 @@ document.addEventListener(
} else {
localStorage.removeItem('instanceHistory');
}
});
document.querySelector('#saveAPIBaseUrl').addEventListener('click', (event) => {
});
document.querySelector('#saveAPIBaseUrl').addEventListener('click', () => {
if (document.querySelector('#apiBaseUrl').value.trim().length) {
localStorage.setItem('baseUrlToFetch', document.querySelector('#apiBaseUrl').value);
baseUrlToFetch = document.querySelector('#apiBaseUrl').value;
Expand Down
Loading
Loading