mirrors/DiscordChatExporter-frontend
1
0
Fork 0
mirror of https://github.com/slatinsky/DiscordChatExporter-frontend.git synced 2025-05-11 18:36:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

dev - fix gallery not updating image

Browse source
This commit is contained in:
slatinsky 2024-08-09 21:38:53 +02:00
parent 6b8331c19e
commit bff69f53e2
3 changed files with 39 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

7
newfrontend/src/lib/imagegallery/ImageGallery.svelte
View file

@ -5,6 +5,8 @@
const imagegalleryState = getImagegalleryState();
window.globalShowSingleAsset = imagegalleryState.showSingleAsset;
let shownAsset = $derived(imagegalleryState.shownAsset)
</script>
{#if imagegalleryState.isGalleryShown}
@ -19,15 +21,16 @@
{/if}
<button class="closebtn" on:click={imagegalleryState.closeGallery}>&times;</button>
<div class="imgbox" on:click|stopPropagation>
<img src={checkUrl(imagegalleryState.shownAsset)} width={imagegalleryState.shownAsset?.width ?? undefined} height={imagegalleryState.shownAsset?.height ?? undefined}>
<img src={checkUrl(shownAsset)} width={shownAsset?.width ?? undefined} height={shownAsset?.height ?? undefined}>
<div class="open-original">
<a href={checkUrl(imagegalleryState.shownAsset)} target="_blank">Open in Browser</a>
<a href={checkUrl(shownAsset)} target="_blank">Open in Browser</a>
</div>
</div>
</div>
{/if}
<style>
.gallery-wrapper {
position: fixed;

28
newfrontend/src/lib/imagegallery/imagegalleryState.svelte.ts
View file

@ -4,20 +4,34 @@ let isGalleryShown: boolean = $state(false);
let assets: Asset[] = $state([]);
let shownAssetIndex: number = $state(0);
let assetsCount: number = $derived(assets.length);
let shownAsset: Asset | null = $derived(assets.find((_, i) => i === shownAssetIndex) || null);
let shownAsset: Asset | null = $state(null);
export function getImagegalleryState() {
function _updateShownAsset() {
shownAsset = assets.find((_, i) => i === shownAssetIndex) || null;
}
function showSingleAsset(newAsset: Asset) {
assets = [newAsset];
shownAssetIndex = 0;
isGalleryShown = true;
console.log("imagegallery - showSingleAsset", $state.snapshot(newAsset));
if (!newAsset) {
console.error("imagegallery - showSingleAsset: newAsset is empty");
return;
}
showMultipleAssets([newAsset], newAsset);
}
function showMultipleAssets(newAssets: Asset[], assetToShow: Asset) {
if (!newAssets.length) {
console.error("imagegallery - showMultipleAssets: newAssets is empty");
return;
}
if (!assetToShow) {
console.error("imagegallery - showMultipleAssets: assetToShow is empty");
return;
}
assets = newAssets;
shownAssetIndex = assets.findIndex((asset) => asset._id === assetToShow._id);
_updateShownAsset();
isGalleryShown = true;
console.log("imagegallery - showMultipleAssets", $state.snapshot(assets), $state.snapshot(shownAssetIndex));
@ -26,10 +40,12 @@ export function getImagegalleryState() {
function nextAsset() {
shownAssetIndex = (shownAssetIndex + 1) % assets.length;
_updateShownAsset();
}
function previousAsset() {
shownAssetIndex = (shownAssetIndex - 1 + assets.length) % assets.length;
_updateShownAsset();
}
function closeGallery() {

22
newfrontend/src/lib/menuchannels/ChannelIcon.svelte
View file

@ -8,14 +8,16 @@
}
let { channel, width }: MyProps = $props();
</script>
{#if channel.threads && channel.threads.length > 0}
<Icon name="channeltype/channelWithThreads" width={width} />
{:else if channel.type == "GuildVoiceChat"}
<Icon name="channeltype/voice" width={width} />
{:else if channel.type == "GuildNews"}
<Icon name="channeltype/news" width={width} />
{:else if channel.type == "GuildPublicThread" || channel.type == "GuildPrivateThread"}
<Icon name="channeltype/thread" width={width} />
{:else}
<Icon name="channeltype/channel" width={width} />
{#if channel}
{#if channel.threads && channel.threads.length > 0}
<Icon name="channeltype/channelWithThreads" width={width} />
{:else if channel.type == "GuildVoiceChat"}
<Icon name="channeltype/voice" width={width} />
{:else if channel.type == "GuildNews"}
<Icon name="channeltype/news" width={width} />
{:else if channel.type == "GuildPublicThread" || channel.type == "GuildPrivateThread"}
<Icon name="channeltype/thread" width={width} />
{:else}
<Icon name="channeltype/channel" width={width} />
{/if}
{/if}