diff options
Diffstat (limited to 'animism-align')
9 files changed, 63 insertions, 25 deletions
diff --git a/animism-align/README.md b/animism-align/README.md index e08c35a..0e41ed4 100644 --- a/animism-align/README.md +++ b/animism-align/README.md @@ -2,7 +2,7 @@ Align a text to an audio file. -## installation +## Installation First, install miniconda and node. @@ -11,7 +11,7 @@ conda create env -f environment.yml npm install ``` -## running the site +## Running the site Before running the commands, enter the client directory, load the Conda environment, and make sure the database is current: @@ -31,7 +31,7 @@ npm run build The server will be running on http://0.0.0.0:5000/ -## development +## Development Monitor the Javascript for changes (run in another window): diff --git a/animism-align/cli/commands/peaks/parse.py b/animism-align/cli/commands/peaks/parse.py index dc9a0a2..117ecfd 100644 --- a/animism-align/cli/commands/peaks/parse.py +++ b/animism-align/cli/commands/peaks/parse.py @@ -4,8 +4,6 @@ Extract peaks from an MP3 file. import click -from app.site.builder import build_site, build_file - @click.command() @click.option('-i', '--input', 'fp_in', required=False, help='Input file') @@ -24,16 +22,17 @@ def cli(ctx, fp_in): print(f"Loading {fp_in}") y, sr = librosa.load(fp_in, sr=None) - sr_10 = math.floor(sr / 10) - steps = math.floor(y.shape[0] / sr_10) + sr_10 = math.ceil(sr / 10) + steps = math.ceil(y.shape[0] / sr_10) - peaks = numpy.ndarray(steps * 2) + peaks = numpy.ndarray(steps) for i in range(steps): offset = i * sr_10 slice = y[offset:offset + sr_10] - peaks[i * 2] = float('%.3f' % slice.min()) - peaks[i * 2 + 1] = float('%.3f' % slice.max()) + peak = max(abs(slice.min()), slice.max()) + peaks[i] = float('%.3f' % peak) + # peaks[i * 2 + 1] = float('%.3f' % slice.max()) with open(os.path.join(app_cfg.DIR_DATA_STORE, 'peaks.json'), 'w') as fp_out: json.dump(peaks.tolist(), fp_out, separators=(',', ':')) diff --git a/animism-align/environment.yml b/animism-align/environment.yml index af838e2..3a28790 100644 --- a/animism-align/environment.yml +++ b/animism-align/environment.yml @@ -18,12 +18,15 @@ dependencies: - tk=8.6.8=ha441bb4_0 - wheel=0.33.4=py37_0 - xz=5.2.4=h1de35cc_4 + - zlib=1.2.11=h1de35cc_3 - pip: - alembic==1.2.1 - amqp==2.5.0 - async-timeout==3.0.1 + - audioread==2.1.8 - billiard==3.6.0.0 - celery==4.3.0 + - cffi==1.14.0 - chardet==3.0.4 - click==7.0 - colorlog==4.0.2 @@ -35,6 +38,7 @@ dependencies: - flask-classful==0.14.2 - flask-sqlalchemy==2.4.0 - flask-wtf==0.14.2 + - idna==2.8 - imageio==2.5.0 - imutils==0.5.2 - infinity==1.4 @@ -42,35 +46,50 @@ dependencies: - itsdangerous==1.1.0 - jinja2==2.10.1 - joblib==0.13.2 + - kiwisolver==1.2.0 - kombu==4.6.3 + - librosa==0.7.2 + - llvmlite==0.32.1 - mako==1.1.0 - markdown==3.1.1 - markupsafe==1.1.1 - matplotlib==3.1.1 - monotonic==1.5 + - networkx==2.4 + - numba==0.43.0 + - numpy==1.19.0 - pbr==5.4.3 - pdoc==0.3.2 - pillow==6.1.0 + - pycparser==2.20 + - pyparsing==2.4.7 - python-dateutil==2.8.0 - python-dotenv==0.10.3 + - python-editor==1.0.4 - pytz==2019.2 + - pywavelets==1.1.1 - pyyaml==5.1.2 - requests==2.22.0 + - resampy==0.2.2 - scikit-image==0.15.0 + - scikit-learn==0.23.1 - scipy==1.3.0 - simplejson==3.16.0 - six==1.12.0 + - soundfile==0.10.3.post1 - sqlalchemy==1.3.6 - sqlalchemy-utc==0.10.0 - sqlalchemy-utils==0.34.1 - sqlparse==0.3.0 - tempita==0.5.2 + - threadpoolctl==2.1.0 - tqdm==4.32.2 - urllib3==1.25.3 - validators==0.13.0 + - vine==1.3.0 - werkzeug==0.15.5 - wtforms==2.2.1 - wtforms-alchemy==0.16.9 - wtforms-components==0.10.4 -prefix: /Users/user/anaconda/envs/swimmer +prefix: /Users/user/miniconda3/envs/animism diff --git a/animism-align/frontend/api/crud.reducer.js b/animism-align/frontend/api/crud.reducer.js index 04ade91..38aa4f8 100644 --- a/animism-align/frontend/api/crud.reducer.js +++ b/animism-align/frontend/api/crud.reducer.js @@ -114,6 +114,7 @@ export const crudReducer = (type) => { return { ...state, update: action.data, + index: addToIndex(state.index, action.data.res, state.options.sort), } case crud_type.index_error: return { 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, }) |