refactor: add ControllerTooltip

ljl11 · Jan 29, 2022 · d02ee66 · d02ee66
1 parent 63f554a
commit d02ee66
Show file tree

Hide file tree

Showing 18 changed files with 110 additions and 236 deletions.
diff --git a/example/package.json b/example/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "vite build",
-    "start": "vite"
+    "start": "vite --host"
   },
   "dependencies": {
     "@types/react-router-dom": "^5.1.8",

diff --git a/packages/griffith/src/components/Controller.styles.ts b/packages/griffith/src/components/Controller.styles.ts
@@ -125,19 +125,15 @@ export default StyleSheet.create({
     color: '#fff',
   },
 
-  fullScreenTooltip: {
-    pointerEvents: 'none',
-  },
-
   fullScreenedTime: {
     width: '150px',
   },
 
-  fullScreenTooltipWide: {
-    left: '30%',
-  },
-
-  pipTooltip: {
+  tooltipContent: {
     pointerEvents: 'none',
+    padding: '0.25em 0.5em',
+    fontSize: '0.875em',
+    whiteSpace: 'nowrap',
+    color: '#fff',
   },
 })
diff --git a/packages/griffith/src/components/Hover.tsx b/packages/griffith/src/components/Hover.tsx
diff --git a/packages/griffith/src/components/Tooltip.styles.ts b/packages/griffith/src/components/Tooltip.styles.ts
diff --git a/packages/griffith/src/components/Tooltip.tsx b/packages/griffith/src/components/Tooltip.tsx
diff --git a/packages/griffith/src/components/__tests__/Hover.spec.tsx b/packages/griffith/src/components/__tests__/Hover.spec.tsx
diff --git a/packages/griffith/src/components/__tests__/__snapshots__/Hover.spec.tsx.snap b/packages/griffith/src/components/__tests__/__snapshots__/Hover.spec.tsx.snap
diff --git a/packages/griffith/src/components/__tests__/__snapshots__/Tooltip.spec.tsx.snap b/packages/griffith/src/components/__tests__/__snapshots__/Tooltip.spec.tsx.snap
diff --git a/packages/griffith/src/components/items/ControllerTooltip.tsx b/packages/griffith/src/components/items/ControllerTooltip.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import {css} from 'aphrodite/no-important'
+import {LocaleConfigKey} from '../../constants/locales'
+import useBoolean from '../../hooks/useBoolean'
+import TranslatedText from '../TranslatedText'
+import styles from '../Controller.styles'
+
+type Props = {
+  content: LocaleConfigKey
+}
+
+const canUseTouch =
+  typeof document !== 'undefined' && 'ontouchstart' in document.body
+
+const ControllerTooltip: React.FC<Props> = ({content, children}) => {
+  const [isHovered, isHoveredSwitch] = useBoolean()
+
+  return (
+    <div
+      className={css(styles.menuContainer)}
+      onMouseEnter={isHoveredSwitch.on}
+      onMouseLeave={isHoveredSwitch.off}
+    >
+      {children}
+      {!canUseTouch && (
+        <div
+          className={css(
+            styles.menu,
+            isHovered && styles.menuShown,
+            styles.tooltipContent
+          )}
+        >
+          <TranslatedText name={content} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ControllerTooltip
diff --git a/packages/griffith/src/components/items/FullScreenButtonItem.tsx b/packages/griffith/src/components/items/FullScreenButtonItem.tsx
@@ -1,46 +1,22 @@
 import React from 'react'
-import {css} from 'aphrodite/no-important'
-import {ua} from 'griffith-utils'
-import styles from '../Controller.styles'
 import * as icons from '../icons/controller'
-import Tooltip from '../Tooltip'
-import Hover from '../Hover'
+import ControllerTooltip from './ControllerTooltip'
 import ControllerButton from './ControllerButton'
 
-const {isMobile} = ua
-
 const FullScreenButtonItem: React.FC<{
   isFullScreen: boolean
   onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
 }> = ({isFullScreen, onClick}) => (
-  <Hover className={css(styles.menuContainer)}>
-    {(isFullScreenHovered) => (
-      <>
-        <ControllerButton
-          icon={isFullScreen ? icons.smallscreen : icons.fullscreen}
-          onClick={onClick}
-        />
-        <div
-          className={css(
-            styles.fullScreenTooltip,
-            styles.menu,
-            isFullScreenHovered && styles.menuShown,
-            isFullScreen && styles.fullScreenTooltipWide
-          )}
-        >
-          {!isMobile && (
-            <Tooltip
-              content={
-                isFullScreen
-                  ? 'action-exit-fullscreen'
-                  : 'action-enter-fullscreen'
-              }
-            />
-          )}
-        </div>
-      </>
-    )}
-  </Hover>
+  <ControllerTooltip
+    content={
+      isFullScreen ? 'action-exit-fullscreen' : 'action-enter-fullscreen'
+    }
+  >
+    <ControllerButton
+      icon={isFullScreen ? icons.smallscreen : icons.fullscreen}
+      onClick={onClick}
+    />
+  </ControllerTooltip>
 )
 
 export default FullScreenButtonItem
diff --git a/packages/griffith/src/components/items/PageFullScreenButtonItem.tsx b/packages/griffith/src/components/items/PageFullScreenButtonItem.tsx
@@ -1,46 +1,24 @@
 import React from 'react'
-import {css} from 'aphrodite/no-important'
-import {ua} from 'griffith-utils'
-import styles from '../Controller.styles'
 import * as icons from '../icons/controller'
-import Tooltip from '../Tooltip'
-import Hover from '../Hover'
+import ControllerTooltip from './ControllerTooltip'
 import ControllerButton from './ControllerButton'
 
-const {isMobile} = ua
-
 const PageFullScreenButtonItem: React.FC<{
   isFullScreen: boolean
   onClick: React.HTMLAttributes<HTMLButtonElement>['onClick'] | (() => void)
 }> = ({isFullScreen, onClick}) => (
-  <Hover className={css(styles.menuContainer)}>
-    {(isFullScreenHovered) => (
-      <>
-        <ControllerButton
-          icon={isFullScreen ? icons.exitPageScreen : icons.enterPageScreen}
-          onClick={onClick}
-        />
-        <div
-          className={css(
-            styles.fullScreenTooltip,
-            styles.menu,
-            isFullScreenHovered && styles.menuShown,
-            isFullScreen && styles.fullScreenTooltipWide
-          )}
-        >
-          {!isMobile && (
-            <Tooltip
-              content={
-                isFullScreen
-                  ? 'action-exit-page-fullscreen'
-                  : 'action-enter-page-fullscreen'
-              }
-            />
-          )}
-        </div>
-      </>
-    )}
-  </Hover>
+  <ControllerTooltip
+    content={
+      isFullScreen
+        ? 'action-exit-page-fullscreen'
+        : 'action-enter-page-fullscreen'
+    }
+  >
+    <ControllerButton
+      icon={isFullScreen ? icons.exitPageScreen : icons.enterPageScreen}
+      onClick={onClick}
+    />
+  </ControllerTooltip>
 )
 
 export default PageFullScreenButtonItem
diff --git a/packages/griffith/src/components/items/PipButtonItem.tsx b/packages/griffith/src/components/items/PipButtonItem.tsx
@@ -1,39 +1,18 @@
 import React from 'react'
-import {css} from 'aphrodite/no-important'
-import {ua} from 'griffith-utils'
-import styles from '../Controller.styles'
 import * as icons from '../icons/controller'
-import Tooltip from '../Tooltip'
-import Hover from '../Hover'
+import ControllerTooltip from './ControllerTooltip'
 import ControllerButton from './ControllerButton'
 
-const {isMobile} = ua
-
 const PipButtonItem: React.FC<{
   isPip: boolean
   onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
 }> = ({isPip, onClick}) => (
-  <Hover className={css(styles.menuContainer)}>
-    {(isPipHovered) => (
-      <>
-        <ControllerButton
-          icon={isPip ? icons.exitPip : icons.pip}
-          onClick={onClick}
-        />
-        <div
-          className={css(
-            styles.pipTooltip,
-            styles.menu,
-            isPipHovered && styles.menuShown
-          )}
-        >
-          {!isMobile && (
-            <Tooltip content={isPip ? 'action-exit-pip' : 'action-enter-pip'} />
-          )}
-        </div>
-      </>
-    )}
-  </Hover>
+  <ControllerTooltip content={isPip ? 'action-exit-pip' : 'action-enter-pip'}>
+    <ControllerButton
+      icon={isPip ? icons.exitPip : icons.pip}
+      onClick={onClick}
+    />
+  </ControllerTooltip>
 )
 
 export default PipButtonItem
diff --git a/packages/griffith/src/components/items/PlayButtonItem.tsx b/packages/griffith/src/components/items/PlayButtonItem.tsx
@@ -1,17 +1,18 @@
 import React from 'react'
 import * as icons from '../icons/controller'
 import ControllerButton from './ControllerButton'
+import ControllerTooltip from './ControllerTooltip'
 
 const PlayButtonItem: React.FC<{
   isPlaying: boolean
   onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
 }> = ({isPlaying, onClick}) => (
-  <div>
+  <ControllerTooltip content={isPlaying ? 'pause' : 'play'}>
     <ControllerButton
       icon={isPlaying ? icons.pause : icons.play}
       onClick={onClick}
     />
-  </div>
+  </ControllerTooltip>
 )
 
 export default PlayButtonItem
diff --git a/...src/components/__tests__/Tooltip.spec.tsx → ...tems/__tests__/ControllerTooltip.spec.tsx b/...src/components/__tests__/Tooltip.spec.tsx → ...tems/__tests__/ControllerTooltip.spec.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import Renderer from 'react-test-renderer'
-import Tooltip from '../Tooltip'
+import ControllerTooltip from '../ControllerTooltip'
 
 describe('Tooltip', () => {
   it('get Tooltip component', () => {
     expect(
-      Renderer.create(<Tooltip content="quality-hd" />).toJSON()
+      Renderer.create(<ControllerTooltip content="quality-hd" />).toJSON()
     ).toMatchSnapshot()
   })
 })