start context menus

src/components/FramePreview.svelte

@@ -2,6 +2,9 @@
   import { frames } from "../store";
   import { invoke } from "@tauri-apps/api";
   export let index: number;
+
+  let menuTimeout: NodeJS.Timeout | null = null;
+  let showMenu = false;
   let src = "";
 
   $: {
@@ -18,7 +21,20 @@
   //TODO: load frame from ray
 </script>
 
-<div class="preview" on:click={openImage}>
+<div
+  class="preview"
+  on:click={openImage}
+  on:contextmenu={openImage}
+  on:mouseenter={() =>
+    (menuTimeout = setTimeout(() => (showMenu = true), 1000))}
+  on:mouseleave={() => {
+    if (menuTimeout) {
+      clearTimeout(menuTimeout);
+    }
+    showMenu = false;
+  }}
+>
+  <p>{showMenu}</p>
   {#if src}
     <img {src} alt="Frame {{ index }}" />
   {/if}
@@ -27,9 +43,9 @@
 <style lang="scss">
   $bg: rgba(150, 150, 150, 0.5);
   .preview {
-  &:hover {
-    background-color: darken($color: $bg, $amount: 5%);
-  }
+    &:hover {
+      background-color: darken($color: $bg, $amount: 5%);
+    }
     display: flex;
     align-content: center;
     justify-content: center;
@@ -39,7 +55,7 @@
     height: 20vh;
   }
 
-    img {
-      width: 75%;
-    }
+  img {
+    width: 75%;
+  }
 </style>

src/components/tube.svelte

@@ -52,7 +52,9 @@
 	});
 </script>
 
-<img {src} alt="tuber" class:open class:closed class="{inAnim} {outAnim}" />
+{#if src}
+	<img {src} alt="tuber" class:open class:closed class="{inAnim} {outAnim}" />
+{/if}
 
 <style lang="scss">
 	@keyframes jump-out {

src/views/main.svelte

@@ -45,6 +45,8 @@
   <Tuber />
 </div>
 
+<svelte:body on:contextmenu|preventDefault />
+
 <style lang="scss">
   .frames {
     align-items: left;