Fix export

This commit is contained in:
N-Pex 2025-05-14 10:47:21 +02:00
parent b1d47748c8
commit ac4af0a53d
9 changed files with 41 additions and 32 deletions

View file

@ -1,5 +1,5 @@
<template>
<img v-if="imageSrc" :src="imageSrc" style="width:100%;height:100%" />
<img :src="imageSrc" style="width:100%;height:100%" />
</template>
<script>
@ -11,7 +11,7 @@ export default {
src: {
type: String,
default: function () {
return null;
return undefined;
},
},
},

View file

@ -692,9 +692,6 @@ export default {
canRecordAudio() {
return util.browserCanRecordAudio();
},
debugging() {
return false; //(window.location.host || "").startsWith("localhost");
},
canCreatePoll() {
// We say that if you can redact events, you are allowed to create polls.
const me = this.room && this.room.getMember(this.$matrix.currentUserId);

View file

@ -307,7 +307,7 @@ export default {
for (const comp of childComponents) {
// Avatars need downloading?
if (comp.$el) {
if (comp.$el && comp.$el.nodeType == 1) {
const avatars = comp.$el.getElementsByClassName("v-avatar");
if (avatars && avatars.length > 0) {
const member = this.room.getMember(comp.event.getSender());
@ -353,7 +353,7 @@ export default {
}
}
let componentClass = comp.$vnode.tag.split("-").reverse()[0];
let componentClass = comp.$options ? comp.$options.__file.split("/").reverse()[0].split(".")[0] : "invalid_component";
switch (componentClass) {
case "MessageIncomingImageExport":
case "MessageOutgoingImageExport":
@ -386,21 +386,15 @@ export default {
let fileName = comp.event.getId() + extension;
imageFolder.file(fileName, blob); // TODO calc bytes
let blobUrl = URL.createObjectURL(blob);
comp.src = blobUrl;
this.$nextTick(() => {
// Update source
let elements = comp.$el.getElementsByClassName("v-image__image");
let element = elements && elements[0];
if (element) {
element.style.backgroundImage = 'url("./images/' + fileName + '")';
element.classList.remove("v-image__image--preload");
}
URL.revokeObjectURL(blobUrl); // Give the blob back
this.processedEvents += 1;
resolve(true);
});
// Update source
const images = comp.$el.getElementsByTagName("img");
for (let imageIndex = 0; imageIndex < images.length; imageIndex++) {
const img = images[imageIndex];
img.removeAttribute("src");
img.setAttribute("data-exported-src", './images/' + fileName);
}
this.processedEvents += 1;
resolve(true);
}
});
})
@ -419,10 +413,9 @@ export default {
currentMediaSize += blob.size;
return new Promise((resolve, ignoredReject) => {
//let mime = blob.type;
var extension = ".mp3";
var extension = ".webm";
let fileName = comp.event.getId() + extension;
audioFolder.file(fileName, blob); // TODO calc bytes
//this.$nextTick(() => {
let elements = comp.$el.getElementsByTagName("audio");
let element = elements && elements[0];
if (element) {
@ -430,7 +423,6 @@ export default {
}
this.processedEvents += 1;
resolve(true);
//});
});
}
})

View file

@ -107,6 +107,11 @@ export default {
CreatePollDialog,
ReadMarker
},
computed: {
debugging() {
return false; //(window.location.host || "").startsWith("localhost");
},
},
methods: {
showDayMarkerBeforeEvent(event) {
const idx = this.events.indexOf(event);

View file

@ -1,7 +1,7 @@
<template>
<message-incoming v-bind="{ ...$props, ...$attrs }">
<div class="bubble image-bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
<img :src="src" :style="imageStyle" />
</div>
</message-incoming>
</template>
@ -39,6 +39,11 @@ export default {
URL.revokeObjectURL(objectUrl);
}
},
computed: {
imageStyle() {
return "width:100%;aspect-ratio:16/9;object-fit:" + (this.cover ? "cover" : "contain");
}
}
};
</script>

View file

@ -1,7 +1,7 @@
<template>
<message-incoming class="messageIn-thread" v-bind="{ ...$props, ...$attrs }">
<component v-for="item in items" :is="componentFn(item.event)" :originalEvent="item.event" :key="item.event.getId()"
v-bind="{ ...$props, ...$attrs }" ref="exportedEvent" />
<component v-for="item in items" :is="componentFn(item.event)" v-bind="{ ...$props, ...$attrs }" :originalEvent="item.event" :key="item.event.getId()"
ref="exportedEvent" />
</message-incoming>
</template>

View file

@ -1,7 +1,7 @@
<template>
<message-outgoing v-bind="{ ...$props, ...$attrs }">
<div class="bubble image-bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
<img :src="src" :style="imageStyle" />
</div>
</message-outgoing>
</template>
@ -39,6 +39,11 @@ export default {
URL.revokeObjectURL(objectUrl);
}
},
computed: {
imageStyle() {
return "width:100%;aspect-ratio:16/9;object-fit:" + (this.cover ? "cover" : "contain");
}
}
};
</script>

View file

@ -1,7 +1,6 @@
<template>
<message-outgoing class="messageOut-thread" v-bind="{ ...$props, ...$attrs }">
<component v-for="item in items" :is="componentFn(item.event)" :originalEvent="item.event" :key="item.event.getId()"
v-bind="{ ...$props, ...$attrs }" ref="exportedEvent" />
<component v-for="item in items" :is="componentFn(item.event)" v-bind="{ ...$props, ...$attrs }" :originalEvent="item.event" :key="item.event.getId()" ref="exportedEvent" />
</message-outgoing>
</template>

View file

@ -30,7 +30,13 @@ export default defineConfig(({mode}) => ({
// commonjs({
// exclude: ["*vuex-persist*", "*deepmerge*"]
// }),
vue(),
vue({
template: {
compilerOptions: {
comments: false
}
}
}),
vueJsx(),
vitePluginVuetify(),
// Components({