From 6b6662f56941dbe0512e2e7e92d80cb010cef0de Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Sat, 19 Jan 2019 09:58:30 -0500
Subject: [PATCH] Improve paint/composite time for sound editor while sound is
playing.
Forcing the playhead onto its own painting layer removes an expensive composite with the waveform. Animate using transforms instead of left prevents layouts of the rest of the page while playing a sound.
---
src/components/audio-trimmer/audio-trimmer.css | 13 ++++++++++++-
src/components/audio-trimmer/audio-trimmer.jsx | 2 +-
.../__snapshots__/sound-editor.test.jsx.snap | 2 +-
3 files changed, 14 insertions(+), 3 deletions(-)
diff --git a/src/components/audio-trimmer/audio-trimmer.css b/src/components/audio-trimmer/audio-trimmer.css
index fe276c381..3d9fa65a1 100644
--- a/src/components/audio-trimmer/audio-trimmer.css
+++ b/src/components/audio-trimmer/audio-trimmer.css
@@ -12,6 +12,9 @@ $hover-scale: 2;
left: 0;
width: 100%;
height: 100%;
+
+ /* Force the browser to paint separately to avoid composite cost with waveform */
+ transform: translateZ(0);
}
.trim-background {
@@ -51,7 +54,15 @@ $hover-scale: 2;
}
.playhead {
- border: 1px solid $motion-primary;
+ /*
+ Even though playhead is just a line, it is 100% width (the width of the waveform)
+ so that we can use transform: translateX() using percentages.
+ */
+ width: 100%;
+ border-left: 1px solid $motion-primary;
+ border-top: none;
+ border-bottom: none;
+ border-right: none;
}
.start-trim-line {
diff --git a/src/components/audio-trimmer/audio-trimmer.jsx b/src/components/audio-trimmer/audio-trimmer.jsx
index d1b21c926..e2ad295fc 100644
--- a/src/components/audio-trimmer/audio-trimmer.jsx
+++ b/src/components/audio-trimmer/audio-trimmer.jsx
@@ -35,7 +35,7 @@ const AudioTrimmer = props => (
<Box
className={classNames(styles.trimLine, styles.playhead)}
style={{
- left: `${100 * props.playhead}%`
+ transform: `translateX(${100 * props.playhead}%)`
}}
/>
) : null}
diff --git a/test/unit/components/__snapshots__/sound-editor.test.jsx.snap b/test/unit/components/__snapshots__/sound-editor.test.jsx.snap
index 93ebc2cf6..77df3c549 100644
--- a/test/unit/components/__snapshots__/sound-editor.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sound-editor.test.jsx.snap
@@ -224,7 +224,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
"flexWrap": undefined,
"height": undefined,
"justifyContent": undefined,
- "left": "50%",
+ "transform": "translateX(50%)",
"width": undefined,
}
}
--
GitLab