forked from potsda.mn/mobilizon
Add Blurhash to front-end
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
a24e08a6de
commit
1ac9b43a61
|
@ -30,6 +30,7 @@
|
||||||
"@tiptap/starter-kit": "^2.0.0-beta.37",
|
"@tiptap/starter-kit": "^2.0.0-beta.37",
|
||||||
"@tiptap/vue-2": "^2.0.0-beta.21",
|
"@tiptap/vue-2": "^2.0.0-beta.21",
|
||||||
"apollo-absinthe-upload-link": "^1.5.0",
|
"apollo-absinthe-upload-link": "^1.5.0",
|
||||||
|
"blurhash": "^1.1.3",
|
||||||
"buefy": "^0.9.0",
|
"buefy": "^0.9.0",
|
||||||
"bulma-divider": "^0.2.0",
|
"bulma-divider": "^0.2.0",
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
|
|
33
js/src/components/Event/EventBanner.vue
Normal file
33
js/src/components/Event/EventBanner.vue
Normal file
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="banner-container">
|
||||||
|
<lazy-image-wrapper :picture="picture" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { IMedia } from "@/types/media.model";
|
||||||
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||||
|
import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
components: {
|
||||||
|
LazyImageWrapper,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
export default class EventBanner extends Vue {
|
||||||
|
@Prop({ required: true, default: null })
|
||||||
|
picture!: IMedia | null;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.banner-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
::v-deep img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: 50% 50%;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -4,12 +4,11 @@
|
||||||
:to="{ name: 'Event', params: { uuid: event.uuid } }"
|
:to="{ name: 'Event', params: { uuid: event.uuid } }"
|
||||||
>
|
>
|
||||||
<div class="card-image">
|
<div class="card-image">
|
||||||
<figure
|
<figure class="image is-16by9">
|
||||||
class="image is-16by9"
|
<lazy-image-wrapper
|
||||||
:style="`background-image: url('${
|
:picture="event.picture"
|
||||||
event.picture ? event.picture.url : '/img/mobilizon_default_card.png'
|
style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
|
||||||
}')`"
|
/>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="tag-container"
|
class="tag-container"
|
||||||
v-if="event.tags || event.status !== EventStatus.CONFIRMED"
|
v-if="event.tags || event.status !== EventStatus.CONFIRMED"
|
||||||
|
@ -34,6 +33,7 @@
|
||||||
<div class="media">
|
<div class="media">
|
||||||
<div class="media-left">
|
<div class="media-left">
|
||||||
<date-calendar-icon
|
<date-calendar-icon
|
||||||
|
:small="true"
|
||||||
v-if="!mergedOptions.hideDate"
|
v-if="!mergedOptions.hideDate"
|
||||||
:date="event.beginsOn"
|
:date="event.beginsOn"
|
||||||
/>
|
/>
|
||||||
|
@ -103,6 +103,7 @@
|
||||||
import { IEvent, IEventCardOptions } from "@/types/event.model";
|
import { IEvent, IEventCardOptions } from "@/types/event.model";
|
||||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||||
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
|
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
|
||||||
|
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
|
||||||
import { Actor, Person } from "@/types/actor";
|
import { Actor, Person } from "@/types/actor";
|
||||||
import { EventStatus, ParticipantRole } from "@/types/enums";
|
import { EventStatus, ParticipantRole } from "@/types/enums";
|
||||||
import RouteName from "../../router/name";
|
import RouteName from "../../router/name";
|
||||||
|
@ -110,6 +111,7 @@ import RouteName from "../../router/name";
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
DateCalendarIcon,
|
DateCalendarIcon,
|
||||||
|
LazyImageWrapper,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class EventCard extends Vue {
|
export default class EventCard extends Vue {
|
||||||
|
@ -220,6 +222,22 @@ a.card {
|
||||||
.card-content {
|
.card-content {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
& > .media {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
& > .media-left {
|
||||||
|
margin-top: -15px;
|
||||||
|
height: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-left: 0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.event-title {
|
.event-title {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
|
|
34
js/src/components/Image/BlurhashImg.vue
Normal file
34
js/src/components/Image/BlurhashImg.vue
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<canvas ref="canvas" width="32" height="32" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { decode } from "blurhash";
|
||||||
|
import { Component, Prop, Ref, Vue } from "vue-property-decorator";
|
||||||
|
|
||||||
|
@Component
|
||||||
|
export default class extends Vue {
|
||||||
|
@Prop({ type: String, required: true }) hash!: string;
|
||||||
|
@Prop({ type: Number, default: 1 }) aspectRatio!: string;
|
||||||
|
|
||||||
|
@Ref("canvas") readonly canvas!: any;
|
||||||
|
|
||||||
|
mounted(): void {
|
||||||
|
const pixels = decode(this.hash, 32, 32);
|
||||||
|
const imageData = new ImageData(pixels, 32, 32);
|
||||||
|
const context = this.canvas.getContext("2d");
|
||||||
|
context.putImageData(imageData, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
117
js/src/components/Image/LazyImage.vue
Normal file
117
js/src/components/Image/LazyImage.vue
Normal file
|
@ -0,0 +1,117 @@
|
||||||
|
<template>
|
||||||
|
<div ref="wrapper" class="wrapper" v-bind="$attrs">
|
||||||
|
<div class="relative container">
|
||||||
|
<!-- Show the placeholder as background -->
|
||||||
|
<blurhash-img
|
||||||
|
v-if="blurhash"
|
||||||
|
:hash="blurhash"
|
||||||
|
:aspect-ratio="height / width"
|
||||||
|
class="top-0 left-0 transition-opacity duration-500"
|
||||||
|
:class="isLoaded ? 'opacity-0' : 'opacity-100'"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Show the real image on the top and fade in after loading -->
|
||||||
|
<img
|
||||||
|
ref="image"
|
||||||
|
:width="width"
|
||||||
|
:height="height"
|
||||||
|
class="absolute top-0 left-0 transition-opacity duration-500"
|
||||||
|
:class="isLoaded ? 'opacity-100' : 'opacity-0'"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Prop, Component, Vue, Ref, Watch } from "vue-property-decorator";
|
||||||
|
import BlurhashImg from "./BlurhashImg.vue";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
components: {
|
||||||
|
BlurhashImg,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
export default class LazyImage extends Vue {
|
||||||
|
@Prop({ type: String, required: true }) src!: string;
|
||||||
|
@Prop({ type: String, required: false, default: null }) blurhash!: string;
|
||||||
|
@Prop({ type: Number, default: 1 }) width!: number;
|
||||||
|
@Prop({ type: Number, default: 1 }) height!: number;
|
||||||
|
|
||||||
|
inheritAttrs = false;
|
||||||
|
isLoaded = false;
|
||||||
|
|
||||||
|
observer!: IntersectionObserver;
|
||||||
|
|
||||||
|
@Ref("wrapper") readonly wrapper!: any;
|
||||||
|
@Ref("image") image!: any;
|
||||||
|
|
||||||
|
mounted(): void {
|
||||||
|
this.observer = new IntersectionObserver((entries) => {
|
||||||
|
if (entries[0].isIntersecting) {
|
||||||
|
this.onEnter();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.observer.observe(this.wrapper);
|
||||||
|
}
|
||||||
|
|
||||||
|
unmounted(): void {
|
||||||
|
this.observer.disconnect();
|
||||||
|
}
|
||||||
|
|
||||||
|
onEnter(): void {
|
||||||
|
// Image is visible (means: has entered the viewport),
|
||||||
|
// so start loading by setting the src attribute
|
||||||
|
this.image.src = this.src;
|
||||||
|
|
||||||
|
this.image.onload = () => {
|
||||||
|
// Image is loaded, so start fading in
|
||||||
|
this.isLoaded = true;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
@Watch("src")
|
||||||
|
updateImageWithSrcChange(): void {
|
||||||
|
this.onEnter();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.top-0 {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.left-0 {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.opacity-100 {
|
||||||
|
opacity: 100%;
|
||||||
|
}
|
||||||
|
.opacity-0 {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.transition-opacity {
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.duration-500 {
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
}
|
||||||
|
.wrapper,
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: 50% 50%;
|
||||||
|
}
|
||||||
|
</style>
|
40
js/src/components/Image/LazyImageWrapper.vue
Normal file
40
js/src/components/Image/LazyImageWrapper.vue
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<lazy-image
|
||||||
|
v-if="pictureOrDefault.url !== undefined"
|
||||||
|
:src="pictureOrDefault.url"
|
||||||
|
:width="pictureOrDefault.metadata.width"
|
||||||
|
:height="pictureOrDefault.metadata.height"
|
||||||
|
:blurhash="pictureOrDefault.metadata.blurhash"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { IMedia } from "@/types/media.model";
|
||||||
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||||
|
import LazyImage from "../Image/LazyImage.vue";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
components: {
|
||||||
|
LazyImage,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
export default class LazyImageWrapper extends Vue {
|
||||||
|
@Prop({ required: true, default: null })
|
||||||
|
picture!: IMedia | null;
|
||||||
|
|
||||||
|
get pictureOrDefault(): Partial<IMedia> {
|
||||||
|
return {
|
||||||
|
url:
|
||||||
|
this?.picture?.url === null
|
||||||
|
? "/img/mobilizon_default_card.png"
|
||||||
|
: this?.picture?.url,
|
||||||
|
metadata: {
|
||||||
|
width: this?.picture?.metadata?.width || 630,
|
||||||
|
height: this?.picture?.metadata?.height || 350,
|
||||||
|
blurhash:
|
||||||
|
this?.picture?.metadata?.blurhash ||
|
||||||
|
"MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -3,6 +3,7 @@ export interface IMedia {
|
||||||
url: string;
|
url: string;
|
||||||
name: string;
|
name: string;
|
||||||
alt: string;
|
alt: string;
|
||||||
|
metadata: IMediaMetadata;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IMediaUpload {
|
export interface IMediaUpload {
|
||||||
|
@ -10,3 +11,9 @@ export interface IMediaUpload {
|
||||||
name: string;
|
name: string;
|
||||||
alt: string | null;
|
alt: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface IMediaMetadata {
|
||||||
|
width?: number;
|
||||||
|
height?: number;
|
||||||
|
blurhash?: string;
|
||||||
|
}
|
||||||
|
|
|
@ -3416,6 +3416,11 @@ bluebird@^3.1.1, bluebird@^3.7.2:
|
||||||
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
|
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
|
||||||
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
|
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
|
||||||
|
|
||||||
|
blurhash@^1.1.3:
|
||||||
|
version "1.1.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.3.tgz#dc325af7da836d07a0861d830bdd63694382483e"
|
||||||
|
integrity sha512-yUhPJvXexbqbyijCIE/T2NCXcj9iNPhWmOKbPTuR/cm7Q5snXYIfnVnz6m7MWOXxODMz/Cr3UcVkRdHiuDVRDw==
|
||||||
|
|
||||||
body-parser@1.19.0:
|
body-parser@1.19.0:
|
||||||
version "1.19.0"
|
version "1.19.0"
|
||||||
resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
|
resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
|
||||||
|
|
Loading…
Reference in a new issue