diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..109a78d
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{ "semi": false }
diff --git a/README.md b/README.md
index 6846e6b..d63946d 100644
--- a/README.md
+++ b/README.md
@@ -20,5 +20,3 @@ See [demos and example code here](https://universaldatatool.com/react-time-serie
-
-
diff --git a/src/components/BackgroundContainer/index.js b/src/components/BackgroundContainer/index.js
index edff6d9..de69f51 100644
--- a/src/components/BackgroundContainer/index.js
+++ b/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 {children}
+ const Container = styled("div")(() => ({
+ backgroundColor: themeColors.bg,
+ }))
+ return {children}
}
export default BackgroundContainer
diff --git a/src/components/DurationBoxes/index.js b/src/components/DurationBoxes/index.js
index 7904833..11b7855 100644
--- a/src/components/DurationBoxes/index.js
+++ b/src/components/DurationBoxes/index.js
@@ -60,9 +60,13 @@ export const DurationBox = ({
const [toolMode] = useToolMode()
const colors = useColors()
const visibleDuration = visibleTimeEnd - visibleTimeStart
-
return (
-
+
{durations.map(
(
{
diff --git a/src/components/HighlightValueLabels/index.js b/src/components/HighlightValueLabels/index.js
index 672defc..c1f41a0 100644
--- a/src/components/HighlightValueLabels/index.js
+++ b/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 }) => {
diff --git a/src/components/MainLayout/index.js b/src/components/MainLayout/index.js
index abdfc26..2ee7faf 100644
--- a/src/components/MainLayout/index.js
+++ b/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 (
-
+
{
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 (
diff --git a/src/components/Timeline/index.js b/src/components/Timeline/index.js
index a03fa9c..1afde99 100644
--- a/src/components/Timeline/index.js
+++ b/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 (
{range(timeTextCount).map((timeTextIndex) => (
@@ -146,12 +141,7 @@ export const Timeline = ({
/>
)
})}
- {timeCursorTime !== undefined && (
-
- )}
+ {timeCursorTime !== undefined && }
)
}
diff --git a/src/components/Toolbar/index.js b/src/components/Toolbar/index.js
index 9a3f10d..e39e16f 100644
--- a/src/components/Toolbar/index.js
+++ b/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 (
-
+
,
- document.getElementById('root')
-);
+ document.getElementById("root")
+)
diff --git a/src/utils/fetch-audio-data.js b/src/utils/fetch-audio-data.js
index 9bd2002..59c7bb8 100644
--- a/src/utils/fetch-audio-data.js
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index 14fc338..50ad50a 100644
--- a/yarn.lock
+++ b/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"