@@ -103,6 +103,7 @@
import { IEvent, IEventCardOptions } from "@/types/event.model";
import { Component, Prop, Vue } from "vue-property-decorator";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import { Actor, Person } from "@/types/actor";
import { EventStatus, ParticipantRole } from "@/types/enums";
import RouteName from "../../router/name";
@@ -110,6 +111,7 @@ import RouteName from "../../router/name";
@Component({
components: {
DateCalendarIcon,
+ LazyImageWrapper,
},
})
export default class EventCard extends Vue {
@@ -220,6 +222,22 @@ a.card {
.card-content {
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 {
font-size: 1.2rem;
line-height: 1.25rem;
diff --git a/js/src/components/Image/BlurhashImg.vue b/js/src/components/Image/BlurhashImg.vue
new file mode 100644
index 000000000..9181991a1
--- /dev/null
+++ b/js/src/components/Image/BlurhashImg.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
diff --git a/js/src/components/Image/LazyImage.vue b/js/src/components/Image/LazyImage.vue
new file mode 100644
index 000000000..c5d95b7f5
--- /dev/null
+++ b/js/src/components/Image/LazyImage.vue
@@ -0,0 +1,117 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/src/components/Image/LazyImageWrapper.vue b/js/src/components/Image/LazyImageWrapper.vue
new file mode 100644
index 000000000..41779935c
--- /dev/null
+++ b/js/src/components/Image/LazyImageWrapper.vue
@@ -0,0 +1,40 @@
+
+
+
+
diff --git a/js/src/types/media.model.ts b/js/src/types/media.model.ts
index 69189591d..cc8e42fd4 100644
--- a/js/src/types/media.model.ts
+++ b/js/src/types/media.model.ts
@@ -3,6 +3,7 @@ export interface IMedia {
url: string;
name: string;
alt: string;
+ metadata: IMediaMetadata;
}
export interface IMediaUpload {
@@ -10,3 +11,9 @@ export interface IMediaUpload {
name: string;
alt: string | null;
}
+
+export interface IMediaMetadata {
+ width?: number;
+ height?: number;
+ blurhash?: string;
+}
diff --git a/js/yarn.lock b/js/yarn.lock
index 85fcd1939..ed73c971a 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -3416,6 +3416,11 @@ bluebird@^3.1.1, bluebird@^3.7.2:
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
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:
version "1.19.0"
resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"