show native video controls when playing

public/javascripts/spacedeck_directives.js

@@ -52,9 +52,18 @@ function setup_directives() {
       }
 
       var play_func = function() {
-        video.play();
-        player_state = "playing";
-        update_view();
+        var playPromise = video.play();
+        if (playPromise !== undefined) {
+          playPromise.then(_ => {
+            // Automatic playback started!
+            player_state = "playing";
+            update_view();
+          })
+          .catch(error => {
+            // Auto-play was prevented
+            // Show paused UI.
+          });
+        }
       }
 
       var pause_func = function() {

public/stylesheets/style.css

@@ -15184,6 +15184,8 @@ button.close {
     width: 100%;
     height: 100%;
     background-size: cover; }
+    .artifact .video.playing video {
+      z-index: 1; }
     .artifact .video .title {
       position: absolute;
       bottom: 0px;
@@ -15197,13 +15199,15 @@ button.close {
       font-size: 10px; }
     .artifact .video video {
       width: 100%;
-      height: 100%; }
+      height: 100%;
+      position: absolute; }
     .artifact .video .tl-controls {
       position: absolute;
-      bottom: 10px;
+      top: 10px;
       left: 10px;
       right: 10px;
-      text-align: center; }
+      text-align: center;
+      z-index: 2; }
       .artifact .video .tl-controls .btn {
         margin-top: 20px; }
   .artifact .audio {

styles/artifact.scss

@@ -323,6 +323,12 @@
     height: 100%;
     background-size: cover;
 
+    &.playing {
+      video {
+        z-index: 1;
+      }
+    }
+
     .title {
       position: absolute;
       bottom: 0px;
@@ -339,14 +345,16 @@
     video {
       width: 100%;
       height: 100%;
+      position: absolute;
     }
 
     .tl-controls {
       position: absolute;
-      bottom: 10px;
+      top: 10px;
       left: 10px;
       right: 10px;
       text-align: center;
+      z-index: 2;
 
       .btn {
         margin-top: 20px;

views/partials/space.html

@@ -151,8 +151,8 @@
         </div>
 
         <!-- video -->
-        <div v-if="a.view.major_type == 'video'" v-videoplayer="a" class="video" v-bind:style="a.view.inner_style + ';background-image: url('+a.view.thumbnail_uri+');'">
-          <video preload="metadata" v-bind:poster="a.view.thumbnail_uri">
+        <div v-if="a.view.major_type == 'video'" v-videoplayer="a" class="video" v-bind:class="{playing:a.player_view.state=='playing'}" v-bind:style="a.view.inner_style + ';background-image: url('+a.view.thumbnail_uri+');'">
+          <video preload="metadata" onclick="" v-bind:controls="a.player_view.state=='playing' || a.player_view.state=='paused'" v-bind:poster="a.view.thumbnail_uri">
             <source v-for="rep in a.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
             <source v-if="a.payload_uri && a.mime" v-bind:src="a.payload_uri" v-bind:type="a.mime" />
           </video>
@@ -162,14 +162,13 @@
               <span class="btn-option play">
                 <span class="icon icon-controls-play"></span>
               </span>
-
               <span class="btn-option pause">
                 <span class="icon icon-controls-pause"></span>
               </span>
             </div>
 
             <span class="btn btn-md btn-round btn-icon stop" v-show="a.player_view.state=='playing' || a.player_view.state=='paused'">
-              <span class="icon icon-controls-stop"></span>
+              <span class="icon icon-controls-eject"></span>
             </span>
 
           </div>
@@ -343,4 +342,4 @@
     </button>
   </div>
 
-</div>
+</div>