Play button to start instance (#73)

canonical · Feb 18, 2020 · e6c23e5 · e6c23e5
1 parent abdfee2
commit e6c23e5
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 37 deletions.
diff --git a/static/sass/_pattern_stream.scss b/static/sass/_pattern_stream.scss
@@ -0,0 +1,20 @@
+@mixin anbox-p-stream {
+  .p-stream__button {
+    display: block;
+    position: relative;
+  }
+
+  .p-stream__status-indicator {
+    height: 100px;
+    position: absolute;
+    right: calc(50% - 50px);
+    top: calc(50% - 50px);
+    width: 100px;
+  }
+
+  .p-stream__error {
+    left: $sph-inner;
+    position: absolute;
+    top: $spv-inner--medium;
+  }
+}
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
@@ -16,10 +16,12 @@
 @import "pattern_matrix";
 @import "pattern_navigation";
 @import "pattern_strip";
+@import "pattern_stream";
 
 @include anbox-p-matrix;
 @include anbox-p-navigation;
 @include anbox-p-strip;
+@include anbox-p-stream;
 
 .p-pull-quote .p-pull-quote__quote:last-of-type::after {
   bottom: auto;

diff --git a/templates/_anbox-embed.html b/templates/_anbox-embed.html
@@ -1,6 +1,13 @@
-<section class="p-strip--image is-dark" style="background-image: linear-gradient(-89deg, #E95420 0%, #772953 42%, #2C001E 94%);">
-  <div class="row">
-    <h2>See Anbox Cloud in action</h2>
-    <img src="https://via.placeholder.com/1152x700" alt="">
-  </div>
-</section>
+<div class="p-stream" id="{{ app }}">
+  <a class="p-stream__button js-button">
+    <img class="p-stream__status-indicator js-play" src="https://assets.ubuntu.com/v1/45146a8e-play-icon--white-on-black.svg" alt="Stream app" title="Stream app">
+    <img class="p-stream__status-indicator u-animation--spin js-loading u-hide" src="https://assets.ubuntu.com/v1/be6583dc-spinner-white.svg" alt="Loading" title="Loading">
+    <img class="p-stream__placeholder" src="https://assets.ubuntu.com/v1/17e7d09c-BBR2_Screenshot_01_Dragon_2018-12-12.jpg" alt="">
+    <div class="p-notification--negative p-stream__error u-hide js-error-container">
+      <p class="p-notification__response">
+        <span class="p-notification__status">Error:</span><span class="js-error"></span>
+      </p>
+    </div>
+  </a>
+  <div id="{{ app }}-player" class="p-stream__player js-player u-hide" style="width: 1104px; height: 628px;"></div>
+</div>
diff --git a/templates/demo.html b/templates/demo.html
@@ -7,51 +7,86 @@
 {% block content %}
 <script type="module">
   import AnboxStream from '/static/js/anbox-stream-sdk.js';
+  // @ params appName: name of the application to stream
+  function streamContainer(appName, height = false, width = false) {
+    var container = document.querySelector('#' + appName);
+    var errorContainer = container.querySelector(".js-error-container");
+    var errorMessage = container.querySelector(".js-error");
+    var button = container.querySelector(".js-button");
+    var player = document.querySelector('#' + appName + "-player");
+    var loading = container.querySelector(".js-loading");
+    var play = container.querySelector(".js-play");
 
-  let stream = new AnboxStream({
-  targetElement: "anbox-stream",
-  url: '{{ ANBOXCLOUD_API_BASE }}',
-  authToken: '{{ session["authentication_token"] }}',
-  session: {
-      app: "com.vectorunit.cobalt.canonical", // Given
-  },
-  screen: {
-    // Currently available max resolution
-    // To change to portrait just flip the values between width and height
-      width: 1280,
-      height: 720,
-      fps: 25,
-  },
-  // Using keyboard controls to test it on non-touch device
-  controls: {
-    keyboard: true
-  },
-  callbacks: {
-    error: error => {
-      console.log("AnboxStream failed: " + error.message);
+    if (loading.classList.contains("u-hide")) {
+      play.classList.add("u-hide");
+      loading.classList.remove("u-hide");
+      errorContainer.classList.add('u-hide');
+
+      let stream = new AnboxStream({
+        targetElement: player.id,
+        url: '{{ ANBOXCLOUD_API_BASE }}',
+        authToken: '{{ session["authentication_token"] }}',
+        session: {
+          app: "com.vectorunit.cobalt.canonical", // Given
+        },
+        screen: {
+          width: width && width < 1104 ? width : 1104,
+          height: height && height < 628 ? height : 628,
+          fps: 25
+        },
+        // Using keyboard controls to test it on non-touch device
+        controls: {
+          keyboard: true
+        },
+        callbacks: {
+          error: error => {
+            button.classList.remove("u-hide");
+            player.classList.add('u-hide');
+            loading.classList.add("u-hide");
+            play.classList.remove("u-hide");
+            errorMessage.textContent = "Please click the play button below to try again.";
+            console.error('Anbox cloud stream error: ' + error);
+            errorContainer.classList.remove('u-hide');
+          },
+          ready: ready => {
+            button.classList.add("u-hide");
+            player.classList.remove('u-hide');
+          }
+        }
+      });
+      stream.connect();
     }
   }
-});
-stream.connect();
 
+  var streams = Array.from(document.querySelectorAll('.p-stream'));
+
+  streams.forEach((stream, i) => {
+    stream.querySelector(".js-button").addEventListener('click', function() {
+      streamContainer(stream.id, stream.offsetHeight, stream.offsetWidth);
+    })
+  });
 </script>
 
-<section class="p-strip is-shallow">
-  <div class="row">
-    <div class="col-8">
-      <h1>Anbox Cloud demo</h1>
+<section class="p-strip--dark is-bordered is-shallow" style="background-image: linear-gradient(-89deg, #E95420 0%, #772953 42%, #2C001E 94%);">
+  <div class="row p-strip is-shallow">
+    <div class="col-7">
+      <h1>Anbox Cloud: Try it yourself</h1>
     </div>
   </div>
-</section>
-<section class="p-strip--dark is-bordered">
   <div class="row">
     <div class="col-12 u-align--center">
-      <div id="anbox-stream"></div>
-      <!-- <img src="https://via.placeholder.com/1280x720" alt=""> -->
+      {% with app="buggy-racing" %}
+        {% include "_anbox-embed.html" %}
+      {% endwith %}
     </div>
   </div>
 </section>
 <section class="p-strip is-shallow is-bordered">
+  <div class="row">
+    <div class="col-8">
+      <p>I agree that my use of the services are subject to my adherence to, and acceptance of, the <a href="https://ubuntu.com/legal/anbox-cloud-terms-of-service" class="p-link--external">Terms of Service</a>, <a href="https://ubuntu.com/legal/anbox-cloud-privacy-notice" class="p-link--external">Privacy Notice</a> and <a href="https://ubuntu.com/legal/data-privacy" class="p-link--external">Privacy Policy</a>.</p>
+    </div>
+  </div>
   <div class="row">
     <div class="col-8">
       <p>More information about Anbox Cloud can be found on the <a href="/">homepage</a></p>