diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player/components.utility')
3 files changed, 73 insertions, 0 deletions
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> + ) +} |