Add an eye option

main.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         PNGExtraEmbed
 // @namespace    https://coom.tech/
-// @version      0.67
+// @version      0.69
 // @description  uhh
 // @author       You
 // @match        https://boards.4channel.org/*

src/App.svelte

@@ -70,6 +70,10 @@
       <input type="checkbox" bind:checked={$settings.dh} />
       Turn off hover preview.
     </label>
+    <label>
+      <input type="checkbox" bind:checked={$settings.eye} />
+      Hide embedded content behind an eye.
+    </label>
     <label>
       <input type="checkbox" bind:checked={$settings.te} />
       Turn off third-eye.

src/Embedding.svelte

@@ -13,6 +13,7 @@
   let settled = false
   let contracted = true
   let hovering = false
+  let ftype = '';
 
   let place: HTMLDivElement
   let hoverElem: HTMLDivElement
@@ -22,6 +23,8 @@
   let dims: [number, number] = [0, 0]
   let furl: string | undefined = undefined;
 
+  let visible = false;
+
   beforeUpdate(async () => {
     if (settled) return
     settled = true
@@ -33,6 +36,7 @@
       isFile = true
       return;
     }
+    ftype = type.mime;
     isVideo = type.mime.startsWith('video/')
     isAudio = type.mime.startsWith('audio/')
     isImage = type.mime.startsWith('image/')
@@ -177,52 +181,67 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<div
-  class:contract={contracted}
-  class="place fileThumb"
-  on:click={() => bepis()}
-  on:mouseover={hoverStart}
-  on:mouseout={hoverStop}
-  on:mousemove={hoverUpdate}
-  on:wheel={adjustAudio}
-  bind:this={place}
->
-  {#if isImage}
-    <img bind:this={imgElem} alt={file.filename} src={furl || url} />
-  {/if}
-  {#if isAudio}
-    <audio loop={$settings.loop} alt={file.filename} src={url} />
-  {/if}
-  {#if isVideo}
-    <!-- svelte-ignore a11y-media-has-caption -->
-    <video loop={$settings.loop} bind:this={videoElem} src={furl || url} />
-    <!-- assoom videos will never be loaded from thumbnails -->
-  {/if}
-  {#if isFile}
-    <button>Download {file.filename}</button>
-  {/if}
-</div>
-<div
-  bind:this={hoverElem}
-  class:visible={hovering && contracted}
-  class:unzipping
-  class="hoverer"
->
-  {#if unzipping}<span class="progress">[{progress[0]} / {progress[1]}]</span
-    >{/if}
-
-  {#if isImage}
-    <img alt={file.filename} src={furl || url} />
-  {/if}
-  {#if isVideo}
-    <!-- svelte-ignore a11y-media-has-caption -->
-    <video loop={$settings.loop} bind:this={hoverVideo} src={furl || url} />
-    <!-- assoom videos will never be loaded from thumbnails -->
-  {/if}
-</div>
+
+{#if $settings.eye}
+  <span on:click={() => visible = !visible} class:fa-eye={!visible} class:fa-eye-slash={visible} class="fa clickable" />
+{/if}
+
+
+{#if !$settings.eye || visible}
+  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+  <div
+    class:contract={contracted}
+    class="place fileThumb"
+    on:click={() => bepis()}
+    on:mouseover={hoverStart}
+    on:mouseout={hoverStop}
+    on:mousemove={hoverUpdate}
+    on:wheel={adjustAudio}
+    bind:this={place}
+  >
+    {#if isImage}
+      <img bind:this={imgElem} alt={file.filename} src={furl || url} />
+    {/if}
+    {#if isAudio}
+      <audio controls loop={$settings.loop} alt={file.filename}>
+        <source src={url} type={ftype} />
+      </audio>
+    {/if}
+    {#if isVideo}
+      <!-- svelte-ignore a11y-media-has-caption -->
+      <video loop={$settings.loop} bind:this={videoElem} src={furl || url} />
+      <!-- assoom videos will never be loaded from thumbnails -->
+    {/if}
+    {#if isFile}
+      <button>Download {file.filename}</button>
+    {/if}
+  </div>
+  <div
+    bind:this={hoverElem}
+    class:visible={hovering && contracted}
+    class:unzipping
+    class="hoverer"
+  >
+    {#if unzipping}<span class="progress">[{progress[0]} / {progress[1]}]</span
+      >{/if}
+
+    {#if isImage}
+      <img alt={file.filename} src={furl || url} />
+    {/if}
+    {#if isVideo}
+      <!-- svelte-ignore a11y-media-has-caption -->
+      <video loop={$settings.loop} bind:this={hoverVideo} src={furl || url} />
+      <!-- assoom videos will never be loaded from thumbnails -->
+    {/if}
+  </div>
+{/if}
 
 <style scoped>
+  .clickable {
+    cursor: pointer;
+  }
+
+
   .place {
     cursor: pointer;
     max-width: 100vw;

src/stores.ts

@@ -14,6 +14,7 @@ export const settings = writable(localLoad('settings', {
     xpv: false,
     xpi: false,
     te: false,
+    eye: false,
     blacklist: ['guro', 'scat', 'ryona', 'gore'],
     sources: ['gelbooru.com',
         'yande.re',