diff options
Diffstat (limited to 'animism-align/frontend/views/paragraph/components')
5 files changed, 0 insertions, 180 deletions
diff --git a/animism-align/frontend/views/paragraph/components/paragraph.form.js b/animism-align/frontend/views/paragraph/components/paragraph.form.js deleted file mode 100644 index de3114c..0000000 --- a/animism-align/frontend/views/paragraph/components/paragraph.form.js +++ /dev/null @@ -1,87 +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 '../../../actions' - -import { clamp, timestamp, capitalize } from '../../../util' -import { Select } from '../../../common' - -const PARAGRAPH_TYPES = [ - 'paragraph', 'blockquote', 'hidden', -].map(name => ({ name, label: capitalize(name.replace('_', ' ')) })) - -class ParagraphForm extends Component { - constructor(props){ - super(props) - this.handleChange = this.handleChange.bind(this) - this.handleSelect = this.handleSelect.bind(this) - this.handleSubmit = this.handleSubmit.bind(this) - } - componentDidMount() { - if (this.textareaRef && this.textareaRef.current) { - this.textareaRef.current.focus() - } - } - handleChange(e) { - const { name, value } = e.target - this.handleSelect(name, value) - } - handleSelect(name, value) { - const { onUpdate, paragraph } = this.props - onUpdate({ - ...paragraph, - [name]: value, - }) - } - handleSubmit() { - const { paragraph, onClose } = this.props - actions.paragraph.update(paragraph) - .then(response => { - console.log(response) - onClose() - }) - } - render() { - const { paragraph, y } = this.props - return ( - <div - className='paragraphForm' - style={{ - top: y, - }} - > - {this.renderButtons()} - </div> - ) - } - renderButtons() { - const { paragraph } = this.props - return ( - <div className='row buttons'> - <div className='row'> - <Select - name='type' - selected={paragraph.type} - options={PARAGRAPH_TYPES} - defaultOption='text' - onChange={this.handleSelect} - /> - <div className='ts'>{timestamp(paragraph.start_ts, 1, true)}</div> - </div> - <div> - <button onClick={this.handleSubmit}>Save</button> - </div> - </div> - ) - } -} - -const mapStateToProps = state => ({ -}) - -const mapDispatchToProps = dispatch => ({ -}) - -export default connect(mapStateToProps, mapDispatchToProps)(ParagraphForm) diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js deleted file mode 100644 index 62b4a49..0000000 --- a/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' - -import { - Paragraph, ParagraphHeader -} from './paragraphTypes.text' - -import { - MediaVideo -} from './paragraphTypes.video' - -import { - MediaImage -} from './paragraphTypes.image' - -export const paragraphElementLookup = { - paragraph: React.memo(Paragraph), - hidden: React.memo(Paragraph), - blockquote: React.memo(Paragraph), - header: React.memo(ParagraphHeader), - video: React.memo(MediaVideo), - image: React.memo(MediaImage), -} diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.image.js b/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.image.js deleted file mode 100644 index 36c72e9..0000000 --- a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.image.js +++ /dev/null @@ -1,17 +0,0 @@ -import React, { Component } from 'react' - -export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { - if (!media.lookup) return <div /> - const className = currentParagraph ? 'media image current' : 'media image' - const annotation = paragraph.annotations[0] - const item = media.lookup[annotation.settings.media_id] - if (!item) return <div>Media not found: {annotation.settings.media_id}</div> - return ( - <div - className={className} - onDoubleClick={e => onDoubleClick(e, paragraph)} - > - <img src={item.settings.display.url} /> - </div> - ) -} diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.text.js b/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.text.js deleted file mode 100644 index c2ebcd7..0000000 --- a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.text.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react' - -export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { - let className = paragraph.type - if (className !== 'paragraph') className += ' paragraph' - if (currentParagraph) className += ' current' - return ( - <div - className={className} - onDoubleClick={e => onDoubleClick(e, paragraph)} - > - {paragraph.annotations.map(annotation => ( - <span - key={annotation.id} - className={annotation.id === currentAnnotation ? 'current' : ''} - onClick={e => onAnnotationClick(e, paragraph, annotation)} - dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} - /> - ))} - </div> - ) -} - -export const ParagraphHeader = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { - let className = currentParagraph ? 'header current' : 'header' - const text = paragraph.annotations.map(annotation => annotation.text).join(' ') - return ( - <div - className={className} - onDoubleClick={e => onDoubleClick(e, paragraph)} - > - {text} - </div> - ) -} diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.video.js b/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.video.js deleted file mode 100644 index 423864b..0000000 --- a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.video.js +++ /dev/null @@ -1,19 +0,0 @@ -import React, { Component } from 'react' - -import VimeoPlayer from '@u-wave/react-vimeo' - -export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { - if (!media.lookup) return <div /> - const className = currentParagraph ? 'media current' : 'media' - const annotation = paragraph.annotations[0] - const item = media.lookup[annotation.settings.media_id] - if (!item) return <div>Media not found: {annotation.settings.media_id}</div> - return ( - <div - className={className} - onDoubleClick={e => onDoubleClick(e, paragraph)} - > - <VimeoPlayer video={item.url} muted width="650" /> - </div> - ) -} |