bb357f294a
- Remove imageCache Map that only stored null values - Remove selectedImageData Blob property (never used) - Remove cacheImageData method and related function props - Remove handleImageLoad method from ActivityListItem - Clean up ImageViewer component props - Fix TypeScript compilation by replacing legacy logConsoleAndDb calls - Replace logConsoleAndDb with logger.error in deepLinks service - Images continue to work via direct URL references The image cache system was non-functional and only stored null values. ImageViewer component ignored blob data and only used URLs. Fixed production build failure caused by undefined logConsoleAndDb function. Removing dead code improves maintainability without affecting functionality.
95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition name="fade">
|
|
<div v-if="isOpen" class="fixed inset-0 z-50 flex flex-col bg-black/90">
|
|
<!-- Header bar - fixed height to prevent overlap -->
|
|
<div class="h-16 flex justify-between items-center px-4 bg-black">
|
|
<button
|
|
class="text-white text-2xl p-2 rounded-full hover:bg-white/10"
|
|
@click="close"
|
|
>
|
|
<font-awesome icon="xmark" />
|
|
</button>
|
|
|
|
<!-- Mobile share button -->
|
|
<button
|
|
v-if="isMobile"
|
|
class="text-white text-xl p-2 rounded-full hover:bg-white/10"
|
|
@click="handleShare"
|
|
>
|
|
<font-awesome icon="ellipsis" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Image container - fill remaining space -->
|
|
<div class="flex-1 flex items-center justify-center p-2">
|
|
<div class="w-full h-full flex items-center justify-center">
|
|
<img
|
|
:src="imageUrl"
|
|
class="max-h-[calc(100vh-5rem)] w-full h-full object-contain"
|
|
alt="expanded shared content"
|
|
@click="close"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-facing-decorator";
|
|
import { UAParser } from "ua-parser-js";
|
|
import { logger } from "../utils/logger";
|
|
|
|
@Component({ emits: ["update:isOpen"] })
|
|
export default class ImageViewer extends Vue {
|
|
@Prop() imageUrl!: string;
|
|
@Prop() isOpen!: boolean;
|
|
|
|
userAgent = new UAParser();
|
|
|
|
get isMobile() {
|
|
const os = this.userAgent.getOS().name;
|
|
return os === "iOS" || os === "Android";
|
|
}
|
|
|
|
close() {
|
|
this.$emit("update:isOpen", false);
|
|
}
|
|
|
|
async handleShare() {
|
|
const os = this.userAgent.getOS().name;
|
|
|
|
try {
|
|
if (os === "iOS" || os === "Android") {
|
|
if (navigator.share) {
|
|
// Always share the URL since it's more reliable across platforms
|
|
await navigator.share({
|
|
url: this.imageUrl,
|
|
});
|
|
} else {
|
|
// Fallback for browsers without share API
|
|
window.open(this.imageUrl, "_blank");
|
|
}
|
|
}
|
|
} catch (error) {
|
|
logger.warn("Share failed, opening in new tab:", error);
|
|
window.open(this.imageUrl, "_blank");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|