{#key path}
diff --git a/src/frontend/components/drawer/media/Media.svelte b/src/frontend/components/drawer/media/Media.svelte
index 69430c95..b8d0ca43 100644
--- a/src/frontend/components/drawer/media/Media.svelte
+++ b/src/frontend/components/drawer/media/Media.svelte
@@ -122,6 +122,7 @@
}
let filesInFolders: string[] = []
+ let folderFiles: any = {}
let listenerId = uid()
onDestroy(() => destroy(READ_FOLDER, listenerId))
@@ -133,11 +134,17 @@
if (active !== "all" && msg.path !== path) return
- files.push(...msg.files.filter((file: any) => isMediaExtension(file.extension) || file.folder))
+ files.push(...msg.files.filter((file: any) => file.folder || isMediaExtension(file.extension)))
files = sortFilenames(files).sort((a: any, b: any) => (a.folder === b.folder ? 0 : a.folder ? -1 : 1))
files = files.map((a) => ({ ...a, path: a.folder ? a.path : a.path }))
+ // set valid files in folder
+ folderFiles = {}
+ Object.keys(msg.folderFiles).forEach((path) => {
+ folderFiles[path] = msg.folderFiles[path].filter((file) => file.folder || isMediaExtension(file.extension))
+ })
+
filterFiles()
}
@@ -171,6 +178,9 @@
filteredFiles = filteredFiles.filter((a) => !a.folder && $media[a.path]?.tags?.length && !$activeMediaTagFilter.find((tagId) => !$media[a.path].tags!.includes(tagId)))
}
+ // remove folders with no content
+ filteredFiles = filteredFiles.filter((a) => !a.folder || !folderFiles[a.path] || folderFiles[a.path].length > 0)
+
// reset arrow selector
loadAllFiles(filteredFiles)
diff --git a/src/frontend/components/drawer/media/MediaCard.svelte b/src/frontend/components/drawer/media/MediaCard.svelte
index 265e4c8d..f5865bcc 100644
--- a/src/frontend/components/drawer/media/MediaCard.svelte
+++ b/src/frontend/components/drawer/media/MediaCard.svelte
@@ -149,7 +149,7 @@
icon={thumbnail ? icon : null}
white={type === "image"}
showPlayOnHover
- checkered
+ checkered={mediaStyle.fit !== "blur"}
on:mousedown={mousedown}
on:click={click}
on:dblclick={dblclick}
diff --git a/src/frontend/components/drawer/media/MediaLoader.svelte b/src/frontend/components/drawer/media/MediaLoader.svelte
index f83d129d..04d39a61 100644
--- a/src/frontend/components/drawer/media/MediaLoader.svelte
+++ b/src/frontend/components/drawer/media/MediaLoader.svelte
@@ -92,7 +92,8 @@
}, 20)
}
- $: mediaStyleString = `pointer-events: none;position: absolute;width: 100%;height: 100%;filter: ${mediaStyle.filter || ""};object-fit: ${mediaStyle.fit || "contain"};transform: scale(${mediaStyle.flipped ? "-1" : "1"}, ${mediaStyle.flippedY ? "-1" : "1"});`
+ $: mediaStyleString = `pointer-events: none;position: absolute;width: 100%;height: 100%;filter: ${mediaStyle.filter || ""};object-fit: ${mediaStyle.fit === "blur" ? "contain" : mediaStyle.fit || "contain"};transform: scale(${mediaStyle.flipped ? "-1" : "1"}, ${mediaStyle.flippedY ? "-1" : "1"});`
+ $: mediaStyleBlurString = `filter: blur(4px) opacity(0.3);object-fit: cover;pointer-events: none;position: absolute;width: 100%;height: 100%;filter: ${mediaStyle.filter || ""};transform: scale(${mediaStyle.flipped ? "-1" : "1"}, ${mediaStyle.flippedY ? "-1" : "1"});`
let readyToLoad: boolean = false
onMount(() => {
@@ -114,6 +115,9 @@
{:else if type !== "video" || (thumbnailPath && retryCount <= MAX_RETRIES)}
{#key retryCount}
+ {#if mediaStyle.fit === "blur"}
+ 
+ {/if}
+
+
+ {/if}
diff --git a/src/frontend/components/drawer/pages/TemplateSlide.svelte b/src/frontend/components/drawer/pages/TemplateSlide.svelte
index 8c1d3eb6..8f7a812a 100644
--- a/src/frontend/components/drawer/pages/TemplateSlide.svelte
+++ b/src/frontend/components/drawer/pages/TemplateSlide.svelte
@@ -57,13 +57,16 @@
// let backgroundColor: string = ""
// $: if (!edit && !template.items?.length) backgroundColor = template.color || "transparent"
// else backgroundColor = template.settings?.backgroundColor || currentStyle.background || "black"
+
+ $: checkered = (!preview || template.items?.length > 0) && !template.settings?.backgroundColor && !thumbnailPath
0) && !template.settings?.backgroundColor && !thumbnailPath}
+ {checkered}
+ border={!preview && checkered}
{resolution}
style={width && height ? getStyleResolution(resolution, width, height, "fit", { zoom }) : ""}
bind:ratio
diff --git a/src/frontend/components/drawer/pages/Templates.svelte b/src/frontend/components/drawer/pages/Templates.svelte
index a04040e1..f4a3279e 100644
--- a/src/frontend/components/drawer/pages/Templates.svelte
+++ b/src/frontend/components/drawer/pages/Templates.svelte
@@ -1,6 +1,6 @@
{#if item?.type === "list"}
@@ -62,7 +65,10 @@
- {#if item.language}
+ {#if item?.language}
a.code === item.language)?.name || item.language} class="actionButton" style="zoom: {1 / ratio};left: 0;right: unset;">