From 72dc996aa0e99060bf84a88609afb67d9345dc4e Mon Sep 17 00:00:00 2001
From: Hsun-Pei Wang <garfieldduck@gmail.com>
Date: Mon, 6 Jan 2025 00:09:00 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Remove=20console=20logs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/pages/react-spring.mdx                       |  8 ++++++++
 apps/docs/pages/track_grouped_sections.mdx             |  2 +-
 .../src/context/grouped/ScrollytellingProvider.tsx     |  8 --------
 .../src/hooks/section/useTrackedSectionScroll.ts       | 10 ----------
 packages/video/src/components/Video.tsx                |  3 ---
 5 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/apps/docs/pages/react-spring.mdx b/apps/docs/pages/react-spring.mdx
index 08b048e..7d7c134 100644
--- a/apps/docs/pages/react-spring.mdx
+++ b/apps/docs/pages/react-spring.mdx
@@ -53,6 +53,14 @@ export const Section = () => {
 
 ### Example
 
+You can simply the example in [track grouped sections](/track_grouped_sections) and use `useActiveSectionSpring()` to get the active section information and the updated `SpringValue` based on the scroll progress:
+
+```tsx
+import { useActiveSectionSpring } from '@react-scrollytelling/react-spring';
+
+const { trackingId, scrolledRatioSpring } = useActiveSectionSpring();
+```
+
 <div className="mx-2 my-12">
   <ScrollytellingProvider>
     <StickyContainerTailwind
diff --git a/apps/docs/pages/track_grouped_sections.mdx b/apps/docs/pages/track_grouped_sections.mdx
index 297a61c..c9bae48 100644
--- a/apps/docs/pages/track_grouped_sections.mdx
+++ b/apps/docs/pages/track_grouped_sections.mdx
@@ -196,7 +196,7 @@ module.exports = {
   // ...
   content: [
     // path to the library
-    '../../node_modules/@react-scrollytelling/layout/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@react-scrollytelling/layout/**/*.{js,jsx,ts,tsx}',
   ],
 };
 ```
diff --git a/packages/grouped/src/context/grouped/ScrollytellingProvider.tsx b/packages/grouped/src/context/grouped/ScrollytellingProvider.tsx
index 4eb3126..ed3e50d 100644
--- a/packages/grouped/src/context/grouped/ScrollytellingProvider.tsx
+++ b/packages/grouped/src/context/grouped/ScrollytellingProvider.tsx
@@ -67,12 +67,6 @@ export const ScrollytellingProvider = ({ children }: ScrollytellingProviderProps
 
     const activeSection = trackedSectionsRef.current.getSection(activeSectionId || '');
 
-    console.log('handleScroll', {
-      activeSectionId,
-      activeSection,
-      trackedSection: trackedSectionsRef.current,
-    });
-
     // notify the active section about its scroll progress
     if (activeSection) {
       const { sectionTop, sectionBottom } = activeSection;
@@ -109,8 +103,6 @@ export const ScrollytellingProvider = ({ children }: ScrollytellingProviderProps
 
   const onObserve = useCallback(
     ({ isIntersecting }: IntersectionObserverEntry) => {
-      console.log('*** ScrollytellingProvider > onObserve', isIntersecting);
-
       // track scrolling only when the section is visible in viewport
       if (isIntersecting) {
         window.addEventListener('scroll', handleScrollThrottled);
diff --git a/packages/grouped/src/hooks/section/useTrackedSectionScroll.ts b/packages/grouped/src/hooks/section/useTrackedSectionScroll.ts
index 725449b..22ed72b 100644
--- a/packages/grouped/src/hooks/section/useTrackedSectionScroll.ts
+++ b/packages/grouped/src/hooks/section/useTrackedSectionScroll.ts
@@ -46,8 +46,6 @@ export function useTrackedSectionScroll(
 
   const onObserve = useCallback(
     ({ isIntersecting }: IntersectionObserverEntry) => {
-      console.log('onObserve', isIntersecting, sectionID);
-
       if (isIntersecting) {
         const { scrollTop } = getScrollPosition();
 
@@ -56,15 +54,7 @@ export function useTrackedSectionScroll(
           sectionBottom: (sectionRef.current?.getBoundingClientRect().bottom || 0) + scrollTop,
           onActiveScroll: onScroll,
         });
-
-        console.log('useTrackedSectionScroll > onObserve > added', sectionID, {
-          sectionTop: sectionRef.current?.getBoundingClientRect().top || 0,
-          sectionBottom: sectionRef.current?.getBoundingClientRect().bottom || 0,
-          onActiveScroll: onScroll,
-        });
       } else {
-        console.log('useTrackedSectionScroll > onObserve > removed', sectionID);
-
         // notify the scroll progress that isIntersecting = false
         const { scrolledRatio = 0, scrollBottom = 0, distance = 0 } = scrollInfoRef.current || {};
 
diff --git a/packages/video/src/components/Video.tsx b/packages/video/src/components/Video.tsx
index c5b6894..4113952 100644
--- a/packages/video/src/components/Video.tsx
+++ b/packages/video/src/components/Video.tsx
@@ -78,7 +78,6 @@ export const VideoWithImperativeHandle = React.memo(
         if (!isNaN(duration)) {
           requestAnimationFrame(() => {
             videoElement.currentTime = Math.round(ratio * duration * 100) / 100;
-            console.log('setRatio', ratio, Math.round(ratio * duration * 100) / 100);
           });
         }
       }, []);
@@ -95,12 +94,10 @@ export const VideoWithImperativeHandle = React.memo(
       );
 
       const handleWaiting = useCallback(() => {
-        console.log('waiting');
         setIsLoading(true);
       }, []);
 
       const handleCanPlay = useCallback(() => {
-        console.log('can play');
         setIsLoading(false);
       }, []);