path: root/animism-align/frontend/app/views/viewer/viewer.actions.js

import * as types from 'app/types'
import { store, history, dispatch } from 'app/store'
import actions from 'app/actions'
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,
  no_audio: !!annotation.settings.no_audio,
  section_nav_color: annotation.settings.section_nav_color || 'white',
})

// 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 = {}
  let seenMedia = {}

  // 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).sort().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)) {
      const media = mediaLookup[annotation.settings.media_id]
      // fetch the media and add it to the list of media (TODO: handle carousels)
      if (!media.settings.hide_in_bibliography && !(media.id in seenMedia)) {
        currentSection.media.push({
          start_ts: annotation.start_ts,
          media
        })
        seenMedia[media.id] = true
      }

      // get the display string for this media type
      // console.log(annotation.type, media.type)
      if (annotation.type in MEDIA_LABEL_TYPES) {
        currentMediaLabels[MEDIA_LABEL_TYPES[annotation.type]] = true
      }

      // increment the media tally
      mediaIndex += 1

      // non-fullscreen (or 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).sort().join(', ')
    currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder, currentSection.index)
    currentSection.duration = 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
    }
    currentSection.duration = currentSection.end_ts - currentSection.start_ts
  }

  // 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 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] })
}

const getNextSection = section => {
  const { sections } = store.getState().viewer
  if (section.index === sections.length - 1) {
    return null
  }
  return sections[section.index + 1]
}

export const reachedEndOfSection = () => dispatch => {
  actions.audio.pause()
  dispatch({ type: types.viewer.reached_end_of_section })
}

export const setCurrentSection = (currentSection, nextSection) => dispatch => {
  dispatch({ type: types.viewer.set_current_section, currentSection, nextSection })
}

export const seekToSection = section => dispatch => {
  actions.viewer.setCurrentSection(section, getNextSection(section))
  actions.audio.seek(section.start_ts)
  actions.audio.play()
  actions.viewer.hideComponent('nav')
}

export const seekToMediaItem = (section, mediaItem) => dispatch => {
  actions.viewer.setCurrentSection(section, getNextSection(section))
  actions.audio.seek(mediaItem.start_ts)
  actions.audio.play()
  actions.viewer.hideComponent('nav')
  actions.viewer.hideComponent('checklist')
}

export const openVitrineModal = (media, id) => dispatch => {
  console.log(media)
  const index = media.settings.image_order.indexOf(id)
  dispatch({ type: types.viewer.open_vitrine_modal, media, index })
}
export const closeVitrineModal = (media, id) => dispatch => {
  dispatch({ type: types.viewer.close_vitrine_modal })
}
export const setVitrineIndex = (index) => dispatch => {
  dispatch({ type: types.viewer.set_vitrine_index, index })
}

export const openGrowl = message => dispatch => {
  dispatch({ type: types.viewer.open_growl, message })
}
export const closeGrowl = () => dispatch => {
  dispatch({ type: types.viewer.close_growl })
}