1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
import * as types from 'app/types'
import { store, history, dispatch } from 'app/store'
import {
MEDIA_ANNOTATION_TYPES, MEDIA_LABEL_TYPES,
TEXT_ANNOTATION_TYPES,
INLINE_UTILITY_ANNOTATION_TYPES,
FULLSCREEN_UTILITY_ANNOTATION_TYPES,
CURTAIN_COLOR_LOOKUP,
} from 'app/constants'
import { buildParagraphs } from 'app/utils/transcript.utils'
import { annotationFadeTimings } from 'app/utils/annotation.utils'
const newSection = (annotation, index, mediaIndex) => ({
start_ts: annotation.start_ts,
end_ts: 0,
title: annotation.text,
media: [],
index,
mediaIndex,
})
// build the list of sections from the raw annotation list.
export const loadSections = () => dispatch => {
// list of all sections
let sections = []
// current section being processed (i.e. last section)
let currentSection
// keep tally of all media, so that we can display them with correct IDs in the checklist
let mediaIndex = 0
let eventIndex = 0
// dedupe the labels that we see in each section
let currentMediaLabels = {}
// keep track of all annotations that constitute the "text" of the essay
// these include sentences, headings, and inline media. used to build paragraphs, then reset.
let sectionTextAnnotationOrder = []
// keep track of all annotations that constitute fullscreen events.
// these include curtains, title cards, and fullscreen media.
let fullscreenTimeline = []
// fetch all annotations and media
const state = store.getState()
const { timeline } = state.align
const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index
const { lookup: mediaLookup } = state.media.index
// loop over the annotations in time order.
annotationOrder.forEach((annotation_id, i) => {
// fetch the current annotation
const annotation = annotationLookup[annotation_id]
// we have reached a new section.
if (annotation.type === 'section_heading') {
// finish off the previous section.
if (currentSection) {
currentSection.mediaLabels = Object.keys(currentMediaLabels).join(', ')
currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder, currentSection.index)
currentSection.end_ts = currentSection.paragraphs[currentSection.paragraphs.length - 1].end_ts
}
// create a new section and reset state variables
currentSection = newSection(annotation, sections.length, mediaIndex)
currentMediaLabels = {}
sectionTextAnnotationOrder = []
// add this new section to the list!
sections.push(currentSection)
}
// sanity check. ignore everything before the first section.
if (!currentSection) {
return
}
// add media to the current section.
if (MEDIA_ANNOTATION_TYPES.has(annotation.type)) {
// fetch the media and add it to the list of media (TODO: handle carousels)
const media = mediaLookup[annotation.settings.media_id]
currentSection.media.push({
start_ts: annotation.start_ts,
media
})
// get the display string for this media type
if (media.type in MEDIA_LABEL_TYPES) {
currentMediaLabels[MEDIA_LABEL_TYPES[media.type]] = true
}
// increment the media tally
mediaIndex += 1
// non-fullscreen, inline media should be displayed in the transcript.
if (!annotation.settings.fullscreen || annotation.settings.inline) {
sectionTextAnnotationOrder.push(annotation.id)
}
}
// build timeline of special inline items
if (INLINE_UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
sectionTextAnnotationOrder.push(annotation.id)
}
// build timeline of fullscreen events
if (FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) {
const event = makeFullscreenEvent(eventIndex++, annotation)
fullscreenTimeline.push(event)
}
// add text annotations to section annotation order
if (TEXT_ANNOTATION_TYPES.has(annotation.type)) {
sectionTextAnnotationOrder.push(annotation.id)
}
})
// finished processing all annotations. finish off the last section.
if (currentSection) {
currentSection.mediaLabels = Object.keys(currentMediaLabels).join(', ')
currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder, currentSection.index)
currentSection.end_ts = timeline.duration
}
// set the end_ts for each section (i.e. just before the next section starts)
for (let i = 0; i < sections.length - 1; i++) {
currentSection = sections[i]
if (currentSection.end_ts === 0) {
currentSection.end_ts = sections[i+1].start_ts - 1
}
}
console.log(sections)
// console.log(fullscreenTimeline)
dispatch({ type: types.viewer.load_sections, sections, fullscreenTimeline })
}
const makeFullscreenEvent = (index, annotation) => {
const timing = annotationFadeTimings(annotation)
const event = {
...timing,
annotation,
index,
settings: annotation.settings,
type: annotation.type,
}
if (annotation.settings.color) {
event.color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
}
return event
}
export const setCurrentSection = section => dispatch => {
dispatch({ type: types.viewer.set_current_section, section })
}
export const setNavStyle = color => dispatch => {
dispatch({ type: types.viewer.set_nav_style, color })
}
export const showComponent = key => dispatch => {
dispatch({ type: types.viewer.toggle_component, key, value: true })
}
export const hideComponent = key => dispatch => {
dispatch({ type: types.viewer.toggle_component, key, value: false })
}
export const toggleComponent = key => dispatch => {
dispatch({ type: types.viewer.toggle_component, key, value: !store.getState().viewer[key] })
}
|
