From 37896f6960f8145a13e2943fbb0cde52da430d30 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 11 Mar 2021 14:38:02 +0100 Subject: move sidebar and timeline out of align folder --- .../editor/timeline/components/cursor.component.js | 26 ++++++ .../timeline/components/cursorRegion.component.js | 28 ++++++ .../timeline/components/playCursor.component.js | 31 +++++++ .../editor/timeline/components/ticks.component.js | 88 ++++++++++++++++++ .../timeline/components/waveform.component.js | 100 +++++++++++++++++++++ 5 files changed, 273 insertions(+) create mode 100644 animism-align/frontend/app/views/editor/timeline/components/cursor.component.js create mode 100644 animism-align/frontend/app/views/editor/timeline/components/cursorRegion.component.js create mode 100644 animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js create mode 100644 animism-align/frontend/app/views/editor/timeline/components/ticks.component.js create mode 100644 animism-align/frontend/app/views/editor/timeline/components/waveform.component.js (limited to 'animism-align/frontend/app/views/editor/timeline/components') diff --git a/animism-align/frontend/app/views/editor/timeline/components/cursor.component.js b/animism-align/frontend/app/views/editor/timeline/components/cursor.component.js new file mode 100644 index 0000000..4a94100 --- /dev/null +++ b/animism-align/frontend/app/views/editor/timeline/components/cursor.component.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react' + +import { ZOOM_STEPS } from 'app/constants' +import { timestamp } from 'app/utils' + +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 ( +
+
+
+ {timestamp(ts, 1)} +
+
+ ) +} + +export default Cursor \ No newline at end of file diff --git a/animism-align/frontend/app/views/editor/timeline/components/cursorRegion.component.js b/animism-align/frontend/app/views/editor/timeline/components/cursorRegion.component.js new file mode 100644 index 0000000..a0c9bd7 --- /dev/null +++ b/animism-align/frontend/app/views/editor/timeline/components/cursorRegion.component.js @@ -0,0 +1,28 @@ +import React from 'react' + +import { ZOOM_STEPS } from 'app/constants' +import { timestamp } from 'app/utils' + +const CursorRegion = ({ timeline }) => { + const { start_ts, zoom, cursor_region } = timeline + if (!cursor_region) return null + const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 + const duration = cursor_region.b_ts - cursor_region.a_ts + const y = (cursor_region.a_ts - start_ts) / secondsPerPixel + const height = (duration) / secondsPerPixel + return ( +
+
+ {timestamp(duration, 1, true)} +
+
+ ) +} + +export default CursorRegion \ No newline at end of file diff --git a/animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js b/animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js new file mode 100644 index 0000000..80da31f --- /dev/null +++ b/animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js @@ -0,0 +1,31 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { ZOOM_STEPS } from 'app/constants' +import { timestamp } from 'app/utils' + +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 ( +
+
+
+ ) +} + +const mapStateToProps = state => ({ + timeline: state.align.timeline, + audio: state.audio, +}) + +export default connect(mapStateToProps)(PlayCursor) diff --git a/animism-align/frontend/app/views/editor/timeline/components/ticks.component.js b/animism-align/frontend/app/views/editor/timeline/components/ticks.component.js new file mode 100644 index 0000000..4530863 --- /dev/null +++ b/animism-align/frontend/app/views/editor/timeline/components/ticks.component.js @@ -0,0 +1,88 @@ +import React, { Component } from 'react' + +import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from 'app/constants' +import { timestamp } from 'app/utils' + +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( +
+ {timestamp(timing)} +
+ ) + } + + let durationOffset = duration / secondsPerPixel - pixelMin + if (timing > duration) { + tickLabels.push( +
+ {timestamp(duration, 1)} +
+ ) + ticks.push( +
+ ) + } + 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( +
+ ) + } + // console.log(ticks.length) + + return ( +
+ {ticks} + {tickLabels} +
+ ) + } +} diff --git a/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js new file mode 100644 index 0000000..0161129 --- /dev/null +++ b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js @@ -0,0 +1,100 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import actions from 'app/actions' + +import { + WAVEFORM_SIZE, INNER_HEIGHT, + ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, +} from 'app/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 ( + + ) + } +} + +const mapStateToProps = state => ({ + timeline: state.align.timeline, + peaks: state.align.peaks, +}) + +export default connect(mapStateToProps)(Waveform) -- cgit v1.2.3-70-g09d2