diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
7 files changed, 67 insertions, 31 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js index 6ca7ec8..a048fa1 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js @@ -9,7 +9,7 @@ export const FullscreenVideo = ({ element, media, transitionDuration }) => { color: color.textColor, transitionDuration, } - console.log(item, window.innerWidth, window.innerHeight) + console.log(item) return ( <div className='fullscreen-element video' diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js index 7b3212d..14c8c53 100644 --- a/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js +++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js @@ -10,9 +10,13 @@ export const MediaCitation = ({ media }) => { <div className='citation'> {media.author} {', '} - {media.pre_title} + {media.pre_title && ( + media.pre_title + ' ' + )} <i>{media.title}</i> - {media.post_title} + {media.post_title && ( + ' ' + media.post_title + )} {'. '} {media.date && ( ' ' + media.date + '.' diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js index 0ac5662..8a23720 100644 --- a/animism-align/frontend/app/views/viewer/player/player.container.js +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -36,6 +36,7 @@ class PlayerContainer extends Component { } return false }) + if (!insideSection) { actions.viewer.setCurrentSection(sections[sections.length-1], null) } diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js index a4acef9..133653d 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js @@ -27,6 +27,7 @@ class PlayerFullscreen extends Component { const elements = timeline.filter(element => ( floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1) )) + console.log(elements) if (elements.length) { const lastElement = elements[elements.length - 1] if (lastElement.color && lastElement.color.textColor === '#ffffff') { diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css index a94b712..0ca84a2 100644 --- a/animism-align/frontend/app/views/viewer/sections/sections.css +++ b/animism-align/frontend/app/views/viewer/sections/sections.css @@ -8,7 +8,6 @@ background: black; color: white; display: block; - white-space: nowrap; transition: transform 0.2s; transform: translateZ(0) translateY(25rem); border-top: 1px solid #fff; @@ -17,10 +16,37 @@ transform: translateZ(0) translateY(0); } .checklist-open .viewer-sections { - transform: translateZ(0) translateY(calc(3rem - 100vh)); + transform: translateZ(0) translateY(calc(3rem - 100vh - 4px)); z-index: 20; } +/* scrolling part */ + +.viewer-sections .viewer-sections-scroll { + width: 100%; + white-space: nowrap; + overflow-y: auto; +} +.viewer-sections-scroll::-webkit-scrollbar { + cursor: pointer; + user-select: none; + height: 4px +} +.viewer-sections-scroll::-webkit-scrollbar-button { + display: block; + width: 0; + height: 0; +} +.viewer-sections-scroll::-webkit-scrollbar-track-piece { + background:rgba(211,211,211,0.8); +} +.viewer-sections-scroll::-webkit-scrollbar-thumb { + display: block; + background: #000; +} + +/* clickable section indicators */ + .viewer-sections .viewer-section { display: inline-flex; white-space: normal; diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js index f4abbd6..4bb61ec 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js @@ -12,29 +12,31 @@ class ViewerSections extends Component { const { sections } = this.props return ( <div className="viewer-sections"> - {sections.map(section => { - // console.log(section) - return ( - <div - className="viewer-section" - key={section.index} - onClick={() => actions.viewer.seekToSection(section)} - > - <div> - <div className="section-thumbnail" style={{ - backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0].media) + ')', - }}/> - <div className="section-title"> - {ROMAN_NUMERALS[section.index]}<br /> - {section.title} - </div> - <div className="section-media"> - {section.mediaLabels} + <div className="viewer-sections-scroll"> + {sections.map(section => { + // console.log(section) + return ( + <div + className="viewer-section" + key={section.index} + onClick={() => actions.viewer.seekToSection(section)} + > + <div> + <div className="section-thumbnail" style={{ + backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0].media) + ')', + }}/> + <div className="section-title"> + {ROMAN_NUMERALS[section.index]}<br /> + {section.title} + </div> + <div className="section-media"> + {section.mediaLabels} + </div> </div> </div> - </div> - ) - })} + ) + })} + </div> <ViewerSectionsNav /> </div> ) diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index 1547606..ae2bf5b 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -80,10 +80,12 @@ export const loadSections = () => dispatch => { 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 - }) + if (!media.settings.hide_in_bibliography) { + currentSection.media.push({ + start_ts: annotation.start_ts, + media + }) + } // get the display string for this media type if (media.type in MEDIA_LABEL_TYPES) { @@ -93,7 +95,7 @@ export const loadSections = () => dispatch => { // increment the media tally mediaIndex += 1 - // non-fullscreen, inline media should be displayed in the transcript. + // non-fullscreen (or fullscreen-inline) media should be displayed in the transcript. if (!annotation.settings.fullscreen || annotation.settings.inline) { sectionTextAnnotationOrder.push(annotation.id) } |