diff options
Diffstat (limited to 'animism-align/frontend/app/views/editor/align')
31 files changed, 2792 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/editor/align/align.actions.js b/animism-align/frontend/app/views/editor/align/align.actions.js new file mode 100644 index 0000000..1583e4e --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/align.actions.js @@ -0,0 +1,136 @@ +import * as types from 'app/types' +import { store } from 'app/store' +import actions from 'app/actions' +// import { session } from 'app/session' +import throttle from 'lodash.throttle' +import debounce from 'lodash.debounce' + +import { ZOOM_STEPS } from 'app/constants' +import { timestampToSeconds, post } from 'app/utils' +import { cutFirstSentence } from 'app/utils/align.utils' +import { annotationFadeTimings } from 'app/utils/annotation.utils' + +export const setScrollPosition = start_ts => dispatch => ( + dispatch({ type: types.align.set_display_setting, key: 'start_ts', value: start_ts }) +) + +export const setZoom = zoom => dispatch => { + if (0 <= zoom && zoom < ZOOM_STEPS.length) { + dispatch({ type: types.align.set_display_setting, key: 'zoom', value: zoom }) + } +} +export const throttledSetZoom = throttle(zoom => dispatch => { + setZoom(zoom)(dispatch) +}, 250, { leading: true }) + +export const setCursor = cursor_ts => dispatch => ( + dispatch({ type: types.align.set_display_setting, key: 'cursor_ts', value: cursor_ts }) +) +export const setCursorRegion = (a_ts, b_ts) => dispatch => ( + dispatch({ type: types.align.set_display_setting, key: 'cursor_region', value: { a_ts, b_ts } }) +) +export const clearCursorRegion = () => dispatch => ( + dispatch({ type: types.align.set_display_setting, key: 'cursor_region', value: null }) +) + +export const setSelectedAnnotation = annotation => dispatch => { + debouncedUpdateAnnotation.flush() + dispatch({ type: types.align.set_selected_annotation, data: annotation }) +} +export const clearSelectedAnnotation = () => dispatch => { + debouncedUpdateAnnotation.flush() + dispatch({ type: types.align.clear_selected_annotation }) +} +export const updateSelectedAnnotation = annotation => dispatch => { + debouncedUpdateAnnotation(annotation) + dispatch({ type: types.align.set_selected_annotation, data: { ...annotation } }) +} +export const debouncedUpdateAnnotation = debounce(annotation => { + console.log('updating annotation', annotation) + actions.annotation.update(annotation) +}, 2000, { leading: false, trailing: true }) + +export const cloneSelectedAnnotation = annotation => dispatch => { + const newAnnotation = { ...annotation } + delete newAnnotation.id + if (annotation.settings.fullscreen) { + const { + fadeInDuration, fadeOutDuration, duration, + start_ts, end_ts, fade_in_end_ts, fade_out_start_ts, + } = annotationFadeTimings(annotation) + newAnnotation.start_ts += duration - fadeOutDuration - fadeInDuration + } else { + newAnnotation.start_ts += 1 + } + actions.annotation.create(newAnnotation) + .then(res => { + console.log('cloned annotation', res.res) + setSelectedParagraph(res.res) + }) +} + +export const setSelectedParagraph = paragraph_id => dispatch => { + dispatch({ type: types.align.set_display_setting, key: 'selected_paragraph_id', value: paragraph_id }) +} +export const clearSelectedParagraph = () => dispatch => { + dispatch({ type: types.align.set_display_setting, key: 'selected_paragraph_id', value: -1 }) +} + +export const showNewAnnotationForm = (start_ts, text) => dispatch => { + let croppedText; + if (store.getState().align.annotation.start_ts) { + croppedText = store.getState().align.annotation.text + } else { + croppedText = cutFirstSentence(text) + } + // console.log(croppedText) + dispatch({ + type: types.align.set_temporary_annotation, + data: { + id: 'new', + start_ts, + end_ts: 0.0, + text: croppedText, + type: 'sentence', + settings: {}, + } + }) +} +export const showEditAnnotationForm = (annotation) => dispatch => { + dispatch({ + type: types.align.set_temporary_annotation, + data: annotation, + }) +} + +export const updateAnnotationForm = (key, value) => dispatch => { + dispatch({ type: types.align.update_temporary_annotation, key, value }) +} +export const updateAnnotationSettings = (key, value) => dispatch => { + dispatch({ type: types.align.update_temporary_annotation_settings, key, value }) +} + +export const hideAnnotationForm = () => dispatch => { + dispatch({ + type: types.align.set_temporary_annotation, + data: {} + }) +} + + +export const spliceTime = start_ts => dispatch => { + let duration = timestampToSeconds(prompt("How many seconds to add or remove? Enter a positive / negative number")) + if (!duration) { + return + } + console.log(start_ts, duration) + const data = { + start_ts, duration, + } + post(dispatch, types.api, 'splice', '/api/v1/annotation/splice', data) + .then(res => { + console.log(res) + alert(res.count + ' records updated!') + actions.annotation.index() + }) +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/editor/align/align.container.js b/animism-align/frontend/app/views/editor/align/align.container.js new file mode 100644 index 0000000..281fd35 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/align.container.js @@ -0,0 +1,27 @@ +import React, { Component } from 'react' + +import './align.css' +import './components/annotations/annotation.form.css' +import './components/annotations/annotation.index.css' + +import Timeline from 'app/views/editor/align/containers/timeline.container.js' +import Sidebar from 'app/views/editor/align/containers/sidebar.container.js' + +class Container extends Component { + componentDidMount() { + document.body.scrollTo(0, 0) + document.body.parentNode.scrollTo(0, 0) + } + render() { + return ( + <div className='body alignmentEditor'> + <div className='row'> + <Timeline /> + </div> + <Sidebar /> + </div> + ) + } +} + +export default Container diff --git a/animism-align/frontend/app/views/editor/align/align.css b/animism-align/frontend/app/views/editor/align/align.css new file mode 100644 index 0000000..d10b601 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/align.css @@ -0,0 +1,160 @@ +* { + +} +.body.loading > div { + padding: 1rem; +} +.body { + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + background: linear-gradient( + 0deg, + rgba(0, 0, 64, 0.5), + rgba(64, 64, 128, 0.5) + ); + padding: 0; +} + +.body.alignmentEditor { + height: calc(100% - 3rem); +} + +/* Timeline */ + +canvas { + display: block; +} +.timeline { + display: flex; + flex-direction: row; + position: relative; + width: 300px; + cursor: crosshair; +} +.timelineColumn { + position: relative; +} +.ticks .tick { + position: absolute; + right: 0; + width: 4px; + height: 1px; + background: #ddd; + pointer-events: none; +} +.ticks .tickLabel { + pointer-events: none; + position: absolute; + right: 6px; + font-size: 12px; + width: 40px; + margin-top: -7px; + text-align: right; + text-shadow: 0 0 2px #00f; +} +.timeline .cursor { + width: 100%; + position: absolute; + left: 0; + pointer-events: none; +} +.timeline .cursor .line { + width: 100%; + height: 1px; + background: #00f; +} +.timeline .cursor.playCursor .line { + background: #ddd; +} +.timeline .cursor .tickLabel { + position: absolute; + pointer-events: none; + right: 6px; + font-size: 12px; + width: 40px; + margin-top: -7px; + text-align: right; + text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; + user-select: none; +} +.timeline .cursor_region { + position: absolute; + left: 0; + width: 100%; + border-top: 1px solid #33f; + border-bottom: 1px solid #33f; + background: rgba(32,64,255,0.2); +} +.timeline .cursor_region .tickLabel { + position: absolute; + top: 2px; + left: 6px; + user-select: none; +} + +/* Audio player */ + +.playButton { + /*position: absolute;*/ + /*top: 0; left: 0;*/ + width: 3rem; height: 3rem; + padding: 1rem; + background: transparent; + cursor: pointer; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} +.playButton.playing { + background-image: url('/static/img/icons_pause_white.svg'); +} +.playButton.paused { + background-image: url('/static/img/icons_play_white.svg'); +} + +/* Script */ + +.sidebar { + position: absolute; + top: 0; + right: 0; + min-width: 4rem; + z-index: 8; +} +.sidebar textarea { + height: calc(100vh - 3.15rem); +} +.sidebar button { + position: absolute; + top: 0.25rem; + right: 0.25rem; + z-index: 9; + border: 0; + background: transparent; +} + +/* Annotations */ + +.annotations { + position: relative; + width: 450px; +} + +/* table of contents */ + +.toc { + background: #222; + width: 15rem; + padding: 0.5rem 0; +} +.toc div { + width: 15rem; + padding: 0.25rem 0.75rem; + cursor: pointer; +} +.toc div:hover { + background: #213; +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/editor/align/align.reducer.js b/animism-align/frontend/app/views/editor/align/align.reducer.js new file mode 100644 index 0000000..d37cd6d --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/align.reducer.js @@ -0,0 +1,97 @@ +import * as types from 'app/types' +// import { session, getDefault, getDefaultInt } from 'app/session' + +const initialState = { + timeline: { + cursor_ts: -1, + cursor_region: null, + start_ts: 0, + zoom: 1, + duration: 0, + selected_annotation_id: -1, + selected_paragraph_id: -1, + }, + peaks: { loading: true }, + text: { loading: true }, + annotation: {}, + selectedAnnotation: {}, + options: { + }, +} + +export default function alignReducer(state = initialState, action) { + // console.log(action.type, action) + switch (action.type) { + case types.peaks.loaded: + // console.log('peaks duration:', action.data.length / 10) + return { + ...state, + peaks: action.data, + } + + case types.text.loaded: + return { + ...state, + text: action.data, + } + + case types.align.set_display_setting: + return { + ...state, + timeline: { + ...state.timeline, + [action.key]: action.value, + } + } + + case types.align.set_selected_annotation: + return { + ...state, + timeline: { + ...state.timeline, + selected_annotation_id: action.data.id, + }, + selectedAnnotation: action.data, + } + + case types.align.clear_selected_annotation: + return { + ...state, + timeline: { + ...state.timeline, + selected_annotation_id: -1, + }, + selectedAnnotation: {}, + } + + case types.align.set_temporary_annotation: + return { + ...state, + annotation: action.data, + } + + case types.align.update_temporary_annotation: + return { + ...state, + annotation: { + ...state.annotation, + [action.key]: action.value, + } + } + + case types.align.update_temporary_annotation_settings: + return { + ...state, + annotation: { + ...state.annotation, + settings: { + ...state.annotation.settings, + [action.key]: action.value, + } + } + } + + default: + return state + } +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.css b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.css new file mode 100644 index 0000000..fa663c7 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.css @@ -0,0 +1,67 @@ +/* Annotation form */ + +.annotationForm { + width: 401px; + padding: 0.5rem; + position: absolute; + left: 0.25rem; + background: #448; + box-shadow: 0 0 2px #000, 0 0 4px #000; + z-index: 10; +} +.annotationForm textarea { + width: 100%; +} +.annotationForm .row { + justify-content: space-between; + align-items: center; +} +.annotationForm .row > div { + display: flex; + align-items: center; +} +.annotationForm .buttons { + margin-bottom: 0.5rem; +} +.annotationForm .ts { + color: #fff; +} +.annotationForm .select.media_id { + width: 100%; + margin-right: 0; +} +.annotationForm div.textarea { + margin-bottom: 0.5rem; +} +.annotationForm img { + max-width: 100%; + max-height: 6rem; +} + +.annotationForm .options label span:first-child { + display: inline-block; + width: 6rem; +} +.annotationForm .options .description { + font-size: 0.75rem; + margin-top: 0.25rem; + margin-bottom: 0.5rem; +} +.annotationForm .color input[type="text"].number { + width: 8rem; +} +.annotationForm .color input[type="text"] { + width: 8rem; +} +.annotationForm .color input[type="color"] { + background: transparent; + border: 0; + height: 1.7rem; + padding: 0; + margin: 0 0.5rem 0 0; + width: 1.4rem; +} +.annotationForm .checkbox { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.js new file mode 100644 index 0000000..7b1918a --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.js @@ -0,0 +1,190 @@ +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 { ANNOTATION_SELECT_OPTIONS, MEDIA_ANNOTATION_TYPES } from 'app/constants' +import { timestamp } from 'app/utils' +import { timeToPosition } from 'app/utils/align.utils' +import { Select } from 'app/common' + +import { annotationFormLookup } from './annotationForms' + +const annotationTextTypes = new Set([ + 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'footnote', 'text_plate', +]) + +class AnnotationForm extends Component { + constructor(props){ + super(props) + this.handleChange = this.handleChange.bind(this) + this.handleSelect = this.handleSelect.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSettingsSelect = this.handleSettingsSelect.bind(this) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + this.handleDestroy = this.handleDestroy.bind(this) + this.textareaRef = React.createRef() + } + componentDidMount() { + if (this.textareaRef && this.textareaRef.current) { + this.textareaRef.current.focus() + } + } + handleKeyDown(e) { + if (e.keyCode === 27) { // escape + actions.align.hideAnnotationForm() + return + } + // console.log(e.keyCode) + if (!e.metaKey && !e.ctrlKey) return + let { start_ts } = this.props.annotation + switch (e.keyCode) { + case 38: // up + e.preventDefault() + start_ts -= 0.1 + actions.align.updateAnnotationForm('start_ts', Math.max(0, start_ts)) + actions.audio.seek(start_ts) + actions.align.setCursor(start_ts) + break + case 40: // down + e.preventDefault() + start_ts += 0.1 + actions.align.updateAnnotationForm('start_ts', Math.max(0, start_ts)) + actions.audio.seek(start_ts) + actions.align.setCursor(start_ts) + break + case 83: // ctrl-S + e.preventDefault() + this.handleSubmit() + default: + break + } + } + handleChange(e) { + const { name, value } = e.target + this.handleSelect(name, value) + } + handleSelect(name, value) { + actions.align.updateAnnotationForm(name, value) + } + handleSettingsChange(e) { + const { name, value } = e.target + this.handleSettingsSelect(name, value) + } + handleSettingsSelect(name, value) { + if (name.indexOf('_id') !== -1) value = parseInt(value) || 0 + actions.align.updateAnnotationSettings(name, value) + } + handleSubmit() { + const { annotation } = this.props + if (annotation.type === 'paragraph_end') { + annotation.text = '' + } + if (annotation.type in MEDIA_ANNOTATION_TYPES) { + if (!annotation.settings.media_id) return + annotation.text = '' + } + if (annotation.id === 'new') { + delete annotation.id + actions.annotation.create(annotation) + .then(response => { + console.log(response) + actions.align.hideAnnotationForm() + }) + } else { + actions.annotation.update(annotation) + .then(response => { + console.log(response) + actions.align.hideAnnotationForm() + }) + } + } + handleDestroy() { + const { annotation } = this.props + if (annotation.id === 'new') { + actions.align.hideAnnotationForm() + } else { + actions.annotation.destroy(annotation) + .then(response => { + console.log(response) + actions.align.hideAnnotationForm() + }) + } + } + render() { + const { timeline, annotation } = this.props + return ( + <div + className='annotationForm' + style={{ + top: timeToPosition(annotation.start_ts, timeline), + }} + > + {this.renderButtons()} + {annotationTextTypes.has(annotation.type) && this.renderTextarea()} + {(annotation.type in annotationFormLookup) && this.renderElementForm()} + </div> + ) + } + renderButtons() { + const { annotation } = this.props + return ( + <div className='row buttons'> + <div> + <Select + name='type' + selected={annotation.type} + options={ANNOTATION_SELECT_OPTIONS} + defaultOption='text' + onChange={this.handleSelect} + /> + <div className='ts'>{timestamp(annotation.start_ts, 1, true)}</div> + </div> + <div> + {annotation.id !== 'new' && <button onClick={this.handleDestroy}>Delete</button>} + <button onClick={this.handleSubmit}>Save</button> + </div> + </div> + ) + } + renderTextarea() { + const { annotation } = this.props + return ( + <div className='textarea'> + <textarea + name='text' + value={annotation.text} + onKeyDown={this.handleKeyDown} + onChange={this.handleChange} + ref={this.textareaRef} + /> + </div> + ) + } + renderElementForm() { + const { annotation, media } = this.props + const AnnotationFormElement = annotationFormLookup[annotation.type] + return ( + <AnnotationFormElement + annotation={annotation} + media={media} + handleSettingsChange={this.handleSettingsChange} + handleSettingsSelect={this.handleSettingsSelect} + /> + ) + } +} + +const mapStateToProps = state => ({ + annotation: state.align.annotation, + timeline: state.align.timeline, + media: state.media.index, +}) + +const mapDispatchToProps = dispatch => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(AnnotationForm) diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.css b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.css new file mode 100644 index 0000000..afedbde --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.css @@ -0,0 +1,125 @@ +/* Annotation index */ + +.annotationIndex { + width: 800px; +} +.annotationIndex .annotation { + position: absolute; + left: 5px; + max-width: 300px; + padding: 0.25rem 0.375rem; + box-shadow: 0px 0px 3px rgba(0,0,0,1.0); + border: 1px solid transparent; + border-radius: 2px; + font-size: 12px; + cursor: pointer; + user-select: none; + background-color: #768; +} +.annotation.selected { + border-color: #bbf; + box-shadow: 0px 0px 4px rgba(0,0,0,1.0), 0px 0px 2px rgba(0,0,0,1.0); + z-index: 2; + background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4)); +} +.annotationIndex .annotation.media { + width: 300px; + left: calc(405px + 0.5rem); +} +.annotationIndex .annotation.sentence.even { + background-color: #83b; +} +.annotationIndex .annotation.sentence.odd { + background-color: #537; +} +.annotationIndex .annotation.section_heading { + background-color: #983; + z-index: 1; +} +.annotationIndex .annotation.heading_text { + background-color: #838; +} +.annotationIndex .annotation.paragraph_end { + background-color: #003; + border-top: 1px solid #888; + width: 300px; + padding: 1px; +} +.annotationIndex .annotation.utility { + left: calc(505px + 0.5rem); + width: 200px; +} +.annotationIndex .annotation.footnote { + left: calc(605px + 0.5rem); + width: 200px; +} +.annotationIndex .annotation.text_plate { + left: calc(605px + 0.5rem); + width: 250px; +} +.annotationIndex .annotation.utility.curtain { + background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0)); + width: 15rem; + padding: 0; + overflow: hidden; +} +.annotationIndex .annotation.utility.curtain span { + position: absolute; + top: 0; left: 0; + z-index: 1; + color: black; + text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff; + padding: 0.25rem; +} +.annotationIndex .annotation.utility.curtain .fadeIn { + z-index: 0; + position: absolute; + top: 0; + width: 100%; + background-image: linear-gradient(rgba(0,0,0,1.0), rgba(255,255,255,1.0)); + background-size: cover; +} +.annotationIndex .annotation.utility.curtain .fadeOut { + z-index: 0; + position: absolute; + bottom: 0; + width: 100%; + background-image: linear-gradient(rgba(255,255,255,1.0), rgba(0,0,0,1.0)); + background-size: cover; +} + +/* Condensed layout (first lines) */ + +.annotationIndex.condensed .annotation.sentence { + z-index: 0; + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; +} +.annotationIndex.condensed .annotation.section_heading { + z-index: 2; +} +.annotationIndex.condensed .annotation.heading_text { + z-index: 1; +} +.annotationIndex.condensed .annotation.paragraph_end { + border-top-color: #888; +} + +/* Collapsed layout (borders) */ + +.annotationIndex.collapsed .annotation.sentence { + height: 2px; overflow: hidden; padding: 0; z-index: 0; +} +.annotationIndex.collapsed .annotation.sentence.selected { + z-index: 4; +} +.annotationIndex.collapsed .annotation.section_heading { + z-index: 3; +} +.annotationIndex.collapsed .annotation.heading_text { + z-index: 2; +} +.annotationIndex.collapsed .annotation.paragraph_end { + border-top-color: #333; +} 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 new file mode 100644 index 0000000..8e1fa43 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js @@ -0,0 +1,125 @@ +import React, { PureComponent } from 'react' +import { bindActionCreators } from 'redux' +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', + 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, +}) + +export default connect(mapStateToProps)(AnnotationIndex) diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.gallery.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.gallery.js new file mode 100644 index 0000000..0a8b3fb --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.gallery.js @@ -0,0 +1,132 @@ +import React, { Component } from 'react' + +import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' +import { TextInput, Select, Checkbox, LabelDescription } from 'app/common' +import { AnnotationFormFullscreen } from './annotationForm.utility' +import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils' + +export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => { + if (!media.lookup) return <div /> + const image_list_items = makeMediaItems(media, ['gallery']) + return ( + <div className='options'> + <Select + name='media_id' + className="media_id" + selected={annotation.settings.media_id} + options={image_list_items} + defaultOption='Choose a gallery' + onChange={handleSettingsSelect} + /> + + <TextInput + title="Title" + name="title" + placeholder="Enter title or leave blank" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + + <Checkbox + label="Fullscreen" + name="fullscreen" + checked={annotation.settings.fullscreen} + onChange={handleSettingsSelect} + /> + + <Checkbox + label="Inline" + name="inline" + checked={annotation.settings.inline} + onChange={handleSettingsSelect} + /> + + <Checkbox + label="Hide in transcript" + name="hide_in_transcript" + checked={annotation.settings.hide_in_transcript} + onChange={handleSettingsSelect} + /> + + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + + <Select + title='Arrow Color' + name='arrow_color' + selected={annotation.settings.arrow_color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Color of UI arrows' + onChange={handleSettingsSelect} + /> + + {(annotation.settings.fullscreen && !annotation.settings.inline) && ( + <AnnotationFormFullscreen + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + )} + </div> + ) +} + +export const AnnotationFormGalleryAdvance = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => { + if (!media.lookup) return <div /> + const image_list_items = makeMediaItems(media, ['gallery']) + const { gallery_items, thumbnail } = makeGalleryItems(annotation, media) + return ( + <div className='options'> + <Select + name='media_id' + className="media_id" + selected={annotation.settings.media_id} + options={image_list_items} + defaultOption='Choose a gallery' + onChange={handleSettingsSelect} + /> + + {gallery_items && ( + <Select + name='frame_index' + selected={annotation.settings.frame_index} + options={gallery_items} + defaultOption='Choose an image' + onChange={handleSettingsSelect} + /> + )} + + {thumbnail && ( + <img src={thumbnail.url} /> + )} + + <Checkbox + label="Advance half a frame forward to fit two images in view" + name="half_frame" + checked={annotation.settings.half_frame} + onChange={handleSettingsSelect} + /> + + <Checkbox + label="Hide in transcript" + name="hide_in_transcript" + checked={annotation.settings.hide_in_transcript} + onChange={handleSettingsSelect} + /> + + <Checkbox + label="Show in checklist" + name="show_in_checklist" + checked={annotation.settings.show_in_checklist} + onChange={handleSettingsSelect} + /> + </div> + ) +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.image.js new file mode 100644 index 0000000..3de2ac5 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.image.js @@ -0,0 +1,120 @@ +import React, { Component } from 'react' + +import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_INLINE_SIZE_OPTIONS } from 'app/constants' +import { Select, Checkbox, TextInput } from 'app/common' +import { AnnotationFormFullscreen } from './annotationForm.utility' +import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils' + +export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => { + if (!media.lookup) return <div /> + const image_list_items = makeMediaItems(media, ['image', 'gallery']) + const { gallery_items, thumbnail } = makeGalleryItems(annotation, media) + console.log(annotation) + return ( + <div className='options'> + <Select + name='media_id' + className="media_id" + selected={annotation.settings.media_id} + options={image_list_items} + defaultOption='Choose an image' + onChange={handleSettingsSelect} + /> + + {gallery_items && ( + <Select + name='frame_index' + selected={annotation.settings.frame_index} + options={gallery_items} + defaultOption='Choose an image' + onChange={handleSettingsSelect} + /> + )} + + {thumbnail && ( + <img src={thumbnail.url} /> + )} + + <Checkbox + label="Fullscreen" + name="fullscreen" + checked={annotation.settings.fullscreen} + onChange={handleSettingsSelect} + /> + + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + + {(annotation.settings.fullscreen) && ( + <div> + <Checkbox + label="Hide inline image" + name="hide_poster_inline" + checked={annotation.settings.hide_poster_inline} + onChange={handleSettingsSelect} + /> + <Select + title='Inline size' + name='inline_size' + selected={annotation.settings.inline_size} + options={IMAGE_INLINE_SIZE_OPTIONS} + defaultOption='Pick a size' + onChange={handleSettingsSelect} + /> + <Checkbox + label="Hide speaker icon" + name="hide_speaker_icon" + checked={annotation.settings.hide_speaker_icon} + onChange={handleSettingsSelect} + /> + <Select + title='Inline background color' + name='inline_color' + selected={annotation.settings.inline_color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + </div> + )} + + <Checkbox + label="Hide caption" + name="hide_caption" + checked={annotation.settings.hide_caption} + onChange={handleSettingsSelect} + /> + + <Checkbox + label="Hide in transcript" + name="hide_in_transcript" + checked={annotation.settings.hide_in_transcript} + onChange={handleSettingsSelect} + /> + + <TextInput + title="Override start time" + name="override_start_ts" + className="number" + placeholder="0:00" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + + {(annotation.settings.fullscreen && !annotation.settings.inline) && ( + <AnnotationFormFullscreen + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + )} + </div> + ) +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.text.js new file mode 100644 index 0000000..8bc7675 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.text.js @@ -0,0 +1,153 @@ +import React, { Component } from 'react' + +import { + CURTAIN_COLOR_SELECT_OPTIONS, + CURTAIN_STYLE_SELECT_OPTIONS, + BLACK_WHITE_SELECT_OPTIONS, + IMAGE_BACKGROUND_SIZE_OPTIONS, +} from 'app/constants' +import { Select, Checkbox, TextInput, LabelDescription } from 'app/common' +import { AnnotationFormFullscreen } from './annotationForm.utility' +import { makeMediaItems } from 'app/utils/annotation.utils' + +export const AnnotationFormSectionHeading = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => { + const image_list_items = makeMediaItems(media, ['image', 'video', 'gallery']) + return ( + <div className='options'> + <Checkbox + label="Hidden" + name="hidden" + checked={annotation.settings.hidden} + onChange={handleSettingsSelect} + /> + <Select + title='Background Color' + name='color' + selected={annotation.settings.color} + options={BLACK_WHITE_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + <Select + title='Cover image' + name='media_id' + className="media_id" + selected={annotation.settings.media_id} + options={image_list_items} + defaultOption='Choose an image' + onChange={handleSettingsSelect} + /> + <Select + title='Cover style' + name='cover_style' + className="cover_style" + selected={annotation.settings.cover_style} + options={IMAGE_BACKGROUND_SIZE_OPTIONS} + defaultOption='Cover image caption style' + onChange={handleSettingsSelect} + /> + <LabelDescription> + {'Background color for section'} + </LabelDescription> + <Select + title='Transition Color' + name='transition_color' + selected={annotation.settings.transition_color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + <LabelDescription> + {'Player will fade from this color when section begins'} + </LabelDescription> + {!annotation.settings.no_audio && + <div> + <Select + title='Section Nav Color' + name='section_nav_color' + selected={annotation.settings.section_nav_color} + options={BLACK_WHITE_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + <LabelDescription> + {'Section nav thumbnail icon color'} + </LabelDescription> + </div> + } + <Checkbox + label="Section does not have audio" + name="no_audio" + checked={annotation.settings.no_audio} + onChange={handleSettingsSelect} + /> + <LabelDescription> + {'Check if this is a text-only section'} + </LabelDescription> + </div> + ) +} + +export const AnnotationFormTextPlate = ({ annotation, handleSettingsSelect, handleSettingsChange }) => { + return ( + <div className='options'> + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + <Select + title='Curtain style' + name='transition_color' + selected={annotation.settings.transition_color} + options={CURTAIN_STYLE_SELECT_OPTIONS} + defaultOption='Pick a style' + onChange={handleSettingsSelect} + /> + <AnnotationFormFullscreen + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + </div> + ) +} + +export const AnnotationFormSubtitle = ({ annotation, handleSettingsSelect, handleSettingsChange }) => { + return ( + <div className='options'> + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + + <AnnotationFormFullscreen + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + </div> + ) +} + +export const AnnotationFormFootnote = ({ annotation, handleSettingsSelect, handleSettingsChange }) => { + return ( + <div className='options'> + <TextInput + title="Actual Timestamp" + name="actual_ts" + placeholder="0:00" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + </div> + ) +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.utility.js new file mode 100644 index 0000000..7e823cc --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.utility.js @@ -0,0 +1,172 @@ +import React, { Component } from 'react' + +import { timestamp } from 'app/utils' +import { TextInput, LabelDescription, Select, Checkbox } from 'app/common' +import { CURTAIN_COLOR_SELECT_OPTIONS, CURTAIN_STYLE_SELECT_OPTIONS } from 'app/constants' +import { annotationFadeTimings } from 'app/utils/annotation.utils' +import { makeMediaItems } from 'app/utils/annotation.utils' + +export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, handleSettingsSelect }) => { + if (!media.lookup) return <div /> + const image_list_items = makeMediaItems(media, 'file') + return ( + <div className='options'> + <Select + name='media_id' + className="media_id" + selected={annotation.settings.media_id} + options={image_list_items} + defaultOption='Choose a file' + onChange={handleSettingsSelect} + /> + + <TextInput + title="Title" + name="title" + placeholder="Enter title or leave blank" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + + <TextInput + title="Subtitle" + name="subtitle" + placeholder="Enter subtitle or leave blank" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + + <TextInput + title="Actual start time" + name="intro_start_ts" + placeholder="0:00" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + + <LabelDescription> + {'Timestamp where voiceover starts, after any intro sound effect.'} + </LabelDescription> + + <AnnotationFormFullscreen + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + </div> + ) +} + +export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => { + return ( + <div className='options'> + <TextInput + title="Curtain text" + name="curtain_text" + placeholder="Enter text or leave blank" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + + <Select + title='Style' + name='curtain_style' + selected={annotation.settings.curtain_style} + options={CURTAIN_STYLE_SELECT_OPTIONS} + defaultOption='Pick a style' + onChange={handleSettingsSelect} + /> + + <Checkbox + label="Contains flashing light" + name="flashing_light_warning" + checked={annotation.settings.flashing_light_warning} + onChange={handleSettingsSelect} + /> + + <AnnotationFormFullscreen + alwaysAccessible + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + </div> + ) +} + +export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, handleSettingsSelect }) => { + const { + fadeInDuration, fadeOutDuration, duration, + start_ts, end_ts, fade_in_end_ts, fade_out_start_ts, + } = annotationFadeTimings(annotation) + return ( + <div> + <TextInput + title="Total duration" + name="duration" + className="number" + placeholder="0:00" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + <LabelDescription> + {duration} + {' seconds, ends at '} + {timestamp(end_ts)} + </LabelDescription> + + <TextInput + title="Fade in duration" + name="fade_in_duration" + className="number" + placeholder="0:00" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + <LabelDescription> + {fadeInDuration} + {' seconds, ends at '} + {timestamp(fade_in_end_ts)} + </LabelDescription> + + <TextInput + title="Fade out duration" + name="fade_out_duration" + className="number" + placeholder="0:00" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + <LabelDescription> + {fadeOutDuration} + {' seconds, starts at '} + {timestamp(fade_out_start_ts)} + </LabelDescription> + </div> + ) +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.video.js new file mode 100644 index 0000000..dd5f640 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.video.js @@ -0,0 +1,160 @@ +import React, { Component } from 'react' + +import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_BACKGROUND_SIZE_OPTIONS } from 'app/constants' +import { Select, Checkbox, TextInput, LabelDescription } from 'app/common' +import { AnnotationFormFullscreen } from './annotationForm.utility' +import { makeMediaItems } from 'app/utils/annotation.utils' + +export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => { + if (!media.lookup) return <div /> + const video_list_items = makeMediaItems(media, ['video']) + return ( + <div className='options'> + <Select + name='media_id' + className="media_id" + selected={annotation.settings.media_id} + options={video_list_items} + defaultOption='Choose a video' + onChange={handleSettingsSelect} + /> + <Checkbox + label="Autoplay" + name="autoplay" + checked={annotation.settings.autoplay} + onChange={handleSettingsSelect} + /> + <Checkbox + label="Fullscreen" + name="fullscreen" + checked={annotation.settings.fullscreen} + onChange={handleSettingsSelect} + /> + <Checkbox + label="Inline" + name="inline" + checked={annotation.settings.inline} + onChange={handleSettingsSelect} + /> + <Checkbox + label="Loop" + name="loop" + checked={annotation.settings.loop} + onChange={handleSettingsSelect} + /> + <Checkbox + label="Unmute" + name="unmuted" + checked={annotation.settings.unmuted} + onChange={handleSettingsSelect} + /> + {annotation.settings.inline && ( + <Checkbox + label="Hide Controls" + name="hide_controls" + checked={annotation.settings.hide_controls} + onChange={handleSettingsSelect} + /> + )} + {annotation.settings.inline && ( + <Checkbox + label="Show poster image" + name="poster" + checked={annotation.settings.poster} + onChange={handleSettingsSelect} + /> + )} + {(annotation.settings.fullscreen && !annotation.settings.inline) && ( + <Checkbox + label="Hide inline video poster" + name="hide_poster_inline" + checked={annotation.settings.hide_poster_inline} + onChange={handleSettingsSelect} + /> + )} + {(annotation.settings.fullscreen && !annotation.settings.inline) && ( + <Checkbox + label="Can play full video at end of section" + name="can_play_full_video" + checked={annotation.settings.can_play_full_video} + onChange={handleSettingsSelect} + /> + )} + <Checkbox + label="Hide in transcript" + name="hide_in_transcript" + checked={annotation.settings.hide_in_transcript} + onChange={handleSettingsSelect} + /> + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + <Select + title='Poster Size' + name='poster_size' + selected={annotation.settings.poster_size} + options={IMAGE_BACKGROUND_SIZE_OPTIONS} + defaultOption='Select size' + onChange={handleSettingsSelect} + /> + <Select + title='Poster background color' + name='poster_background_color' + selected={annotation.settings.poster_background_color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + <TextInput + title="Video start time" + name="video_start_ts" + className="number" + placeholder="0:00" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + <LabelDescription> + {'Auto-advances the video to this point when starting'} + </LabelDescription> + + {(annotation.settings.fullscreen && !annotation.settings.inline) && ( + <AnnotationFormFullscreen + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + )} + </div> + ) +} + +export const AnnotationFormVideoSetVolume = ({ annotation, handleSettingsChange }) => { + return ( + <div className='options'> + <TextInput + title="Volume" + name="volume" + className="number" + placeholder="1.0" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + <TextInput + title="Fade Time" + name="duration" + className="number" + placeholder="0:01" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + </div> + ) +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/index.js new file mode 100644 index 0000000..8a1be48 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/index.js @@ -0,0 +1,46 @@ +import { + AnnotationFormSectionHeading, + AnnotationFormTextPlate, + AnnotationFormFootnote, + AnnotationFormSubtitle, +} from './annotationForm.text' + +import { + AnnotationFormVideo, + AnnotationFormVideoSetVolume, +} from './annotationForm.video' + +import { + AnnotationFormImage, +} from './annotationForm.image' + +import { + AnnotationFormGallery, + AnnotationFormGalleryAdvance, +} from './annotationForm.gallery' + +import { + AnnotationFormCurtain, + AnnotationFormIntro, +} from './annotationForm.utility' + +export const annotationFormLookup = { + section_heading: AnnotationFormSectionHeading, + text_plate: AnnotationFormTextPlate, + footnote: AnnotationFormFootnote, + subtitle: AnnotationFormSubtitle, + + image: AnnotationFormImage, + video: AnnotationFormVideo, + video_set_volume: AnnotationFormVideoSetVolume, + + gallery: AnnotationFormGallery, + carousel: AnnotationFormGallery, + grid: AnnotationFormGallery, + vitrine: AnnotationFormGallery, + + gallery_advance: AnnotationFormGalleryAdvance, + + intro: AnnotationFormIntro, + curtain: AnnotationFormCurtain, +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.gallery.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.gallery.js new file mode 100644 index 0000000..c7df7f8 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.gallery.js @@ -0,0 +1,75 @@ +import React, { Component } from 'react' + +import { durationToHeight } from 'app/utils/align.utils' +import { capitalize } from 'app/utils' +import { annotationFadeTimings } from 'app/utils/annotation.utils' + +import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility' + +export const AnnotationGallery = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => { + const { text } = annotation + const className = selected ? 'annotation media gallery selected' : 'annotation media gallery' + if (checkAnnotationMediaNotReady(annotation, media)) { + return <AnnotationMediaLoading y={y} annotation={annotation} className={className} onClick={onClick} onDoubleClick={onDoubleClick} /> + } + const mediaItem = media[annotation.settings.media_id] + + const { + fadeInDuration, fadeOutDuration, duration, + start_ts, end_ts, fade_in_end_ts, fade_out_start_ts, + } = annotationFadeTimings(annotation) + const durationHeight = annotation.settings.fullscreen ? durationToHeight(duration, timeline) : 'auto' + const fadeInHeight = durationToHeight(fadeInDuration, timeline) + const fadeOutHeight = durationToHeight(fadeOutDuration, timeline) + + const style = { + top: y, + } + if (annotation.settings.fullscreen && !annotation.settings.inline) { + style.height = durationHeight + } + + return ( + <div + className={className} + style={style} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + <div className='meta center'> + <div> + {capitalize(annotation.type)}<br/> + <i>{mediaItem.title}</i><br /> + {mediaItem.author}<br /> + {mediaItem.date} + </div> + </div> + </div> + ) +} + + +export const AnnotationGalleryAdvance = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => { + const className = selected ? 'annotation media gallery_advance selected' : 'annotation media gallery_advance' + const style = { + top: y, + } + let index = parseInt(annotation.settings.frame_index) + 1 + if (annotation.settings.half_frame) { + index += 0.5 + } + return ( + <div + className={className} + style={style} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + <div className='meta center'> + <div> + Advance gallery to frame {index} + </div> + </div> + </div> + ) +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.image.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.image.js new file mode 100644 index 0000000..d0a573e --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.image.js @@ -0,0 +1,54 @@ +import React, { Component } from 'react' + +import { durationToHeight } from 'app/utils/align.utils' +import { annotationFadeTimings, thumbnailURL } from 'app/utils/annotation.utils' + +import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility' + +export const AnnotationImage = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => { + const { text } = annotation + const className = selected ? 'annotation media image selected' : 'annotation media image' + if (checkAnnotationMediaNotReady(annotation, media)) { + return <AnnotationMediaLoading y={y} annotation={annotation} className={className} onClick={onClick} onDoubleClick={onDoubleClick} /> + } + const mediaItem = media[annotation.settings.media_id] + + const { + fadeInDuration, fadeOutDuration, duration, + start_ts, end_ts, fade_in_end_ts, fade_out_start_ts, + } = annotationFadeTimings(annotation) + const durationHeight = annotation.settings.fullscreen ? durationToHeight(duration, timeline) : 'auto' + const fadeInHeight = durationToHeight(fadeInDuration, timeline) + const fadeOutHeight = durationToHeight(fadeOutDuration, timeline) + + const style = { + top: y, + } + if (annotation.settings.fullscreen && !annotation.settings.inline) { + style.height = durationHeight + } + + return ( + <div + className={className} + style={style} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + <div className='meta center'> + <div> + <i>{mediaItem.title}</i>{' - '}{mediaItem.author} + {mediaItem.type === 'gallery' && ( + ' [Frame ' + (1 + parseInt(annotation.settings.frame_index)) + ']' + )} + </div> + </div> + </div> + ) +} + +/* + <div className='img'> + <img src={thumbnailURL(mediaItem)} alt={mediaItem.title} /> + </div> +*/
\ No newline at end of file diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.text.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.text.js new file mode 100644 index 0000000..ea65610 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.text.js @@ -0,0 +1,121 @@ +import React, { Component } from 'react' + +export const AnnotationSentence = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text, paragraph_id } = annotation + let className = !paragraph_id + ? 'annotation sentence' + : (paragraph_id % 2) + ? 'annotation sentence odd' + : 'annotation sentence even' + if (selected) className += ' selected' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + dangerouslySetInnerHTML={{ __html: text }} + /> + ) +} + +export const AnnotationHeadingText = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text } = annotation + const className = selected ? 'annotation heading_text selected' : 'annotation heading_text' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + {text} + </div> + ) +} + +export const AnnotationSectionHeading = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text } = annotation + const className = selected ? 'annotation section_heading selected' : 'annotation section_heading' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + {text} + </div> + ) +} + +export const AnnotationParagraphEnd = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text } = annotation + const className = selected ? 'annotation paragraph_end selected' : 'annotation paragraph_end' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + </div> + ) +} + +export const AnnotationFootnote = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text, paragraph_id } = annotation + let className = !paragraph_id + ? 'annotation sentence footnote' + : (paragraph_id % 2) + ? 'annotation sentence footnote odd' + : 'annotation sentence footnote even' + if (selected) className += ' selected' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + dangerouslySetInnerHTML={{ __html: text }} + /> + ) +} + +export const AnnotationTextPlate = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text, paragraph_id } = annotation + let className = !paragraph_id + ? 'annotation text_plate' + : (paragraph_id % 2) + ? 'annotation text_plate odd' + : 'annotation text_plate even' + if (selected) className += ' selected' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + dangerouslySetInnerHTML={{ __html: text }} + /> + ) +} + +export const AnnotationSubtitle = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text, paragraph_id } = annotation + let className = !paragraph_id + ? 'annotation subtitle' + : (paragraph_id % 2) + ? 'annotation subtitle odd' + : 'annotation subtitle even' + if (selected) className += ' selected' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + dangerouslySetInnerHTML={{ __html: text }} + /> + ) +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.utility.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.utility.js new file mode 100644 index 0000000..1238163 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.utility.js @@ -0,0 +1,107 @@ +import React, { Component } from 'react' + +import { annotationFadeTimings } from 'app/utils/annotation.utils' +import { durationToHeight } from 'app/utils/align.utils' + +export const AnnotationIntro = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => { + const className = selected ? 'annotation utility intro selected' : 'annotation utility intro' + const { + fadeInDuration, fadeOutDuration, duration, + start_ts, end_ts, fade_in_end_ts, fade_out_start_ts, + } = annotationFadeTimings(annotation) + const durationHeight = durationToHeight(duration, timeline) + const fadeInHeight = durationToHeight(fadeInDuration, timeline) + const fadeOutHeight = durationToHeight(fadeOutDuration, timeline) + let style = { + top: y, + } + if (annotation.settings.fullscreen) { + style.height = durationHeight + } + return ( + <div + className={className} + style={style} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + <div style={{ height: fadeInHeight }} className='fadeIn' /> + <div style={{ height: fadeOutHeight }} className='fadeOut' /> + <span style={{ top: fadeInHeight }}> + Intro:<br/> + {annotation.settings.title}<br /> + {annotation.settings.subtitle}<br /> + </span> + </div> + ) +} + +export const AnnotationSchedule = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => { + const className = selected ? 'annotation utility schedule selected' : 'annotation utility schedule' + let style = { + top: y, + } + return ( + <div + className={className} + style={style} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + Schedule + </div> + ) +} + +export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => { + const className = selected ? 'annotation utility curtain selected' : 'annotation utility curtain' + const { + fadeInDuration, fadeOutDuration, duration, + start_ts, end_ts, fade_in_end_ts, fade_out_start_ts, + } = annotationFadeTimings(annotation) + const durationHeight = durationToHeight(duration, timeline) + const fadeInHeight = durationToHeight(fadeInDuration, timeline) + const fadeOutHeight = durationToHeight(fadeOutDuration, timeline) + return ( + <div + className={className} + style={{ top: y, height: durationHeight }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + <div style={{ height: fadeInHeight }} className='fadeIn' /> + <div style={{ height: fadeOutHeight }} className='fadeOut' /> + <span style={{ top: fadeInHeight }}> + Curtain: {annotation.settings.color}. + {annotation.settings.curtain_text} + </span> + </div> + ) +} + +export const checkAnnotationMediaNotReady = (annotation, media) => { + return (!media) || (!(annotation.settings.media_id in media)) +} + +export const AnnotationMediaLoading = ({ y, annotation, media, className, onClick, onDoubleClick }) => { + if (!media) { + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + >MEDIA NOT SET</div> + ) + } + if (!(annotation.settings.media_id in media)) { + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + >MEDIA NOT FOUND</div> + ) + } +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.video.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.video.js new file mode 100644 index 0000000..4ea9595 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.video.js @@ -0,0 +1,51 @@ +import React, { Component } from 'react' + +import { annotationFadeTimings } from 'app/utils/annotation.utils' +import { durationToHeight } from 'app/utils/align.utils' +import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility' + +export const AnnotationVideo = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => { + const { start_ts, text } = annotation + const className = selected ? 'annotation media video selected' : 'annotation media video' + if (checkAnnotationMediaNotReady(annotation, media)) { + return <AnnotationMediaLoading y={y} annotation={annotation} className={className} onClick={onClick} onDoubleClick={onDoubleClick} /> + } + const data = media[annotation.settings.media_id] + const { + fadeInDuration, fadeOutDuration, duration, + } = annotationFadeTimings(annotation) + const durationHeight = annotation.settings.fullscreen ? durationToHeight(duration, timeline) : 'auto' + return ( + <div + className={className} + style={{ top: y, height: durationHeight }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + <div className='meta center'> + <div> + <i>{data.title}</i><br /> + {data.author}<br /> + {data.date} + </div> + </div> + </div> + ) +} + +export const AnnotationVideoSetVolume = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => { + const className = selected ? 'annotation utility video_set_volume selected' : 'annotation utility video_set_volume' + let style = { + top: y, + } + return ( + <div + className={className} + style={style} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + Set volume to {annotation.settings.volume} + </div> + ) +} diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/index.js new file mode 100644 index 0000000..1a89dbd --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/index.js @@ -0,0 +1,57 @@ +import React from 'react' + +import { + AnnotationSentence, + AnnotationHeadingText, + AnnotationSectionHeading, + AnnotationParagraphEnd, + AnnotationFootnote, + AnnotationTextPlate, + AnnotationSubtitle, +} from './annotationTypes.text' + +import { + AnnotationVideo, + AnnotationVideoSetVolume, +} from './annotationTypes.video' + +import { + AnnotationImage, +} from './annotationTypes.image' + +import { + AnnotationGallery, + AnnotationGalleryAdvance, +} from './annotationTypes.gallery' + +import { + AnnotationCurtain, + AnnotationIntro, + AnnotationSchedule, +} from './annotationTypes.utility' + +export const AnnotationElementLookup = { + sentence: React.memo(AnnotationSentence), + pullquote_credit: React.memo(AnnotationSentence), + heading_text: React.memo(AnnotationHeadingText), + section_heading: React.memo(AnnotationSectionHeading), + paragraph_end: React.memo(AnnotationParagraphEnd), + footnote: React.memo(AnnotationFootnote), + text_plate: React.memo(AnnotationTextPlate), + subtitle: React.memo(AnnotationSubtitle), + + video: React.memo(AnnotationVideo), + video_set_volume: React.memo(AnnotationVideoSetVolume), + + image: React.memo(AnnotationImage), + gallery: React.memo(AnnotationGallery), + carousel: React.memo(AnnotationGallery), + grid: React.memo(AnnotationGallery), + vitrine: React.memo(AnnotationGallery), + + gallery_advance: React.memo(AnnotationGalleryAdvance), + + intro: React.memo(AnnotationIntro), + schedule: React.memo(AnnotationSchedule), + curtain: React.memo(AnnotationCurtain), +} diff --git a/animism-align/frontend/app/views/editor/align/components/player/playButton.component.js b/animism-align/frontend/app/views/editor/align/components/player/playButton.component.js new file mode 100644 index 0000000..f411941 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/player/playButton.component.js @@ -0,0 +1,22 @@ +import React from 'react' + +import actions from 'app/actions' + +const PlayButton = ({ playing, onClick }) => { + return ( + <div + className={playing ? 'playButton playing' : 'playButton paused'} + onClick={() => { + if (onClick) { + onClick(playing) + } else if (playing) { + actions.audio.pause() + } else { + actions.audio.play() + } + }} + /> + ) +} + +export default PlayButton 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 new file mode 100644 index 0000000..6c20dfa --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js @@ -0,0 +1,23 @@ +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' + +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.site.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 new file mode 100644 index 0000000..34aedb5 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +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="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/timeline/cursor.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js new file mode 100644 index 0000000..4a94100 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/timeline/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 ( + <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 new file mode 100644 index 0000000..a0c9bd7 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/timeline/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 ( + <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 new file mode 100644 index 0000000..854c43b --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js @@ -0,0 +1,36 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +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, +}) + +const mapDispatchToProps = dispatch => ({ + // alignActions: bindActionCreators({ ...alignActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(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 new file mode 100644 index 0000000..4530863 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/timeline/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( + <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 new file mode 100644 index 0000000..59a2c13 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/components/timeline/waveform.component.js @@ -0,0 +1,105 @@ +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 { + 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.site.peaks, +}) + +const mapDispatchToProps = dispatch => ({ + // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Waveform) diff --git a/animism-align/frontend/app/views/editor/align/containers/annotations.container.js b/animism-align/frontend/app/views/editor/align/containers/annotations.container.js new file mode 100644 index 0000000..cfcf7be --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/containers/annotations.container.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import AnnotationForm from 'app/views/editor/align/components/annotations/annotation.form' +import AnnotationIndex from 'app/views/editor/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/editor/align/containers/sidebar.container.js b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js new file mode 100644 index 0000000..11f5314 --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js @@ -0,0 +1,35 @@ +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/editor/align/containers/timeline.container.js b/animism-align/frontend/app/views/editor/align/containers/timeline.container.js new file mode 100644 index 0000000..feb4f6a --- /dev/null +++ b/animism-align/frontend/app/views/editor/align/containers/timeline.container.js @@ -0,0 +1,196 @@ +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/editor/align/containers/annotations.container' +import Waveform from 'app/views/editor/align/components/timeline/waveform.component' +import Ticks from 'app/views/editor/align/components/timeline/ticks.component' +import Cursor from 'app/views/editor/align/components/timeline/cursor.component' +import PlayCursor from 'app/views/editor/align/components/timeline/playCursor.component' +import CursorRegion from 'app/views/editor/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) |