Improved media handling, added trailer support. Fetching media from Vixen network frontpages.

assets/components/release/release.vue

@@ -4,17 +4,27 @@
             class="banner"
             @wheel.prevent="scrollBanner"
         >
+            <div class="banner-trailer">
+                <video
+                    v-if="release.trailer"
+                    :src="`/${release.trailer.path}`"
+                    :poster="`/${release.poster && release.poster.path}`"
+                    :alt="release.title"
+                    class="banner-item"
+                    controls
+                >Sorry, the tailer cannot be played in your browser</video>
+            </div>
+
             <a
                 v-for="photo in photos"
                 :key="`banner-${photo.index}`"
-                :href="`/${photo.file}`"
+                :href="`/${photo.path}`"
                 target="_blank"
                 rel="noopener noreferrer"
-
             >
                 <img
-                    :src="`/${photo.file}`"
-                    :alt="`Photo ${photo.index}`"
+                    :src="`/${photo.path}`"
+                    :alt="`Photo ${photo.index + 1}`"
                     class="banner-item"
                 >
             </a>
@@ -90,14 +100,14 @@ function scrollBanner(event) {
 }
 
 function photos() {
-    if (this.release && this.release.photos.length) {
-        if (this.release.photos[0].role === 'poster') {
-            return this.release.photos.slice(1);
-        }
-
+    if (this.release.photos.length) {
         return this.release.photos;
     }
 
+    if (this.release.poster && !this.release.trailer) {
+        return [this.release.poster];
+    }
+
     return [];
 }
 
@@ -131,12 +141,17 @@ export default {
     margin: 0 0 1rem 0;
     scrollbar-width: none;
     box-shadow: 0 0 3px $shadow;
+    font-size: 0;
 
     &::-webkit-scrollbar {
         display: none;
     }
 }
 
+.banner-trailer {
+    display: inline-block;
+}
+
 .banner-item {
     height: 20rem;
     vertical-align: middle;