Merge branch 'feature/video-native-timeline' of https://github.com/arillo/spacedeck-open into arillo-feature/video-native-timeline

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

@@ -15185,6 +15185,8 @@ button.close {
     width: 100%;
     height: 100%;
     background-size: cover; }
+    .artifact .video.playing video {
+      z-index: 1; }
     .artifact .video .title {
       position: absolute;
       bottom: 0px;
@@ -15198,13 +15200,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

@@ -324,6 +324,12 @@
     height: 100%;
     background-size: cover;
 
+    &.playing {
+      video {
+        z-index: 1;
+      }
+    }
+
     .title {
       position: absolute;
       bottom: 0px;
@@ -340,14 +346,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,28 +151,11 @@
         </div>
 
         <!-- video -->
-        <div v-if="a.view.major_type == 'video'" v-videoplayer="a" class="video" v-bind:style="a.view.inner_style">
-          <video preload="metadata" v-bind:poster="a.view.thumbnail_uri">
+        <div v-if="a.view.major_type == 'video'" class="video">
+          <video preload="metadata" controls="auto" v-bind:poster="a.view.thumbnail_uri">
             <source v-for="rep in a.view.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
             <source v-if="a.view.payload_uri && a.view.mime" v-bind:src="a.view.payload_uri" v-bind:type="a.view.mime" />
           </video>
-
-          <div class="tl-controls">
-            <div class="btn btn-md btn-toggle btn-round" v-bind:class="{alt:a.player_view.state=='playing'}">
-              <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>
-
-          </div>
           <div class="spinner"></div>
           <div class="progress" v-bind:style="{width: a.view.progress+'%'}">{{a.description}}</div>
         </div>