Player background

static/sass/_pattern_stream.scss

@@ -1,4 +1,8 @@
 @mixin anbox-p-stream {
+  .p-stream {
+    position: relative;
+  }
+
   .p-stream__button {
     display: block;
     position: relative;
@@ -12,6 +16,16 @@
     width: 100px;
   }
 
+  .p-stream__player {
+    position: absolute;
+    top: 0;
+
+    video {
+      background-color: #000;
+      margin: 0;
+    }
+  }
+
   .p-stream__error {
     left: $sph-inner;
     position: absolute;

templates/_anbox-embed.html

@@ -2,12 +2,12 @@
   <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="">
+    <img class="p-stream__placeholder js-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 id="{{ app }}-player" class="p-stream__player js-player u-hide"></div>
 </div>

templates/demo.html

@@ -8,19 +8,24 @@
 <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) {
+  function streamContainer(appName) {
     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");
+    var placeholder = container.querySelector('.js-placeholder');
+
+    var containerHeight = container.offsetHeight;
+    var containerWidth = container.offsetWidth;
 
     if (loading.classList.contains("u-hide")) {
       play.classList.add("u-hide");
       loading.classList.remove("u-hide");
       errorContainer.classList.add('u-hide');
+      placeholder.style.opacity = 1;
 
       let stream = new AnboxStream({
         targetElement: player.id,
@@ -30,8 +35,8 @@
           app: "com.vectorunit.cobalt.canonical", // Given
         },
         screen: {
-          width: width && width < 1104 ? width : 1104,
-          height: height && height < 628 ? height : 628,
+          width: 1280,
+          height: 720,
           fps: 25
         },
         // Using keyboard controls to test it on non-touch device
@@ -44,12 +49,18 @@
             player.classList.add('u-hide');
             loading.classList.add("u-hide");
             play.classList.remove("u-hide");
+            placeholder.style.opacity = 1;
             errorMessage.textContent = "Please click the play button below to try again.";
             console.error('Anbox cloud stream error: ' + error);
             errorContainer.classList.remove('u-hide');
           },
           ready: () => {
-            button.classList.add("u-hide");
+            var video = player.querySelector('video');
+            if (video && placeholder) {
+              video.height = placeholder.height;
+              video.width = placeholder.width;
+            }
+            placeholder.style.opacity = 0;
             player.classList.remove('u-hide');
             if (navigator.userAgent.match(/Android/i)
                     || navigator.userAgent.match(/webOS/i)
@@ -72,7 +83,17 @@
 
   streams.forEach((stream, i) => {
     stream.querySelector(".js-button").addEventListener('click', function() {
-      streamContainer(stream.id, stream.offsetHeight, stream.offsetWidth);
+      var placeholder = stream.querySelector('.js-placeholder');
+
+      streamContainer(stream.id);
+
+      window.addEventListener("resize", function() {
+        var video = stream.querySelector('video');
+        if (video && placeholder) {
+          video.height = placeholder.height;
+          video.width = placeholder.width;
+        }
+      });
     })
   });
 </script>
@@ -103,4 +124,4 @@ <h1>Anbox Cloud: Try it yourself</h1>
     </div>
   </div>
 </section>
-{% endblock %}
+{% endblock %}