Fixed movie tile lazy loading and SFW image.

This commit is contained in:
DebaucheryLibrarian 2020-12-27 23:10:11 +01:00
parent 1d1c9eae83
commit 31af1ca9e6
4 changed files with 23 additions and 2 deletions

View File

@ -107,6 +107,7 @@ export default {
height: 15rem; height: 15rem;
box-shadow: 0 0 3px var(--darken-weak); box-shadow: 0 0 3px var(--darken-weak);
object-fit: cover; object-fit: cover;
background-position: center;
background-size: cover; background-size: cover;
} }

View File

@ -7,7 +7,9 @@
> >
<img <img
v-if="movie.covers[0]" v-if="movie.covers[0]"
:src="`/media/${movie.covers[0].thumbnail}`" :src="sfw ? `/img/${movie.covers[0].sfw.thumbnail}` : `/media/${movie.covers[0].thumbnail}`"
:style="{ 'background-image': sfw ? `/img/${movie.covers[0].sfw.lazy}` : `/media/${movie.covers[0].lazy }` }"
loading="lazy"
> >
</router-link> </router-link>
@ -56,6 +58,10 @@
<script> <script>
import Details from './tile-details.vue'; import Details from './tile-details.vue';
function sfw() {
return this.$store.state.ui.sfw;
}
export default { export default {
components: { components: {
Details, Details,
@ -66,6 +72,9 @@ export default {
default: null, default: null,
}, },
}, },
computed: {
sfw,
},
}; };
</script> </script>
@ -96,8 +105,10 @@ export default {
img { img {
height: 100%; height: 100%;
max-width: 12rem; max-width: 12rem;
background-position: center;
background-size: cover;
object-fit: cover; object-fit: cover;
object-position: center ; object-position: center;
} }
} }

View File

@ -14,6 +14,7 @@
<img <img
v-if="release.poster" v-if="release.poster"
:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`" :src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
:style="{ 'background-image': sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}` }"
:alt="release.title" :alt="release.title"
class="thumbnail" class="thumbnail"
loading="lazy" loading="lazy"
@ -27,6 +28,7 @@
v-for="cover in release.covers" v-for="cover in release.covers"
:key="cover.id" :key="cover.id"
:src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`" :src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
:style="{ 'background-image': sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
:alt="release.title" :alt="release.title"
class="thumbnail cover" class="thumbnail cover"
loading="lazy" loading="lazy"

View File

@ -98,6 +98,13 @@ function initReleasesActions(store, router) {
path path
thumbnail thumbnail
lazy lazy
sfw: sfwMedia {
id
path
thumbnail
lazy
comment
}
} }
} }
} }