Fixed movie tile lazy loading and SFW image.
This commit is contained in:
parent
1d1c9eae83
commit
31af1ca9e6
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -98,6 +98,13 @@ function initReleasesActions(store, router) {
|
||||||
path
|
path
|
||||||
thumbnail
|
thumbnail
|
||||||
lazy
|
lazy
|
||||||
|
sfw: sfwMedia {
|
||||||
|
id
|
||||||
|
path
|
||||||
|
thumbnail
|
||||||
|
lazy
|
||||||
|
comment
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue