diff options
Diffstat (limited to 'animism-align/frontend/views')
64 files changed, 0 insertions, 4240 deletions
diff --git a/animism-align/frontend/views/align/align.actions.js b/animism-align/frontend/views/align/align.actions.js deleted file mode 100644 index 2ace824..0000000 --- a/animism-align/frontend/views/align/align.actions.js +++ /dev/null @@ -1,93 +0,0 @@ -import * as types from '../../types' -import { store, history, dispatch } from '../../store' -import { api, post, pad, preloadImage } from '../../util' -import actions from '../../actions' -import { session } from '../../session' -import throttle from 'lodash.throttle' -import debounce from 'lodash.debounce' - -import { ZOOM_STEPS } from './constants' -import { getFirstPunctuationMarkIndex, cutFirstSentence } from './align.util' - -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 setSelectedAnnotation = annotation => dispatch => { - dispatch({ type: types.align.set_selected_annotation, data: annotation }) - debouncedUpdateAnnotation.flush() -} -export const clearSelectedAnnotation = () => dispatch => { - dispatch({ type: types.align.clear_selected_annotation }) - debouncedUpdateAnnotation.flush() -} -export const updateSelectedAnnotation = annotation => dispatch => { - dispatch({ type: types.align.set_selected_annotation, data: { ...annotation } }) - debouncedUpdateAnnotation(annotation) -} -export const debouncedUpdateAnnotation = debounce(annotation => { - console.log('updating annotation', annotation) - actions.annotation.update(annotation) -}, 2000, { leading: false, trailing: true }) - - -export const setSelectedParagraph = paragraph_id => dispatch => { - dispatch({ type: types.align.set_display_setting, key: 'selected_paragraph_id', value: paragraph_id }) -} -export const clearSelectedParagraph = paragraph_id => 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: {} - }) -} diff --git a/animism-align/frontend/views/align/align.container.js b/animism-align/frontend/views/align/align.container.js deleted file mode 100644 index 94036e1..0000000 --- a/animism-align/frontend/views/align/align.container.js +++ /dev/null @@ -1,30 +0,0 @@ -import React, { Component } from 'react' -import { Route } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import './align.css' - -import Timeline from './containers/timeline.container.js' -import Script from './containers/script.container.js' -import actions from '../../actions' -import { Header } from '../../common' - -class Container extends Component { - componentDidMount() { - document.body.scrollTo(0, 0) - document.body.parentNode.scrollTo(0, 0) - } - render() { - return ( - <div className='body'> - <div className='row'> - <Timeline /> - </div> - <Script /> - </div> - ) - } -} - -export default Container diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css deleted file mode 100644 index bbf3bc2..0000000 --- a/animism-align/frontend/views/align/align.css +++ /dev/null @@ -1,215 +0,0 @@ -* { - -} -.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; -} - -/* 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; -} -.ticks .tickLabel { - 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; -} - -/* 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 */ - -.script { - height: calc(100vh - 3.15rem); - z-index: 1; -} - -/* Annotations */ - -.annotations { - position: relative; - width: 450px; -} - -/* 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; -} - -/* Annotation index */ - -.annotationIndex { - width: 800px; -} -.annotationIndex .annotation { - position: absolute; - left: 5px; - max-width: 400px; - 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: 1; - background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4)); -} -.annotationIndex .annotation.media { - left: calc(405px + 0.5rem); -} -.annotation.sentence.even { - background-color: #83b; -} -.annotation.sentence.odd { - background-color: #537; -} -.annotation.header { - background-color: #838; -} -.annotation.paragraph_end { - background-color: #003; - border-top: 1px solid #888; - width: 100%; - padding: 1px; -} - -/* Condensed layout (first lines) */ - -.annotationIndex.condensed .annotation.sentence { - z-index: 0; - white-space: pre; - overflow: hidden; - text-overflow: ellipsis; -} -.annotationIndex.condensed .annotation.header { - 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: 1; -} -.annotationIndex.collapsed .annotation.header { - z-index: 2; -} -.annotationIndex.collapsed .annotation.paragraph_end { - border-top-color: #333; -} diff --git a/animism-align/frontend/views/align/align.reducer.js b/animism-align/frontend/views/align/align.reducer.js deleted file mode 100644 index fc948e8..0000000 --- a/animism-align/frontend/views/align/align.reducer.js +++ /dev/null @@ -1,85 +0,0 @@ -import * as types from '../../types' -import { session, getDefault, getDefaultInt } from '../../session' - -const initialState = { - timeline: { - cursor_ts: -1, - start_ts: 0, - zoom: 1, - duration: 0, - selected_annotation_id: -1, - selected_paragraph_id: -1, - }, - 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 - - 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/views/align/align.util.js b/animism-align/frontend/views/align/align.util.js deleted file mode 100644 index 37d4181..0000000 --- a/animism-align/frontend/views/align/align.util.js +++ /dev/null @@ -1,65 +0,0 @@ -import { ZOOM_STEPS } from './constants' -import { clamp } from '../../util' -import actions from '../../actions' - -import { HEADER_MARGIN, INNER_HEIGHT } from './constants' - -export const positionToTime = (y, { start_ts, zoom, duration }) => { - y -= HEADER_MARGIN - const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 - const widthTimeDuration = INNER_HEIGHT * secondsPerPixel - const timeMin = start_ts - const timeMax = Math.min(start_ts + widthTimeDuration, duration) - const timeWidth = timeMax - timeMin - return clamp(y * secondsPerPixel + start_ts, 0, timeMax) -} - -export const timeToPosition = (ts, { start_ts, zoom, duration }) => { - const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 - const widthTimeDuration = INNER_HEIGHT * secondsPerPixel - const timeMin = start_ts - const timeMax = Math.min(start_ts + widthTimeDuration, duration) - const timeWidth = timeMax - timeMin - const timeHalfHeight = INNER_HEIGHT * secondsPerPixel / 2 - if (ts < timeMin - timeHalfHeight) { - return -9999 - } - if (ts > timeMax) { - return -9999 - } - return (ts - timeMin) / timeWidth * INNER_HEIGHT -} - -export const getFirstPunctuationMarkIndex = text => { - const indexes = [ - text.indexOf('. '), - text.indexOf('? '), - text.indexOf('! '), - text.indexOf('." '), - text.indexOf('?" '), - text.indexOf('!" '), - text.indexOf('.” '), - text.indexOf('?” '), - text.indexOf('!” '), - ] - - return indexes.reduce((a, b) => { - if (b < 0) return a - return Math.min(a, b) - }, Infinity) + 1 -} - -export const cutFirstSentence = text => { - const textToCrop = text.trim().replace("\n", " ").split("\n")[0] - let cropIndex = getFirstPunctuationMarkIndex(textToCrop) - if (!cropIndex) cropIndex = textToCrop.length - const croppedText = textToCrop.substr(0, cropIndex).trim() - const updatedText = text.trim().replace(croppedText, '').trim() - actions.site.updateText(updatedText) - return croppedText -} - -export const thumbnailURL = data => { - if (data.type === 'video') return data.settings.video.thumbnail_url - if (data.type === 'image') return data.settings.thumbnail.url -} diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js deleted file mode 100644 index 01b1663..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotation.form.js +++ /dev/null @@ -1,183 +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 * as alignActions from '../align.actions' - -import { ZOOM_STEPS } from '../../constants' -import { clamp, timestamp, capitalize } from '../../../../util' -import { timeToPosition } from '../../align.util' -import { Select } from '../../../../common' - -import { - AnnotationFormVideo, - AnnotationFormImage, -} from './annotationForms' - -const ANNOTATION_TYPES = [ - 'sentence', 'header', 'paragraph_end', 'video', 'image', 'image_carousel', -].map(name => ({ name, label: capitalize(name.replace('_', ' ')) })) - -class AnnotationForm extends Component { - constructor(props){ - super(props) - this.handleChange = this.handleChange.bind(this) - this.handleSelect = this.handleSelect.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) - } - 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.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, media } = this.props - if (!annotation.start_ts) return <div></div> - return ( - <div - className='annotationForm' - style={{ - top: timeToPosition(annotation.start_ts, timeline), - }} - > - {this.renderButtons()} - {annotation.type === 'sentence' && this.renderTextarea()} - {annotation.type === 'header' && this.renderTextarea()} - {annotation.type === 'video' && - <AnnotationFormVideo annotation={annotation} media={media} handleSettingsSelect={this.handleSettingsSelect} /> - } - {annotation.type === 'image' && - <AnnotationFormImage annotation={annotation} media={media} handleSettingsSelect={this.handleSettingsSelect} /> - } - {annotation.type === 'image_carousel' && - <AnnotationFormImageCarousel annotation={annotation} media={media} handleSettingsSelect={this.handleSettingsSelect} /> - } - </div> - ) - } - renderButtons() { - const { annotation } = this.props - return ( - <div className='row buttons'> - <div> - <Select - name='type' - selected={annotation.type} - options={ANNOTATION_TYPES} - 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> - <textarea - name='text' - value={annotation.text} - onKeyDown={this.handleKeyDown} - onChange={this.handleChange} - ref={this.textareaRef} - /> - </div> - ) - } -} - -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/views/align/components/annotations/annotation.index.js b/animism-align/frontend/views/align/components/annotations/annotation.index.js deleted file mode 100644 index 30dc7c0..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotation.index.js +++ /dev/null @@ -1,126 +0,0 @@ -import React, { Component } from 'react' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import actions from '../../../../actions' - -import { ZOOM_STEPS, INNER_HEIGHT } from '../../constants' -import { clamp } from '../../../../util' -import { positionToTime, timeToPosition } from '../../align.util' - -import { AnnotationElementLookup } from './annotationTypes' - -class AnnotationIndex extends Component { - 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 - 50.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]).reverse() - this.setState({ items }) - } - handleClick(e, annotation) { - e.stopPropagation() - 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} - 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, -}) - -const mapDispatchToProps = dispatch => ({ -}) - -export default connect(mapStateToProps, mapDispatchToProps)(AnnotationIndex) diff --git a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.image.js deleted file mode 100644 index e2df98b..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.image.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, { Component } from 'react' - -import { Select } from '../../../../../common' - -export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect }) => { - if (!media.lookup) return <div /> - const { lookup, order } = media - const image_list_items = order.filter(id => lookup[id].type === 'image').map(id => { - const image = lookup[id] - return { - name: image.id, - label: image.author + ' - ' + image.title - } - }) - return ( - <div> - <Select - name='media_id' - className="media_id" - selected={annotation.settings.media_id} - options={image_list_items} - defaultOption='Choose an image' - onChange={handleSettingsSelect} - /> - </div> - ) -} diff --git a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.video.js deleted file mode 100644 index 9302ba4..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.video.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, { Component } from 'react' - -import { Select } from '../../../../../common' - -export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect }) => { - if (!media.lookup) return <div /> - const { lookup, order } = media - const video_list_items = order.filter(id => lookup[id].type === 'video').map(id => { - const video = lookup[id] - return { - name: video.id, - label: video.author + ' - ' + video.title - } - }) - return ( - <div> - <Select - name='media_id' - className="media_id" - selected={annotation.settings.media_id} - options={video_list_items} - defaultOption='Choose a video' - onChange={handleSettingsSelect} - /> - </div> - ) -} diff --git a/animism-align/frontend/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/views/align/components/annotations/annotationForms/index.js deleted file mode 100644 index 1411efc..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotationForms/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import { - AnnotationFormVideo, -} from './annotationForm.video' - -import { - AnnotationFormImage, -} from './annotationForm.image' - -export { - AnnotationFormImage, - AnnotationFormVideo, -} diff --git a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.image.js b/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.image.js deleted file mode 100644 index c3e0c22..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.image.js +++ /dev/null @@ -1,33 +0,0 @@ -import React, { Component } from 'react' - -import { thumbnailURL } from '../../../align.util' - -import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.util' - -export const AnnotationImage = ({ y, annotation, media, selected, onClick, onDoubleClick }) => { - const { start_ts, text } = annotation - const className = selected ? 'annotation media image selected' : 'annotation media image' - if (checkAnnotationMediaNotReady(annotation, media)) { - return <AnnotationMediaLoading y={y} className={className} onClick={onClick} onDoubleClick={onDoubleClick} /> - } - const data = media[annotation.settings.media_id] - return ( - <div - className={className} - style={{ top: y }} - onClick={e => onClick(e, annotation)} - onDoubleClick={e => onDoubleClick(e, annotation)} - > - <div className='img'> - <img src={thumbnailURL(data)} alt={data.title} /> - </div> - <div className='meta center'> - <div> - <i>{data.title}</i><br /> - {data.author}<br /> - {data.date} - </div> - </div> - </div> - ) -} diff --git a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.text.js b/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.text.js deleted file mode 100644 index be4674f..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.text.js +++ /dev/null @@ -1,49 +0,0 @@ -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 AnnotationHeader = ({ y, annotation, selected, onClick, onDoubleClick }) => { - const { start_ts, text } = annotation - const className = selected ? 'annotation header selected' : 'annotation header' - 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> - ) -} diff --git a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.util.js b/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.util.js deleted file mode 100644 index 17abebd..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.util.js +++ /dev/null @@ -1,28 +0,0 @@ -import React, { Component } from 'react' - -export const checkAnnotationMediaNotReady = (annotation, media) => { - return (!media) || (!(annotation.settings.media_id in media)) -} - -export const AnnotationMediaLoading = ({ y, className, onClick, onDoubleClick }) => { - if (!media) { - return ( - <div - className={className} - style={{ top: y }} - onClick={e => onClick(e, annotation)} - onDoubleClick={e => onDoubleClick(e, annotation)} - >LOADING...</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/views/align/components/annotations/annotationTypes/annotationTypes.video.js b/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.video.js deleted file mode 100644 index dc4f469..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.video.js +++ /dev/null @@ -1,34 +0,0 @@ -import React, { Component } from 'react' - -import { thumbnailURL } from '../../../align.util' - -import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.util' - -export const AnnotationVideo = ({ y, annotation, media, 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} className={className} onClick={onClick} onDoubleClick={onDoubleClick} /> - } - const data = media[annotation.settings.media_id] - return ( - <div - className={className} - style={{ top: y }} - onClick={e => onClick(e, annotation)} - onDoubleClick={e => onDoubleClick(e, annotation)} - > - <div className='img'> - <img src={thumbnailURL(data)} alt={data.title} /> - </div> - <div className='meta center'> - <div> - <i>{data.title}</i><br /> - {data.author}<br /> - {data.date} - </div> - </div> - </div> - ) -} - diff --git a/animism-align/frontend/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/views/align/components/annotations/annotationTypes/index.js deleted file mode 100644 index 560063b..0000000 --- a/animism-align/frontend/views/align/components/annotations/annotationTypes/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' - -import { - AnnotationSentence, AnnotationHeader, - AnnotationParagraphEnd, -} from './annotationTypes.text' - -import { - AnnotationVideo, -} from './annotationTypes.video' - -import { - AnnotationImage, -} from './annotationTypes.image' - -export const AnnotationElementLookup = { - sentence: React.memo(AnnotationSentence), - header: React.memo(AnnotationHeader), - paragraph_end: React.memo(AnnotationParagraphEnd), - video: React.memo(AnnotationVideo), - image: React.memo(AnnotationImage), -} diff --git a/animism-align/frontend/views/align/components/player/playButton.component.js b/animism-align/frontend/views/align/components/player/playButton.component.js deleted file mode 100644 index 486eaee..0000000 --- a/animism-align/frontend/views/align/components/player/playButton.component.js +++ /dev/null @@ -1,31 +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 * as alignActions from '../align.actions' - -import { ZOOM_STEPS } from '../../constants' -import { clamp } from '../../../../util' - -const PlayButton = ({ audio }) => { - return ( - <div - className={audio.playing ? 'playButton playing' : 'playButton paused'} - onClick={() => { - audio.playing ? actions.audio.pause() : actions.audio.play() - }} - /> - ) -} - -const mapStateToProps = state => ({ - audio: state.audio, -}) - -const mapDispatchToProps = dispatch => ({ - // alignActions: bindActionCreators({ ...alignActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(PlayButton) diff --git a/animism-align/frontend/views/align/components/timeline/cursor.component.js b/animism-align/frontend/views/align/components/timeline/cursor.component.js deleted file mode 100644 index f621b37..0000000 --- a/animism-align/frontend/views/align/components/timeline/cursor.component.js +++ /dev/null @@ -1,26 +0,0 @@ -import React, { Component } from 'react' - -import { ZOOM_STEPS } from '../../constants' -import { timestamp } from '../../../../util' - -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/views/align/components/timeline/playCursor.component.js b/animism-align/frontend/views/align/components/timeline/playCursor.component.js deleted file mode 100644 index e03d212..0000000 --- a/animism-align/frontend/views/align/components/timeline/playCursor.component.js +++ /dev/null @@ -1,36 +0,0 @@ -import React, { Component } from 'react' -// import { Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import { ZOOM_STEPS } from '../../constants' -import { timestamp } from '../../../../util' - -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/views/align/components/timeline/ticks.component.js b/animism-align/frontend/views/align/components/timeline/ticks.component.js deleted file mode 100644 index 747fb7a..0000000 --- a/animism-align/frontend/views/align/components/timeline/ticks.component.js +++ /dev/null @@ -1,88 +0,0 @@ -import React, { Component } from 'react' - -import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from '../../constants' -import { timestamp } from '../../../../util' - -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/views/align/components/timeline/waveform.component.js b/animism-align/frontend/views/align/components/timeline/waveform.component.js deleted file mode 100644 index 16ceaf6..0000000 --- a/animism-align/frontend/views/align/components/timeline/waveform.component.js +++ /dev/null @@ -1,99 +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 * as uploadActions from './upload.actions' - -import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from '../../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} onClick={this.props.onClick} /> - ) - } -} - -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/views/align/constants.js b/animism-align/frontend/views/align/constants.js deleted file mode 100644 index cf504d3..0000000 --- a/animism-align/frontend/views/align/constants.js +++ /dev/null @@ -1,34 +0,0 @@ -export const WAVEFORM_SIZE = 300 - -export const ZOOM_STEPS = [ - 1, - 2, - 3, - 10, - 20, - 30, - 60, -] - -export const ZOOM_LABEL_STEPS = [ - 20, - 60, - 60, - 300, - 600, - 600, - 1200, -] - -export const ZOOM_TICK_STEPS = [ - 5, - 10, - 30, - 60, - 60, - 60, - 600, -] - -export const HEADER_MARGIN = 50 -export const INNER_HEIGHT = window.innerHeight - HEADER_MARGIN diff --git a/animism-align/frontend/views/align/containers/annotations.container.js b/animism-align/frontend/views/align/containers/annotations.container.js deleted file mode 100644 index b6cdace..0000000 --- a/animism-align/frontend/views/align/containers/annotations.container.js +++ /dev/null @@ -1,40 +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 * as alignActions from '../align.actions' - -import { ZOOM_STEPS } from '../constants' -import { clamp } from '../../../util' -import { positionToTime } from '../align.util' - -import AnnotationForm from '../components/annotations/annotation.form' -import AnnotationIndex from '../components/annotations/annotation.index' - -class Annotations extends Component { - constructor(props){ - super(props) - } - render() { - return ( - <div className='annotations'> - <AnnotationIndex /> - {this.props.annotation.start_ts && - <AnnotationForm /> - } - </div> - ) - } -} - -const mapStateToProps = state => ({ - timeline: state.align.timeline, - annotation: state.align.annotation, -}) - -const mapDispatchToProps = dispatch => ({ -}) - -export default connect(mapStateToProps, mapDispatchToProps)(Annotations) diff --git a/animism-align/frontend/views/align/containers/script.container.js b/animism-align/frontend/views/align/containers/script.container.js deleted file mode 100644 index ce3dee8..0000000 --- a/animism-align/frontend/views/align/containers/script.container.js +++ /dev/null @@ -1,34 +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 * as alignActions from '../align.actions' - -class Timeline extends Component { - constructor(props){ - super(props) - } - render() { - if (this.props.text.loading) return <div /> - return ( - <textarea - className='script' - onChange={e => actions.site.updateText(e.target.value)} - value={this.props.text} - /> - ) - } -} - - -const mapStateToProps = state => ({ - text: state.site.text, -}) - -const mapDispatchToProps = dispatch => ({ - // alignActions: bindActionCreators({ ...alignActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(Timeline) diff --git a/animism-align/frontend/views/align/containers/timeline.container.js b/animism-align/frontend/views/align/containers/timeline.container.js deleted file mode 100644 index a924eaf..0000000 --- a/animism-align/frontend/views/align/containers/timeline.container.js +++ /dev/null @@ -1,171 +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 * as alignActions from '../align.actions' - -import Annotations from '../containers/annotations.container' -import Waveform from '../components/timeline/waveform.component' -import Ticks from '../components/timeline/ticks.component' -import Cursor from '../components/timeline/cursor.component' -import PlayButton from '../components/player/playButton.component' -import PlayCursor from '../components/timeline/playCursor.component' - -import { WAVEFORM_SIZE, ZOOM_STEPS, INNER_HEIGHT } from '../constants' -import { clamp } from '../../../util' -import { positionToTime } from '../align.util' - -class Timeline extends Component { - 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.handleTimelineClick = this.handleTimelineClick.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 - } - 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) - } - } - handleMouseMove(e) { - const cursor_ts = positionToTime(e.pageY, this.props.timeline) - actions.align.setCursor(cursor_ts) - } - handleContainerClick(e) { - actions.align.clearSelectedAnnotation() - actions.align.clearSelectedParagraph() - } - handleTimelineClick(e) { - const play_ts = positionToTime(e.pageY, this.props.timeline) - 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 onClick={this.handleTimelineClick} /> - <Ticks timeline={this.props.timeline} /> - <Cursor timeline={this.props.timeline} annotation={this.props.annotation} /> - </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, -}) - -const mapDispatchToProps = dispatch => ({ - // alignActions: bindActionCreators({ ...alignActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(Timeline) diff --git a/animism-align/frontend/views/annotation/annotation.reducer.js b/animism-align/frontend/views/annotation/annotation.reducer.js deleted file mode 100644 index 98b785e..0000000 --- a/animism-align/frontend/views/annotation/annotation.reducer.js +++ /dev/null @@ -1,21 +0,0 @@ -import * as types from '../../types' -import { session, getDefault, getDefaultInt } from '../../session' - -import { crudState, crudReducer } from '../../api/crud.reducer' - -const initialState = crudState('annotation', { - options: { - sort: 'start_ts asc', - } -}) - -const reducer = crudReducer('annotation') - -export default function annotationReducer(state = initialState, action) { - // console.log(action.type, action) - state = reducer(state, action) - switch (action.type) { - default: - return state - } -} diff --git a/animism-align/frontend/views/audio/audio.actions.js b/animism-align/frontend/views/audio/audio.actions.js deleted file mode 100644 index 64c8215..0000000 --- a/animism-align/frontend/views/audio/audio.actions.js +++ /dev/null @@ -1,40 +0,0 @@ -import * as types from '../../types' -import { store, history, dispatch } from '../../store' -import actions from '../../actions' -import { session } from '../../session' - -const audioPlayer = document.createElement('audio') -audioPlayer.src = '/static/data_store/peaks/animismA080720.mp3' -audioPlayer.addEventListener('loadedmetadata', () => { - console.log('audio duration:', audioPlayer.duration) - dispatch({ type: types.align.set_display_setting, key: 'duration', value: audioPlayer.duration }) -}) -audioPlayer.addEventListener('play', () => { - dispatch({ type: types.audio.play }) -}) -audioPlayer.addEventListener('pause', () => { - dispatch({ type: types.audio.pause }) -}) -audioPlayer.addEventListener('timeupdate', () => { - dispatch({ type: types.audio.update_time, play_ts: audioPlayer.currentTime }) -}) - -export const play = () => dispatch => { - audioPlayer.play() -} -export const pause = () => dispatch => { - audioPlayer.pause() -} -export const seek = play_ts => dispatch => { - audioPlayer.currentTime = play_ts -} -export const jump = delta_ts => dispatch => { - audioPlayer.currentTime += delta_ts -} -export const toggle = () => dispatch => { - if (store.getState().audio.playing) { - pause()(dispatch) - } else { - play()(dispatch) - } -} diff --git a/animism-align/frontend/views/audio/audio.reducer.js b/animism-align/frontend/views/audio/audio.reducer.js deleted file mode 100644 index e37933d..0000000 --- a/animism-align/frontend/views/audio/audio.reducer.js +++ /dev/null @@ -1,30 +0,0 @@ -import * as types from '../../types' -import { session, getDefault, getDefaultInt } from '../../session' - -const initialState = { - playing: false, - play_ts: 0, -} - -export default function alignReducer(state = initialState, action) { - // console.log(action.type, action) - switch (action.type) { - case types.audio.play: - return { - ...state, - playing: true, - } - case types.audio.pause: - return { - ...state, - playing: false, - } - case types.audio.update_time: - return { - ...state, - play_ts: action.play_ts, - } - default: - return state - } -} diff --git a/animism-align/frontend/views/index.js b/animism-align/frontend/views/index.js deleted file mode 100644 index 2c9ee78..0000000 --- a/animism-align/frontend/views/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export { default as align } from './align/align.container' -export { default as paragraph } from './paragraph/paragraph.container' -export { default as upload } from './upload/upload.container' -export { default as media } from './media/media.container' diff --git a/animism-align/frontend/views/media/components/media.form.js b/animism-align/frontend/views/media/components/media.form.js deleted file mode 100644 index 1463041..0000000 --- a/animism-align/frontend/views/media/components/media.form.js +++ /dev/null @@ -1,272 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' - -import { session } from '../../../session' -import { capitalize } from '../../../util' - -import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' - -import MediaImageForm from './media.formImage' -import MediaVideoForm from './media.formVideo' - -const newMedia = () => ({ - type: 'image', - tag: 'media', - url: '', - title: '', - author: '', - pre_title: '', - post_title: '', - translated_title: '', - date: '', - source: '', - medium: '', - start_ts: 0, - settings: {}, -}) - -const MEDIA_TYPES = [ - 'image', 'video' -].map(name => ({ name, label: capitalize(name) })) - -export default class MediaForm extends Component { - state = { - title: "", - submitTitle: "", - data: { ...newMedia() }, - errorFields: new Set([]), - } - - constructor(props) { - super(props) - this.handleKeyDown = this.handleKeyDown.bind(this) - this.handleSelect = this.handleSelect.bind(this) - this.handleChange = this.handleChange.bind(this) - this.handleSettingsChange = this.handleSettingsChange.bind(this) - this.handleSettingsChangeEvent = this.handleSettingsChangeEvent.bind(this) - this.handleSubmit = this.handleSubmit.bind(this) - } - - componentDidMount() { - const { data, isNew } = this.props - const title = isNew ? 'New media' : 'Editing ' + data.title - const submitTitle = isNew ? "Add Media" : "Save Changes" - this.setState({ - title, - submitTitle, - errorFields: new Set([]), - data: { - ...newMedia(), - ...data - }, - }) - window.addEventListener('keydown', this.handleKeyDown) - } - - componentWillUnmount() { - window.removeEventListener('keydown', this.handleKeyDown) - } - - handleKeyDown(e) { - // console.log(e, e.keyCode) - if ((e.ctrlKey || e.metaKey) && e.keyCode === 83) { - if (e) { - e.preventDefault() - } - this.handleSubmit() - } - } - - handleChange(e) { - const { name, value } = e.target - this.handleSelect(name, value) - } - - handleSelect(name, value) { - const { errorFields } = this.state - if (errorFields.has(name)) { - errorFields.delete(name) - } - this.setState({ - errorFields, - data: { - ...this.state.data, - [name]: value, - } - }) - } - - handleSettingsChangeEvent(e) { - const { name, value } = e.target - this.handleSettingsChange(name, value) - } - - handleSettingsChange(name, value) { - console.log(name, value) - if (name !== 'multiple') { - value = { [name]: value } - } - this.setState({ - data: { - ...this.state.data, - settings: { - ...this.state.data.settings, - ...value, - } - } - }) - } - - handleSubmit(e) { - if (e) { - e.preventDefault() - } - const { isNew, onSubmit } = this.props - const { data } = this.state - const requiredKeys = "author title date".split(" ") - const validKeys = "type tag url title author pre_title post_title translated_title date source medium start_ts settings".split(" ") - const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) - const errorFields = requiredKeys.filter(key => !validData[key]) - if (errorFields.length) { - console.log('error', errorFields, validData) - this.setState({ errorFields: new Set(errorFields) }) - } else { - if (isNew) { - // side effect: set username if we're creating a new media - // session.set('username', data.username) - } else { - validData.id = data.id - } - console.log('submit', validData) - onSubmit(validData) - } - } - - render() { - const { isNew } = this.props - const { title, submitTitle, errorFields, data } = this.state - // console.log(data) - return ( - <div className='form'> - <h1>{title}</h1> - <form onSubmit={this.handleSubmit}> - <Select - title='Media Type' - name='type' - selected={data.type} - options={MEDIA_TYPES} - onChange={this.handleSelect} - /> - - {data.type === 'image' && - <MediaImageForm - data={data} - onChange={this.handleSelect} - onSettingsChange={this.handleSettingsChange} - /> - } - - {data.type === 'video' && - <MediaVideoForm - data={data} - onChange={this.handleSelect} - onSettingsChange={this.handleSettingsChange} - /> - } - - <TextInput - title="Author" - name="author" - required - data={data} - onChange={this.handleChange} - autoComplete="off" - /> - <TextInput - title="Title" - name="title" - required - data={data} - onChange={this.handleChange} - autoComplete="off" - /> - <TextInput - title="Title Prefix" - name="pre_title" - data={data} - onChange={this.handleChange} - autoComplete="off" - /> - <TextInput - title="Title Suffix" - name="post_title" - data={data} - onChange={this.handleChange} - autoComplete="off" - /> - <TextInput - title="Translated Title" - name="translated_title" - data={data} - onChange={this.handleChange} - autoComplete="off" - /> - <TextInput - title="Date" - name="date" - required - data={data} - onChange={this.handleChange} - autoComplete="off" - /> - <TextInput - title="Medium" - name="medium" - required - data={data} - onChange={this.handleChange} - /> - <TextInput - title="Source" - name="source" - placeholder="Courtesy of / Copyright" - required - data={data} - onChange={this.handleChange} - autoComplete="off" - /> - <TextArea - title="Citation" - name="bibliography" - placeholder="Use if special HTML formatting needed" - data={data.settings} - onChange={this.handleSettingsChangeEvent} - /> - <Checkbox - label="Hide in list of works" - name="hide_in_bibliography" - checked={data.settings.hide_in_bibliography} - onChange={this.handleSettingsChange} - autoComplete="off" - /> - <TextArea - title="Description" - name="description" - data={data} - onChange={this.handleChange} - /> - <SubmitButton - title={submitTitle} - onClick={this.handleSubmit} - /> - {!!errorFields.size && - <label> - <span></span> - <span>Please complete the required fields</span> - </label> - } - </form> - </div> - ) - } -} diff --git a/animism-align/frontend/views/media/components/media.formImage.js b/animism-align/frontend/views/media/components/media.formImage.js deleted file mode 100644 index 4a97112..0000000 --- a/animism-align/frontend/views/media/components/media.formImage.js +++ /dev/null @@ -1,172 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' - -import { session } from '../../../session' -import actions from '../../../actions' -import { capitalize, preloadImage, cropImage } from '../../../util' - -import { TextInput, LabelDescription, UploadImage, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' -import { renderThumbnail } from '../../../common/upload.helpers' - -import ImageSelection from './media.formImageSelection' - -const DISPLAY_SIZE = 1024 -const DISPLAY_QUALITY= 80 -const THUMBNAIL_SIZE = 320 -const THUMBNAIL_QUALITY = 80 - -export default class MediaImageForm extends Component { - state = { - img: null, - } - - constructor(props) { - super(props) - this.handleSelect = this.handleSelect.bind(this) - this.handleChange = this.handleChange.bind(this) - this.handleSettingsChange = this.handleSettingsChange.bind(this) - this.handleUpload = this.handleUpload.bind(this) - this.handleCrop = this.handleCrop.bind(this) - this.replaceTaggedSize = this.replaceTaggedSize.bind(this) - this.uploadTaggedSize = this.uploadTaggedSize.bind(this) - } - - componentDidMount() { - // this.setState({ }) - if (this.props.data.settings.fullsize) { - preloadImage(this.props.data.settings.fullsize.url) - .then(img => this.setState({ img })) - } - } - - handleChange(e) { - const { name, value } = e.target - this.handleSelect(name, value) - } - - handleSelect(name, value) { - this.props.onSelect(name, value) - } - - handleSettingsChange(name, value) { - this.props.onSettingsChange(name, value) - } - - handleUpload({ file, img, canvas, blob }) { - // sizes: fullsize, display, thumbnail - this.replaceTaggedSize(file, 'fullsize') - .then(data => { - this.setState({ img }) - this.props.onSettingsChange('multiple', { - fullsize: data, - crop: {}, - }) - return this.replaceTaggedSize(blob, 'display', file.name) - }).then(data => { - this.props.onSettingsChange('multiple', { - display: data, - }) - this.uploadThumbnail(img) - }) - } - - uploadThumbnail(img) { - const { fn } = this.props.data.settings.fullsize - const thumbnailCanvas = renderThumbnail(img, { maxSide: THUMBNAIL_SIZE }) - thumbnailCanvas.toBlob(thumbnail => { - this.replaceTaggedSize(thumbnail, 'thumbnail', fn).then(data => { - this.props.onSettingsChange('multiple', { - thumbnail: data, - }) - }) - }, 'image/jpeg', THUMBNAIL_QUALITY) - } - - replaceTaggedSize(image, tag, fn) { - // when we upload an image, if the image already exists in this "position" - // on the record, we should also delete it - if (this.props.data.settings[tag] && this.props.data.settings[tag].id) { - return new Promise((resolve, reject) => { - actions.upload.destroy(this.props.data.settings[tag]) - .then(() => { - console.log('destroy successful') - this.uploadTaggedSize(image, tag, fn).then(data => resolve(data)) - }) - .catch(() => { - console.log('error deleting the image') - this.uploadTaggedSize(image, tag, fn).then(data => resolve(data)) - }) - }) - } - return this.uploadTaggedSize(image, tag, fn) - } - - uploadTaggedSize(image, tag, fn) { - console.log('uploading size', tag) - const uploadData = { - image, - tag, - username: 'animism', - } - if (fn) { - uploadData['__image_filename'] = fn - } - // console.log(uploadData) - return actions.upload.upload(uploadData).then(data => { - // console.log(data) - return data.res - }) - } - - handleCrop(crop) { - // when cropping an image, re-upload the display image and thumbnail - // console.log(crop) - cropImage(this.state.img, crop, DISPLAY_SIZE) - .then(canvas => { - canvas.toBlob(blob => { - // console.log(canvas, canvas.width, canvas.height, blob) - this.replaceTaggedSize(blob, 'display', this.props.data.settings.fullsize.fn) - .then(data => { - this.props.onSettingsChange('multiple', { - crop, - display: data, - }) - this.uploadThumbnail(canvas) - }) - }, 'image/jpeg', DISPLAY_QUALITY) - }) - } - - render() { - const { data } = this.props - // console.log(data) - return ( - <div className='imageForm'> - {!data.url && - <label className={'text fileInput'}> - <span>{"Upload image"}</span> - <div className="row"> - <button> - {"Choose image"} - </button> - <UploadImage - onUpload={this.handleUpload} - maxSide={DISPLAY_SIZE} - quality={DISPLAY_QUALITY} - /> - </div> - </label> - } - {data.settings.fullsize && - <div> - <ImageSelection - url={data.settings.fullsize.url} - crop={data.settings.crop} - onCrop={this.handleCrop} - /> - </div> - } - </div> - ) - } -} diff --git a/animism-align/frontend/views/media/components/media.formImageSelection.js b/animism-align/frontend/views/media/components/media.formImageSelection.js deleted file mode 100644 index 5572793..0000000 --- a/animism-align/frontend/views/media/components/media.formImageSelection.js +++ /dev/null @@ -1,213 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import toBlob from 'data-uri-to-blob' - -import { clamp } from '../../../util' -import { Loader } from '../../../common' - -const defaultState = { - dragging: false, - draggingBox: false, - bounds: null, - mouseX: 0, - mouseY: 0, - box: { - x: 0, - y: 0, - w: 0, - h: 0, - } -} - -export default class ImageSelection extends Component { - state = { - ...defaultState - } - - constructor() { - super() - // bind these events in the constructor, so we can remove event listeners later - this.handleMouseDown = this.handleMouseDown.bind(this) - this.handleMouseDownOnBox = this.handleMouseDownOnBox.bind(this) - this.handleMouseMove = this.handleMouseMove.bind(this) - this.handleMouseUp = this.handleMouseUp.bind(this) - this.handleWindowResize = this.handleWindowResize.bind(this) - } - - componentDidMount() { - document.body.addEventListener('mousemove', this.handleMouseMove) - document.body.addEventListener('mouseup', this.handleMouseUp) - window.addEventListener('resize', this.handleWindowResize) - } - - componentDidUpdate(prevProps) { - if (this.state.bounds && this.props.url !== prevProps.url) { - this.setState({ - ...defaultState, - bounds: this.getBoundingClientRect(), - box: this.props.crop || defaultState.box, - }) - } - } - - componentWillUnmount() { - document.body.removeEventListener('mousemove', this.handleMouseMove) - document.body.removeEventListener('mouseup', this.handleMouseUp) - window.removeEventListener('resize', this.handleWindowResize) - } - - getBoundingClientRect() { - if (!this.imgRef) return null - const rect = this.imgRef.getBoundingClientRect() - const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop - const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft - const bounds = { - top: rect.top + scrollTop, - left: rect.left + scrollLeft, - width: rect.width, - height: rect.height, - } - return bounds - } - - handleLoad() { - const bounds = this.getBoundingClientRect() - const box = this.props.crop || defaultState.box - this.setState({ bounds, box }) - } - - handleWindowResize() { - if (!this.imgRef) return - const bounds = this.getBoundingClientRect() - this.setState({ bounds }) - } - - handleMouseDown(e) { - e.preventDefault() - const bounds = this.getBoundingClientRect() - const mouseX = e.pageX - const mouseY = e.pageY - const x = (mouseX - bounds.left) / bounds.width - const y = (mouseY - bounds.top) / bounds.height - const w = 1 / bounds.width - const h = 1 / bounds.height - this.setState({ - dragging: true, - bounds, - mouseX, - mouseY, - box: { - x, y, w, h, - } - }) - } - - handleMouseDownOnBox(e) { - const bounds = this.getBoundingClientRect() - const mouseX = e.pageX - const mouseY = e.pageY - this.setState({ - draggingBox: true, - bounds, - mouseX, - mouseY, - initialBox: { - ...this.state.box - }, - box: { - ...this.state.box - } - }) - } - - handleMouseMove(e) { - const { - dragging, draggingBox, - bounds, mouseX, mouseY, initialBox, box - } = this.state - if (dragging) { - e.preventDefault() - let { x, y } = box - let dx = (e.pageX - mouseX) / bounds.width - let dy = (e.pageY - mouseY) / bounds.height - let w = clamp(dx, 0.0, 1.0 - x) - let h = clamp(dy, 0.0, 1.0 - y) - this.setState({ - box: { - x, y, w, h, - } - }) - } else if (draggingBox) { - e.preventDefault() - let { x, y, w, h } = initialBox - let dx = (e.pageX - mouseX) / bounds.width - let dy = (e.pageY - mouseY) / bounds.height - this.setState({ - box: { - x: clamp(x + dx, 0, 1.0 - w), - y: clamp(y + dy, 0, 1.0 - h), - w, - h, - } - }) - } - } - - handleMouseUp(e) { - const { onCrop } = this.props - const { dragging, draggingBox, bounds, box } = this.state - if (!dragging && !draggingBox) return - e.preventDefault() - const { x, y, w, h } = box - let url = window.location.pathname - this.setState({ - dragging: false, - draggingBox: false, - }) - if (w < 10 / bounds.width || h < 10 / bounds.height) { - this.setState({ box: { ...defaultState.box }}) - onCrop({}) - } else { - // pass the box dimensions up - do the search again - onCrop(box) - } - } - - render() { - const { url } = this.props - const { bounds, box } = this.state - const { x, y, w, h } = box - return ( - <div className="imageSelection"> - <img - src={url} - ref={ref => this.imgRef = ref} - onMouseDown={this.handleMouseDown} - onLoad={this.handleLoad.bind(this)} - crossOrigin='anonymous' - /> - {!!w && - <div - className="box" - style={{ - left: x * bounds.width, - top: y * bounds.height, - width: w * bounds.width, - height: h * bounds.height, - }} - onMouseDown={this.handleMouseDownOnBox} - /> - } - </div> - ) - } -} - -const boxToFixed = ({ x, y, w, h }) => ({ - x: x.toFixed(3), - y: y.toFixed(3), - w: w.toFixed(3), - h: h.toFixed(3), -}) diff --git a/animism-align/frontend/views/media/components/media.formVideo.js b/animism-align/frontend/views/media/components/media.formVideo.js deleted file mode 100644 index 89954b9..0000000 --- a/animism-align/frontend/views/media/components/media.formVideo.js +++ /dev/null @@ -1,111 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import VimeoPlayer from '@u-wave/react-vimeo' - -import { capitalize } from '../../../util' -import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' - -import { getVimeoMetadata } from '../media.actions' - -export default class MediaVideoForm extends Component { - state = { - } - - constructor(props) { - super(props) - this.handleSelect = this.handleSelect.bind(this) - this.handleChange = this.handleChange.bind(this) - this.handleSettingsChange = this.handleSettingsChange.bind(this) - } - - handleChange(e) { - let { name, value } = e.target - return this.handleSelect(name, value) - } - - handleSelect(name, value) { - value = value.trim() - if (name === 'url') { - getVimeoMetadata(value) - .then(data => { - console.log('video metadata', data) - this.props.onChange(name, value) - setTimeout(() => { - this.props.onSettingsChange('video', { - thumbnail_url: data.thumbnail_url, - duration: data.duration, - video_id: data.video_id, - }) - }, 20) - }) - } else { - this.props.onChange(name, value) - } - } - - handleSettingsChange(e) { - let { name, value } = e.target - this.props.onSettingsChange(name, value) - } - - handleSettingsSelect(name, value) { - this.props.onSettingsChange(name, value) - } - - render() { - const { data } = this.props - return ( - <div className='videoForm'> - <TextInput - title="Video URL" - name="url" - required - data={data} - onChange={this.handleChange} - autoComplete="off" - /> - - {data.url && - <div> - <LabelDescription className='video'> - <VimeoPlayer video={data.url} /> - </LabelDescription> - - {data.settings.video && data.settings.video.thumbnail && - <LabelDescription className='thumbnail'> - <img src={data.settings.video.thumbnail} /> - </LabelDescription> - } - - <TextInput - title="Start time" - name="video_start_time" - data={data.settings} - placeholder="0:00" - onChange={this.handleSettingsChange} - autoComplete="off" - /> - - <TextInput - title="End time" - name="video_end_time" - data={data.settings} - placeholder="0:00" - onChange={this.handleSettingsChange} - autoComplete="off" - /> - - <TextInput - title="Original duration" - name="original_duration" - data={data.settings} - placeholder="0:00" - onChange={this.handleSettingsChange} - autoComplete="off" - /> - </div> - } - </div> - ) - } -} diff --git a/animism-align/frontend/views/media/components/media.indexOptions.js b/animism-align/frontend/views/media/components/media.indexOptions.js deleted file mode 100644 index 5dbc415..0000000 --- a/animism-align/frontend/views/media/components/media.indexOptions.js +++ /dev/null @@ -1,65 +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 { Select, Checkbox } from '../../../common' - -const thumbnailOptions = [ - { name: 'th', label: 'Thumbnails', }, - { name: 'sm', label: 'Small', }, - { name: 'md', label: 'Medium', }, - { name: 'lg', label: 'Large', }, - { name: 'orig', label: 'Original', }, -] - -const sortOptions = [ - { name: 'id-asc', label: 'Most recent' }, - { name: 'id-desc', label: 'Oldest first' }, - { name: 'username-asc', label: 'Username (A-Z)' }, - { name: 'username-desc', label: 'Username (Z-A)' }, - { name: 'author-asc', label: 'Author (A-Z)' }, - { name: 'author-desc', label: 'Author (Z-A)' }, - { name: 'title-asc', label: 'Title (A-Z)' }, - { name: 'title-desc', label: 'Title (Z-A)' }, - // { name: '-asc', label: '' }, - // { name: '-desc', label: '' }, - // { name: '-asc', label: '' }, - // { name: '-desc', label: '' }, - // { name: '-asc', label: '' }, - // { name: '-desc', label: '' }, -] - -class IndexOptions extends Component { - render() { - const { options } = this.props - return ( - <div className='row menubar'> - <div /> - <Select - name={'sort'} - options={sortOptions} - selected={options.sort} - onChange={actions.upload.updateOption} - /> - <Select - name={'thumbnailSize'} - options={thumbnailOptions} - selected={options.thumbnailSize} - onChange={actions.upload.updateOption} - /> - </div> - ) - } -} - -const mapStateToProps = state => ({ - options: state.upload.options, -}) - -const mapDispatchToProps = dispatch => ({ -}) - -export default connect(mapStateToProps, mapDispatchToProps)(IndexOptions) diff --git a/animism-align/frontend/views/media/components/media.menu.js b/animism-align/frontend/views/media/components/media.menu.js deleted file mode 100644 index 153a5c1..0000000 --- a/animism-align/frontend/views/media/components/media.menu.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, { Component } from 'react' -import { Route, Link } from 'react-router-dom' -import { connect } from 'react-redux' - -import { history } from '../../../store' -import actions from '../../../actions' -import { MenuButton, FileInput } from '../../../common' - -const mapStateToProps = state => ({ - media: state.media, -}) - -export default class MediaMenu extends Component { - render() { - return ( - <div className='menuButtons'> - <Route exact path='/media/:id/show/' component={MediaShowMenu} /> - <Route exact path='/media/:id/edit/' component={MediaEditMenu} /> - <Route exact path='/media/new/' component={MediaNewMenu} /> - <Route exact path='/media/' component={MediaIndexMenu} /> - </div> - ) - } -} - -const MediaIndexMenu = () => ([ - <MenuButton key='new' name="new" href="/media/new/" />, -]) - -const MediaShowMenu = connect(mapStateToProps)((props) => ([ - <MenuButton key='back' name="back" href="/media/" />, - <MenuButton key='edit' name="edit" href={"/media/" + props.match.params.id + "/edit/"} />, - <MenuButton key='delete' name="delete" onClick={() => { - const { res: media } = props.media.show - if (confirm("Really delete this media?")) { - actions.media.destroy(media).then(() => { - history.push('/media/') - }) - } - }} />, -])) - -const MediaNewMenu = (props) => ([ - <MenuButton key='back' name="back" href="/media/" />, -]) - -const MediaEditMenu = connect(mapStateToProps)((props) => ([ - <MenuButton key='back' name="back" href="/media/" />, - <MenuButton key='copy' name="copy" href={"/media/" + props.match.params.id + '/copy/'} label="Make a copy" />, - <MenuButton key='delete' name="delete" onClick={() => { - const { res: media } = props.media.show - if (confirm("Really delete this media?")) { - actions.media.destroy(media).then(() => { - history.push('/media/') - }) - } - }} />, -])) diff --git a/animism-align/frontend/views/media/containers/media.edit.js b/animism-align/frontend/views/media/containers/media.edit.js deleted file mode 100644 index 143cdfe..0000000 --- a/animism-align/frontend/views/media/containers/media.edit.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { connect } from 'react-redux' - -import { history } from '../../../store' -import actions from '../../../actions' - -import { Loader } from '../../../common' - -import MediaForm from '../components/media.form' -import MediaMenu from '../components/media.menu' - -class MediaEdit extends Component { - componentDidMount() { - console.log(this.props.match.params.id) - actions.media.show(this.props.match.params.id) - } - - handleSubmit(data) { - actions.media.update(data) - .then(response => { - // response - console.log(response) - history.push('/media/') - }) - } - - render() { - const { show } = this.props.media - if (show.loading || !show.res) { - return ( - <div className='form'> - <Loader /> - </div> - ) - } - return ( - <div className='row formContainer'> - <MediaMenu mediaActions={this.props.mediaActions} /> - <MediaForm - data={show.res} - onSubmit={this.handleSubmit.bind(this)} - /> - </div> - ) - } -} - -const mapStateToProps = state => ({ - media: state.media, -}) - -const mapDispatchToProps = dispatch => ({ - // mediaActions: bindActionCreators({ ...mediaActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(MediaEdit) diff --git a/animism-align/frontend/views/media/containers/media.index.js b/animism-align/frontend/views/media/containers/media.index.js deleted file mode 100644 index a865522..0000000 --- a/animism-align/frontend/views/media/containers/media.index.js +++ /dev/null @@ -1,115 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import { formatDateTime } from '../../../util' -import { MenuButton, SmallMenuButton, Loader } from '../../../common' -import actions from '../../../actions' - -import { thumbnailURL } from '../../align/align.util' - -import MediaIndexOptions from '../components/media.indexOptions' -import MediaMenu from '../components/media.menu' - -// const { result, collectionLookup } = this.props - -class MediaIndex extends Component { - componentDidMount() { - // this.fetch(false) - } - - componentDidUpdate(prevProps) { - if (this.props.media.options.sort !== prevProps.media.options.sort) { - this.fetch(false) - } - } - - fetch(load_more) { - const { options, index } = this.props.media - const { order: index_order } = index - const [ sort, order ] = options.sort.split(' ') - actions.media.index({ - sort, order, limit: 5000, // offset: load_more ? index_order.length : 0, - }, load_more) - } - - render() { - const { mediaActions } = this.props - const { options } = this.props.media - const { loading, lookup, order } = this.props.media.index - if (loading) { - return ( - <section> - <MediaIndexOptions /> - <div className="row"> - {order && !!order.length && - <div className={'results ' + options.thumbnailSize}> - {order.map(id => <MediaItem key={id} data={lookup[id]} />)} - </div> - } - </div> - <Loader /> - </section> - ) - } - if (!lookup || !order.length) { - return ( - <section> - <MediaIndexOptions /> - <div className="row"> - <MediaMenu /> - <p className='gray'> - {"No media"} - </p> - </div> - </section> - ) - } - return ( - <section> - <MediaIndexOptions /> - <div className="row"> - <MediaMenu /> - <div className={'results ' + options.thumbnailSize}> - <h2>Images</h2> - {order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)} - <h2>Video</h2> - {order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)} - </div> - </div> - {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>} - </section> - ) - } -} - -const MediaItem = ({ data }) => { - // console.log(data) - return ( - <div className='cell'> - <div className='img'> - <Link to={"/media/" + data.id + "/edit/"}> - <img src={thumbnailURL(data)} alt={data.title} /> - </Link> - </div> - <div className='meta center'> - <div> - <i>{data.title}</i><br /> - {data.author}<br /> - {data.date} - </div> - </div> - </div> - ) -} - -const mapStateToProps = state => ({ - media: state.media, -}) - -const mapDispatchToProps = dispatch => ({ - // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(MediaIndex) diff --git a/animism-align/frontend/views/media/containers/media.new.js b/animism-align/frontend/views/media/containers/media.new.js deleted file mode 100644 index 80879cb..0000000 --- a/animism-align/frontend/views/media/containers/media.new.js +++ /dev/null @@ -1,81 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { connect } from 'react-redux' - -import { history } from '../../../store' -import actions from '../../../actions' - -import MediaForm from '../components/media.form' -import MediaMenu from '../components/media.menu' - -class MediaNew extends Component { - state = { - loading: true, - initialData: {}, - } - - componentDidMount() { - // console.log(this.props.match.params.id) - if (this.props.match.params && this.props.match.params.id) { - actions.media.show(this.props.match.params.id) - .then(data => { - const { id, ...initialData } = data.res - delete initialData.settings.video - delete initialData.settings.crop - delete initialData.settings.display - delete initialData.settings.fullsize - delete initialData.settings.thumbnail - delete initialData.settings.bibliography - console.log("copying", id) - this.setState({ - loading: false, - initialData, - }) - }) - } else { - this.setState({ loading: false }) - } - } - - handleSubmit(data) { - console.log(data) - actions.media.create(data) - .then(res => { - console.log(res) - if (res.res && res.res.id) { - history.push('/media/') - } - }) - .catch(err => { - console.error('error') - }) - } - - render() { - if (this.state.loading) { - return ( - <div className='row formContainer' /> - ) - } - return ( - <div className='row formContainer'> - <MediaMenu /> - <MediaForm - isNew - data={this.state.initialData} - onSubmit={this.handleSubmit.bind(this)} - /> - </div> - ) - } -} - -const mapStateToProps = state => ({ - media: state.media, -}) - -const mapDispatchToProps = dispatch => ({ - // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(MediaNew) diff --git a/animism-align/frontend/views/media/media.actions.js b/animism-align/frontend/views/media/media.actions.js deleted file mode 100644 index 1f1ab01..0000000 --- a/animism-align/frontend/views/media/media.actions.js +++ /dev/null @@ -1,9 +0,0 @@ -import * as types from '../../types' -import { capitalize, api } from '../../util' - -export const getVimeoMetadata = url => { - return api(() => {}, types.vimeo, 'vimeo', 'https://vimeo.com/api/oembed.json', { url }) - .then(data => { - return data - }) -} diff --git a/animism-align/frontend/views/media/media.container.js b/animism-align/frontend/views/media/media.container.js deleted file mode 100644 index 97a5b08..0000000 --- a/animism-align/frontend/views/media/media.container.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { Component } from 'react' -import { Route, Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import './media.css' - -import actions from '../../actions' - -import MediaIndex from './containers/media.index' -// import MediaShow from './containers/media.show' -import MediaNew from './containers/media.new' -import MediaEdit from './containers/media.edit' - -class Container extends Component { - render() { - return ( - <div className='media'> - <Route exact path='/media/:id/copy/' component={MediaNew} /> - <Route exact path='/media/:id/edit/' component={MediaEdit} /> - <Route exact path='/media/new/' component={MediaNew} /> - <Route exact path='/media/' component={MediaIndex} /> - </div> - ) - } -} -/* - <Route exact path='/media/:id/show/' component={MediaShow} /> -*/ -const mapStateToProps = state => ({ - media: state.media, -}) - -const mapDispatchToProps = dispatch => ({ - // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(Container) diff --git a/animism-align/frontend/views/media/media.css b/animism-align/frontend/views/media/media.css deleted file mode 100644 index a2d95c8..0000000 --- a/animism-align/frontend/views/media/media.css +++ /dev/null @@ -1,70 +0,0 @@ -.app > .media { - width: 100%; - height: calc(100% - 3.125rem); - overflow: scroll; -} - -.results .cell { - margin-bottom: 1rem; - margin-right: 1rem; -} -.results h2 { - display: block; - width: 100%; -} -.media .results .meta > div { - max-width: 100%; -} - -/* new / edit media forms */ - -.formContainer { - padding-top: 1rem; -} - -.imageForm, -.videoForm { - padding: 1rem 1rem 0.5rem 1rem; - margin: 1rem 0; - position: relative; - left: -1rem; - border-radius: 10px; -} - -/* image form */ - -.imageForm { - background: #315; -} -.imageForm .fileInput .row { - position: relative; -} - -/* video form */ - -.videoForm { - background: #314; -} -.videoForm .thumbnail img { - max-height: 200px; -} - -/* image crop */ - -.imageSelection { - width: 30rem; - position: relative; -} -.imageSelection img { - display: block; - max-width: 100%; - max-height: 20rem; -} -.imageSelection img.loading { - opacity: 0.5; -} -.imageSelection .box { - position: absolute; - background: rgba(255,32,64,0.05); - border: 1px solid #f24; -} diff --git a/animism-align/frontend/views/media/media.reducer.js b/animism-align/frontend/views/media/media.reducer.js deleted file mode 100644 index cb9b91d..0000000 --- a/animism-align/frontend/views/media/media.reducer.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as types from '../../types' -import { session, getDefault, getDefaultInt } from '../../session' - -import { crudState, crudReducer } from '../../api/crud.reducer' - -const initialState = crudState('media', { - options: { - sort: 'author asc', - thumbnailSize: getDefault('upload.thumbnailSize', 'small'), - } -}) - -const reducer = crudReducer('media') - -export default function mediaReducer(state = initialState, action) { - // console.log(action.type, action) - state = reducer(state, action) - switch (action.type) { - default: - return state - } -} diff --git a/animism-align/frontend/views/nav/header.component.js b/animism-align/frontend/views/nav/header.component.js deleted file mode 100644 index efbaf08..0000000 --- a/animism-align/frontend/views/nav/header.component.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -// import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import { Link } from 'react-router-dom' - -import PlayButton from '../align/components/player/playButton.component' - -import './nav.css' - -function Header(props) { - return ( - <header> - <PlayButton /> - <div> - <Link to="/align">Align</Link> - <Link to="/paragraph">Transcript</Link> - <Link to="/media">Media</Link> - </div> - </header> - ) -} - -// const changeUsername = () => { -// const username = prompt("Please enter your username:", session('username')) -// if (username && username.length) { -// session.set('username', username) -// document.querySelector('Header div span').innerText = ' → ' + username // very naughty -// } -// } - - -const mapStateToProps = (state) => ({ - // auth: state.auth, - site: state.site, - // username: session.get('username'), - // isAuthenticated: state.auth.isAuthenticated, -}) - -const mapDispatchToProps = (dispatch) => ({ -}) - -export default connect(mapStateToProps, mapDispatchToProps)(Header) diff --git a/animism-align/frontend/views/nav/nav.css b/animism-align/frontend/views/nav/nav.css deleted file mode 100644 index 485ace2..0000000 --- a/animism-align/frontend/views/nav/nav.css +++ /dev/null @@ -1,73 +0,0 @@ -/* header */ - -header { - height: 3.125rem; - font-size: 0.875rem; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - background: rgba(32,16,64,0.8); - color: white; - z-index: 50; - position: relative; -} -header b { - font-weight: 900; -} -header a { - color: rgba(255,255,255,0.95); - text-decoration: none; - font-size: 0.875rem; - font-weight: 500; -} -header > div:first-child { - display: flex; - justify-content: flex-start; - align-items: center; - padding-left: 1.5rem; -} -header > div:last-child { - padding-right: 1.5rem; -} -header > div > button { - padding: 0.25rem; - margin: 0 0 0 0.5rem; - background: #000; - border-color: #888; - color: #888; -} -header > div > button:hover { - border-color: #fff; - color: #fff; -} -header > div:last-child a { - padding: 0.5rem; -} -header .btn-link:focus, -header .btn-link:hover, -header .btn-link:active, -header a:focus, -header a:hover, -header a:active { - text-decoration: none; - color: white; -} -header a:focus, -header a:hover, -header a:active { - color: white; -} -.menuToggle { - width: 1.625rem; - height: 1.625rem; - cursor: pointer; - line-height: 1; -} -header a.navbar-brand { - font-size: .8rem; -} - -header .username { - cursor: pointer; -}
\ No newline at end of file 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> - ) -} diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js deleted file mode 100644 index 4c54808..0000000 --- a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js +++ /dev/null @@ -1,206 +0,0 @@ -import React, { Component } from 'react' -import { Route } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import actions from '../../../actions' -import ParagraphForm from '../components/paragraph.form' - -const floatLT = (a,b) => ((a*10|0) < (b*10|0)) -const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b)) - -const MEDIA_TYPES = new Set(['image', 'gallery', 'vitrine', 'video']) - -class ParagraphList extends Component { - state = { - paragraphs: [], - currentParagraph: -1, - currentAnnotation: -1, - selectedParagraph: null, - selectedParagraphOffset: 0, - } - - constructor(props) { - super(props) - this.handleAnnotationClick = this.handleAnnotationClick.bind(this) - this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this) - this.handleCloseParagraphForm = this.handleCloseParagraphForm.bind(this) - this.updateSelectedParagraph = this.updateSelectedParagraph.bind(this) - } - - componentDidMount() { - this.build() - } - - componentDidUpdate(prevProps) { - if (this.props.paragraph !== prevProps.paragraph) { - this.build() - } - if (this.props.audio.play_ts === prevProps.audio.play_ts) return - this.setCurrentParagraph() - } - - setCurrentParagraph() { - const { play_ts } = this.props.audio - const insideParagraph = this.state.paragraphs.some(paragraph => { - if (floatLTE(paragraph.start_ts, play_ts) && floatLT(play_ts, paragraph.end_ts)) { - this.setCurrentAnnotation(paragraph, play_ts) - return true - } - return false - }) - if (!insideParagraph) { - this.setState({ - currentParagraph: -1, - currentAnnotation: -1, - }) - } - } - - setCurrentAnnotation(paragraph, play_ts) { - const { id: currentParagraph, annotations } = paragraph - let currentAnnotation - let annotation - let i = 0 - let len = annotations.length - for (let i = 0; i < len - 1; i++) { - if (floatLT(play_ts, annotations[i+1].start_ts)) { - currentAnnotation = annotations[i].id - break - } - } - if (!currentAnnotation) { - currentAnnotation = annotations[len-1].id - } - this.setState({ currentParagraph, currentAnnotation }) - } - - build() { - const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation - const { lookup: paragraphLookup } = this.props.paragraph - let currentParagraph = {} - const paragraphs = [] - // loop over the annotations in time order - annotationOrder.forEach((annotation_id, i) => { - const annotation = annotationLookup[annotation_id] - const paragraph = paragraphLookup[annotation.paragraph_id] - // if this annotation is media, insert it after the current paragraph - if (MEDIA_TYPES.has(annotation.type)) { - paragraphs.push({ - id: ('index_' + i), - type: annotation.type, - start_ts: annotation.start_ts, - end_ts: 0, - annotations: [annotation], - }) - return - } - // if this annotation is from a different paragraph, make a new paragraph - if (annotation.paragraph_id !== currentParagraph.id) { - const paragraph_type = getParagraphType(annotation, paragraph) - currentParagraph = { - id: annotation.paragraph_id || ('index_' + i), - type: paragraph_type, - start_ts: annotation.start_ts, - end_ts: 0, - annotations: [], - } - paragraphs.push(currentParagraph) - } - // if this annotation is a paragraph_end, set the end timestamp - if (annotation.type === 'paragraph_end') { - currentParagraph.end_ts = annotation.start_ts - } - // otherwise, just append this annotation to the paragraph - else { - currentParagraph.annotations.push(annotation) - } - }) - for (let i = 0; i < (paragraphs.length - 1); i++) { - if (!paragraphs[i].end_ts) { - paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1 - } - } - this.setState({ paragraphs }) - } - - handleAnnotationClick(e, paragraph, annotation){ - actions.audio.seek(annotation.start_ts) - } - handleParagraphDoubleClick(e, paragraph) { - console.log(e.target.parentNode) - let paragraphNode = e.target - if (!paragraphNode.classList.contains('paragraph')) { - paragraphNode = paragraphNode.parentNode - } - this.setState({ - selectedParagraph: { ...paragraph }, - selectedParagraphOffset: paragraphNode.offsetTop - }) - } - updateSelectedParagraph(selectedParagraph) { - this.setState({ selectedParagraph }) - } - handleCloseParagraphForm() { - this.setState({ selectedParagraph: null }) - } - - render() { - const { media, paragraphElementLookup } = this.props - const { paragraphs, selectedParagraph, selectedParagraphOffset, currentParagraph, currentAnnotation } = this.state - return ( - <div className='paragraphs'> - <div className='content'> - {paragraphs.map(paragraph => { - if (selectedParagraph && selectedParagraph.id === paragraph.id) { - paragraph = selectedParagraph - } - if (paragraph.type in paragraphElementLookup) { - const ParagraphElement = paragraphElementLookup[paragraph.type] - return ( - <ParagraphElement - key={paragraph.id} - paragraph={paragraph} - media={media} - currentParagraph={paragraph.id === currentParagraph} - currentAnnotation={paragraph.id === currentParagraph && currentAnnotation} - onAnnotationClick={this.handleAnnotationClick} - onDoubleClick={this.handleParagraphDoubleClick} - /> - ) - } else { - return <div key={paragraph.id}>{'(waiting to implement' + paragraph.type + ')'}</div> - } - })} - {selectedParagraph && - <ParagraphForm - paragraph={selectedParagraph} - onUpdate={this.updateSelectedParagraph} - onClose={this.handleCloseParagraphForm} - y={selectedParagraphOffset} - /> - } - </div> - </div> - ) - } -} - -const getParagraphType = (annotation, paragraph) => { - if (!paragraph) { - return annotation.type - } - return paragraph.type -} - -const mapStateToProps = state => ({ - paragraph: state.paragraph.index, - annotation: state.annotation.index, - audio: state.audio, - media: state.media.index, -}) - -const mapDispatchToProps = dispatch => ({ -}) - -export default connect(mapStateToProps, mapDispatchToProps)(ParagraphList) diff --git a/animism-align/frontend/views/paragraph/paragraph.container.js b/animism-align/frontend/views/paragraph/paragraph.container.js deleted file mode 100644 index 6035be8..0000000 --- a/animism-align/frontend/views/paragraph/paragraph.container.js +++ /dev/null @@ -1,70 +0,0 @@ -import React, { Component } from 'react' -import { Route } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import './paragraph.css' - -import actions from '../../actions' -import { Loader } from '../../common' - -import ParagraphList from './containers/paragraphList.container' -import { paragraphElementLookup } from '../components/paragraphTypes' - -class ParagraphContainer extends Component { - componentDidMount() { - this.bind() - } - componentWillUnmount() { - this.unbind() - } - bind() { - document.addEventListener('keydown', this.handleKeydown) - } - unbind() { - document.removeEventListener('keydown', this.handleKeydown) - } - handleKeydown(e) { - if (document.activeElement !== document.body) { - return - } - // console.log(e.keyCode) - switch (e.keyCode) { - case 32: // spacebar - e.preventDefault() - actions.audio.toggle() - break - case 37: // left - case 38: // up - e.preventDefault() - actions.audio.jump(-5.0) - break - case 39: // right - case 40: // down - e.preventDefault() - actions.audio.jump(5.0) - break - } - } - render() { - if (!this.props.annotation.lookup || !this.props.paragraph.lookup) { - return <div className='body loading'><Loader /></div> - } - return ( - <div className='body'> - <ParagraphList paragraphElementLookup={paragraphElementLookup} /> - </div> - ) - } -} - -const mapStateToProps = state => ({ - paragraph: state.paragraph.index, - annotation: state.annotation.index, -}) - -const mapDispatchToProps = dispatch => ({ - // alignActions: bindActionCreators({ ...alignActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(ParagraphContainer) diff --git a/animism-align/frontend/views/paragraph/paragraph.css b/animism-align/frontend/views/paragraph/paragraph.css deleted file mode 100644 index 8cd502c..0000000 --- a/animism-align/frontend/views/paragraph/paragraph.css +++ /dev/null @@ -1,93 +0,0 @@ -.paragraphs { - width: 100%; - height: calc(100% - 3.125rem); - overflow: scroll; - background: white; - color: black; - padding: 1rem; -} - -/* general paragraph styles */ - -.paragraphs .content { - font-family: 'Georgia', serif; - width: 650px; - margin: 0 auto; - padding-bottom: 6rem; - position: relative; -} - -.paragraphs .content > div { - margin-bottom: 16px; -} - -/* paragraph subtypes */ - -.paragraphs .header { - font-size: 32px; -} - -.paragraphs .paragraph { - font-size: 16px; - line-height: 24px; -} - -.paragraphs .blockquote { - padding-left: 3rem; -} - -.paragraphs .hidden { - opacity: 0.5; -} - -/* media image */ - -.paragraphs .media.image img { - width: 100%; -} - -/* current paragraph */ - -.paragraphs .paragraph.current { - background: rgba(0,0,0,0.0); -} - -/* sentences */ - -.paragraphs span { - margin-right: 4px; - cursor: pointer; -} - -.paragraphs .paragraph .current { - box-shadow: -2px -3px 0 #fff, - 2px -3px 0 #fff, - -2px 3px 0 #fff, - 2px 3px 0 #fff; - box-decoration-break: clone; - background: black; - color: white; -} - -/* paragraph form */ - -.paragraphForm { - position: absolute; - right: -305px; - width: 300px; - padding: 0.5rem; - background: #ddd; - box-shadow: 2px 2px 4px rgba(0,0,0,0.2); -} -.paragraphForm .select div { - color: #ddd; - font-family: 'Roboto', sans-serif; -} -.paragraphForm .row { - justify-content: space-between; - align-items: center; -} -.paragraphForm .row > div { - display: flex; - align-items: center; -} diff --git a/animism-align/frontend/views/paragraph/paragraph.reducer.js b/animism-align/frontend/views/paragraph/paragraph.reducer.js deleted file mode 100644 index 263aa07..0000000 --- a/animism-align/frontend/views/paragraph/paragraph.reducer.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as types from '../../types' -import { session, getDefault, getDefaultInt } from '../../session' - -import { crudState, crudReducer } from '../../api/crud.reducer' - -const initialState = crudState('paragraph', { - options: { - } -}) - -const reducer = crudReducer('paragraph') - -export default function paragraphReducer(state = initialState, action) { - // console.log(action.type, action) - state = reducer(state, action) - switch (action.type) { - default: - return state - } -} diff --git a/animism-align/frontend/views/site/component.template.js b/animism-align/frontend/views/site/component.template.js deleted file mode 100644 index a22d582..0000000 --- a/animism-align/frontend/views/site/component.template.js +++ /dev/null @@ -1,28 +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 * as uploadActions from './upload.actions' - -class ComponentTemplate extends Component { - componentDidMount() { - } - render() { - const { } = this.props - return ( - <div className=""> - </div> - ) - } -} - -const mapStateToProps = state => ({ -}) - -const mapDispatchToProps = dispatch => ({ - // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(ComponentTemplate) diff --git a/animism-align/frontend/views/site/site.actions.js b/animism-align/frontend/views/site/site.actions.js deleted file mode 100644 index c7c228e..0000000 --- a/animism-align/frontend/views/site/site.actions.js +++ /dev/null @@ -1,16 +0,0 @@ -import * as types from '../../types' -// import actions from '../../actions' -// import { session } from '../../session' -import { api, post, pad, preloadImage } from '../../util' - -export const loadPeaks = (asdf) => dispatch => { - api(dispatch, types.peaks, 'peaks', '/static/data_store/peaks/peaks.json') -} - -export const loadText = (asdf) => dispatch => { - api(dispatch, types.text, 'text', '/static/data_store/peaks/text.txt') -} - -export const updateText = text => dispatch => { - dispatch({ type: types.text.loaded, data: text }) -}
\ No newline at end of file diff --git a/animism-align/frontend/views/site/site.reducer.js b/animism-align/frontend/views/site/site.reducer.js deleted file mode 100644 index e80033f..0000000 --- a/animism-align/frontend/views/site/site.reducer.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as types from '../../types' -// import { session, getDefault, getDefaultInt } from '../../session' - -const initialState = { - peaks: { loading: true }, - text: { loading: true }, -} - -export default function siteReducer(state = initialState, action) { - // console.log(action.type, action) - // console.log(action.data) - switch (action.type) { - case types.peaks.loaded: - return { - ...state, - peaks: action.data, - } - case types.text.loaded: - return { - ...state, - text: action.data, - } - default: - return state - } -} diff --git a/animism-align/frontend/views/upload/components/upload.form.js b/animism-align/frontend/views/upload/components/upload.form.js deleted file mode 100644 index 2010088..0000000 --- a/animism-align/frontend/views/upload/components/upload.form.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' - -import { MenuButton, FileInput } from '../../../common' - -export default class UploadForm extends Component { - render() { - return ( - <div className='uploadForm'> - <MenuButton name="upload" label={false}> - <FileInput onChange={this.props.uploadActions.upload} /> - </MenuButton> - </div> - ) - } -} diff --git a/animism-align/frontend/views/upload/components/upload.index.js b/animism-align/frontend/views/upload/components/upload.index.js deleted file mode 100644 index 3a7ae4b..0000000 --- a/animism-align/frontend/views/upload/components/upload.index.js +++ /dev/null @@ -1,98 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' - -import { uploadUri, formatDateTime } from '../../../util' -import { MenuButton, SmallMenuButton, Loader } from '../../../common' -import actions from '../../../actions' - -import UploadIndexOptions from './upload.indexOptions' -import UploadMenu from './upload.menu' - -// const { result, collectionLookup } = this.props - -export default class UploadIndex extends Component { - componentDidMount() { - this.fetch(false) - } - - componentDidUpdate(prevProps) { - if (this.props.upload.options.sort !== prevProps.upload.options.sort) { - this.fetch(false) - } - } - - fetch(load_more) { - const { options, index } = this.props.upload - const { order: index_order } = index - const [ sort, order ] = options.sort.split('-') - actions.upload.index({ - sort, order, limit: 50, offset: load_more ? index_order.length : 0, - }, load_more) - } - - render() { - const { uploadActions } = this.props - const { options } = this.props.upload - const { loading, lookup, order } = this.props.upload.index - if (loading) { - return ( - <section> - <UploadIndexOptions /> - <div className="row"> - {order && !!order.length && - <div className={'results ' + options.thumbnailSize}> - {order.map(id => <UploadItem key={id} data={lookup[id]} />)} - </div> - } - </div> - <Loader /> - </section> - ) - } - if (!lookup || !order.length) { - return ( - <section> - <UploadIndexOptions /> - <div className="row"> - <UploadMenu uploadActions={uploadActions} /> - <p className='gray'> - {"No uploads"} - </p> - </div> - </section> - ) - } - return ( - <section> - <UploadIndexOptions /> - <div className="row"> - <UploadMenu uploadActions={uploadActions} /> - <div className={'results ' + options.thumbnailSize}> - {order.map(id => <UploadItem key={id} data={lookup[id]} />)} - </div> - </div> - {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>} - </section> - ) - } -} - -const UploadItem = ({ data }) => { - // console.log(data) - // const imageUri = uploadUri(data) - return ( - <div className='cell'> - <div className='img'> - <Link to={"/upload/" + data.id + "/show/"}> - <img src={data.url} alt={"Uploaded image"} /> - </Link> - </div> - <div className='meta center'> - <div> - {formatDateTime(data.created_at)} - </div> - </div> - </div> - ) -} - diff --git a/animism-align/frontend/views/upload/components/upload.indexOptions.js b/animism-align/frontend/views/upload/components/upload.indexOptions.js deleted file mode 100644 index 774bf22..0000000 --- a/animism-align/frontend/views/upload/components/upload.indexOptions.js +++ /dev/null @@ -1,61 +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 { Select, Checkbox } from '../../../common' - -const thumbnailOptions = [ - { name: 'th', label: 'Thumbnails', }, - { name: 'sm', label: 'Small', }, - { name: 'md', label: 'Medium', }, - { name: 'lg', label: 'Large', }, - { name: 'orig', label: 'Original', }, -] - -const sortOptions = [ - { name: 'id-asc', label: 'Most recent' }, - { name: 'id-desc', label: 'Oldest first' }, - { name: 'username-asc', label: 'Username (A-Z)' }, - { name: 'username-desc', label: 'Username (Z-A)' }, - // { name: '-asc', label: '' }, - // { name: '-desc', label: '' }, - // { name: '-asc', label: '' }, - // { name: '-desc', label: '' }, - // { name: '-asc', label: '' }, - // { name: '-desc', label: '' }, -] - -class IndexOptions extends Component { - render() { - const { options } = this.props - return ( - <div className='row menubar'> - <div /> - <Select - name={'sort'} - options={sortOptions} - selected={options.sort} - onChange={actions.upload.updateOption} - /> - <Select - name={'thumbnailSize'} - options={thumbnailOptions} - selected={options.thumbnailSize} - onChange={actions.upload.updateOption} - /> - </div> - ) - } -} - -const mapStateToProps = state => ({ - options: state.upload.options, -}) - -const mapDispatchToProps = dispatch => ({ -}) - -export default connect(mapStateToProps, mapDispatchToProps)(IndexOptions) diff --git a/animism-align/frontend/views/upload/components/upload.menu.js b/animism-align/frontend/views/upload/components/upload.menu.js deleted file mode 100644 index 37c7f0b..0000000 --- a/animism-align/frontend/views/upload/components/upload.menu.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' - -import { MenuButton, FileInput } from '../../../common' - -import actions from '../../../actions' - -export default class UploadMenu extends Component { - render() { - return ( - <div className='menuButtons'> - <MenuButton name="upload"> - <FileInput onChange={this.props.uploadActions.upload} /> - </MenuButton> - </div> - ) - } -} diff --git a/animism-align/frontend/views/upload/components/upload.show.js b/animism-align/frontend/views/upload/components/upload.show.js deleted file mode 100644 index 352caf3..0000000 --- a/animism-align/frontend/views/upload/components/upload.show.js +++ /dev/null @@ -1,69 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { connect } from 'react-redux' - -import actions from '../../../actions' -import { formatDate, formatTime, formatAge, uploadUri } from '../../../util' -import { history } from '../../../store' -import { Loader, MenuButton } from '../../../common' - -class UploadShow extends Component { - componentDidMount() { - actions.upload.show(this.props.match.params.id) - } - - componentDidUpdate(prevProps) { - if (prevProps.match.params.id !== this.props.match.params.id) { - actions.upload.show(this.props.match.params.id) - } - } - - handleDestroy() { - const { res: data } = this.props.upload.show - if (confirm("Really delete this upload?")) { - actions.upload.destroy(data).then(() => { - history.push('/upload/') - }) - } - } - - render() { - const { show, destroy } = this.props.upload - if (show.loading || destroy.loading) { - return <Loader /> - } - if (!show.loading && !show.res || show.not_found) { - return <div className='gray'>Upload {this.props.match.params.id} not found</div> - } - const { res: data } = show - return ( - <section className="row uploadShow"> - <div className="menuButtons"> - <MenuButton name="delete" onClick={this.handleDestroy.bind(this)} /> - </div> - <div> - <img src={data.url} /> - <div className='byline'> - {'Uploaded by '} - {data.username} - {' on '} - {formatDate(data.created_at)} - {' at '} - {formatTime(data.created_at)} - {'. '} - </div> - </div> - </section> - ) - } -} - -const mapStateToProps = state => ({ - upload: state.upload, -}) - -const mapDispatchToProps = dispatch => ({ - // searchActions: bindActionCreators({ ...searchActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(UploadShow) diff --git a/animism-align/frontend/views/upload/upload.actions.js b/animism-align/frontend/views/upload/upload.actions.js deleted file mode 100644 index c5d12e3..0000000 --- a/animism-align/frontend/views/upload/upload.actions.js +++ /dev/null @@ -1,18 +0,0 @@ -import * as types from '../../types' -import { store, history } from '../../store' -import { api, post, pad, preloadImage } from '../../util' -import actions from '../../actions' -import { session } from '../../session' - -export const upload = (image, tag='upload') => dispatch => { - const formData = { - image, - tag, - username: 'animism', // session('username'), - } - // console.log(formData) - return actions.upload.upload(formData).then(data => { - // console.log(data.res) - return data.res - }) -} diff --git a/animism-align/frontend/views/upload/upload.container.js b/animism-align/frontend/views/upload/upload.container.js deleted file mode 100644 index 0ad76c9..0000000 --- a/animism-align/frontend/views/upload/upload.container.js +++ /dev/null @@ -1,36 +0,0 @@ -import React, { Component } from 'react' -import { Route, Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import './upload.css' - -import actions from '../../actions' -import * as uploadActions from './upload.actions' - -import UploadMenu from './components/upload.menu' -import UploadIndex from './components/upload.index' -import UploadShow from './components/upload.show' - -class Container extends Component { - render() { - return ( - <div className='row upload'> - <div> - <Route exact path='/upload/:id/show/' component={UploadShow} /> - <UploadIndex {...this.props} /> - </div> - </div> - ) - } -} - -const mapStateToProps = state => ({ - upload: state.upload, -}) - -const mapDispatchToProps = dispatch => ({ - uploadActions: bindActionCreators({ ...uploadActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(Container) diff --git a/animism-align/frontend/views/upload/upload.css b/animism-align/frontend/views/upload/upload.css deleted file mode 100644 index 28ce33d..0000000 --- a/animism-align/frontend/views/upload/upload.css +++ /dev/null @@ -1,182 +0,0 @@ -.uploadShow { - margin-top: 1rem; -} -.uploadShow img { - max-width: 30rem; - max-height: 20rem; -} -.upload { - height: 100%; -} -.upload > div:last-child { - flex: 1; - width: 100%; -} - -/* results */ - -.resultsContainer { -} -.results { - display: flex; - flex-flow: row wrap; - justify-content: flex-start; - align-items: flex-end; -} -.results .result { - display: inline-block; - margin-right: 1.125rem; - margin-bottom: 1.125rem; -} -.result > a { - display: block; -} -.result > a > div { - position: relative; -} -.result img { - max-width: 100%; - display: block; - cursor: pointer; -} -.result > a { - border: 2px solid transparent; -} -.results .active img, -.desktop .result > a:hover { - border-color: #11f; -} -.results.th .result { - max-width: 10rem; -} -.results.sm .result { - max-width: 20rem; -} -.results.md .result { - max-width: 40rem; -} -.results.lg .result { - max-width: 80rem; -} -.results.orig .result { - max-width: 100%; -} -.results.th img { - max-height: 120px; -} -.results.sm img { - max-height: 160px; -} -.results.md img { - max-height: 480px; -} -.results.lg img { - max-height: 960px; -} -.results.orig img { - max-width: none; - max-height: none; -} -.results .img { - width: 100%; -} -.results .img > a { - display: inline-block; - position: relative; -} -.results .meta { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: baseline; - font-size: 0.75rem; - color: #888; - padding: 0.125rem; -} -.results .meta.center, -.row.center { - align-items: center; -} -.results .meta > div { - overflow: hidden; - max-width: 75%; - text-overflow: ellipsis; - white-space: nowrap; -} -.results .meta > span { - padding-right: 0.125rem; -} -.results .meta .buttons { -} -.score.good { - color: #11f; - font-weight: bold; -} -.score.ok { - color: #44d; - font-weight: bold; -} -.score.poor { - color: #66b; -} -.score { - color: #888; -} -.resultGroup { - display: flex; - flex-direction: row; - flex-wrap: wrap; - position: relative; - border: 2px solid #888; - max-width: 20rem; - margin-right: 1.5rem; - margin-bottom: 1.5rem; - background: #fff; - box-shadow: 0 2px 4px #888; -} -.resultGroup .sha256 { - position: absolute; - background: white; - padding: 0.25rem 0.25rem 0rem 0.25rem; - left: 0.25rem; - top: -0.75rem; - font-size: 0.75rem; - color: #333; - text-transform: uppercase; - max-width: 95%; - overflow: hidden; - text-overflow: ellipsis; -} -.results.grouped { - background: #fff; -} -.results.grouped.sm, -.results.grouped.md, -.results.grouped.lg, -.results.grouped.orig { - flex-flow: column nowrap; -} -.results.th .resultGroup { - max-width: 33.5rem; -} -.results.sm .resultGroup { - max-width: 56rem; -} -.results.md .resultGroup { - max-width: 79rem; -} -.results.lg .resultGroup { - max-width: 100%; -} -.results.orig .resultGroup { - max-width: 100%; -} -.results .resultGroup .result { - margin: 0.5rem; -} -.loadMore { - width: 100%; -} -.loadMore button { - width: 100%; -} diff --git a/animism-align/frontend/views/upload/upload.reducer.js b/animism-align/frontend/views/upload/upload.reducer.js deleted file mode 100644 index db12819..0000000 --- a/animism-align/frontend/views/upload/upload.reducer.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as types from '../../types' -import { session, getDefault, getDefaultInt } from '../../session' - -import { crudState, crudReducer } from '../../api/crud.reducer' - -const initialState = crudState('upload', { - options: { - sort: getDefault('upload.sort', 'id-desc'), - thumbnailSize: getDefault('upload.thumbnailSize', 'small'), - } -}) - -const reducer = crudReducer('upload') - -export default function uploadReducer(state = initialState, action) { - // console.log(action.type, action) - state = reducer(state, action) - switch (action.type) { - default: - return state - } -} |