diff options
Diffstat (limited to 'animism-align/frontend/views/align')
5 files changed, 33 insertions, 14 deletions
diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css index a956b79..799693c 100644 --- a/animism-align/frontend/views/align/align.css +++ b/animism-align/frontend/views/align/align.css @@ -116,12 +116,12 @@ canvas { .annotationIndex { width: 405px; } -.annotation { +.annotationIndex .annotation { position: absolute; left: 5px; max-width: 450px; padding: 0.25rem 0.375rem; - box-shadow: 2px 2px 4px rgba(0,0,0,0.5); + box-shadow: 0px 0px 4px rgba(0,0,0,0.7); border-radius: 2px; font-size: 12px; cursor: pointer; diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js index b62c36e..6972f93 100644 --- a/animism-align/frontend/views/align/components/annotations/annotation.form.js +++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js @@ -22,6 +22,12 @@ class AnnotationForm extends Component { this.handleSelect = this.handleSelect.bind(this) this.handleKeyDown = this.handleKeyDown.bind(this) this.handleSubmit = this.handleSubmit.bind(this) + this.textareaRef = React.createRef() + } + componentDidMount() { + if (this.textareaRef && this.textareaRef.current) { + this.textareaRef.current.focus() + } } handleKeyDown(e) { if (e.keyCode === 27) { // escape @@ -111,6 +117,7 @@ class AnnotationForm extends Component { value={annotation.text} onKeyDown={this.handleKeyDown} onChange={this.handleChange} + ref={this.textareaRef} /> </div> ) diff --git a/animism-align/frontend/views/align/components/annotations/annotation.index.js b/animism-align/frontend/views/align/components/annotations/annotation.index.js index 7b562c2..09cb255 100644 --- a/animism-align/frontend/views/align/components/annotations/annotation.index.js +++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js @@ -38,7 +38,7 @@ class AnnotationIndex extends Component { const items = order.filter(id => { const { start_ts: ts } = lookup[id] return (timeMin < ts && ts < timeMax) - }).map(id => lookup[id]) + }).map(id => lookup[id]).reverse() this.setState({ items }) } handleClick(annotation) { diff --git a/animism-align/frontend/views/align/components/timeline/waveform.component.js b/animism-align/frontend/views/align/components/timeline/waveform.component.js index 128204a..0a118cf 100644 --- a/animism-align/frontend/views/align/components/timeline/waveform.component.js +++ b/animism-align/frontend/views/align/components/timeline/waveform.component.js @@ -45,7 +45,6 @@ class Waveform extends Component { let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step let stepsPerPixel = ZOOM_STEPS[zoom] // 0.1 sec / step - let indexesPerPixel = stepsPerPixel * 2 let widthTimeDuration = h * secondsPerPixel // secs per pixel @@ -53,7 +52,7 @@ class Waveform extends Component { let timeMax = Math.min(start_ts + widthTimeDuration, duration) let timeWidth = timeMax - timeMin - let stepMin = Math.floor(timeMin * 10 * 2) + let stepMin = Math.floor(timeMin * 10) let pixelWidth = Math.ceil(timeWidth / secondsPerPixel) let i = 0 @@ -62,17 +61,17 @@ class Waveform extends Component { let origin = (1 - peaks[step]) * waveformPeak let y let peak - // console.log(0 * indexesPerPixel + stepMin, pixelWidth * indexesPerPixel + stepMin) + // console.log(stepMin, pixelWidth * stepsPerPixel + stepMin) ctx.beginPath() ctx.moveTo(origin, 0) for (i = 0; i < pixelWidth; i++) { - step = i * indexesPerPixel + stepMin + step = i * stepsPerPixel + stepMin peak = peaks[step] y = (1 - peak) * waveformPeak ctx.lineTo(y, i) } for (i = pixelWidth - 1; i > 0; i--) { - step = i * indexesPerPixel + stepMin + step = i * stepsPerPixel + stepMin peak = peaks[step] y = (1 + peak) * waveformPeak ctx.lineTo(y, i) diff --git a/animism-align/frontend/views/align/containers/timeline.container.js b/animism-align/frontend/views/align/containers/timeline.container.js index 23b9435..ceb9012 100644 --- a/animism-align/frontend/views/align/containers/timeline.container.js +++ b/animism-align/frontend/views/align/containers/timeline.container.js @@ -31,6 +31,12 @@ class Timeline extends Component { componentWillUnmount() { this.unbind() } + shouldComponentUpdate(nextProps) { + return ( + nextProps.timeline !== this.props.timeline || + nextProps.annotation !== this.props.annotation + ) + } bind() { document.addEventListener('keydown', this.handleKeydown) } @@ -41,6 +47,7 @@ class Timeline extends Component { if (document.activeElement !== document.body) { return } + // console.log(e.keyCode) if (e.shiftKey) { switch (e.keyCode) { case 187: // plus @@ -56,6 +63,10 @@ class Timeline extends Component { case 27: // escape actions.align.hideAnnotationForm() break + case 65: // A - add + e.preventDefault() + actions.align.showNewAnnotationForm(this.props.audio.play_ts, this.props.text) + break case 32: // spacebar actions.audio.toggle() break @@ -70,12 +81,13 @@ class Timeline extends Component { } handleWheel(e) { let { start_ts, zoom, duration } = this.props.timeline + let { deltaY } = e let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step let widthTimeDuration = window.innerHeight * secondsPerPixel // secs per pixel - - start_ts = clamp(start_ts + e.deltaY * ZOOM_STEPS[zoom], 0, Math.max(0, duration - widthTimeDuration / 2)) + start_ts += (deltaY / 2) * ZOOM_STEPS[zoom] + start_ts = clamp(start_ts, 0, Math.max(0, duration - widthTimeDuration / 2)) if (e.shiftKey) { - if (Math.abs(e.deltaY) < 2) return + if (Math.abs(deltaY) < 2) return if (e.deltaY > 0) { actions.align.throttledSetZoom(this.props.timeline.zoom + 1) } else { @@ -93,10 +105,10 @@ class Timeline extends Component { } handleClick(e) { const play_ts = positionToTime(e.pageY, this.props.timeline) - if (e.pageX > WAVEFORM_SIZE * 0.67) { - actions.align.showNewAnnotationForm(play_ts, this.props.text) - } else { + if (e.pageX < WAVEFORM_SIZE * 0.67) { actions.audio.seek(play_ts) + } else { + actions.align.showNewAnnotationForm(play_ts, this.props.text) } } render() { @@ -122,6 +134,7 @@ class Timeline extends Component { const mapStateToProps = state => ({ timeline: state.align.timeline, annotation: state.align.annotation, + audio: state.audio, text: state.site.text, }) |