diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player/components.media')
7 files changed, 382 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/index.js b/animism-align/frontend/app/views/viewer/player/components.media/index.js new file mode 100644 index 0000000..4fcf649 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.media/index.js @@ -0,0 +1,29 @@ +import React from 'react' + +import { + MediaCitation +} from './media.citation' + +import { + Vitrine +} from './media.vitrine' + +import { + Gallery +} from './media.gallery' + +import { + Carousel +} from './media.carousel' + +import { + Grid +} from './media.grid' + +export { + MediaCitation, + Vitrine, + Gallery, + Carousel, + Grid, +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js new file mode 100644 index 0000000..cfd1e48 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js @@ -0,0 +1,36 @@ +import React, { Component } from 'react' +import { useKeenSlider } from "keen-slider/react" +import "keen-slider/keen-slider.min.css" + +export const Carousel = ({ media }) => { + const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings + + const [sliderRef] = useKeenSlider({ + slidesPerView: 2, + mode: "free-snap", + spacing: 15, + centered: true, + loop: false + }); + // console.log(display_lookup) + // console.log(width) + return ( + <div ref={sliderRef} className='keen-slider carousel-items'> + {image_order.map(id => { + const image = display_lookup[id] + console.log(image) + return ( + <CarouselItem key={id} image={image} /> + ) + })} + </div> + ) +} + +const CarouselItem = ({ image }) => { + return ( + <div className='keen-slider__slide carousel-item' style={{ + backgroundImage: 'url(' + image.url + ')', + }} /> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.citation.js b/animism-align/frontend/app/views/viewer/player/components.media/media.citation.js new file mode 100644 index 0000000..14c8c53 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.citation.js @@ -0,0 +1,33 @@ +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 && ( + media.pre_title + ' ' + )} + <i>{media.title}</i> + {media.post_title && ( + ' ' + 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.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css new file mode 100644 index 0000000..62eb9af --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css @@ -0,0 +1,157 @@ +/* carousel */ + +.carousel-container { + margin-top: 0.5rem; + margin-bottom: 1.5rem; + padding: 1rem; +} +.carousel-item { + height: calc(100vh - 9rem); + width: 50vw; + background-size: contain; + background-position: center center; + background-repeat: no-repeat; +} + +/* gallery */ + +.gallery-container { + overflow-x: scroll; + width: 100%; + padding: 1rem 1rem 0.5rem 1rem; + margin-bottom: 1.5rem; +} +.gallery-scroll { + display: flex; + flex-direction: row nowrap; + justify-content: flex-start; + align-items: flex-start; +} +.gallery-item { + padding-right: 1rem; +} +.gallery-image { + display: flex; + justify-content: center; + align-items: center; + height: 25rem; +} +.gallery-image img { + display: block; + max-height: 25rem; +} +.gallery-caption { + margin-top: 0.5rem; + color: #888; +} + +.gallery-container::-webkit-scrollbar { + cursor: pointer; + user-select: none; + height: 4px +} +.gallery-container::-webkit-scrollbar-button { + display: block; + width: 0; + height: 0; +} +.gallery-container::-webkit-scrollbar-track-piece { + background:rgba(211,211,211,0.8); +} +.gallery-container::-webkit-scrollbar-thumb { + display: block; + background: #000; +} + +/* grid */ + +.grid-container { + margin: 0 auto 1.5rem auto; + width: 45rem; + display: flex; + flex-flow: row wrap; + align-items: flex-start; + justify-content: flex-start; +} +.grid-item { + width: 22rem; + margin-bottom: 0.5rem; +} +.grid-item:nth-child(odd) { + margin-right: 1rem; +} +.grid-item img { + display: block; + width: 22rem; +} +.grid-caption { + margin-top: 0.5rem; + color: #888; +} + +/* vitrine */ + +.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; +} +.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 - 6rem); +} +.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 .cross { + stroke: #000; + stroke-width: 0.5; +} +.vitrine-items .vitrine-item:hover .zoomPlus .ring { + fill: #fff; +} +.vitrine-items .vitrine-item .zoomPlus .ring-inner { + stroke: transparent; + fill: transparent; +} +.vitrine-items .vitrine-item:hover .zoomPlus .ring-inner { + fill: #fff; + stroke: #fff; +} +.inline-element.vitrine .heading { + padding-top: 8rem; +} diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.media/media.gallery.js new file mode 100644 index 0000000..da83c4f --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.gallery.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react' + +import { CURTAIN_COLOR_LOOKUP } from 'app/constants' + +export const Gallery = ({ media, annotation }) => { + const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings + const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white + const style = { + backgroundColor: color.backgroundColor, + // color: color.textColor, + } + + // console.log(display_lookup) + // console.log(width) + return ( + <div style={style} className='gallery-container'> + <div className='gallery-items'> + <div className='gallery-scroll'> + {image_order.map(id => { + const image = display_lookup[id] + const caption = (caption_lookup && caption_lookup[id]) || {} + // console.log(image) + return ( + <GalleryItem key={id} image={image} caption={caption} /> + ) + })} + </div> + </div> + </div> + ) +} + +const GalleryItem = ({ image, caption }) => { + // console.log(image) + return ( + <div className='gallery-item'> + <div className='gallery-image'> + <img src={image.url} /> + </div> + {caption.caption && ( + <div className='gallery-caption'> + {caption.caption} + </div> + )} + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.grid.js b/animism-align/frontend/app/views/viewer/player/components.media/media.grid.js new file mode 100644 index 0000000..93b8696 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.grid.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react' + +import { CURTAIN_COLOR_LOOKUP } from 'app/constants' + +export const Grid = ({ media, annotation }) => { + const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings + const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white + const style = { + // backgroundColor: color.backgroundColor, + // color: color.textColor, + } + // console.log(display_lookup) + // console.log(width) + return ( + <div style={style} className='grid-container'> + {image_order.map(id => { + const image = display_lookup[id] + const caption = (caption_lookup && caption_lookup[id]) || {} + // console.log(image) + return ( + <GridItem key={id} image={image} caption={caption} /> + ) + })} + </div> + ) +} + +const GridItem = ({ image, caption }) => { + // console.log(image) + return ( + <div className='grid-item'> + <div className='grid-image'> + <img src={image.url} /> + </div> + {caption.caption && ( + <div className='grid-caption'> + {caption.caption} + </div> + )} + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js new file mode 100644 index 0000000..2033465 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js @@ -0,0 +1,38 @@ +import React, { Component } from 'react' + +import { ZoomPlus } from '../../nav/viewer.icons.js' + +import actions from 'app/actions' + +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} + media={media} + id={id} + image={thumbnail} + width={width} + /> + ) + })} + </div> + ) +} + +const VitrineItem = ({ media, id, image, width }) => { + return ( + <div className='vitrine-item' style={{ width }} onClick={() => actions.viewer.openVitrineModal(media, id)}> + <div className='vitrine-image'> + <img src={image.url} /> + </div> + {ZoomPlus} + </div> + ) +} |