Merge pull request #114 from Genymobile/dev/PLAYER-40-delete-template…

…-feature [PLAYER-40] delete template feature
Genymobile · Nov 25, 2024 · 08dd6fd · 08dd6fd
2 parents 730f58a + c4c5517
commit 08dd6fd
Show file tree

Hide file tree

Showing 30 changed files with 160 additions and 541 deletions.
diff --git a/README.md b/README.md
@@ -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
     };
@@ -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`
@@ -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>

diff --git a/example/geny-window.css b/example/geny-window.css
@@ -18,7 +18,7 @@
     margin-left: 5px;
 }
 
-.d-flex{
+.d-flex {
     display: flex;
 }
 
@@ -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 {
@@ -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 {
@@ -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;
 }
diff --git a/example/geny-window.html b/example/geny-window.html
@@ -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>

diff --git a/example/geny-window.js b/example/geny-window.js
@@ -35,7 +35,7 @@ const getJWTToken = async (instanceUuid) => {
             ...requestInit,
             method: 'POST',
             body: JSON.stringify({
-              instance_uuid: instanceUuid,
+                instance_uuid: instanceUuid,
             }),
         });
 
@@ -112,8 +112,8 @@ const initPlayer = (webrtcAddress) => {
     }
 
     const options = {
-        template: 'renderer_partial',
         token: jwtToken || apiToken,
+        showPhoneBorder: true,
     };
 
     const {DeviceRendererFactory} = window.genyDeviceWebPlayer;
@@ -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://')) {
@@ -217,13 +216,9 @@ const generateInstanceHistoryList = () => {
         const option = document.createElement('option');
         option.value = instance;
         datalist.appendChild(option);
-    }
-    );
+    });
 };
 
-
-
-
 document.addEventListener(
     'DOMContentLoaded',
     () => {
@@ -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;
         });
@@ -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) {
@@ -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;