diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
4 files changed, 36 insertions, 12 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js index 781378e..fb949db 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js @@ -13,6 +13,11 @@ import { } from './inline.image' import { + InlineGallery, + InlineVitrine, +} from './inline.gallery' + +import { Intro } from './inline.utility' @@ -27,4 +32,6 @@ export const inlineComponents = { video: React.memo(MediaVideo), image: React.memo(MediaImage), intro: React.memo(Intro), + vitrine: InlineVitrine, + gallery: InlineGallery, } 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 34a8633..70ad8ac 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,37 +1,39 @@ import React from 'react' +import { CURTAIN_COLOR_LOOKUP } from 'app/constants' import { MediaCitation, Vitrine } from '../components.utility' -export const InlineVitrine = ({ element, media, transitionDuration }) => { - const { color } = element - const item = media.lookup[element.settings.media_id] +export const InlineVitrine = ({ 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, - transitionDuration, } return ( <div - className='media vitrine' + className='inline-element media vitrine' style={style} > + {annotation.settings.title && <div className='heading'>{annotation.settings.title}</div>} <Vitrine media={item} /> <MediaCitation media={item} /> </div> ) } -export const InlineGallery = ({ element, media, transitionDuration }) => { - const { color } = element - const item = media.lookup[element.settings.media_id] +export const InlineGallery = ({ 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, - transitionDuration, } return ( <div - className='media gallery' + className='inline-element media gallery' style={style} > </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 index abe0241..b2c7944 100644 --- 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 @@ -5,7 +5,7 @@ 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) + // console.log(width) return ( <div className='vitrine-items'> {image_order.map(id => { diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css b/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css index 171ab84..7acf601 100644 --- a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css +++ b/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css @@ -46,6 +46,21 @@ .vitrine-items .vitrine-item .zoomPlus { cursor: pointer; } -.vitrine-items .vitrine-item:hover .zoomPlus path { +.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; +}
\ No newline at end of file |