From d2cb17038b8537a609be06be2ed7013dbe27117e Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 8 Mar 2021 22:11:55 +0100
Subject: beginning the BIG refactor. moving editor stuff into per-episode
 hierarchy

---
 .../align/containers/annotations.container.js      |  28 ---
 .../views/align/containers/sidebar.container.js    |  35 ----
 .../views/align/containers/timeline.container.js   | 196 ---------------------
 3 files changed, 259 deletions(-)
 delete mode 100644 animism-align/frontend/app/views/align/containers/annotations.container.js
 delete mode 100644 animism-align/frontend/app/views/align/containers/sidebar.container.js
 delete mode 100644 animism-align/frontend/app/views/align/containers/timeline.container.js

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

diff --git a/animism-align/frontend/app/views/align/containers/annotations.container.js b/animism-align/frontend/app/views/align/containers/annotations.container.js
deleted file mode 100644
index 167ae3a..0000000
--- a/animism-align/frontend/app/views/align/containers/annotations.container.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-
-import AnnotationForm from 'app/views/align/components/annotations/annotation.form'
-import AnnotationIndex from 'app/views/align/components/annotations/annotation.index'
-
-class Annotations extends Component {
-  constructor(props){
-    super(props)
-  }
-  render() {
-    return (
-      <div className='annotations'>
-        <AnnotationIndex />
-        {this.props.annotation.id &&
-          <AnnotationForm />
-        }
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  timeline: state.align.timeline,
-  annotation: state.align.annotation,
-})
-
-export default connect(mapStateToProps)(Annotations)
diff --git a/animism-align/frontend/app/views/align/containers/sidebar.container.js b/animism-align/frontend/app/views/align/containers/sidebar.container.js
deleted file mode 100644
index 11f5314..0000000
--- a/animism-align/frontend/app/views/align/containers/sidebar.container.js
+++ /dev/null
@@ -1,35 +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 'app/actions'
-
-import Script from '../components/sidebar/script.component.js'
-import TableOfContents from '../components/sidebar/tableOfContents.component.js'
-
-export default class Sidebar extends Component {
-  state = {
-    mode: "toc",
-  }
-  render() {
-    if (this.state.mode === "toc") {
-      return (
-        <div className='sidebar'>
-          <button onClick={() => this.setState({ mode: "script" })}>
-            +
-          </button>
-          <TableOfContents />
-        </div>
-      )
-    }
-    return (
-      <div className='sidebar'>
-        <Script />
-        <button onClick={() => this.setState({ mode: "toc" })}>
-          x
-        </button>
-      </div>
-    )
-  }
-}
diff --git a/animism-align/frontend/app/views/align/containers/timeline.container.js b/animism-align/frontend/app/views/align/containers/timeline.container.js
deleted file mode 100644
index 57bac5d..0000000
--- a/animism-align/frontend/app/views/align/containers/timeline.container.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-
-import Annotations from 'app/views/align/containers/annotations.container'
-import Waveform from 'app/views/align/components/timeline/waveform.component'
-import Ticks from 'app/views/align/components/timeline/ticks.component'
-import Cursor from 'app/views/align/components/timeline/cursor.component'
-import PlayCursor from 'app/views/align/components/timeline/playCursor.component'
-import CursorRegion from 'app/views/align/components/timeline/cursorRegion.component'
-
-import { WAVEFORM_SIZE, ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
-import { clamp } from 'app/utils'
-import { positionToTime } from 'app/utils/align.utils'
-
-class Timeline extends Component {
-  state = {
-    dragging: false,
-    a_ts: -1,
-  }
-  constructor(props){
-    super(props)
-    this.handleKeydown = this.handleKeydown.bind(this)
-    this.handleMouseMove = this.handleMouseMove.bind(this)
-    this.handleWheel = this.handleWheel.bind(this)
-    this.handleContainerClick = this.handleContainerClick.bind(this)
-    this.handleTimelineMouseDown = this.handleTimelineMouseDown.bind(this)
-    this.handleTimelineMouseUp = this.handleTimelineMouseUp.bind(this)
-  }
-  componentDidMount() {
-    this.bind()
-  }
-  componentWillUnmount() {
-    this.unbind()
-  }
-  shouldComponentUpdate(nextProps) {
-    return (
-      nextProps.timeline !== this.props.timeline ||
-      nextProps.annotation !== this.props.annotation
-    )
-  }
-  bind() {
-    document.addEventListener('keydown', this.handleKeydown)
-  }
-  unbind() {
-    document.removeEventListener('keydown', this.handleKeydown)
-  }
-  handleKeydown(e) {
-    if (document.activeElement !== document.body) {
-      return
-    }
-    console.log(e.keyCode)
-    if (e.metaKey && this.props.selectedAnnotation.id) {
-      const { selectedAnnotation } = this.props
-      switch (e.keyCode) {
-        case 38: // up
-          e.preventDefault()
-          selectedAnnotation.start_ts = Math.max(selectedAnnotation.start_ts - (e.shiftKey ? 1 : 0.1), 0)
-          actions.align.updateSelectedAnnotation(selectedAnnotation)
-          actions.audio.seek(selectedAnnotation.start_ts)
-          actions.align.setCursor(selectedAnnotation.start_ts)
-          break
-        case 40: // down
-          e.preventDefault()
-          selectedAnnotation.start_ts += e.shiftKey ? 1 : 0.1
-          actions.align.updateSelectedAnnotation(selectedAnnotation)
-          actions.audio.seek(selectedAnnotation.start_ts)
-          actions.align.setCursor(selectedAnnotation.start_ts)
-          break
-        case 68: // D
-          e.preventDefault()
-          actions.align.cloneSelectedAnnotation(selectedAnnotation)
-      }
-      return
-    }
-    if (e.shiftKey) {
-      switch (e.keyCode) {
-        case 187: // plus
-          actions.align.setZoom(this.props.timeline.zoom - 1)
-          break
-        case 189: // minus
-          actions.align.setZoom(this.props.timeline.zoom + 1)
-          break
-      }
-    } else {
-      // console.log(e.keyCode)
-      switch (e.keyCode) {
-        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
-        case 38: // up
-          actions.audio.jump(- ZOOM_STEPS[this.props.timeline.zoom] * 0.1)
-          break
-        case 40: // down
-          actions.audio.jump(ZOOM_STEPS[this.props.timeline.zoom] * 0.1)
-          break
-      }
-    }
-  }
-  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 = INNER_HEIGHT * secondsPerPixel // secs per pixel
-    start_ts += Math.round((deltaY) * ZOOM_STEPS[zoom])
-    start_ts = clamp(start_ts, 0, Math.max(0, duration - widthTimeDuration / 2))
-    if (e.shiftKey) {
-      if (Math.abs(deltaY) < 2) return
-      if (e.deltaY > 0) {
-        actions.align.throttledSetZoom(this.props.timeline.zoom + 1)
-      } else {
-        actions.align.throttledSetZoom(this.props.timeline.zoom - 1)
-      }
-    } else if (e.altKey) {
-      actions.audio.jump(e.deltaY * ZOOM_STEPS[zoom])
-    } else {
-      actions.align.setScrollPosition(start_ts)
-    }
-  }
-  handleContainerClick(e) {
-    actions.align.clearSelectedAnnotation()
-    actions.align.clearSelectedParagraph()
-  }
-  handleTimelineMouseDown(e) {
-    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
-    actions.align.clearCursorRegion()
-    actions.align.setCursor(cursor_ts)
-    this.setState({
-      dragging: true,
-      a_ts: cursor_ts,
-    })
-  }
-  handleMouseMove(e) {
-    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
-    if (this.state.dragging) {
-      actions.align.setCursorRegion(
-        Math.min(this.state.a_ts, cursor_ts),
-        Math.max(this.state.a_ts, cursor_ts),
-      )
-    } else {
-      actions.align.setCursor(cursor_ts)
-    }
-  }
-  handleTimelineMouseUp(e) {
-    this.setState({ dragging: false })
-    const play_ts = positionToTime(e.pageY, this.props.timeline)
-    if (e.metaKey) {
-      actions.align.spliceTime(play_ts)
-    } else if (e.pageX < WAVEFORM_SIZE * 0.67) {
-      actions.audio.seek(play_ts)      
-    } else {
-      actions.align.showNewAnnotationForm(play_ts, this.props.text)
-    }
-  }
-  render() {
-    return (
-      <div
-        className='timeline'
-        onClick={this.handleContainerClick}
-        onWheel={this.handleWheel}
-        onMouseMove={this.handleMouseMove}
-      >
-        <div className='timelineColumn'>
-          <Waveform
-            onMouseDown={this.handleTimelineMouseDown}
-            onMouseUp={this.handleTimelineMouseUp}
-          />
-          <Ticks timeline={this.props.timeline} />
-          <Cursor timeline={this.props.timeline} annotation={this.props.annotation} />
-          <CursorRegion timeline={this.props.timeline} />
-        </div>
-        <Annotations timeline={this.props.timeline} />
-        <PlayCursor />
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  timeline: state.align.timeline,
-  annotation: state.align.annotation,
-  selectedAnnotation: state.align.selectedAnnotation,
-  audio: state.audio,
-  text: state.site.text,
-})
-
-export default connect(mapStateToProps)(Timeline)
-- 
cgit v1.2.3-70-g09d2