feat: disable animation on scrubber

mbret · Aug 24, 2024 · b664ec5 · b664ec5
1 parent 3821bda
commit b664ec5
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 46 deletions.
diff --git a/packages/core/src/enhancers/events/events.ts b/packages/core/src/enhancers/events/events.ts
@@ -1,6 +1,5 @@
 import { isPointerEvent } from "../../utils/dom"
 import { EnhancerOutput, RootEnhancer } from "../types/enhancer"
-import { attachOriginalFrameEventToDocumentEvent } from "./frames"
 import { normalizeEventForViewport } from "./normalizeEventForViewport"
 
 const pointerEvents = [
@@ -35,7 +34,6 @@ export const eventsEnhancer =
       const unregister = passthroughEvents.map((event) => {
         const listener = (e: MouseEvent | PointerEvent | TouchEvent) => {
           let convertedEvent = e
-
           /**
            * We have to create a new fake event since the original one is already dispatched
            * on original frame.
@@ -47,10 +45,9 @@ export const eventsEnhancer =
           }
 
           if (convertedEvent !== e) {
-            attachOriginalFrameEventToDocumentEvent(convertedEvent, e)
-
             const normalizedEvent = normalizeEventForViewport(
               convertedEvent,
+              e,
               reader.spine.locator,
             )
 

diff --git a/packages/core/src/enhancers/events/frames.ts b/packages/core/src/enhancers/events/frames.ts
diff --git a/packages/core/src/enhancers/events/normalizeEventForViewport.ts b/packages/core/src/enhancers/events/normalizeEventForViewport.ts
@@ -1,25 +1,16 @@
-import {
-  __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY,
-  getOriginalFrameEventFromDocumentEvent,
-} from "./frames"
 import { SpineLocator } from "../../spine/locator/SpineLocator"
 import { isMouseEvent, isPointerEvent, isTouchEvent } from "../../utils/dom"
 
 export const normalizeEventForViewport = <
   E extends MouseEvent | TouchEvent | PointerEvent,
 >(
   event: E,
+  iframeOriginalEvent: E,
   locator: SpineLocator,
 ) => {
-  // const eventIsComingFromBridge = event.target === iframeEventBridgeElement$.getValue()
-  const eventIsComingFromBridge =
-    __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY in event
-
-  const iframeOriginalEvent = getOriginalFrameEventFromDocumentEvent(event)
   const originalFrame = iframeOriginalEvent?.view?.frameElement
 
-  if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame)
-    return event
+  if (!iframeOriginalEvent || !originalFrame) return event
 
   const spineItem = locator.getSpineItemFromIframe(originalFrame)
 

diff --git a/packages/core/src/enhancers/hotkeys.ts b/packages/core/src/enhancers/hotkeys.ts
@@ -28,21 +28,21 @@ export const hotkeysEnhancer =
         map(([e, { pageTurnDirection }]) => {
           if (pageTurnDirection === "horizontal") {
             if (e.key === `ArrowRight`) {
-              reader.navigation.turnRight()
+              return reader.navigation.turnRight()
             }
 
             if (e.key === `ArrowLeft`) {
-              reader.navigation.turnLeft()
+              return reader.navigation.turnLeft()
             }
           }
 
           if (pageTurnDirection === "vertical") {
             if (e.key === `ArrowDown`) {
-              reader.navigation.turnRight()
+              return reader.navigation.turnRight()
             }
 
             if (e.key === `ArrowUp`) {
-              reader.navigation.turnLeft()
+              return reader.navigation.turnLeft()
             }
           }
 

diff --git a/packages/core/src/enhancers/navigation/navigators/manualNavigator.ts b/packages/core/src/enhancers/navigation/navigators/manualNavigator.ts
@@ -3,6 +3,7 @@ import { Report } from "../../../report"
 import { ViewportPosition } from "../../../navigation/viewport/ViewportNavigator"
 import { getNavigationForRightOrBottomPage } from "../resolvers/getNavigationForRightOrBottomPage"
 import { getNavigationForLeftOrTopPage } from "../resolvers/getNavigationForLeftOrTopPage"
+import { UserNavigationEntry } from "../../../navigation/UserNavigator"
 
 export class ManualNavigator {
   movingLastDelta = { x: 0, y: 0 }
@@ -78,7 +79,10 @@ export class ManualNavigator {
     })
   }
 
-  goToSpineItem(indexOrId: number | string) {
+  goToSpineItem({
+    indexOrId,
+    ...rest
+  }: { indexOrId: number | string } & Pick<UserNavigationEntry, "animation">) {
     const spineItem = this.reader.spineItemsManager.get(indexOrId)
 
     if (spineItem === undefined) {
@@ -92,6 +96,7 @@ export class ManualNavigator {
 
     this.reader.navigation.navigate({
       spineItem: indexOrId,
+      ...rest,
     })
   }
 
@@ -102,7 +107,7 @@ export class ManualNavigator {
         threshold: 0.5,
       }) || {}
 
-    this.goToSpineItem(endIndex + 1)
+    this.goToSpineItem({ indexOrId: endIndex + 1 })
   }
 
   goToPreviousSpineItem() {
@@ -112,7 +117,7 @@ export class ManualNavigator {
         threshold: 0.5,
       }) ?? {}
 
-    this.goToSpineItem(beginIndex - 1)
+    this.goToSpineItem({ indexOrId: beginIndex - 1 })
   }
 
   goToUrl(url: string | URL) {
@@ -197,7 +202,14 @@ export class ManualNavigator {
     return this.goToNextSpineItem()
   }
 
-  goToPageOfSpineItem(pageIndex: number, spineItemId: string | number) {
+  goToPageOfSpineItem({
+    pageIndex,
+    spineItemId,
+    ...rest
+  }: {
+    pageIndex: number
+    spineItemId: string | number
+  } & Pick<UserNavigationEntry, "animation">) {
     const position =
       this.reader.navigation.navigationResolver.getNavigationForSpineItemPage({
         pageIndex,
@@ -206,6 +218,7 @@ export class ManualNavigator {
 
     this.reader.navigation.navigate({
       position,
+      ...rest,
     })
   }
 }
diff --git a/packages/core/src/enhancers/pagination/pagination.test.ts b/packages/core/src/enhancers/pagination/pagination.test.ts
@@ -133,7 +133,7 @@ describe("Given a book with one chapter", () => {
           containerElement: document.getElementById("test-container")!,
         })
 
-        reader.navigation.goToSpineItem(1)
+        reader.navigation.goToSpineItem({ indexOrId: 1 })
       })
 
       expect(value.beginChapterInfo).toEqual({
@@ -205,7 +205,7 @@ describe("Given a book with one chapter", () => {
               containerElement: document.getElementById("test-container")!,
             })
 
-            reader.navigation.goToSpineItem(1)
+            reader.navigation.goToSpineItem({ indexOrId: 1 })
           })
 
           expect(value.beginChapterInfo).toEqual({

diff --git a/packages/demo/src/reader/navigation/Scrubber.tsx b/packages/demo/src/reader/navigation/Scrubber.tsx
@@ -36,9 +36,13 @@ export const Scrubber = () => {
         const pageIndex = isUsingSpread ? Math.floor(value) * 2 : Math.floor(value)
 
         if (isComic) {
-          reader?.navigation.goToSpineItem(pageIndex)
+          reader?.navigation.goToSpineItem({ indexOrId: pageIndex, animation: false })
         } else {
-          reader?.navigation.goToPageOfSpineItem(pageIndex, pagination?.beginSpineItemIndex ?? 0)
+          reader?.navigation.goToPageOfSpineItem({
+            pageIndex,
+            spineItemId: pagination?.beginSpineItemIndex ?? 0,
+            animation: false
+          })
         }
       }
     },