From 6f5ff3cdfac3fc154281fdda7c1ec9ff7ebbd1fa Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Jul 2020 17:57:25 +0200 Subject: paragraph list view --- .../components/annotations/annotation.form.js | 21 ++++++++------ .../components/annotations/annotation.index.js | 32 ++++++++++++++++++++-- .../components/annotations/annotation.types.js | 8 ++++-- .../components/player/playButton.component.js | 31 +++++++++++++++++++++ .../components/timeline/playButton.component.js | 31 --------------------- .../components/timeline/playCursor.component.js | 7 ----- .../align/components/timeline/ticks.component.js | 11 ++++---- .../components/timeline/waveform.component.js | 6 ++-- 8 files changed, 86 insertions(+), 61 deletions(-) create mode 100644 animism-align/frontend/views/align/components/player/playButton.component.js delete mode 100644 animism-align/frontend/views/align/components/timeline/playButton.component.js (limited to 'animism-align/frontend/views/align/components') 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 6972f93..e18d6df 100644 --- a/animism-align/frontend/views/align/components/annotations/annotation.form.js +++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js @@ -7,7 +7,7 @@ import actions from '../../../../actions' // import * as alignActions from '../align.actions' import { ZOOM_STEPS } from '../../constants' -import { clamp } from '../../../../util' +import { clamp, timestamp } from '../../../../util' import { timeToPosition } from '../../align.util' import { Select } from '../../../../common' @@ -95,14 +95,17 @@ class AnnotationForm extends Component { > {annotation.type === 'sentence' && this.renderTextarea()} {annotation.type === 'header' && this.renderTextarea()} -
- +
{timestamp(annotation.start_ts, 1, true)}
+
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 8121d1d..d5c1eed 100644 --- a/animism-align/frontend/views/align/components/annotations/annotation.index.js +++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js @@ -4,7 +4,7 @@ import { connect } from 'react-redux' import actions from '../../../../actions' -import { ZOOM_STEPS } from '../../constants' +import { ZOOM_STEPS, INNER_HEIGHT } from '../../constants' import { clamp } from '../../../../util' import { positionToTime, timeToPosition } from '../../align.util' @@ -30,7 +30,7 @@ class AnnotationIndex extends Component { const { order, lookup } = index let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step - let widthTimeDuration = window.innerHeight * secondsPerPixel // secs per pixel + let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel let timeMin = start_ts - 30.0 let timeMax = Math.min(start_ts + widthTimeDuration, duration) @@ -43,9 +43,37 @@ class AnnotationIndex extends Component { } handleClick(e, annotation) { e.stopPropagation() + if (e.shiftKey) { + e.preventDefault() + this.handleParagraphSelection(annotation) + } actions.audio.seek(annotation.start_ts) actions.align.setSelectedAnnotation(annotation.id) } + handleParagraphSelection(annotation) { + const { selected_paragraph_id } = this.props.timeline + console.log("___________________") + console.log(annotation) + console.log(selected_paragraph_id) + if (!selected_paragraph_id || selected_paragraph_id === -1) { + if (annotation.paragraph_id) { + actions.align.setSelectedParagraph(annotation.paragraph_id) + } else { + actions.paragraph.create({ + type: 'paragraph', + start_ts: annotation.start_ts, + }) .then(data => { + console.log(data.res) + actions.align.setSelectedParagraph(data.res.id) + annotation.paragraph_id = data.res.id + actions.annotation.update(annotation) + }) + } + } else if (selected_paragraph_id !== annotation.paragraph_id) { + annotation.paragraph_id = selected_paragraph_id + actions.annotation.update(annotation) + } + } handleDoubleClick(e, annotation) { e.stopPropagation() actions.align.showEditAnnotationForm(annotation) diff --git a/animism-align/frontend/views/align/components/annotations/annotation.types.js b/animism-align/frontend/views/align/components/annotations/annotation.types.js index 7639821..f95589d 100644 --- a/animism-align/frontend/views/align/components/annotations/annotation.types.js +++ b/animism-align/frontend/views/align/components/annotations/annotation.types.js @@ -8,9 +8,11 @@ import { positionToTime, timeToPosition } from '../../align.util' export const AnnotationSentence = ({ y, annotation, selected, onClick, onDoubleClick }) => { const { start_ts, text, paragraph_id } = annotation - let className = (paragraph_id % 2) - ? 'annotation sentence odd' - : 'annotation sentence even' + let className = !paragraph_id + ? 'annotation sentence' + : (paragraph_id % 2) + ? 'annotation sentence odd' + : 'annotation sentence even' if (selected) className += ' selected' return (
{ + return ( +
{ + audio.playing ? actions.audio.pause() : actions.audio.play() + }} + /> + ) +} + +const mapStateToProps = state => ({ + audio: state.audio, +}) + +const mapDispatchToProps = dispatch => ({ + // alignActions: bindActionCreators({ ...alignActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PlayButton) diff --git a/animism-align/frontend/views/align/components/timeline/playButton.component.js b/animism-align/frontend/views/align/components/timeline/playButton.component.js deleted file mode 100644 index 486eaee..0000000 --- a/animism-align/frontend/views/align/components/timeline/playButton.component.js +++ /dev/null @@ -1,31 +0,0 @@ -import React, { Component } from 'react' -// import { Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import actions from '../../../../actions' -// import * as alignActions from '../align.actions' - -import { ZOOM_STEPS } from '../../constants' -import { clamp } from '../../../../util' - -const PlayButton = ({ audio }) => { - return ( -
{ - audio.playing ? actions.audio.pause() : actions.audio.play() - }} - /> - ) -} - -const mapStateToProps = state => ({ - audio: state.audio, -}) - -const mapDispatchToProps = dispatch => ({ - // alignActions: bindActionCreators({ ...alignActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(PlayButton) diff --git a/animism-align/frontend/views/align/components/timeline/playCursor.component.js b/animism-align/frontend/views/align/components/timeline/playCursor.component.js index 71e6a3a..e03d212 100644 --- a/animism-align/frontend/views/align/components/timeline/playCursor.component.js +++ b/animism-align/frontend/views/align/components/timeline/playCursor.component.js @@ -24,13 +24,6 @@ const PlayCursor = ({ timeline, audio }) => { ) } -/* -
- {timestamp(cursor_ts, 1)} -
- -*/ - const mapStateToProps = state => ({ timeline: state.align.timeline, audio: state.audio, diff --git a/animism-align/frontend/views/align/components/timeline/ticks.component.js b/animism-align/frontend/views/align/components/timeline/ticks.component.js index 72f9bd0..747fb7a 100644 --- a/animism-align/frontend/views/align/components/timeline/ticks.component.js +++ b/animism-align/frontend/views/align/components/timeline/ticks.component.js @@ -1,16 +1,15 @@ import React, { Component } from 'react' -import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../../constants' +import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from '../../constants' import { timestamp } from '../../../../util' export default class Ticks extends Component { render() { let { start_ts, zoom, duration } = this.props.timeline - const width = window.innerHeight let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step - let widthTimeDuration = width * secondsPerPixel // secs per pixel + let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel let timeMin = start_ts let timeMax = Math.min(start_ts + widthTimeDuration, duration) @@ -26,11 +25,11 @@ export default class Ticks extends Component { let startOffset = pixelsPerLabel - (pixelMin % pixelsPerLabel) let startTiming = (pixelMin + startOffset) * secondsPerPixel - let labelCount = Math.ceil(width / pixelsPerLabel) + 1 + let labelCount = Math.ceil(INNER_HEIGHT / pixelsPerLabel) + 1 let offset, timing, tickLabels = [], ticks = [] for (var i = -1; i < labelCount; i++) { offset = i * pixelsPerLabel + startOffset - if (offset > width) continue + if (offset > INNER_HEIGHT) continue timing = i * secondsPerLabel + startTiming if (timing > duration) { break @@ -63,7 +62,7 @@ export default class Ticks extends Component { /> ) } - let tickCount = Math.ceil(width / pixelsPerTick) + 6 + let tickCount = Math.ceil(INNER_HEIGHT / pixelsPerTick) + 6 for (var i = 0; i < tickCount; i += 1) { offset = i * pixelsPerTick + startOffset - pixelsPerLabel if (offset > durationOffset) { 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 785b020..16ceaf6 100644 --- a/animism-align/frontend/views/align/components/timeline/waveform.component.js +++ b/animism-align/frontend/views/align/components/timeline/waveform.component.js @@ -6,7 +6,7 @@ import { connect } from 'react-redux' import actions from '../../../../actions' // import * as uploadActions from './upload.actions' -import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../../constants' +import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from '../../constants' class Waveform extends Component { constructor(props){ @@ -23,12 +23,12 @@ class Waveform extends Component { resize() { const canvas = this.canvasRef.current canvas.width = WAVEFORM_SIZE - canvas.height = window.innerHeight + canvas.height = INNER_HEIGHT } draw() { const canvas = this.canvasRef.current const ctx = canvas.getContext('2d') - const h = window.innerHeight + const h = INNER_HEIGHT this.clearCanvas(ctx, h) this.drawCurve(ctx, h) } -- cgit v1.2.3-70-g09d2