From 37896f6960f8145a13e2943fbb0cde52da430d30 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 11 Mar 2021 14:38:02 +0100
Subject: move sidebar and timeline out of align folder

---
 .../align/components/sidebar/script.component.js   |  22 ---
 .../sidebar/tableOfContents.component.js           |  29 ----
 .../components/sidebar/waveUpload.component.js     | 157 ---------------------
 .../align/components/timeline/cursor.component.js  |  26 ----
 .../components/timeline/cursorRegion.component.js  |  28 ----
 .../components/timeline/playCursor.component.js    |  31 ----
 .../align/components/timeline/ticks.component.js   |  88 ------------
 .../components/timeline/waveform.component.js      | 100 -------------
 8 files changed, 481 deletions(-)
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/cursorRegion.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/ticks.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/waveform.component.js

(limited to 'animism-align/frontend/app/views/editor/align/components')

diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js
deleted file mode 100644
index d23b3da..0000000
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-
-const Script = ({ text }) => {
-  if (text.loading) return null
-  return (
-    <textarea 
-      className='script'
-      onChange={e => actions.site.updateText(e.target.value)}
-      value={text}
-    />
-  )
-}
-
-const mapStateToProps = state => ({
-  text: state.align.text,
-})
-
-export default connect(mapStateToProps)(Script)
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
deleted file mode 100644
index 8fb3d54..0000000
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import { ROMAN_NUMERALS } from 'app/constants'
-import actions from 'app/actions'
-
-class TableOfContents extends Component {
-  render() {
-    const { loading, order, lookup } = this.props.annotation
-    if (loading || !order) return null
-    const sectionIds = order.filter(id => lookup[id].type === "section_heading")
-    return (
-      <div className="sidebar-content toc">
-        {sectionIds.map((id, i) => (
-          <div key={id} onClick={() => actions.align.setScrollPosition(lookup[id].start_ts)}>
-            {ROMAN_NUMERALS[i]}{'. '}{lookup[id].text}
-          </div>
-        ))}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  annotation: state.annotation.index,
-})
-
-export default connect(mapStateToProps)(TableOfContents)
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
deleted file mode 100644
index 27047ef..0000000
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import extractPeaks from 'webaudio-peaks'
-
-import actions from 'app/actions'
-import { formatSize, timestampHMS } from 'app/utils'
-import { Loader } from 'app/common'
-
-class WaveUpload extends Component {
-  state = {
-    working: false,
-    status: "",
-    filename: "",
-    duration: 0,
-  }
-
-  upload(e) {
-    e.preventDefault()
-    document.body.className = ''
-    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
-    let i
-    let file
-    for (i = 0; i < files.length; i++) {
-      file = files[i]
-      if (file && file.type.match('image.*')) break
-    }
-    if (!file) {
-      console.log('No file specified')
-      return
-    }
-    this.setState({ working: true, status: "Loading MP3...", filename: file.name, size: file.size, duration: 0 })
-    const fileReader = new FileReader()
-    fileReader.onload = event => {
-      fileReader.onload = null
-      this.processAudioFile(file, event.target.result)
-    }
-    fileReader.readAsArrayBuffer(file)
-  }
-
-  processAudioFile(audioFile, arrayBuffer) {
-    this.setState({ working: true, status: "Extracting peaks..." })
-    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => {
-      // buffer, samplesPerPixel, isMono, startOffset, endOffset, bitResolution
-      this.setState({ duration: audioBuffer.duration })
-      var peaks = extractPeaks(audioBuffer, 441, true);
-      console.log(peaks)
-      const array = Array.from(peaks.data[0])
-      const peaksBlob = new Blob([ JSON.stringify(array) ], {type: "application/json"});
-      this.uploadAudioAndPeaks(audioFile, peaksBlob)
-    })
-  }
-
-  uploadAudioAndPeaks(audioFile, peaksBlob) {
-    const { episode } = this.props
-    const updatedEpisode = { ...episode }
-    this.setState({ status: "Removing old files..." })
-    this.destroyTaggedFile('peaks')
-    this.destroyTaggedFile('audio')
-    .then(() => {
-      return this.uploadTaggedFile(peaksBlob, 'peaks', 'episode-' + this.props.episode.id + '-peaks.json')
-    })
-    .then(peaksResult => {
-      updatedEpisode.settings.peaks = peaksResult
-      return this.uploadTaggedFile(audioFile, 'audio', this.state.filename)
-    })
-    .then(audioResult => {
-      updatedEpisode.settings.audio = audioResult
-      return actions.episode.update(updatedEpisode)
-    })
-    .then(res => {
-      this.setState({ status: "Upload complete", working: false })
-    })
-  }
-
-  uploadTaggedFile(file, tag, fn) {
-    return new Promise((resolve, reject) => {
-      this.setState({ status: "Uploading " + tag + "..." })
-      const uploadData = {
-        tag,
-        file,
-        __file_filename: fn,
-        username: this.props.currentUser.username,
-      }
-      console.log(uploadData)
-      return actions.upload.upload(uploadData).then(data => {
-        console.log(data)
-        resolve(data.res)
-      })
-    })
-  }
-
-  destroyTaggedFile(tag) {
-    return new Promise((resolve, reject) => {
-      if (!this.props.episode.settings[tag]) {
-        return resolve();
-      }
-      actions.upload.destroy(this.props.episode.settings[tag])
-      .then(() => {
-        console.log('Destroy successful')
-        resolve()
-      })
-      .catch(() => {
-        console.log('Error deleting the image')
-        reject()
-      })
-    })
-  }
-
-  render() {
-    const { episode, peaks } = this.props
-    return (
-      <div className="sidebar-content wave-upload">
-        {peaks.length && (
-          <div>
-            Peaks: {peaks.length}
-          </div>
-        )}
-        <div className="uploadButton">
-          <button>
-            <span>
-              {episode.settings.audio
-                ? "Upload a new audio file"
-                : "Upload an audio file"
-              }
-            </span>
-          </button>
-          <input
-            type="file"
-            accept="audio/mp3"
-            onChange={this.upload.bind(this)}
-            required={this.props.required}
-          />
-        </div>
-        <small>Upload an MP3, encoded 192kbit constant bitrate, 44.1kHz stereo</small>
-        {this.state.status && (
-          <div className='status'>
-            {this.state.working && <Loader />}
-            <div className='status-message'>{this.state.status}</div>
-            {this.state.filename && <small>{this.state.filename}</small>}
-            {this.state.size && <small>{'Size: '}{formatSize(this.state.size)}</small>}
-            {!!this.state.duration && <small>{'Duration: '}{timestampHMS(this.state.duration)}</small>}
-          </div>
-        )}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  peaks: state.align.peaks,
-  currentUser: state.auth.user,
-  project: state.site.project,
-  episode: state.site.episode,
-})
-
-export default connect(mapStateToProps)(WaveUpload)
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js
deleted file mode 100644
index 4a94100..0000000
--- a/animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js
+++ /dev/null
@@ -1,26 +0,0 @@
-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 (
-    <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/app/views/editor/align/components/timeline/cursorRegion.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/cursorRegion.component.js
deleted file mode 100644
index a0c9bd7..0000000
--- a/animism-align/frontend/app/views/editor/align/components/timeline/cursorRegion.component.js
+++ /dev/null
@@ -1,28 +0,0 @@
-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 (
-    <div
-      className='cursor_region'
-      style={{
-        top: y,
-        height,
-      }}
-    >
-      <div className='tickLabel'>
-        {timestamp(duration, 1, true)}
-      </div>
-    </div>
-  )
-}
-
-export default CursorRegion
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js
deleted file mode 100644
index 80da31f..0000000
--- a/animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js
+++ /dev/null
@@ -1,31 +0,0 @@
-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 (
-    <div
-      className='cursor playCursor'
-      style={{
-        top: y,
-      }}
-    >
-      <div className='line' />
-    </div>
-  )
-}
-
-const mapStateToProps = state => ({
-  timeline: state.align.timeline,
-  audio: state.audio,
-})
-
-export default connect(mapStateToProps)(PlayCursor)
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/ticks.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/ticks.component.js
deleted file mode 100644
index 4530863..0000000
--- a/animism-align/frontend/app/views/editor/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 '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(
-        <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/app/views/editor/align/components/timeline/waveform.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/waveform.component.js
deleted file mode 100644
index 0161129..0000000
--- a/animism-align/frontend/app/views/editor/align/components/timeline/waveform.component.js
+++ /dev/null
@@ -1,100 +0,0 @@
-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 (
-      <canvas
-        ref={this.canvasRef}
-        onMouseDown={this.props.onMouseDown}
-        onMouseUp={this.props.onMouseUp}
-      />
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  timeline: state.align.timeline,
-  peaks: state.align.peaks,
-})
-
-export default connect(mapStateToProps)(Waveform)
-- 
cgit v1.2.3-70-g09d2