diff options
Diffstat (limited to 'animism-align/frontend/views/align/components/timeline')
4 files changed, 0 insertions, 249 deletions
diff --git a/animism-align/frontend/views/align/components/timeline/cursor.component.js b/animism-align/frontend/views/align/components/timeline/cursor.component.js deleted file mode 100644 index f621b37..0000000 --- a/animism-align/frontend/views/align/components/timeline/cursor.component.js +++ /dev/null @@ -1,26 +0,0 @@ -import React, { Component } from 'react' - -import { ZOOM_STEPS } from '../../constants' -import { timestamp } from '../../../../util' - -const Cursor = ({ timeline, annotation }) => { - const { start_ts, zoom, cursor_ts, duration } = timeline - const ts = annotation.start_ts || cursor_ts - const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 - const y = (ts - start_ts) / secondsPerPixel - return ( - <div - className='cursor' - style={{ - top: y, - }} - > - <div className='line' /> - <div className='tickLabel'> - {timestamp(ts, 1)} - </div> - </div> - ) -} - -export default Cursor
\ No newline at end of file diff --git a/animism-align/frontend/views/align/components/timeline/playCursor.component.js b/animism-align/frontend/views/align/components/timeline/playCursor.component.js deleted file mode 100644 index e03d212..0000000 --- a/animism-align/frontend/views/align/components/timeline/playCursor.component.js +++ /dev/null @@ -1,36 +0,0 @@ -import React, { Component } from 'react' -// import { Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import { ZOOM_STEPS } from '../../constants' -import { timestamp } from '../../../../util' - -const PlayCursor = ({ timeline, audio }) => { - const { start_ts, zoom, duration } = timeline - const { play_ts } = audio - const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 - const y = (play_ts - start_ts) / secondsPerPixel - // console.log(play_ts, y) - return ( - <div - className='cursor playCursor' - style={{ - top: y, - }} - > - <div className='line' /> - </div> - ) -} - -const mapStateToProps = state => ({ - timeline: state.align.timeline, - audio: state.audio, -}) - -const mapDispatchToProps = dispatch => ({ - // alignActions: bindActionCreators({ ...alignActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(PlayCursor) diff --git a/animism-align/frontend/views/align/components/timeline/ticks.component.js b/animism-align/frontend/views/align/components/timeline/ticks.component.js deleted file mode 100644 index 747fb7a..0000000 --- a/animism-align/frontend/views/align/components/timeline/ticks.component.js +++ /dev/null @@ -1,88 +0,0 @@ -import React, { Component } from 'react' - -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 - - let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step - - let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel - - let timeMin = start_ts - let timeMax = Math.min(start_ts + widthTimeDuration, duration) - let timeWidth = timeMax - timeMin - - let pixelMin = timeMin / secondsPerPixel - - let secondsPerLabel = ZOOM_LABEL_STEPS[zoom] // secs - let pixelsPerLabel = secondsPerLabel / secondsPerPixel - let secondsPerTick = ZOOM_TICK_STEPS[zoom] - let pixelsPerTick = secondsPerTick / secondsPerPixel - - let startOffset = pixelsPerLabel - (pixelMin % pixelsPerLabel) - let startTiming = (pixelMin + startOffset) * secondsPerPixel - - 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 > INNER_HEIGHT) continue - timing = i * secondsPerLabel + startTiming - if (timing > duration) { - break - } - tickLabels.push( - <div className='tickLabel' key={"tickLabel_" + i} - style={{ - top: Math.floor(offset) - }}> - {timestamp(timing)} - </div> - ) - } - - let durationOffset = duration / secondsPerPixel - pixelMin - if (timing > duration) { - tickLabels.push( - <div className='tickLabel tickLabelTotal' key={"tickLabel_total"} - style={{ - top: durationOffset - }}> - {timestamp(duration, 1)} - </div> - ) - ticks.push( - <div className='tick' key={"tick_total"} - style={{ - top: Math.floor(durationOffset), - }} - /> - ) - } - let tickCount = Math.ceil(INNER_HEIGHT / pixelsPerTick) + 6 - for (var i = 0; i < tickCount; i += 1) { - offset = i * pixelsPerTick + startOffset - pixelsPerLabel - if (offset > durationOffset) { - break - } - ticks.push( - <div className='tick' key={"tick_" + i} - style={{ - top: Math.floor(offset), - }} - /> - ) - } - // console.log(ticks.length) - - return ( - <div className='ticks'> - {ticks} - {tickLabels} - </div> - ) - } -} diff --git a/animism-align/frontend/views/align/components/timeline/waveform.component.js b/animism-align/frontend/views/align/components/timeline/waveform.component.js deleted file mode 100644 index 16ceaf6..0000000 --- a/animism-align/frontend/views/align/components/timeline/waveform.component.js +++ /dev/null @@ -1,99 +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 uploadActions from './upload.actions' - -import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from '../../constants' - -class Waveform extends Component { - constructor(props){ - super(props) - this.canvasRef = React.createRef() - } - componentDidMount() { - this.resize() - this.draw() - } - componentDidUpdate() { - this.draw() - } - resize() { - const canvas = this.canvasRef.current - canvas.width = WAVEFORM_SIZE - canvas.height = INNER_HEIGHT - } - draw() { - const canvas = this.canvasRef.current - const ctx = canvas.getContext('2d') - const h = INNER_HEIGHT - this.clearCanvas(ctx, h) - this.drawCurve(ctx, h) - } - clearCanvas(ctx, h) { - const w = WAVEFORM_SIZE - ctx.clearRect(0, 0, w, h) - ctx.fillStyle = 'rgba(0,0,0,0.5)' - ctx.fillRect(0, 0, w, h) - ctx.fillStyle = 'rgba(64,128,192,0.5)' - } - drawCurve(ctx, h) { - let { peaks, timeline } = this.props - let { start_ts, zoom, duration } = timeline - - let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step - let stepsPerPixel = ZOOM_STEPS[zoom] // 0.1 sec / step - - let widthTimeDuration = h * secondsPerPixel // secs per pixel - - let timeMin = Math.round(start_ts / secondsPerPixel) * secondsPerPixel - let timeMax = Math.min(timeMin + widthTimeDuration, duration) - let timeWidth = timeMax - timeMin - - let stepMin = Math.floor(timeMin * 10) - let pixelWidth = Math.ceil(timeWidth / secondsPerPixel) - - let i = 0 - let step = stepMin - let waveformPeak = WAVEFORM_SIZE / 2 - let origin = (1 - peaks[step]) * waveformPeak - let y - let peak - // console.log(stepMin, pixelWidth * stepsPerPixel + stepMin) - ctx.beginPath() - ctx.moveTo(origin, 0) - for (i = 0; i < pixelWidth; i++) { - step = i * stepsPerPixel + stepMin - peak = peaks[step] - y = (1 - peak) * waveformPeak - ctx.lineTo(y, i) - } - for (i = pixelWidth - 1; i > 0; i--) { - step = i * stepsPerPixel + stepMin - peak = peaks[step] - y = (1 + peak) * waveformPeak - ctx.lineTo(y, i) - } - ctx.lineTo(origin, 0) - ctx.fillStyle = 'rgba(255,255,255,0.8)' - ctx.fill() - } - render() { - return ( - <canvas ref={this.canvasRef} onClick={this.props.onClick} /> - ) - } -} - -const mapStateToProps = state => ({ - timeline: state.align.timeline, - peaks: state.site.peaks, -}) - -const mapDispatchToProps = dispatch => ({ - // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(Waveform) |