summaryrefslogtreecommitdiff
path: root/animism-align/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'animism-align/frontend')
-rw-r--r--animism-align/frontend/app/utils/transcript.utils.js25
-rw-r--r--animism-align/frontend/app/views/paragraph/components/paragraph.list.js2
-rw-r--r--animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js2
-rw-r--r--animism-align/frontend/app/views/viewer/player/player.transcript.css11
-rw-r--r--animism-align/frontend/app/views/viewer/player/player.transcript.js2
5 files changed, 33 insertions, 9 deletions
diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js
index 445a255..258afa1 100644
--- a/animism-align/frontend/app/utils/transcript.utils.js
+++ b/animism-align/frontend/app/utils/transcript.utils.js
@@ -114,16 +114,27 @@ export const buildParagraphs = (annotationOrder, sectionCount, footnoteCount) =>
})
// finally, go over the paragraphs to fix some timestamps
- for (let i = 0; i < (paragraphs.length - 1); i++) {
+ const len = paragraphs.length
+ paragraphs.forEach((paragraph, i) => {
// update the end_ts, if none is set
- if (!paragraphs[i].end_ts) {
- paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
+ if (!paragraph.end_ts) {
+ // successive paragraphs get it from the next paragraph
+ if (i < len - 1) {
+ paragraph.end_ts = paragraph.start_ts - 0.1
+ }
+ // the last paragraph checks its last annotation.
+ else {
+ const { annotations } = paragraph
+ const lastAnnotation = annotations[annotations.length - 1]
+ paragraph.end_ts = lastAnnotation.end_ts || (lastAnnotation.start_ts + 0.1)
+ }
}
- // push the timestamp for media to the next paragraph
- if (paragraphs[i].isMedia) {
- paragraphs[i].start_ts = paragraphs[i+1].start_ts - 0.01
+ // push the timestamp for media up a tick so it sorts above paragraphs
+ if (paragraph.isMedia) {
+ paragraph.start_ts = paragraph.start_ts - 0.01
}
- }
+ })
+
return { paragraphs, footnotes }
}
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index dadf8c8..a8f32b3 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -19,6 +19,7 @@ class ParagraphList extends Component {
setCurrentParagraph() {
const { play_ts } = this.props.audio
+
const insideParagraph = this.props.paragraphs.some(paragraph => {
if (floatInRange(paragraph.start_ts, play_ts, paragraph.end_ts)) {
this.setCurrentAnnotation(paragraph, play_ts)
@@ -37,6 +38,7 @@ class ParagraphList extends Component {
setCurrentAnnotation(paragraph, play_ts) {
const { id: currentParagraph, annotations } = paragraph
const possibleAnnotations = annotations.filter(a => a.type === 'sentence')
+ // console.log(possibleAnnotations)
if (!possibleAnnotations.length) return
let currentAnnotation
let annotation
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
index 20f45c7..2eadda7 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
@@ -71,7 +71,7 @@ export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAn
? 'current'
: ''
}
- onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
+ onClick={e => onAnnotationClick(e, paragraph, annotation)}
dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
/>
)
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 24b677b..c6853cb 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -144,6 +144,17 @@
color: #000;
transition: all 0.1s;
}
+.player-transcript .pullquote span:hover {
+ box-shadow: -3px -2px 0 #e8e8e8,
+ 3px -2px 0 #e8e8e8,
+ -3px 2px 0 #e8e8e8,
+ 3px 2px 0 #e8e8e8;
+ box-decoration-break: clone;
+ background: #e8e8e8;
+ color: #000;
+ cursor: pointer;
+ transition: all 0.1s;
+}
.player-transcript .paragraph {
position: relative;
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index fc0b3ea..15d376a 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -38,7 +38,7 @@ class PlayerTranscript extends Component {
actions.audio.seek(ts)
}
} else {
- actions.audio.seek(paragraph.start_ts)
+ actions.audio.seek(annotation.start_ts)
}
actions.audio.play()
}