1
0
Fork 0

transferred PR 1055 of upstream

This commit is contained in:
Allilengyi 2024-02-04 00:02:58 +01:00
parent 4cdbf78037
commit c71eb853c5
4 changed files with 185 additions and 5 deletions

View file

@ -1,11 +1,11 @@
<template> <template>
<div class="flex justify-center max-h-80"> <div class="flex justify-center max-h-80">
<lazy-image-wrapper :picture="picture" /> <blurhash-img-wrapper :picture="picture" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { IMedia } from "@/types/media.model"; import { IMedia } from "@/types/media.model";
import LazyImageWrapper from "../Image/LazyImageWrapper.vue"; import BlurhashImgWrapper from "../Image/BlurhashImgWrapper.vue";
withDefaults( withDefaults(
defineProps<{ defineProps<{

View file

@ -154,6 +154,98 @@
> >
<span v-else>{{ extra.value }}</span> <span v-else>{{ extra.value }}</span>
</event-metadata-block> </event-metadata-block>
<div v-if="event.picture">
<h2>{{ $t("Headline picture") }}</h2>
<div style="position: relative" @click="showImage = true">
<img :src="event.picture.url" style="width: 100%" />
</div>
</div>
<b-modal v-if="event.picture" :active.sync="showImage" has-modal-card>
<div>
<header class="modal-card-head">{{ $t("Headline picture") }}</header>
<section
class="modal-card"
style="width: auto; -webkit-overflow-scrolling: touch; overflow: auto"
>
<img :src="event.picture.url" />
</section>
<footer class="modal-card-foot"></footer>
</div>
</b-modal>
<b-modal
class="map-modal"
v-if="physicalAddress && physicalAddress.geom"
:active.sync="showMap"
has-modal-card
full-screen
>
<div class="modal-card">
<header class="modal-card-head">
<button type="button" class="delete" @click="showMap = false" />
</header>
<div class="modal-card-body">
<section class="map">
<map-leaflet
:coords="physicalAddress.geom"
:marker="{
text: physicalAddress.fullName,
icon: physicalAddress.poiInfos.poiIcon.icon,
}"
/>
</section>
<section class="columns is-centered map-footer">
<div class="column is-half has-text-centered">
<p class="address">
<i class="mdi mdi-map-marker"></i>
{{ physicalAddress.fullName }}
</p>
<p class="getting-there">{{ $t("Getting there") }}</p>
<div
class="buttons"
v-if="
addressLinkToRouteByCar ||
addressLinkToRouteByBike ||
addressLinkToRouteByFeet
"
>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByFeet"
:href="addressLinkToRouteByFeet"
>
<i class="mdi mdi-walk"></i
></a>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByBike"
:href="addressLinkToRouteByBike"
>
<i class="mdi mdi-bike"></i
></a>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByTransit"
:href="addressLinkToRouteByTransit"
>
<i class="mdi mdi-bus"></i
></a>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByCar"
:href="addressLinkToRouteByCar"
>
<i class="mdi mdi-car"></i>
</a>
</div>
</div>
</section>
</div>
</div>
</b-modal>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View file

@ -1,5 +1,5 @@
<template> <template>
<canvas ref="canvas" width="32" height="32" /> <canvas ref="canvas" width="128" height="32" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -20,13 +20,21 @@ const canvas = ref<HTMLCanvasElement | undefined>(undefined);
onMounted(() => { onMounted(() => {
try { try {
if (canvas.value) { if (canvas.value) {
const pixels = decode(props.hash, 32, 32); const pixels = decode(props.hash, 128, 32);
const imageData = new ImageData(pixels, 32, 32); const imageData = new ImageData(pixels, 128, 32);
const context = canvas.value.getContext("2d"); const context = canvas.value.getContext("2d");
if (context) { if (context) {
context.putImageData(imageData, 0, 0); context.putImageData(imageData, 0, 0);
} }
} }
@Watch("hash")
updateHashChange(): void {
try {
const pixels = decode(this.hash, 128, 32);
const imageData = new ImageData(pixels, 128, 32);
const context = this.canvas.getContext("2d");
context.putImageData(imageData, 0, 0);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }

View file

@ -0,0 +1,80 @@
<template>
<div class="wrapper" v-bind="$attrs">
<div class="relative container">
<blurhash-img
v-if="pictureOrDefault.metadata.blurhash"
:hash="pictureOrDefault.metadata.blurhash"
class="top-0 left-0"
/>
</div>
</div>
</template>
<script lang="ts">
import { IMedia } from "@/types/media.model";
import { Prop, Component, Vue } from "vue-property-decorator";
import { PropType } from "vue";
import BlurhashImg from "./BlurhashImg.vue";
const DEFAULT_CARD_URL = "/img/mobilizon_default_card.png";
const DEFAULT_BLURHASH = "MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD";
const DEFAULT_WIDTH = 630;
const DEFAULT_HEIGHT = 350;
const DEFAULT_PICTURE = {
url: DEFAULT_CARD_URL,
metadata: {
width: DEFAULT_WIDTH,
height: DEFAULT_HEIGHT,
blurhash: DEFAULT_BLURHASH,
},
};
@Component({
components: {
BlurhashImg,
},
})
export default class BlurhashImgWrapper extends Vue {
@Prop({ required: false, type: Object as PropType<IMedia | null> })
picture!: IMedia | null;
get pictureOrDefault(): Partial<IMedia> {
if (this.picture === null) {
return DEFAULT_PICTURE;
}
return {
url: this?.picture?.url,
metadata: {
width: this?.picture?.metadata?.width,
height: this?.picture?.metadata?.height,
blurhash: this?.picture?.metadata?.blurhash,
},
};
}
}
</script>
<style lang="scss" scoped>
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.top-0 {
top: 0;
}
.left-0 {
left: 0;
}
.wrapper,
.container {
display: flex;
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
</style>