diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
7 files changed, 124 insertions, 32 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js index eb43e23..277a237 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js @@ -1,7 +1,7 @@ import React from 'react' import { CURTAIN_COLOR_LOOKUP } from 'app/constants' -import { MediaCitation, Vitrine, Gallery } from '../components.utility' +import { MediaCitation, Vitrine, Gallery, Carousel } from '../components.utility' export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { const annotation = paragraph.annotations[0] @@ -18,9 +18,9 @@ export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnot > {annotation.settings.title && <div className='heading'>{annotation.settings.title}</div>} <Vitrine media={item} /> - <MediaCitation media={item} /> </div> ) + // <MediaCitation media={item} /> } export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { @@ -43,3 +43,24 @@ export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnot </div> ) } + +export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { + const annotation = paragraph.annotations[0] + const item = media.lookup[annotation.settings.media_id] + const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white + const style = { + backgroundColor: color.backgroundColor, + color: color.textColor, + } + + return ( + <div + className='inline-element media carousel' + > + <div style={style} className='carousel-container'> + <Carousel media={item} /> + </div> + <MediaCitation media={item} /> + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js index 943b02a..084fbf4 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js @@ -4,7 +4,7 @@ export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, o let className = 'site-intro' const annotation = paragraph.annotations[0] const item = media.lookup[annotation.settings.media_id] - console.log(item) + // console.log(item) const style = { backgroundImage: 'url(' + item.settings.file.url + ')', } 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 fc24f9e..e34bfa6 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 @@ -16,7 +16,7 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati color: color.textColor, } if (!item) return <div>Media not found: {annotation.settings.media_id}</div> - console.log(annotation.settings) + // console.log(annotation.settings) return ( <div className={className} 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 index c3ef614..c4ac419 100644 --- a/animism-align/frontend/app/views/viewer/player/components.utility/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.utility/index.js @@ -12,8 +12,13 @@ import { Gallery } from './media.gallery' +import { + Carousel +} from './media.carousel' + export { MediaCitation, Vitrine, Gallery, + Carousel, }
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js new file mode 100644 index 0000000..cfd1e48 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.utility/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.utility/media.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css index 624e493..6ad5d0a 100644 --- a/animism-align/frontend/app/views/viewer/player/components.utility/media.css +++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.css @@ -1,13 +1,9 @@ -/* gallery */ +/* carousel */ -.gallery { -} -.keen-slider { -} -.gallery-container { +.carousel-container { padding: 1rem; } -.gallery-item { +.carousel-item { height: calc(100vh - 9rem); width: 50vw; background-size: contain; @@ -15,6 +11,47 @@ background-repeat: no-repeat; } +/* gallery */ + +.gallery-container { + overflow-x: scroll; + width: 100%; + padding: 1rem; +} +.gallery-scroll { + display: flex; + flex-direction: row nowrap; + justify-content: flex-start; + align-items: flex-start; +} +.gallery-item { + height: 25rem; + max-height: 90vh; + padding-right: 1rem; +} +.gallery-item img { + height: 100%; +} + +.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; +} + + /* vitrine */ .vitrine .heading { diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js index d92f360..0d08c11 100644 --- a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js +++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js @@ -1,36 +1,29 @@ import React, { Component } from 'react' -import { useKeenSlider } from "keen-slider/react" -import "keen-slider/keen-slider.min.css" export const Gallery = ({ 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(display_lookup) // console.log(width) return ( - <div ref={sliderRef} className='keen-slider gallery-items'> - {image_order.map(id => { - const image = display_lookup[id] - console.log(image) - return ( - <GalleryItem key={id} image={image} /> - ) - })} + <div className='gallery-items'> + <div className='gallery-scroll'> + {image_order.map(id => { + const image = display_lookup[id] + // console.log(image) + return ( + <GalleryItem key={id} image={image} /> + ) + })} + </div> </div> ) } const GalleryItem = ({ image }) => { return ( - <div className='keen-slider__slide gallery-item' style={{ - backgroundImage: 'url(' + image.url + ')', - }} /> + <div className='gallery-item'> + <img src={image.url} /> + </div> ) } |