Implement a pane to display picture info like in Google Photos

[amikem]

Hi,
i want to build a plugin to display the picture information and some actions in a right pane like in Google Photos (see screenshot)

I started already building the plugin and could achieve displaying it as an overlay on the picture. Now i am struggling how to add the pane (in the pane i want to render my MUI component to display some data and provide some inline actions)

This is what i could achieve

This is my code

import { useLightboxState } from 'yet-another-react-lightbox/core'
import { useImageInfo } from './InfoContext'
import { styled } from '@mui/material/styles'
import { useEffect, useState } from 'react'
import { printFileSize } from 'src/utils/FileLib'

const InfoContainer = styled('div')(() => ({
  position: 'absolute',
  left: 0,
  right: 0,
  padding: '16px',
  background: 'rgba(0, 0, 0, 0.5)',
  WebkitTransform: 'translateZ(0)',
  bottom: 0
}))

const InfoSection = styled('div')(() => ({
  overflow: 'hidden',
  hyphens: 'auto',
  display: '-webkit-box',
  webkitBoxOrient: 'vertical',
  WebkitLineClamp: 3,
  textAlign: 'start',
  color: 'white'
}))

const InfoComponent = () => {
  const { slides, currentIndex } = useLightboxState()
  const [data, setData] = useState<any>(null)
  const { visible } = useImageInfo()



  useEffect(() => {
    setData(null)
    if (visible) {
      //call the API and set the data
    
    }
  }, [currentIndex, dispatch, slides, visible])

  return (
    <>
      {visible && data && (
        <InfoContainer>
          <InfoSection>
            Filename: {data.filename} <br />
            Size: {printFileSize(data.size)} / {data.picture.width} x {data.picture.height}
            <br />
            Object: {data.relatedObject?.type} {data.relatedObject?.name} <br />
       
          </InfoSection>
        </InfoContainer>
      )}
    </>
  )
}
export default InfoComponent

import { PluginProps } from 'yet-another-react-lightbox/dist/types'
import InfoButton from './InfoButton'
import { InfoContextProvider } from './InfoContext'
import { createModule, addToolbarButton } from 'yet-another-react-lightbox/core'
import InfoComponent from './InfoComponent'

const Info = ({ augment, addModule }: PluginProps) => {
  augment(({ render: { slideFooter: renderFooter, ...restRender }, toolbar, ...rest }) => ({
    render: {
      slideFooter: ({ slide }) => (
        <>
          {renderFooter?.({ slide })} <InfoComponent />
        </>
      ),
      ...restRender
    },
    toolbar: addToolbarButton(toolbar, 'Info', <InfoButton key='Info' />),
    ...rest
  }))
  addModule(createModule('Info', InfoContextProvider))
}

export default Info


import Tooltip from '@mui/material/Tooltip'

import IconButton from '@mui/material/IconButton'
import InformationOutline from 'mdi-material-ui/InformationOutline'
import { useLightboxState } from 'yet-another-react-lightbox/core'
import { useImageInfo } from './InfoContext'

function InfoButton() {
  const { slides } = useLightboxState()
  const { toogle } = useImageInfo()

  const onClickInfo = () => {
    console.log('enable/disable InfoContext')
    toogle()
  }

  return (
    <>
      <Tooltip title='Info'>
        <IconButton
          size='small'
          component='a'
          disabled={slides.length === 0}
          sx={{ textDecoration: 'none' }}
          onClick={onClickInfo}
          style={{ color: 'white' }}
        >
          <InformationOutline />
        </IconButton>
      </Tooltip>
    </>
  )
}
export default InfoButton

Thanks

[igordanchenko]

Since you want to render a sidebar outside the lightbox, you probably want to render your sidebar panel before the Controller module. You can achieve this by adding your component as a parent of the Controller module.

Here is a working demo - https://codesandbox.io/p/sandbox/yet-another-react-lightbox-121-6spot4?file=%2Fsrc%2FApp.tsx

Please let me know if that's what you had in mind.

[amikem]

It works like a charm. Many thanks for your suggestions