Merge pull request #55 from Qwiri/develop

Author: TomRomeo

frontend/public/global.css

@@ -21,6 +21,25 @@ a {
 a:hover {
 	text-decoration: underline;
 }
+::-webkit-scrollbar {
+	width: 12px;
+	overflow-y: hidden;
+}
+::-webkit-scrollbar-track {
+	background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+	background-color: #d6dee1;
+	/* background-color: transparent; */
+	border-radius: 20px;
+	border: 4px solid transparent;
+	background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+	background-color: #a8bbbf;
+	border: 2px solid transparent;
+	background-clip: content-box;
+}
 
 a:visited {
 	color: rgb(0,80,160);

frontend/src/assets/Chat.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { toast } from "@zerodevx/svelte-toast";
+    import { afterUpdate, beforeUpdate } from "svelte";
 
     import { chatMessages, ws } from "../store";
     import Avatar from "./Avatar.svelte";
@@ -18,21 +19,40 @@
         $ws.send(`CHAT ${buffer}`);
         buffer = "";
     };
+
+    let chatElement: HTMLElement;
+    let shouldAutoScroll = true;
+
+    afterUpdate(() => {
+        if (shouldAutoScroll) {
+            chatElement.scrollIntoView(false);
+        }
+    });
+
+    function onScroll() {
+        const elem = document.getElementById("chat-messages");
+        shouldAutoScroll = (elem.scrollHeight - elem.scrollTop) - 60
+            <= elem.clientHeight; // 20px grace
+    }
 </script>
 
 <div>
     <div id="chatContainer">
-        <ul>
-            {#each $chatMessages as message}
-                <li>
-                    <Avatar user={message.author} width="24px" />
-                    <span class="author">{message.author}</span>:
-                    <span class="message">{message.message}</span>
-                </li>
-            {/each}
-        </ul>
+        <div id="messageContainer">
+            <ul on:scroll={onScroll} id="chat-messages">
+                {#each $chatMessages as message}
+                    <li>
+                        <Avatar user={message.author} width="24px" />
+                        <span class="author">{message.author}</span>:
+                        <span class="message">{message.message}</span>
+                    </li>
+                {/each}
+                <div id="scrollMe" bind:this={chatElement} />
+            </ul>
+        </div>
         <input
             placeholder="Write a chat message"
+            class="gyf-bar"
             type="text"
             on:keypress={onKeyDown}
             bind:value={buffer}
@@ -54,10 +74,18 @@
             flex-direction: column-reverse;
         }
     }
+
+    #messageContainer {
+        position: relative;
+    }
+
     ul {
         padding: 0;
         display: flex;
         flex-direction: column;
+        max-height: 35vh;
+        overflow-y: scroll;
+        scroll-snap-align: end;
         @media (max-width: 40rem) {
             flex-direction: column-reverse;
         }

frontend/src/screens/SearchGif.svelte

@@ -12,6 +12,11 @@
 
     let submission: string = "";
 
+    let gifPreviewWindow: HTMLImageElement;
+    let gifPreviewURL: string;
+
+    let blur = false;
+
     const fetchFirstGifs = async () => {
         searchResults = []; // #42
         searchResults = await provider.search(searchQuery, true);
@@ -42,7 +47,6 @@
     let timer;
 
     const debounce = (e: KeyboardEvent) => {
-
         if (e.key === "Enter") {
             return;
         }
@@ -52,6 +56,15 @@
             await fetchFirstGifs();
         }, 300);
     };
+
+    const previewGif = (e: MouseEvent, gif?: SearchResult) => {
+        gifPreviewURL = gif?.original_url ?? "";
+
+        if (gifPreviewWindow) {
+            gifPreviewWindow.style.left = e.pageX + "px";
+            gifPreviewWindow.style.top = e.pageY + "px";
+        }
+    };
 </script>
 
 <TopicDisplay />
@@ -70,7 +83,7 @@
                 type="text"
                 class="gyf-bar"
                 placeholder="Search via {provider.name} 🔍"
-                on:keyup="{debounce}"
+                on:keyup={debounce}
                 bind:value={searchQuery}
             />
 
@@ -83,11 +96,24 @@
                 />
             {/if}
         </div>
-        <div id="resultWrapper">
+        {#if gifPreviewURL}
+            <img
+                id="gifPreviewWindow"
+                bind:this={gifPreviewWindow}
+                src={gifPreviewURL}
+                alt="GYF preview"
+                class:blurImage={blur}
+                on:load={(_) => (blur = false)}
+            />
+        {/if}
+
+        <div id="resultWrapper" on:mouseleave={(e) => previewGif(e, undefined)}>
             {#if searchResults.length > 0}
                 {#each searchResults as result}
                     <div
                         class="imgContainer"
+                        on:mousemove={(e) => previewGif(e, result)}
+                        on:mouseleave={(_) => (blur = true)}
                         on:click={(e) => submitGif(e, result)}
                     >
                         <Image
@@ -130,6 +156,17 @@
         overflow-y: scroll;
     }
 
+    #gifPreviewWindow {
+        position: absolute;
+        z-index: 1;
+        pointer-events: none;
+        width: 30rem;
+        height: 30rem;
+        object-fit: contain;
+        background-color: #181818;
+        border-radius: 0.5rem;
+    }
+
     button {
         background-color: #24ff00;
         border: none;
@@ -151,12 +188,15 @@
         background-color: #181818;
         overflow: hidden;
 
-        :global(.imageComponent):hover {
+        &:hover {
             cursor: pointer;
-            opacity: 0.5;
         }
     }
 
+    .blurImage {
+        filter: blur(10px);
+    }
+
     #shownProvider {
         color: greenyellow;