Small local development tweaks

examples/index.html

@@ -12,17 +12,60 @@
       body {
         margin: 0px;
       }
-      iframe {
+
+      .commands {
+        height: 140px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .inputs {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      input, button {
+        margin-right: 1em;
+        margin-bottom: 1em;
+      }
+      .container {
+        border: 1px dashed gray;
+        width: 600px;
+        height: 300px;
+        margin: auto;
+      }
+
+      .container iframe {
         border-style: none;
         width: 100%;
         height: 100%;
       }
+
+      .container.fullscreen {
+        width: 100vw;
+        height: calc(100vh - 140px)
+      }
     </style>
-    <input class="machineIdInput" type="text" placeholder="Please type Machine ID" />
-    <input class="accessTokenInput" type="text" placeholder="Please type Your Access Token" />
-    <button class="start-stream">Start Stream</button>
-    <button class="stop-stream" disabled="true">Stop Stream</button>
-    <iframe class="vmStreamElement"></iframe>
+  <script type="text/javascript">
+    function toggleFullscreen() {
+      var el = document.body.getElementsByClassName('container')[0]
+      el.classList.toggle('fullscreen');
+    };
+  </script>
+    <div class='commands'>
+      <div class='inputs'>
+        <input class="machineIdInput" type="text" placeholder="Please type Machine ID" />
+        <input class="accessTokenInput" type="text" placeholder="Please type Your Access Token" />
+      </div>
+      <button class="start-stream">Start Stream</button>
+      <button class="stop-stream" disabled="true">Stop Stream</button>
+    </div>
+    <div class='container'>
+      <iframe class="vmStreamElement"></iframe>
+      <button onclick="toggleFullscreen()">Toggle Fullscreen</button>
+    </div>
     <script type="text/javascript" src="./streams.js"></script>
   </body>
 </html>

examples/streams.js

@@ -10,8 +10,6 @@ let boundStopStream;
 
 function startStream() {
   const vmStreamElement = document.querySelector('.vmStreamElement');
-  const style = 'width: 100vw; height: calc(100vh - 23px);';
-  vmStreamElement.setAttribute('style', style);
   const vmInfo = {
     machineId: document.querySelector('input.machineIdInput').value,
     accessToken: document.querySelector('input.accessTokenInput').value

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paperspace/client-sdk",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Paperspace SDK for client-side browser environments",
   "main": "dist/main.js",
   "repository": "[email protected]:Paperspace/@paperspace/client-sdk.git",
@@ -9,6 +9,7 @@
   "scripts": {
     "start": "NODE_ENV=development webpack-dev-server --content-base dist/",
     "test": "eslint .",
+    "local-dev": "NODE_ENV=development webpack-dev-server",
     "dev": "NODE_ENV=development webpack --progress --config webpack.config.js",
     "dist": "NODE_ENV=production webpack --progress --config webpack.config.js",
     "postversion": "git push origin refs/tags/v\"$npm_package_version\" && echo \"✨ Successfully released version v$npm_package_version! The tag build process will publish it ✨\"",

releasenotes.md

@@ -1,8 +1,15 @@
 # Paperspace Client SDK Release Notes
 
+
+## Release Notes for v0.1.2
+
+#### Fixes
+
+* Cleaner example `index.html`
+* New `local-dev` environment
+
 ## Release Notes for v0.0.4-rc1
 
 #### New features
 
 * First working streams object released
-

webpack.config.js

@@ -16,6 +16,9 @@ module.exports = {
     main: './src/index.js',
     ...ifNotProduction({ streams: './examples/streams.js' })
   },
+  devServer: {
+    port: 3004
+  },
   output: {
     path: destination,
     filename: '[name].js',