Work on media interaction
This commit is contained in:
parent
9c84336d34
commit
66bb46912a
|
@ -205,7 +205,6 @@ export const MediaThumbnail = ({
|
|||
MediaThumbnail.propTypes = {
|
||||
media: PropTypes.object.isRequired,
|
||||
onSelectImage: PropTypes.func,
|
||||
minWidth: PropTypes.number.isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
active: PropTypes.bool.isRequired,
|
||||
setPresenting: PropTypes.func.isRequired,
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { useQuery, gql } from '@apollo/client'
|
||||
import TimelineGroupDate from './TimelineGroupDate'
|
||||
import styled from 'styled-components'
|
||||
import PresentView from '../photoGallery/presentView/PresentView'
|
||||
|
||||
const MY_TIMELINE_QUERY = gql`
|
||||
query myTimeline {
|
||||
|
@ -12,11 +14,22 @@ const MY_TIMELINE_QUERY = gql`
|
|||
}
|
||||
media {
|
||||
id
|
||||
title
|
||||
type
|
||||
thumbnail {
|
||||
url
|
||||
width
|
||||
height
|
||||
}
|
||||
highRes {
|
||||
url
|
||||
width
|
||||
height
|
||||
}
|
||||
videoWeb {
|
||||
url
|
||||
}
|
||||
favorite
|
||||
}
|
||||
mediaTotal
|
||||
date
|
||||
|
@ -30,6 +43,51 @@ const GalleryWrapper = styled.div`
|
|||
`
|
||||
|
||||
const TimelineGallery = () => {
|
||||
const [activeIndex, setActiveIndex] = useState({
|
||||
dateGroup: -1,
|
||||
albumGroup: -1,
|
||||
media: -1,
|
||||
})
|
||||
const [presenting, setPresenting] = useState(false)
|
||||
|
||||
const nextMedia = () => {
|
||||
setActiveIndex(activeIndex => {
|
||||
const albumGroups = dateGroupedAlbums[activeIndex.dateGroup].groups
|
||||
const albumMedia = albumGroups[activeIndex.albumGroup].media
|
||||
|
||||
if (activeIndex.media < albumMedia.length - 1) {
|
||||
return {
|
||||
...activeIndex,
|
||||
media: activeIndex.media + 1,
|
||||
}
|
||||
}
|
||||
|
||||
if (activeIndex.albumGroup < albumGroups.length - 1) {
|
||||
return {
|
||||
...activeIndex,
|
||||
albumGroup: activeIndex.albumGroup + 1,
|
||||
media: 0,
|
||||
}
|
||||
}
|
||||
|
||||
if (activeIndex.dateGroup < dateGroupedAlbums.length - 1) {
|
||||
return {
|
||||
dateGroup: activeIndex.dateGroup + 1,
|
||||
albumGroup: 0,
|
||||
media: 0,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
dateGroup: 0,
|
||||
albumGroup: 0,
|
||||
media: 0,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const previousMedia = () => {}
|
||||
|
||||
const { data, error } = useQuery(MY_TIMELINE_QUERY)
|
||||
|
||||
if (error) {
|
||||
|
@ -37,8 +95,9 @@ const TimelineGallery = () => {
|
|||
}
|
||||
|
||||
let timelineGroups = null
|
||||
let dateGroupedAlbums = []
|
||||
if (data?.myTimeline) {
|
||||
const dateGroupedAlbums = data.myTimeline.reduce((acc, val) => {
|
||||
dateGroupedAlbums = data.myTimeline.reduce((acc, val) => {
|
||||
if (acc.length == 0 || acc[acc.length - 1].date != val.date) {
|
||||
acc.push({
|
||||
date: val.date,
|
||||
|
@ -51,12 +110,51 @@ const TimelineGallery = () => {
|
|||
return acc
|
||||
}, [])
|
||||
|
||||
timelineGroups = dateGroupedAlbums.map(({ date, groups }) => (
|
||||
<TimelineGroupDate key={date} date={date} groups={groups} />
|
||||
timelineGroups = dateGroupedAlbums.map(({ date, groups }, i) => (
|
||||
<TimelineGroupDate
|
||||
key={date}
|
||||
date={date}
|
||||
groups={groups}
|
||||
activeIndex={
|
||||
activeIndex.dateGroup == i
|
||||
? activeIndex
|
||||
: { albumGroup: -1, media: -1 }
|
||||
}
|
||||
setPresenting={setPresenting}
|
||||
onSelectDateGroup={({ media, albumGroup }) => {
|
||||
setActiveIndex({
|
||||
media,
|
||||
albumGroup,
|
||||
dateGroup: i,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
return <GalleryWrapper>{timelineGroups}</GalleryWrapper>
|
||||
return (
|
||||
<GalleryWrapper>
|
||||
{timelineGroups}
|
||||
{presenting && (
|
||||
<PresentView
|
||||
media={
|
||||
dateGroupedAlbums &&
|
||||
dateGroupedAlbums[activeIndex.dateGroup].groups[
|
||||
activeIndex.albumGroup
|
||||
].media[activeIndex.media]
|
||||
}
|
||||
nextImage={nextMedia}
|
||||
previousImage={previousMedia}
|
||||
setPresenting={setPresenting}
|
||||
/>
|
||||
)}
|
||||
</GalleryWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
TimelineGallery.propTypes = {
|
||||
favorites: PropTypes.bool,
|
||||
setFavorites: PropTypes.func,
|
||||
}
|
||||
|
||||
export default TimelineGallery
|
||||
|
|
|
@ -7,7 +7,7 @@ const MediaWrapper = styled.div`
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
height: 210px;
|
||||
position: relative;
|
||||
margin: -4px;
|
||||
|
||||
|
@ -30,19 +30,20 @@ const GroupAlbumWrapper = styled.div`
|
|||
margin-top: 12px;
|
||||
`
|
||||
|
||||
const TimelineGroupAlbum = ({ group: { album, media /* mediaTotal */ } }) => {
|
||||
const mediaElms = media.map(media => (
|
||||
const TimelineGroupAlbum = ({
|
||||
group: { album, media /* mediaTotal */ },
|
||||
onSelectMedia,
|
||||
setPresenting,
|
||||
activeIndex,
|
||||
}) => {
|
||||
const mediaElms = media.map((media, i) => (
|
||||
<MediaThumbnail
|
||||
key={media.id}
|
||||
media={media}
|
||||
onSelectImage={() => {
|
||||
// todo
|
||||
}}
|
||||
setPresenting={() => {
|
||||
// todo
|
||||
}}
|
||||
index={0}
|
||||
active={false}
|
||||
onSelectImage={onSelectMedia}
|
||||
setPresenting={setPresenting}
|
||||
index={i}
|
||||
active={activeIndex == i}
|
||||
/>
|
||||
))
|
||||
|
||||
|
@ -56,6 +57,9 @@ const TimelineGroupAlbum = ({ group: { album, media /* mediaTotal */ } }) => {
|
|||
|
||||
TimelineGroupAlbum.propTypes = {
|
||||
group: PropTypes.object.isRequired,
|
||||
onSelectMedia: PropTypes.func.isRequired,
|
||||
setPresenting: PropTypes.func.isRequired,
|
||||
activeIndex: PropTypes.number.isRequired,
|
||||
}
|
||||
|
||||
export default TimelineGroupAlbum
|
||||
|
|
|
@ -18,9 +18,26 @@ const DateTitle = styled.h1`
|
|||
margin: 0 0 -12px;
|
||||
`
|
||||
|
||||
const TimelineGroupDate = ({ date, groups }) => {
|
||||
const groupElms = groups.map(group => (
|
||||
<TimelineGroupAlbum key={`${group.date}_${group.album.id}`} group={group} />
|
||||
const TimelineGroupDate = ({
|
||||
date,
|
||||
groups,
|
||||
onSelectDateGroup,
|
||||
activeIndex,
|
||||
setPresenting,
|
||||
}) => {
|
||||
const albumGroupElms = groups.map((group, i) => (
|
||||
<TimelineGroupAlbum
|
||||
key={`${group.date}_${group.album.id}`}
|
||||
group={group}
|
||||
onSelectMedia={mediaIndex => {
|
||||
onSelectDateGroup({
|
||||
media: mediaIndex,
|
||||
albumGroup: i,
|
||||
})
|
||||
}}
|
||||
activeIndex={activeIndex.albumGroup == i ? activeIndex.media : -1}
|
||||
setPresenting={setPresenting}
|
||||
/>
|
||||
))
|
||||
|
||||
const formattedDate = dateFormatter.format(new Date(date))
|
||||
|
@ -28,7 +45,7 @@ const TimelineGroupDate = ({ date, groups }) => {
|
|||
return (
|
||||
<GroupDateWrapper>
|
||||
<DateTitle>{formattedDate}</DateTitle>
|
||||
<div>{groupElms}</div>
|
||||
<div>{albumGroupElms}</div>
|
||||
</GroupDateWrapper>
|
||||
)
|
||||
}
|
||||
|
@ -36,6 +53,9 @@ const TimelineGroupDate = ({ date, groups }) => {
|
|||
TimelineGroupDate.propTypes = {
|
||||
date: PropTypes.string.isRequired,
|
||||
groups: PropTypes.array.isRequired,
|
||||
onSelectDateGroup: PropTypes.func.isRequired,
|
||||
activeIndex: PropTypes.object.isRequired,
|
||||
setPresenting: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default TimelineGroupDate
|
||||
|
|
Loading…
Reference in New Issue