diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
8 files changed, 189 insertions, 30 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js new file mode 100644 index 0000000..31a4176 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js @@ -0,0 +1,41 @@ +import React from 'react' + +import { MediaCitation, Vitrine } from '../components.utility' + +export const FullscreenVitrine = ({ element, media, transitionDuration }) => { + const { color } = element + const item = media.lookup[element.settings.media_id] + const style = { + backgroundColor: color.backgroundColor, + color: color.textColor, + transitionDuration, + } + console.log(item) + return ( + <div + className='fullscreen-element vitrine' + style={style} + > + {element.settings.title && <div className='heading'>{element.settings.title}</div>} + <Vitrine media={item} /> + <MediaCitation media={item} /> + </div> + ) +} + +export const FullscreenGallery = ({ element, media, transitionDuration }) => { + const { color } = element + const item = media.lookup[element.settings.media_id] + const style = { + backgroundColor: color.backgroundColor, + color: color.textColor, + transitionDuration, + } + return ( + <div + className='fullscreen-element gallery' + style={style} + > + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js index f533123..538632f 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js @@ -9,6 +9,10 @@ import { } from './fullscreen.video' import { + FullscreenVitrine +} from './fullscreen.gallery' + +import { FullscreenCurtain } from './fullscreen.utility' @@ -16,4 +20,6 @@ export const fullscreenComponents = { curtain: React.memo(FullscreenCurtain), video: React.memo(FullscreenVideo), image: React.memo(FullscreenImage), + // gallery: React.memo(FullscreenGallery), + vitrine: React.memo(FullscreenVitrine), } diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js index 0312a8f..0e2d205 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js @@ -1,31 +1,6 @@ import React, { Component } from 'react' -export const MediaCitation = ({ media }) => { - if (media.citation) { - return ( - <div className='citation' dangerouslySetInnerHTML={{ _html: media.citation }} /> - ) - } - return ( - <div className='citation'> - {media.author} - {', '} - {media.pre_title} - <i>{media.title}</i> - {media.post_title} - {'. '} - {media.date && ( - ' ' + media.date + '.' - )} - {media.medium && ( - ' ' + media.medium + '.' - )} - {media.source && ( - ' ' + media.source.trim() - )} - </div> - ) -} +import { MediaCitation } from '../components.utility' export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { if (!media.lookup) return <div /> diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js index 2b3449c..fc24f9e 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js @@ -1,9 +1,8 @@ import React, { Component } from 'react' import VimeoPlayer from '@u-wave/react-vimeo' -import { - CURTAIN_COLOR_LOOKUP, -} from 'app/constants' -import { MediaCitation } from './inline.image' + +import { CURTAIN_COLOR_LOOKUP } from 'app/constants' +import { MediaCitation } from '../components.utility' export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { if (!media.lookup) return <div /> diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/index.js b/animism-align/frontend/app/views/viewer/player/components.utility/index.js new file mode 100644 index 0000000..be38cac --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.utility/index.js @@ -0,0 +1,14 @@ +import React from 'react' + +import { + MediaCitation +} from './media.citation' + +import { + Vitrine +} from './media.vitrine' + +export { + MediaCitation, + Vitrine, +}
\ No newline at end of file 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 new file mode 100644 index 0000000..7b3212d --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react' + +export const MediaCitation = ({ media }) => { + if (media.settings.bibliography) { + return ( + <div className='citation' dangerouslySetInnerHTML={{ __html: media.settings.bibliography }} /> + ) + } + return ( + <div className='citation'> + {media.author} + {', '} + {media.pre_title} + <i>{media.title}</i> + {media.post_title} + {'. '} + {media.date && ( + ' ' + media.date + '.' + )} + {media.medium && ( + ' ' + media.medium + '.' + )} + {media.source && ( + ' ' + media.source.trim() + )} + </div> + ) +} + diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js new file mode 100644 index 0000000..abe0241 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react' + +import { ZoomPlus } from '../../nav/viewer.icons.js' + +export const Vitrine = ({ media }) => { + const { image_order, image_lookup, thumbnail_lookup } = media.settings + const width = (Math.floor(100 / image_order.length * 2) - 2) + 'vw' + console.log(width) + return ( + <div className='vitrine-items'> + {image_order.map(id => { + const thumbnail = thumbnail_lookup[id] + return ( + <VitrineItem key={id} image={thumbnail} width={width} /> + ) + })} + </div> + ) +} + +const VitrineItem = ({ image, width }) => { + return ( + <div className='vitrine-item' style={{ width }}> + <div className='vitrine-image'> + <img src={image.url} /> + </div> + {ZoomPlus} + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css index 8d38fa0..29f68c2 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -53,3 +53,68 @@ background-repeat: no-repeat; background-position: center center; } + +/* vitrine */ + +.viewer-fullscreen .fullscreen-element.vitrine { + flex-direction: column; + justify-content: space-between; + align-items: center; +} +.vitrine .heading { + font-family: "Freight Text", serif; + font-size: 3rem; + line-height: 1.28; + width: 80%; + margin: 0 auto; + padding-bottom: 2rem; + text-align: center; +} +.vitrine .citation { + width: 45rem; + margin: 0 auto; + padding: 1rem 0; + font-family: "Neue Haas Unica"; + color: #888; +} + +.viewer-fullscreen .fullscreen-element.vitrine .heading { + margin-top: 4rem; +} +.viewer-fullscreen .fullscreen-element.vitrine .citation { + margin-bottom: 3rem; +} + +.vitrine-items { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + padding: 0 1rem; +} +.vitrine-items .vitrine-item { + display: flex; + flex-flow: column nowrap; + align-items: center; + justify-content: space-between; + height: calc(45vh - 7rem); +} +.vitrine-items .vitrine-item .vitrine-image { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 80%; + cursor: pointer; +} +.vitrine-items .vitrine-item .vitrine-image img { + max-width: 100%; + max-height: 100%; + pointer-events: none; +} +.vitrine-items .vitrine-item .zoomPlus { + cursor: pointer; +} +.vitrine-items .vitrine-item:hover .zoomPlus path { + stroke: #000; +} |