diff options
10 files changed, 38 insertions, 5 deletions
diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js index 75da7ed..3c0ec6f 100644 --- a/animism-align/frontend/app/types.js +++ b/animism-align/frontend/app/types.js @@ -32,6 +32,7 @@ export const viewer = with_type('viewer', [ 'set_nav_style', 'set_media_title', 'open_vitrine_modal', 'close_vitrine_modal', 'set_vitrine_index', 'open_growl', 'close_growl', + 'open_footnote', ]) export const site = with_type('site', [ diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css index 4738493..c156fba 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.css +++ b/animism-align/frontend/app/views/viewer/nav/nav.css @@ -46,6 +46,8 @@ display: flex; justify-content: center; align-items: center; +} +.viewer-nav > .main-nav > div { width: 32%; } .viewer-nav > .nav-row > div:nth-child(1) { 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 d6702bb..a5e4d12 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.js +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js @@ -29,6 +29,9 @@ class PlayerTranscript extends Component { handleAnnotationClick(e, paragraph, annotation) { // console.log(annotation) + if (annotation.type === 'footnote') { + return actions.viewer.openFootnote(annotation) + } if (annotation.settings.override_start_ts) { const ts = timestampToSeconds(annotation.settings.override_start_ts) if (ts) { diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css index 0d72429..3c2d5b8 100644 --- a/animism-align/frontend/app/views/viewer/sections/footnotes.css +++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css @@ -59,6 +59,7 @@ line-height: 1.3; font-family: "Freight Text", serif; padding: 0.25rem 0; + margin-bottom: 3rem; } .nav-footnotes-gradient { position: absolute; @@ -67,6 +68,7 @@ width: 100%; height: 2rem; background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + pointer-events: none } .nav-footnotes .note-element { display: flex; diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css index fd48f55..8843a09 100644 --- a/animism-align/frontend/app/views/viewer/sections/sections.css +++ b/animism-align/frontend/app/views/viewer/sections/sections.css @@ -32,7 +32,8 @@ background: black; padding: 0; } -.sections-nav.viewer-nav > .nav-row > div { +.sections-nav.viewer-nav > .nav-row > div.link-element, +.sections-nav.viewer-nav > .nav-row > div.link { width: auto; } .sections-nav .link { @@ -164,4 +165,5 @@ position: relative; left: -0.5rem; padding: 0.5rem 0 0.2rem 0; + cursor: pointer; } diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js index f8c6cba..fa5142f 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js @@ -30,7 +30,7 @@ class ViewerSectionsFootnotes extends Component { } scrollToFootnote() { const { currentFootnote } = this.props - const id = currentFootnote.footnote_id - 1 + const id = currentFootnote - 1 const pos = this.state.scrollPositions[id] this.scrollRef.current.scrollTo(0, pos - 5) } diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js index 1c0f49d..d0f1dbd 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js @@ -15,7 +15,7 @@ class ViewerSectionsNav extends Component { <div className="viewer-nav sections-nav"> <div className='nav-row'> - <div className="checklist-element" onClick={() => { + <div className="checklist-element link-element" onClick={() => { actions.viewer.hideNavComponent('credits') actions.viewer.toggleNavComponent('checklist') }}> @@ -25,7 +25,7 @@ class ViewerSectionsNav extends Component { </div> </div> - <div className="credits-element" onClick={() => { + <div className="credits-element link-element" onClick={() => { actions.viewer.hideNavComponent('checklist') actions.viewer.toggleNavComponent('credits') }}> diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js index 4ef47b9..b12fc18 100644 --- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js +++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js @@ -108,6 +108,9 @@ class Transcript extends Component { } handleAnnotationClick(e, paragraph, annotation) { + if (annotation.type === 'footnote') { + return actions.viewer.openFootnote(annotation) + } actions.viewer.seekToTimestamp(paragraph.start_ts) this.updateScrollPosition(paragraph.start_ts + 0.1, annotation.type === 'section_heading') } diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index f251e08..6645e44 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -251,6 +251,12 @@ export const toggleNavComponent = key => dispatch => { } export const toggleComponent = key => dispatch => { + hideNavElementsNotMatchedBy(key)(dispatch) + const state = store.getState().viewer + dispatch({ type: types.viewer.toggle_component, key, value: !state[key] }) +} + +export const hideNavElementsNotMatchedBy = key => dispatch => { const state = store.getState().viewer if (key !== "share" && state.share) { dispatch({ type: types.viewer.toggle_component, key: "share", value: false }) @@ -261,7 +267,6 @@ export const toggleComponent = key => dispatch => { if (key !== "subscribe" && state.subscribe) { dispatch({ type: types.viewer.toggle_component, key: "subscribe", value: false }) } - dispatch({ type: types.viewer.toggle_component, key, value: !state[key] }) } export const openTranscript = () => dispatch => { @@ -342,6 +347,15 @@ export const setSectionFromTimestamp = play_ts => dispatch => { } } +/* footnotes */ + +export const openFootnote = (annotation) => dispatch => { + console.log(annotation) + dispatch({ type: types.viewer.open_footnote, footnote_id: annotation.footnote_id }) + hideNavElementsNotMatchedBy('footnotes')(dispatch) + showComponent('footnotes')(dispatch) +} + /* vitrine modal */ export const openVitrineModal = (media, color, id) => dispatch => { diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js index 20911d6..587ae0f 100644 --- a/animism-align/frontend/app/views/viewer/viewer.reducer.js +++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js @@ -151,6 +151,12 @@ export default function viewerReducer(state = initialState, action) { } } + case types.viewer.open_footnote: + return { + ...state, + currentFootnote: action.footnote_id + } + default: return state } |