Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui): extract lightbox logic to its own component #163

Merged
merged 1 commit into from
Oct 21, 2024
Merged

refactor(ui): extract lightbox logic to its own component #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions ui/src/lib/LightboxImage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<script lang="ts">
import BiggerPicture from 'bigger-picture';
import 'bigger-picture/css';

export let btnClass = "";
export let src = "";
export let alt = "";

let biggerPicture = BiggerPicture({
target: document.body
});

function show(e: PointerEvent | MouseEvent) {
const targetImg = e.target as HTMLImageElement;
biggerPicture.open({
items: [
{
// Because we don't know the original image dimensions,
// we scale by 10x and let bigger-picture handle constaining within window
// TODO: use the original image dimensions either by publishing to DHT or determining after downloading image
width: targetImg.width * 10,
height: targetImg.height * 10,
img: src,
}
]
})
}
</script>

<button on:click={(e) => show(e)} class={btnClass}}>
<img {src} {alt} class="object-cover" />
</button>

<style>
:global(.bp-zoomed.bp-small .bp-controls) {
opacity: 1 !important;
}

:global(.bp-close) {
z-index: 50;
}
</style>
27 changes: 2 additions & 25 deletions ui/src/routes/conversations/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@
import { copyToClipboard, isMobile, linkify, sanitizeHTML, shareText } from '$lib/utils';
import { RelayStore } from '$store/RelayStore';
import { Privacy, type Conversation, type Message, type Image } from '../../../types';
import BiggerPicture from 'bigger-picture';
import 'bigger-picture/css';
import LightboxImage from '$lib/LightboxImage.svelte';

// Silly hack to get around issues with typescript in sveltekit-i18n
const tAny = t as any;
Expand Down Expand Up @@ -46,10 +45,6 @@
let scrollAtBottom = true;
let scrollAtTop = false;

let biggerPicture = BiggerPicture({
target: document.body
});

const SCROLL_BOTTOM_THRESHOLD = 100; // How close to the bottom must the user be to consider it "at the bottom"
const SCROLL_TOP_THRESHOLD = 300; // How close to the top must the user be to consider it "at the top"

Expand Down Expand Up @@ -241,22 +236,6 @@
})
}
}

function handleOpenImageLightbox(e: PointerEvent | MouseEvent, url: string) {
const targetImg = e.target as HTMLImageElement;
biggerPicture.open({
items: [
{
// Because we don't know the original image dimensions,
// we scale by 10x and let bigger-picture handle constaining within window
// TODO: use the original image dimensions either by publishing to DHT or determining after downloading image
width: targetImg.width * 10,
height: targetImg.height * 10,
img: url,
}
]
})
}
</script>

<Header>
Expand Down Expand Up @@ -384,9 +363,7 @@
{#each message.images as image}
<div class='flex {fromMe ? 'justify-end' : 'justify-start'}'>
{#if image.status === 'loaded'}
<button class='inline max-w-2/3 mb-2' on:click={(e) => handleOpenImageLightbox(e, image.dataURL) }>
<img src={image.dataURL} alt={image.name} class="object-cover" />
</button>
<LightboxImage btnClass='inline max-w-2/3 mb-2' src={image.dataURL} alt={image.name} />
{:else if image.status === 'loading' || image.status === 'pending'}
<div class='w-20 h-20 bg-surface-800 mb-2 flex items-center justify-center'>
<SvgIcon icon='spinner' color={$modeCurrent ? '%232e2e2e' : 'white'} size='30' />
Expand Down