Browse Source
fix: image server references and test configurations - Update image server references to use test server by default for local dev - Fix registration status checks in tests - Remove verbose console logging - Update environment configurations for consistent image server usage - Fix alert handling in contact registration tests - Clean up component lifecycle logging - Add clarifying comments about shared image server usage - Update playwright test configurations for better reliability This commit ensures consistent image server behavior across environments and improves test reliability by properly handling registration status checks and alerts.
19 changed files with 633 additions and 147 deletions
@ -0,0 +1,94 @@ |
|||
<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" |
|||
> |
|||
<fa 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" |
|||
> |
|||
<fa 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" |
|||
@click.stop |
|||
alt="expanded shared content" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Transition> |
|||
</Teleport> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Vue, Prop } from "vue-facing-decorator"; |
|||
import { UAParser } from "ua-parser-js"; |
|||
|
|||
@Component({ emits: ["update:isOpen"] }) |
|||
export default class ImageViewer extends Vue { |
|||
@Prop() imageUrl!: string; |
|||
@Prop() imageData!: Blob | null; |
|||
@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) { |
|||
console.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> |
Loading…
Reference in new issue