summaryrefslogtreecommitdiff
path: root/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js
diff options
context:
space:
mode:
authorJules Laplace <julescarbon@gmail.com>2021-03-10 17:33:21 +0100
committerJules Laplace <julescarbon@gmail.com>2021-03-10 17:33:21 +0100
commit7e6dfb31af78b9d5a1a4ccec6998b14beb8a1194 (patch)
treebe79b2a79524497fe7cacdeaf6205219edd46757 /animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js
parent8abd3ccd48c6d3b1c46f92a28e431385cca3e656 (diff)
refactor annotation forms out of the directory nest
Diffstat (limited to 'animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js')
-rw-r--r--animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js126
1 files changed, 0 insertions, 126 deletions
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js
deleted file mode 100644
index e2c7a51..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { PureComponent } from 'react'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-
-import { ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
-import { clamp } from 'app/utils'
-import { positionToTime, timeToPosition } from 'app/utils/align.utils'
-
-import { AnnotationElementLookup } from './annotationTypes'
-
-class AnnotationIndex extends PureComponent {
- state = {
- items: [],
- }
- constructor(props){
- super(props)
- this.handleClick = this.handleClick.bind(this)
- }
- componentDidUpdate(prevProps) {
- if (this.props.index.loading) return
- if (prevProps.timeline !== this.props.timeline || prevProps.index !== this.props.index) {
- this.update()
- }
- }
- update() {
- let { timeline, index } = this.props
- let { start_ts, zoom, duration } = this.props.timeline
- const { order, lookup } = index
-
- let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
- let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel
-
- let timeMin = start_ts - 60.0
- let timeMax = Math.min(start_ts + widthTimeDuration, duration)
-
- const items = order.filter(id => {
- const { start_ts: ts } = lookup[id]
- return (timeMin < ts && ts < timeMax)
- }).map(id => lookup[id])
- this.setState({ items })
- }
- handleClick(e, annotation) {
- e.stopPropagation()
- if (!annotation) return
- if (e.shiftKey) {
- e.preventDefault()
- this.handleParagraphSelection(annotation, e.metaKey)
- }
- actions.audio.seek(annotation.start_ts)
- actions.align.setSelectedAnnotation(annotation)
- }
- handleParagraphSelection(annotation, shouldClear) {
- const { selected_paragraph_id } = this.props.timeline
- if (!selected_paragraph_id || selected_paragraph_id === -1 || shouldClear) {
- if (annotation.paragraph_id && !shouldClear) {
- actions.align.setSelectedParagraph(annotation.paragraph_id)
- } else {
- actions.paragraph.create({
- type: 'paragraph',
- episode_id: this.props.episode_id,
- start_ts: annotation.start_ts,
- }).then(data => {
- actions.align.setSelectedParagraph(data.res.id)
- annotation.paragraph_id = data.res.id
- actions.annotation.update(annotation)
- })
- }
- } else if (selected_paragraph_id !== annotation.paragraph_id) {
- annotation.paragraph_id = selected_paragraph_id
- actions.annotation.update(annotation)
- }
- }
- handleDoubleClick(e, annotation) {
- e.stopPropagation()
- actions.align.showEditAnnotationForm(annotation)
- }
- render() {
- const { timeline, media, annotationInForm, selectedAnnotation } = this.props
- const { start_ts, zoom, selected_annotation_id } = timeline
- const { items } = this.state
- const className = (zoom < 2)
- ? 'annotationIndex'
- : (zoom < 3)
- ? 'annotationIndex condensed'
- : 'annotationIndex collapsed'
- return (
- <div className={className}>
- {items.map(annotation => {
- if (annotationInForm && annotation.id === annotationInForm.id) {
- return null
- }
- if (annotation.id === selected_annotation_id) {
- annotation = selectedAnnotation
- }
- const { id, type, start_ts } = annotation
- const AnnotationElement = AnnotationElementLookup[type]
- const y = timeToPosition(start_ts, timeline)
- return (
- <AnnotationElement
- key={id}
- y={y}
- selected={annotation.id === selected_annotation_id}
- annotation={annotation}
- media={media}
- timeline={timeline}
- onClick={this.handleClick}
- onDoubleClick={this.handleDoubleClick}
- />
- )
- })}
- </div>
- )
- }
-}
-
-const mapStateToProps = state => ({
- timeline: state.align.timeline,
- annotationInForm: state.align.annotation,
- selectedAnnotation: state.align.selectedAnnotation,
- index: state.annotation.index,
- media: state.media.index.lookup,
- episode_id: state.site.episode.id,
-})
-
-export default connect(mapStateToProps)(AnnotationIndex)