Added photo album support to Blowpass scraper.

2019-12-13 05:04:04 +01:00
parent c9e0c29d51
commit c998fcf933
8 changed files with 606 additions and 6 deletions
--- a/assets/components/releases/banner.vue
+++ b/assets/components/releases/banner.vue
@@ -0,0 +1,117 @@
+<template>
+    <div
+        class="banner"
+        @wheel.prevent="scrollBanner"
+    >
+        <template v-if="release.covers && release.covers.length > 0">
+            <a
+                v-for="cover in release.covers"
+                :key="`cover-${cover.id}`"
+                :href="`/media/${cover.path}`"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <img
+                    :src="`/media/${cover.thumbnail}`"
+                    class="cover"
+                >
+            </a>
+        </template>
+
+        <div class="trailer">
+            <video
+                v-if="release.trailer"
+                :src="`/media/${release.trailer.path}`"
+                :poster="`/media/${(release.poster && release.poster.thumbnail) || (release.photos.length && release.photos[Math.floor(Math.random() * release.photos.length)].path)}`"
+                :alt="release.title"
+                class="item trailer-video"
+                controls
+            >Sorry, the tailer cannot be played in your browser</video>
+        </div>
+
+        <a
+            v-for="photo in photos"
+            :key="`banner-${photo.index}`"
+            :href="`/media/${photo.path}`"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            <img
+                :src="`/media/${photo.thumbnail}`"
+                :alt="`Photo ${photo.index + 1}`"
+                class="item"
+            >
+        </a>
+    </div>
+</template>
+
+<script>
+function photos() {
+    if (this.release.photos.length) {
+        const set = this.release.photos.sort(({ index: indexA }, { index: indexB }) => indexA - indexB);
+
+        if (this.release.trailer) {
+            return set;
+        }
+
+        return [this.release.poster].concat(set);
+    }
+
+    if (this.release.poster && !this.release.trailer) {
+        return [this.release.poster];
+    }
+
+    return [];
+}
+
+function scrollBanner(event) {
+    event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
+}
+
+export default {
+    props: {
+        release: {
+            type: Object,
+            default: null,
+        },
+    },
+    computed: {
+        photos,
+    },
+    methods: {
+        scrollBanner,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.banner {
+    background: $empty;
+    flex-shrink: 0;
+    white-space: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    box-shadow: 0 0 3px $shadow;
+    font-size: 0;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.trailer {
+    display: inline-block;
+    max-width: 100vw;
+}
+
+.trailer-video {
+    max-width: 100%;
+}
+
+.item {
+    height: 18rem;
+    vertical-align: middle;
+}
+</style>