Remove Picmo emoji picker in favor of improved OS/browser support

elonen · Jun 11, 2024 · 7f65815 · 7f65815
1 parent dd08432
commit 7f65815
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 44 deletions.
diff --git a/client/package.json b/client/package.json
@@ -13,13 +13,11 @@
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "@picmo/popup-picker": "^5.7.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tadashi/svelte-notification": "^1.3.0",
     "@tsconfig/svelte": "^5.0.4",
     "@types/node": "^20.12.7",
     "autoprefixer": "^10.4.19",
-    "picmo": "^5.7.2",
     "postcss": "^8.4.38",
     "simple-drawing-board": "^3.1.2",
     "svelte": "^4.2.15",

diff --git a/client/src/app.css b/client/src/app.css
@@ -19,21 +19,7 @@
 	-webkit-text-size-adjust: 100%;
 }
 
-/* Customize emoji picker (fix z-index and colors) */
-.my-picmo-popup {
-	--background-color: red;
-	--text-color: red;
-	border: 2px solid #131d2b;
-	border-radius: 8px;
-	z-index: 1000;
-}
-.my-picmo-popup .dark {
-	--background-color: #1f2937;
-	--category-name-background-color: #1f2937;
-	--secondary-background-color: #161f2b;
-	filter: drop-shadow(8px 8px 10px black);
-}
- .popupContainer button.closeButton {
+.popupContainer button.closeButton {
 	z-index: 1010;
 }
 

diff --git a/client/src/lib/player_view/CommentInput.svelte b/client/src/lib/player_view/CommentInput.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-import { createPopup } from '@picmo/popup-picker';
-import { darkTheme } from 'picmo';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import { createEventDispatcher } from 'svelte';
 import { fade } from "svelte/transition";
@@ -51,31 +49,10 @@ function onTextChange(e: any) {
     return false;
 }
 
-// Picmo emoji picker
-let emojiPicker: any = null;
-function onEmojiPicker(e: any)
-{
-    if (!emojiPicker) {
-            emojiPicker = createPopup({
-                theme: darkTheme }, {
-            referenceElement: e.target,
-            triggerElement: e.target,
-            position: 'right-end',
-            className: 'my-picmo-popup',
-        });
-        emojiPicker.addEventListener('emoji:select', (selection: any) => {
-            inputText = (inputText ? inputText : '') + selection.emoji;
-        });
-    }
-    emojiPicker.toggle();
-}
-
 </script>
 
 
 <div class="relative">
-    <div id="pickerContainer"></div> <!-- Picmo emoji picker -->
-
     <!-- Color selector -->
     {#if drawMode}
         <div class="absolute w-full top-[-3em] bg-gray-900 h-10 rounded-md flex place-content-center" transition:fade="{{duration: 100}}">
@@ -95,10 +72,6 @@ function onEmojiPicker(e: any)
             on:input={onTextChange}
             class="flex-1 p-2 bg-gray-700 rounded-lg" placeholder="Add a comment{timedComment ? ' - at current time' :''}..." />
 
-        <button type="button"
-            class="far fa-smile text-gray-400 hover:text-yellow-500 w-8 h-8 text-[1.2em]"
-            on:click={onEmojiPicker} />
-
         {#if $videoIsReady}
             <button type="button"
                 id="timedCommentButton"