#78 applied sound for hover and click effect.

package.json

@@ -148,7 +148,8 @@
     "webpack": "4.41.5",
     "webpack-dev-server": "3.10.2",
     "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "4.3.1"
+    "workbox-webpack-plugin": "4.3.1",
+    "use-sound": "2.0.1"
   },
   "browserslist": {
     "production": [
@@ -172,8 +173,5 @@
   ],
   "lint-staged": {
     "*.{js,jsx}": "eslint"
-  },
-  "dependencies": {
-    "use-sound": "^2.0.1"
   }
 }

src/components/Visualization/Profile/Application.js

@@ -93,7 +93,7 @@ class Application {
     this._colors = scaleOrdinal(colors);
 
     this._event = dispatch(
-      'itemOver', 'itemOut', 'selectItem',
+      'overItem', 'outItem', 'selectItem',
       'dragStart', 'dragEnd',
     );
 
@@ -239,7 +239,7 @@ class Application {
       .restart();
 
     const node = event.currentTarget;
-    this._event.call('itemOver', node, event, node);
+    this._event.call('overItem', node, event, node);
 
     this._group.cursor = 'pointer';
 
@@ -270,7 +270,7 @@ class Application {
     cursor.focusOn(null);
 
     const node = event.currentTarget;
-    this._event.call('itemOut', node, event, node);
+    this._event.call('outItem', node, event, node);
 
     this._group.cursor = 'none';
 

src/components/Visualization/Profile/index.jsx

@@ -5,6 +5,8 @@ import { useRedirectTo } from '@/shared/hooks/useRedirectTo';
 import { useSelector } from 'react-redux';
 import Tab from '../shared/Tab';
 import Application from './Application';
+import useSound from 'use-sound';
+import { SoundTypes } from '@/models/SoundTypes';
 
 const merge = (data, newData) => {
   const hash = data.reduce((acc, item) => ({
@@ -27,7 +29,12 @@ const UserVisualization = (props) => {
   const { name: selected } = repo || {};
   const redirectTo = useRedirectTo(UrlPratTypes.repository);
 
+  const [clickSoundPlay, { stop: clickSoundStop }] = useSound(SoundTypes.click, { volume: 0.25 });
+  const [hoverSoundPlay, { stop: hoverSoundStop }] = useSound(SoundTypes.hover, { volume: 0.25 });
+
   const onSelectItem = useRef(null);
+  const onOverItem = useRef(null);
+  const onOutItem = useRef(null);
 
   const data = useMemo(
     () => {
@@ -45,10 +52,30 @@ const UserVisualization = (props) => {
   useEffect(
     () => {
       onSelectItem.current = (_, item) => {
+        clickSoundPlay();
         redirectTo(item?.name || '');
       };
     },
-    [redirectTo],
+    [clickSoundPlay, redirectTo],
+  );
+
+  useEffect(
+    () => {
+      onOverItem.current = () => {
+        clickSoundStop();
+        hoverSoundPlay();
+      };
+    },
+    [hoverSoundPlay, clickSoundStop],
+  );
+
+  useEffect(
+    () => {
+      onOutItem.current = () => {
+        hoverSoundStop();
+      };
+    },
+    [hoverSoundStop],
   );
 
   useEffect(
@@ -59,6 +86,8 @@ const UserVisualization = (props) => {
       const instance = new Application(container);
       instance.key((item) => item.name);
       instance.on('selectItem', (...args) => onSelectItem.current(...args));
+      instance.on('overItem', (...args) => onOverItem.current(...args));
+      instance.on('outItem', (...args) => onOutItem.current(...args));
       setApp(instance);
 
       return () => {

src/models/SoundTypes.js

@@ -1,7 +1,7 @@
-import buttonClickSound from '@/shared/sounds/button-click.mp3';
-import buttonHoverSound from '@/shared/sounds/button-hover.mp3';
+import buttonClickSound from '@/assets/sounds/click.mp3';
+import buttonHoverSound from '@/assets/sounds/hover.mp3';
 
 export const SoundTypes = {
-  'button-hover': buttonHoverSound,
-  'button-click': buttonClickSound,
+  hover: buttonHoverSound,
+  click: buttonClickSound,
 };

src/shared/components/FocusOverlay/index.jsx

@@ -1,8 +1,10 @@
 import { useEffect, useRef } from 'react';
+import { SoundTypes } from '@/models/SoundTypes';
 import * as cursor from '@/services/CursorService';
 import * as focus from '@/services/FocusService';
 import PropTypes from 'prop-types';
 import { install, ResizeObserver } from 'resize-observer';
+import useSound from 'use-sound';
 
 if (!window.ResizeObserver) {
   install();
@@ -15,6 +17,8 @@ const StateTypes = {
 
 const FocusOverlay = ({ globalListener }) => {
   const roCallback = useRef();
+  const [clickSoundPlay, { stop: clickSoundStop }] = useSound(SoundTypes.click, { volume: 0.25 });
+  const [hoverSoundPlay, { stop: hoverSoundStop }] = useSound(SoundTypes.hover, { volume: 0.25 });
 
   const ro = useRef(new ResizeObserver((...args) => {
     if (roCallback.current) {
@@ -49,15 +53,23 @@ const FocusOverlay = ({ globalListener }) => {
         });
       };
 
+      const onClick = () => {
+        clickSoundPlay();
+      };
+
       const onEnter = (event) => {
         if (event?.target?.tabIndex < 0 || event.target === document) {
           return;
         }
 
+        hoverSoundStop();
+        clickSoundStop();
+
         let item = state[StateTypes.hovered];
 
         if (item) {
           item.removeEventListener('pointerdown', onDown, true);
+          item.removeEventListener('click', onClick, true);
           document.removeEventListener('pointerup', onUp, true);
           ro.current.unobserve(item);
         }
@@ -67,9 +79,13 @@ const FocusOverlay = ({ globalListener }) => {
           cursor.focusOn(item);
         }
 
-        ro.current.observe(item);
-        item.addEventListener('pointerdown', onDown, true);
-        document.addEventListener('pointerup', onUp, true);
+        if (item) {
+          hoverSoundPlay();
+          ro.current.observe(item);
+          item.addEventListener('pointerdown', onDown, true);
+          item.addEventListener('click', onClick, true);
+          document.addEventListener('pointerup', onUp, true);
+        }
 
         state[StateTypes.hovered] = item;
       };
@@ -79,6 +95,9 @@ const FocusOverlay = ({ globalListener }) => {
           return;
         }
 
+        hoverSoundStop();
+        hoverSoundPlay();
+
         let item = state[StateTypes.focused];
 
         if (item) {
@@ -107,9 +126,12 @@ const FocusOverlay = ({ globalListener }) => {
         let item = state[StateTypes.hovered];
 
         if (event?.target === item) {
+          hoverSoundStop();
+
           if (item) {
             ro.current.unobserve(item);
             item.removeEventListener('pointerdown', onDown, true);
+            item.removeEventListener('click', onClick, true);
             document.removeEventListener('pointerup', onUp, true);
           }
 
@@ -159,7 +181,7 @@ const FocusOverlay = ({ globalListener }) => {
         document.removeEventListener('pointerleave', onLeave, true);
       };
     },
-    [globalListener],
+    [clickSoundPlay, clickSoundStop, globalListener, hoverSoundPlay, hoverSoundStop],
   );
 
   return null;

yarn.lock

@@ -13369,7 +13369,7 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-sound@^2.0.1:
+[email protected]:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/use-sound/-/use-sound-2.0.1.tgz#72e70d4bfdda71a6959e5adab0c7e10ff4080a0a"
   integrity sha512-wNwnyIOe8QPDQgWRZd3PqVEJ9BpLO+VJX+EpQSb6EvvjblHhnYMD7WIOTQ4hgloC2jC7Az6FhclHilC441De7A==