displaying media annotations. delete annotations

4 files changed, 36 insertions, 8 deletions

diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index 38a2bc7..077799a 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -99,6 +99,7 @@ canvas {
 .script {
   align-self: flex-end;
   height: 100%;
+  z-index: 1;
 }
 
 /* Annotations */
@@ -144,7 +145,7 @@ canvas {
 /* Annotation index */
 
 .annotationIndex {
-  width: 405px;
+  width: 800px;
 }
 .annotationIndex .annotation {
   position: absolute;
@@ -165,7 +166,9 @@ canvas {
   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;
 }
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js
index 0a71233..eb5c0ad 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -23,6 +23,7 @@ class AnnotationForm extends Component {
     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() {
@@ -91,6 +92,18 @@ class AnnotationForm extends Component {
         })
     }
   }
+  handleDestroy() {
+    const { annotation } = this.props
+    if (annotation.id === 'new') {
+      actions.align.hideAnnotationForm()
+    } else {
+      actions.annotation.destroy(annotation)
+        .then(response => {
+          console.log(response)
+          actions.align.hideAnnotationForm()
+        })
+    }
+  }
   render() {
     const { timeline, annotation } = this.props
     if (!annotation.start_ts) return <div></div>
@@ -122,7 +135,10 @@ class AnnotationForm extends Component {
           />
           <div className='ts'>{timestamp(annotation.start_ts, 1, true)}</div>
         </div>
-        <button onClick={this.handleSubmit}>Save</button>
+        <div>
+          {annotation.id !== 'new' && <button onClick={this.handleDestroy}>Delete</button>}
+          <button onClick={this.handleSubmit}>Save</button>
+        </div>
       </div>
     )
   }
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.index.js b/animism-align/frontend/views/align/components/annotations/annotation.index.js
index 3a78dd4..dae64df 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js
@@ -32,7 +32,7 @@ class AnnotationIndex extends Component {
     let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
     let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel
 
-    let timeMin = start_ts - 30.0
+    let timeMin = start_ts - 50.0
     let timeMax = Math.min(start_ts + widthTimeDuration, duration)
 
     const items = order.filter(id => {
@@ -113,7 +113,7 @@ const mapStateToProps = state => ({
   timeline: state.align.timeline,
   annotationInForm: state.align.annotation,
   index: state.annotation.index,
-  media: state.media.index,
+  media: state.media.index.lookup,
 })
 
 const mapDispatchToProps = dispatch => ({
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.types.js b/animism-align/frontend/views/align/components/annotations/annotation.types.js
index b927a12..309e42e 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.types.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.types.js
@@ -58,6 +58,17 @@ export const AnnotationParagraphEnd = ({ y, annotation, selected, onClick, onDou
 export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDoubleClick }) => {
   const { start_ts, text } = annotation
   const className = selected ? 'annotation media video selected' : 'annotation media video'
+  console.log(media)
+  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
@@ -77,9 +88,7 @@ export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDou
       onDoubleClick={e => onDoubleClick(e, annotation)}
     >
       <div className='img'>
-        <Link to={"/media/" + data.id + "/edit/"}>
-          <img src={thumbnailURL(data)} alt={data.title} />
-        </Link>
+        <img src={thumbnailURL(data)} alt={data.title} />
       </div>
       <div className='meta center'>
         <div>