Merge pull request #73 from basementstudio/mati/new-fixes

Bugfixing & UI corrections
basementstudio · Jan 9, 2024 · 9b95176 · 9b95176 · vercel · Jan 9, 2024
2 parents 0810e3b + fd8a066
commit 9b95176
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/.changeset/tender-items-grin.md b/.changeset/tender-items-grin.md
@@ -0,0 +1,5 @@
+---
+"@bsmnt/scrollytelling": patch
+---
+
+Visualizer bugfixing & UI corrections
diff --git a/scrollytelling/src/components/debugger/visualizer/index.tsx b/scrollytelling/src/components/debugger/visualizer/index.tsx
@@ -470,6 +470,11 @@ export const Visualizer = () => {
     });
   }, []);
 
+  useEffect(() => {
+    // Force refresh on mount
+    internalEventEmmiter.emit("timeline:refresh");
+  }, []);
+
   if (dismiss) return <></>;
 
   return (

diff --git a/scrollytelling/src/components/debugger/visualizer/visualizer.module.scss b/scrollytelling/src/components/debugger/visualizer/visualizer.module.scss
@@ -57,7 +57,11 @@
       align-items: center;
 
       .button {
-        padding: 4px;
+        color: var(--color-white);
+        display: flex;
+        align-items: center;
+        height: 24px;
+        padding: 0px 4px;
         border-radius: 4px;
         background: var(--color-gray);
         border: 1px solid var(--color-gray-light);
@@ -305,6 +309,7 @@
     appearance: none;
     cursor: pointer;
     background: var(--color-gray);
+    color: var(--color-white);
     border: 1px solid var(--color-gray-light);
     height: 24px;
     border-radius: 4px;

diff --git a/scrollytelling/src/util/emmiter.ts b/scrollytelling/src/util/emmiter.ts
@@ -20,10 +20,14 @@ export class Emitter {
 
     // Return an unsubscribe function
     return () => {
-      this.events[event] = this.events[event]?.filter((i) => cb !== i) ?? [];
+      this.off(event, cb);
     };
   }
 
+  off(event: string, cb: Callback) {
+    this.events[event] = this.events[event]?.filter((i) => cb !== i) ?? [];
+  }
+
   destroy() {
     this.events = {};
   }