From b6378770cd30a03e9db0ce8b81670411087c998f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Jun 2020 16:32:37 +0200 Subject: vertical timeline --- .../frontend/views/align/align.container.js | 7 ++--- animism-align/frontend/views/align/align.css | 16 +++++++---- .../views/align/components/ticks.component.js | 16 +++++------ .../views/align/components/timeline.component.js | 3 +- .../views/align/components/waveform.component.js | 32 +++++++++++----------- animism-align/frontend/views/align/constants.js | 3 +- 6 files changed, 39 insertions(+), 38 deletions(-) (limited to 'animism-align/frontend/views') diff --git a/animism-align/frontend/views/align/align.container.js b/animism-align/frontend/views/align/align.container.js index c422c3f..387bd86 100644 --- a/animism-align/frontend/views/align/align.container.js +++ b/animism-align/frontend/views/align/align.container.js @@ -19,11 +19,8 @@ class Container extends Component { } render() { return ( -
-
-
- -
+
+
) } diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css index 5c83a45..f581547 100644 --- a/animism-align/frontend/views/align/align.css +++ b/animism-align/frontend/views/align/align.css @@ -4,6 +4,8 @@ .body { width: 100%; height: 100%; + display: flex; + flex-direction: row; background: linear-gradient( 0deg, rgba(0, 0, 64, 0.5), @@ -15,7 +17,9 @@ canvas { display: block; } .timeline { - border-top: 1px solid #333; + display: flex; + flex-direction: row; + border-left: 1px solid #333; } @@ -25,15 +29,15 @@ canvas { } .ticks .tick { position: absolute; - top: 0; - height: 4px; - width: 1px; + left: 0; + width: 4px; + height: 1px; background: #ddd; } .ticks .tickLabel { position: absolute; - top: 6px; + left: 6px; font-size: 12px; width: 40px; - text-align: center; + margin-top: -7px; } \ No newline at end of file diff --git a/animism-align/frontend/views/align/components/ticks.component.js b/animism-align/frontend/views/align/components/ticks.component.js index 8f59c31..55821ae 100644 --- a/animism-align/frontend/views/align/components/ticks.component.js +++ b/animism-align/frontend/views/align/components/ticks.component.js @@ -6,11 +6,11 @@ import { timestamp } from '../../../util' export default class Ticks extends Component { render() { let { start_ts, zoom, duration } = this.props.timeline - const width = window.innerWidth + const width = window.innerHeight let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step - let widthTimeDuration = window.innerWidth * secondsPerPixel // secs per pixel + let widthTimeDuration = width * secondsPerPixel // secs per pixel let timeMin = start_ts let timeMax = Math.min(start_ts + widthTimeDuration, duration) @@ -29,8 +29,8 @@ export default class Ticks extends Component { let labelCount = Math.ceil(width / pixelsPerLabel) + 1 let offset, timing, tickLabels = [], ticks = [] for (var i = -1; i < labelCount; i++) { - offset = i * pixelsPerLabel + startOffset - 20 - if (offset + 20 > width) continue + offset = i * pixelsPerLabel + startOffset + if (offset > width) continue timing = i * secondsPerLabel + startTiming if (timing > duration) { break @@ -38,7 +38,7 @@ export default class Ticks extends Component { tickLabels.push(
{timestamp(timing)}
@@ -50,7 +50,7 @@ export default class Ticks extends Component { tickLabels.push(
{timestamp(duration, 1)}
@@ -58,7 +58,7 @@ export default class Ticks extends Component { ticks.push(
) @@ -72,7 +72,7 @@ export default class Ticks extends Component { ticks.push(
) diff --git a/animism-align/frontend/views/align/components/timeline.component.js b/animism-align/frontend/views/align/components/timeline.component.js index a1dad4c..eb851b7 100644 --- a/animism-align/frontend/views/align/components/timeline.component.js +++ b/animism-align/frontend/views/align/components/timeline.component.js @@ -42,7 +42,8 @@ class Timeline extends Component { let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step let widthTimeDuration = window.innerWidth * secondsPerPixel // secs per pixel - start_ts = clamp(start_ts + e.deltaY * ZOOM_STEPS[zoom], 0, duration - widthTimeDuration / 2) + start_ts = clamp(start_ts + e.deltaY * ZOOM_STEPS[zoom], 0, Math.max(0, duration - widthTimeDuration / 2)) + console.log(start_ts) actions.align.setScrollPosition(start_ts) } render() { diff --git a/animism-align/frontend/views/align/components/waveform.component.js b/animism-align/frontend/views/align/components/waveform.component.js index 2604f2a..4cd9963 100644 --- a/animism-align/frontend/views/align/components/waveform.component.js +++ b/animism-align/frontend/views/align/components/waveform.component.js @@ -6,7 +6,7 @@ import { connect } from 'react-redux' import actions from '../../../actions' // import * as uploadActions from './upload.actions' -import { DEFAULT_HEIGHT, WAVEFORM_HEIGHT, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../constants' +import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../constants' class Waveform extends Component { constructor(props){ @@ -22,24 +22,24 @@ class Waveform extends Component { } resize() { const canvas = this.canvasRef.current - canvas.width = window.innerWidth - canvas.height = DEFAULT_HEIGHT + canvas.width = WAVEFORM_SIZE + canvas.height = window.innerHeight } draw() { const canvas = this.canvasRef.current const ctx = canvas.getContext('2d') - const w = window.innerWidth - this.clearCanvas(ctx, w) - this.drawCurve(ctx, w) + const h = window.innerHeight + this.clearCanvas(ctx, h) + this.drawCurve(ctx, h) } - clearCanvas(ctx, w) { - const h = WAVEFORM_HEIGHT + 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, w) { + drawCurve(ctx, h) { let { peaks, timeline } = this.props let { start_ts, zoom, duration } = timeline @@ -47,7 +47,7 @@ class Waveform extends Component { let stepsPerPixel = ZOOM_STEPS[zoom] // 0.1 sec / step let indexesPerPixel = stepsPerPixel * 2 - let widthTimeDuration = window.innerWidth * secondsPerPixel // secs per pixel + let widthTimeDuration = h * secondsPerPixel // secs per pixel let timeMin = start_ts let timeMax = Math.min(start_ts + widthTimeDuration, duration) @@ -58,26 +58,26 @@ class Waveform extends Component { let i = 0 let step = stepMin - let waveformPeak = WAVEFORM_HEIGHT / 2 + let waveformPeak = WAVEFORM_SIZE / 2 let origin = (1 - peaks[step]) * waveformPeak - let y = origin + let y let peak // console.log(0 * indexesPerPixel + stepMin, pixelWidth * indexesPerPixel + stepMin) ctx.beginPath() - ctx.moveTo(0, y) + ctx.moveTo(origin, 0) for (i = 0; i < pixelWidth; i++) { step = i * indexesPerPixel + stepMin peak = peaks[step] y = (1 - peak) * waveformPeak - ctx.lineTo(i, y) + ctx.lineTo(y, i) } for (i = pixelWidth - 1; i > 0; i--) { step = i * indexesPerPixel + stepMin peak = peaks[step] y = (1 + peak) * waveformPeak - ctx.lineTo(i, y) + ctx.lineTo(y, i) } - ctx.lineTo(0, origin) + ctx.lineTo(origin, 0) ctx.fillStyle = 'rgba(255,255,255,0.8)' ctx.fill() } diff --git a/animism-align/frontend/views/align/constants.js b/animism-align/frontend/views/align/constants.js index 15129da..c797784 100644 --- a/animism-align/frontend/views/align/constants.js +++ b/animism-align/frontend/views/align/constants.js @@ -1,5 +1,4 @@ -export const DEFAULT_HEIGHT = 300 -export const WAVEFORM_HEIGHT = DEFAULT_HEIGHT +export const WAVEFORM_SIZE = 300 export const ZOOM_STEPS = [ 1, -- cgit v1.2.3-70-g09d2