add animations + minor peformance improvements

fix #213

fix #220

fix #221

fix #188

some progress for #135

examples/demo.css

@@ -91,10 +91,6 @@ body,
   display: inline-block;
 }
 
-.villain-demo .field select::-ms-expand {
-  display: none;
-}
-
 .villain-demo .instance {
   align-self: center;
   margin: 0 auto;

package.json

@@ -40,10 +40,12 @@
   "dependencies": {
     "clsx": "^1.0.4",
     "libarchive.js": "^1.3.0",
+    "memoize-one": "^5.1.1",
     "openseadragon": "^2.4.1",
     "prop-types": "^15.7.2",
     "react-compound-slider": "^2.3.0",
-    "react-localization": "^1.0.15"
+    "react-localization": "^1.0.15",
+    "react-spring": "^8.0.27"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",

src/components/keyboard.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import { ReaderContext } from '@/context'
+import { getNestedFocus, getInteractionFocus } from '@/lib/use-focus'
+import { toggleFullscreen } from '@/lib/full-screen'
+
+const KeyboardConsumer = React.memo(({ container }) => {
+  const context = React.useContext(ReaderContext)
+
+  const {
+    error,
+    mangaMode,
+    navigateBackward,
+    navigateForward,
+    allowGlobalShortcuts,
+    allowFullScreen,
+  } = context
+
+  // Note: We should provide an api to add, define, overwrite key shortcuts
+  const handleShortcuts = React.useCallback(
+    event => {
+      // Check if it should restrict listening for key shortcuts on player focus
+      if (error || getInteractionFocus()) {
+        return
+      }
+
+      if (!allowGlobalShortcuts && !getNestedFocus(container)) {
+        return
+      }
+
+      const navigateRight = mangaMode ? navigateBackward : navigateForward
+      const navigateLeft = mangaMode ? navigateForward : navigateBackward
+
+      switch (event.key) {
+        // Toggle fullscreen of viewer.
+        // Note: PreventDefault is used to remove flp shortcut.
+        case 'f':
+          event.preventDefault()
+          toggleFullscreen(container)
+          break
+
+        // Navigation to next page (previous when in mangaMode)
+        case 'ArrowRight':
+          navigateRight()
+          break
+
+        // Navigation to previous page (next when in mangaMode)
+        case 'ArrowLeft':
+          navigateLeft()
+          break
+      }
+    },
+    [
+      allowFullScreen,
+      allowGlobalShortcuts,
+      mangaMode,
+      navigateBackward,
+      navigateForward,
+      container,
+    ]
+  )
+
+  React.useEffect(() => {
+    document.addEventListener('keydown', handleShortcuts)
+
+    return () => {
+      document.removeEventListener('keydown', handleShortcuts)
+    }
+  }, [handleShortcuts])
+
+  return null
+})
+
+export default KeyboardConsumer

src/components/loader.js

@@ -1,9 +1,9 @@
 import React from 'react'
 
-const Loader = ({ id }) => (
+const Loader = React.memo(({ id }) => (
   <div className="villain-overlay" id={id}>
     <div className="villain-loader-indicator" />
   </div>
-)
+))
 
-export default React.memo(Loader)
+export default Loader

src/components/menu/custom.js

@@ -17,42 +17,43 @@ import {
   mdiRadioboxMarked,
 } from '@mdi/js'
 
-export const CustomSeparator = props => (
-  <MenuSeparator {...props} className={'villain-menu__separator'} />
-)
+export const CustomSeparator = React.forwardRef((props, ref) => (
+  <MenuSeparator {...props} ref={ref} className={'villain-menu__separator'} />
+))
 
-export const CustomItem = ({ children, ...props }) => (
-  <MenuItem as={Button} className={'villain-menu__item'} {...props}>
+export const CustomItem = React.forwardRef(({ children, ...props }, ref) => (
+  <MenuItem as={Button} className={'villain-menu__item'} {...props} ref={ref}>
     <div className={'villain-menu__item__content'}>
       <div className={'villain-menu__item__label'}>{children}</div>
     </div>
   </MenuItem>
-)
+))
 
-export const CustomCheckbox = ({ children, ...props }) => (
-  <MenuItemCheckbox as={Button} {...props}>
+export const CustomCheckbox = React.forwardRef(({ children, ...props }, ref) => (
+  <MenuItemCheckbox as={Button} {...props} ref={ref}>
     <div className={'villain-menu__item__content'}>
       <div className={'villain-menu__item__label'}>{children}</div>
       <div className={'villain-menu__item__toggler'} />
     </div>
   </MenuItemCheckbox>
-)
+))
 
-export const CustomRadio = ({ children, ...props }) => (
+export const CustomRadio = React.forwardRef(({ children, ...props }, ref) => (
   <MenuItemRadio
     as={Button}
     icon={props.checked ? mdiRadioboxMarked : mdiRadioboxBlank}
     iconSize={'20px'}
     {...props}
+    ref={ref}
   >
     <div className={'villain-menu__item__content'}>
       <div className={'villain-menu__item__label'}>{children}</div>
     </div>
   </MenuItemRadio>
-)
+))
 
-export const CustomSubmenu = ({ children, ...props }) => (
-  <MenuItem {...props} as={Button}>
+export const CustomSubmenu = React.forwardRef(({ children, ...props }, ref) => (
+  <MenuItem {...props} ref={ref} as={Button}>
     <div className={'villain-menu__item__content'}>
       <div className={'villain-menu__item__label'}>{children}</div>
       <Icon
@@ -62,23 +63,25 @@ export const CustomSubmenu = ({ children, ...props }) => (
       />
     </div>
   </MenuItem>
-)
+))
 
-export const MenuHeader = ({ title, closeSubmenu, menuProps, ...props }) => {
-  return (
-    <div {...props} className={'villain-menu__header'}>
-      <CustomItem {...menuProps} icon={mdiChevronLeft} onClick={closeSubmenu}>
-        {title}
-      </CustomItem>
-      <CustomSeparator {...menuProps} style={{ margin: 0 }} />
-    </div>
-  )
-}
+export const MenuHeader = React.forwardRef(
+  ({ title, closeSubmenu, menuProps, ...props }, ref) => {
+    return (
+      <div {...props} className={'villain-menu__header'}>
+        <CustomItem {...menuProps} icon={mdiChevronLeft} onClick={closeSubmenu} ref={ref}>
+          {title}
+        </CustomItem>
+        <CustomSeparator {...menuProps} style={{ margin: 0 }} />
+      </div>
+    )
+  }
+)
 
 export const CustomItems = {
-  item: CustomItem,
-  radio: CustomRadio,
-  submenu: CustomSubmenu,
-  checkbox: CustomCheckbox,
-  separator: CustomSeparator,
+  item: React.memo(CustomItem),
+  radio: React.memo(CustomRadio),
+  submenu: React.memo(CustomSubmenu),
+  checkbox: React.memo(CustomCheckbox),
+  separator: React.memo(CustomSeparator),
 }