Fix fatal error on time series

.prettierrc

@@ -0,0 +1 @@
+{ "semi": false }

README.md

@@ -20,5 +20,3 @@ See [demos and example code here](https://universaldatatool.com/react-time-serie
 
 ![](https://user-images.githubusercontent.com/1910070/97049707-2821d080-154a-11eb-8a58-fa6446e38ef6.png)
 ![](https://user-images.githubusercontent.com/1910070/97049705-2821d080-154a-11eb-87eb-97e3506d6e1b.png)
-
-

src/components/BackgroundContainer/index.js

@@ -2,13 +2,12 @@ import React from "react"
 import { styled } from "@material-ui/core/styles"
 import useColors from "../../hooks/use-colors"
 
-const Container = styled("div")(({ themeColors }) => ({
-  backgroundColor: themeColors.bg,
-}))
-
 export const BackgroundContainer = ({ children }) => {
   const themeColors = useColors()
-  return <Container themeColors={themeColors}>{children}</Container>
+  const Container = styled("div")(() => ({
+    backgroundColor: themeColors.bg,
+  }))
+  return <Container>{children}</Container>
 }
 
 export default BackgroundContainer

src/components/DurationBoxes/index.js

@@ -60,9 +60,13 @@ export const DurationBox = ({
   const [toolMode] = useToolMode()
   const colors = useColors()
   const visibleDuration = visibleTimeEnd - visibleTimeStart
-
   return (
-    <Container onClick={onClick} width={width} color={color} active={active}>
+    <Container
+      onClick={onClick}
+      width={width}
+      color={color}
+      active={active.toString()}
+    >
       {durations.map(
         (
           {

src/components/HighlightValueLabels/index.js

@@ -1,5 +1,4 @@
 import React, { Fragment, useState, useCallback } from "react"
-import useThemeColors from "../../hooks/use-colors"
 
 const HOV_SIZE = 50
 export const Point = ({ x, y, value, t, color, width }) => {

src/components/MainLayout/index.js

@@ -12,15 +12,6 @@ import initTopLevelMatrix from "../../utils/init-top-level-matrix"
 import Toolbar from "../Toolbar"
 import useGetRandomColorUsingHash from "../../hooks/use-get-random-color-using-hash"
 
-const Container = styled("div")(({ themeColors, width }) => ({
-  width: width,
-  display: "flex",
-  flexDirection: "column",
-  backgroundColor: themeColors.bg,
-  padding: 16,
-  boxSizing: "border-box",
-}))
-
 const defaultEnabledTools = [
   "create-durations",
   "label-durations",
@@ -164,8 +155,17 @@ export const MainLayout = ({
 
   const gridLineMetrics = getMinorMajorDurationLines(topLevelMatrix, width)
 
+  const Container = styled("div")(() => ({
+    width: width,
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: themeColors.bg,
+    padding: 16,
+    boxSizing: "border-box",
+  }))
+
   return (
-    <Container width={width} themeColors={themeColors}>
+    <Container>
       <Toolbar
         timestamps={timestamps}
         timestampLabels={timestampLabels}

src/components/MouseTransformHandler/index.js

@@ -21,7 +21,6 @@ export const MouseTransformHandler = ({
   const [middleMouseDown, setMiddleMouseDown] = useState(false)
   const [toolMode] = useToolMode()
   const containerRef = useRef()
-
   useEffect(() => {
     const onKeyDown = (e) => {
       if (e.key === "Shift") {
@@ -149,9 +148,11 @@ export const MouseTransformHandler = ({
   const containerMountCallback = useCallback((ref) => {
     if (ref === null) {
       containerRef.current.removeEventListener("wheel", onWheel)
+      containerRef.current = ref
+    } else {
+      containerRef.current = ref
+      ref.addEventListener("wheel", onWheel, { passive: false })
     }
-    containerRef.current = ref
-    ref.addEventListener("wheel", onWheel, { passive: false })
   }, [])
 
   return (

src/components/Timeline/index.js

@@ -12,16 +12,6 @@ import useEventCallback from "use-event-callback"
 
 import { formatTime } from "../../utils/format-time"
 
-const Container = styled("div")(({ width, themeColors }) => ({
-  width,
-  overflow: "hidden",
-  position: "relative",
-  height: 64,
-  cursor: "pointer",
-  borderBottom: `1px solid ${themeColors.Selection}`,
-  color: themeColors.fg,
-}))
-
 const TimeText = styled("div")(({ x, faded }) => ({
   display: "inline-block",
   width: 80,
@@ -36,17 +26,6 @@ const TimeText = styled("div")(({ x, faded }) => ({
   opacity: faded ? 0.25 : 0.75,
 }))
 
-const TimeCursor = styled("div")(({ left, themeColors }) => ({
-  position: "absolute",
-  width: 0,
-  height: 0,
-  top: 0,
-  left: left - 6,
-  borderLeft: "8px solid transparent",
-  borderRight: "8px solid transparent",
-  borderTop: `12px solid ${themeColors.green}`,
-}))
-
 const Svg = styled("svg")({
   position: "absolute",
   left: 0,
@@ -96,12 +75,28 @@ export const Timeline = ({
     rootAudioElm.currentTime = time / 1000
     setTimeCursorTime(time)
   })
-
+  const Container = styled("div")(() => ({
+    width,
+    overflow: "hidden",
+    position: "relative",
+    height: 64,
+    cursor: "pointer",
+    borderBottom: `1px solid ${themeColors.Selection}`,
+    color: themeColors.fg,
+  }))
+  const TimeCursor = styled("div")(() => ({
+    position: "absolute",
+    width: 0,
+    height: 0,
+    top: 0,
+    left: ((timeCursorTime - visibleTimeStart) / visibleDuration) * width - 6,
+    borderLeft: "8px solid transparent",
+    borderRight: "8px solid transparent",
+    borderTop: `12px solid ${themeColors.green}`,
+  }))
   return (
     <Container
       ref={containerRef}
-      themeColors={themeColors}
-      width={width}
       onClick={rootAudioElm ? onClickTimeline : undefined}
     >
       {range(timeTextCount).map((timeTextIndex) => (
@@ -146,12 +141,7 @@ export const Timeline = ({
           />
         )
       })}
-      {timeCursorTime !== undefined && (
-        <TimeCursor
-          themeColors={themeColors}
-          left={((timeCursorTime - visibleTimeStart) / visibleDuration) * width}
-        />
-      )}
+      {timeCursorTime !== undefined && <TimeCursor />}
     </Container>
   )
 }

src/components/Toolbar/index.js

@@ -22,28 +22,6 @@ import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
 import PauseCircleOutlineIcon from "@material-ui/icons/PauseCircleOutline"
 import Color from "color"
 
-const Container = styled("div")(({ themeColors }) => ({
-  display: "flex",
-  paddingBottom: 16,
-  "&&& .MuiButtonBase-root": {
-    borderColor: themeColors.fg,
-  },
-  "&&& .MuiButton-label": {
-    color: themeColors.fg,
-    textTransform: "none",
-  },
-  "&&& .active.MuiButtonBase-root": {
-    backgroundColor: themeColors.fg,
-  },
-  "&&& .active .MuiButton-label": {
-    color: themeColors.bg,
-  },
-  "&&& .MuiSvgIcon-root": {
-    width: 16,
-    height: 16,
-  },
-}))
-
 const getSelectFieldStyles = (themeColors) => ({
   control: (styles) => ({
     ...styles,
@@ -181,9 +159,29 @@ export const Toolbar = ({
   }, [selectedTimestamp, selectedDuration])
 
   const SelectComponent = allowCustomLabels ? CreatableSelect : NormalSelect
-
+  const Container = styled("div")(() => ({
+    display: "flex",
+    paddingBottom: 16,
+    "&&& .MuiButtonBase-root": {
+      borderColor: themeColors.fg,
+    },
+    "&&& .MuiButton-label": {
+      color: themeColors.fg,
+      textTransform: "none",
+    },
+    "&&& .active.MuiButtonBase-root": {
+      backgroundColor: themeColors.fg,
+    },
+    "&&& .active .MuiButton-label": {
+      color: themeColors.bg,
+    },
+    "&&& .MuiSvgIcon-root": {
+      width: 16,
+      height: 16,
+    },
+  }))
   return (
-    <Container themeColors={themeColors}>
+    <Container>
       <Box
         color={themeColors.fg}
         display="flex"

src/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from "react"
+import ReactDOM from "react-dom"
+import "./index.css"
+import App from "./App"
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-);
+  document.getElementById("root")
+)

src/utils/fetch-audio-data.js

@@ -16,7 +16,10 @@ export default async (audioUrl) => {
       channel.slice(i, i + samplesPerBlock).reduce((acc, a) => acc + a, 0) /
       samplesPerBlock
 
-    timeData.push({ time: i * (1 / audioBuffer.sampleRate) * 1000, value: avg })
+    timeData.push({
+      time: i * (1 / audioBuffer.sampleRate) * 1000,
+      value: avg,
+    })
   }
 
   return timeData

yarn.lock

@@ -15438,11 +15438,6 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-transformation-matrix-js@^2.7.6:
-  version "2.7.6"
-  resolved "https://registry.yarnpkg.com/transformation-matrix-js/-/transformation-matrix-js-2.7.6.tgz#25c7ff055c99b8528ffbd4c4a2684be6c9d5ef60"
-  integrity sha512-1CxDIZmCQ3vA0GGnkdMQqxUXVm3xXAFmglPYRS1hr37LzSg22TC7QAWOT38OmdUvMEs/rqcnkFoAsqvzdiluDg==
-
 trim-repeated@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"