feat(wrapped): update ui

1 files changed, 28 insertions, 26 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index f6e30a4b..bfd9bbe0 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -25,12 +25,13 @@
 	let abbreviateTitles = true;
 	let maxAbbreviateLength = 40;
 	let transparency = false;
-	let darkTheme = true;
+	let lightTheme = true;
 	let watermark = false;
 	let includeMusic = false;
 	let includeSpecials = false;
 	let includeRepeats = false;
 	let width = 980;
+	let forceDark = false;
 
 	$: {
 		includeMusic = includeMusic;
@@ -183,7 +184,7 @@
 
 		if (dark) {
 			// element.classList.add('light-theme');
-			darkTheme = false;
+			lightTheme = false;
 		}
 
 		if (element !== null) {
@@ -201,9 +202,9 @@
 				}
 			}).then((blob) => {
 				const downloadWrapper = document.createElement('a');
-				const wrappedImageButton = document.getElementById(
-					'wrapped-image-download'
-				) as HTMLAnchorElement;
+				// const wrappedImageButton = document.getElementById(
+				// 	'wrapped-image-download'
+				// ) as HTMLAnchorElement;
 				const image = document.createElement('img');
 				const object = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);
 
@@ -214,15 +215,22 @@
 
 				downloadWrapper.appendChild(image);
 
-				if (wrappedImageButton !== null) {
-					wrappedImageButton.href = object;
-				}
+				// if (wrappedImageButton !== null) {
+				// 	wrappedImageButton.href = object;
+				// }
 
 				const wrappedFinal = document.getElementById('wrapped-final');
 
 				if (wrappedFinal !== null) {
+					const blockquote = document.createElement('blockquote');
+
 					wrappedFinal.innerHTML = '';
+					blockquote.innerText =
+						'Click on the image to download, or right click and select "Save Image As...".';
+
 					wrappedFinal.appendChild(downloadWrapper);
+					wrappedFinal.appendChild(document.createElement('br'));
+					wrappedFinal.appendChild(blockquote);
 				}
 
 				downloadWrapper.click();
@@ -231,7 +239,7 @@
 			await new Promise((resolve) => setTimeout(resolve, 1000));
 
 			element.classList.remove('invert');
-			darkTheme = true;
+			lightTheme = true;
 			// element.classList.remove('light-theme');
 		}
 	};
@@ -257,7 +265,7 @@
 			Loading ...
 		{:then wrapped}
 			<div
-				class:light-theme={darkTheme}
+				class:light-theme={lightTheme}
 				class="categories-grid"
 				style={`background-color: ${transparency ? '#0b16227f' : '#0b1622'};`}
 			>
@@ -389,7 +397,11 @@
 
 			<blockquote>
 				Don't be alarmed! The background will appear as its inverse in the preview, but will be
-				corrected in the final image. Media covers may not appear on mobile Apple devices.
+				corrected in the final image.
+
+				{#if /Mac|iPod|iPhone|iPad/.test(navigator.userAgent)}
+					Media covers may not appear on mobile Apple devices.
+				{/if}
 			</blockquote>
 
 			<details>
@@ -397,6 +409,8 @@
 				<div id="options">
 					<input type="checkbox" bind:checked={watermark} /> Enable watermark<br />
 					<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br />
+					<input type="checkbox" bind:checked={forceDark} />
+					Enable light mode (dark by default)<br />
 					<input type="checkbox" bind:checked={includeMusic} /> Include music<br />
 					<input type="checkbox" bind:checked={includeRepeats} /> Include rewatches & rereads<br />
 					<input type="checkbox" bind:checked={includeSpecials} /> Include specials and OVAs<br />
@@ -416,21 +430,9 @@
 
 			<br />
 
-			<ul>
-				<li>
-					<a href={'#'} on:click={() => screenshot(true)}>Generate dark-themed image</a>
-				</li>
-				<li>
-					<a href={'#'} on:click={() => screenshot()}>Generate light-themed image</a>
-				</li>
-				<li>
-					<a href={'#'} target="_blank" id="wrapped-image-download">
-						Download generated image (generate first)
-					</a>
-				</li>
-			</ul>
-
-			<br />
+			<p>
+				<a href={'#'} on:click={() => screenshot(!forceDark)}>Generate image</a>
+			</p>
 
 			<div id="wrapped-final" />
 		{:catch}