From 1b63314e7ad42c819df0e804abe9e359a1ed3127 Mon Sep 17 00:00:00 2001 From: object Date: Tue, 20 Sep 2022 19:54:49 +0000 Subject: [PATCH] New photo gallery on camera - Issue #128 --- src/api/room/widgets/IPhotoData.ts | 12 ++- .../views/CameraWidgetShowPhotoView.tsx | 89 +++++++++++++++++++ .../furniture/FurnitureExternalImageView.tsx | 25 +++--- .../widgets/furniture/FurnitureWidgets.scss | 15 ++++ .../useFurnitureExternalImageWidget.ts | 48 ++++++++-- 5 files changed, 166 insertions(+), 23 deletions(-) create mode 100644 src/components/camera/views/CameraWidgetShowPhotoView.tsx diff --git a/src/api/room/widgets/IPhotoData.ts b/src/api/room/widgets/IPhotoData.ts index 05441767..9a7b846c 100644 --- a/src/api/room/widgets/IPhotoData.ts +++ b/src/api/room/widgets/IPhotoData.ts @@ -29,4 +29,14 @@ export interface IPhotoData * photo image url */ w?: string; -} + + /** + * owner id + */ + oi?: number; + + /** + * owner name + */ + o?: string; +} \ No newline at end of file diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx new file mode 100644 index 00000000..bcd926c8 --- /dev/null +++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx @@ -0,0 +1,89 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { FC, useEffect, useState } from 'react'; +import { GetUserProfile, IPhotoData, LocalizeText } from '../../../api'; +import { Flex, Grid, Text } from '../../../common'; + +export interface CameraWidgetShowPhotoViewProps +{ + photo: any; + photos: any; + isActive: boolean; +} + +export const CameraWidgetShowPhotoView: FC = props => +{ + const { photo = null, photos = null, isActive = false } = props; + const [ photoImg, setPhotoImg ] = useState(photo); // photo is default value when clicked the photo + const [ imgIndex, setImgIndex ] = useState(0); + + if(!photo) return null; + + const next = () => + { + let newImgCount = 0; + + if (imgIndex >= photos.length) setImgIndex(0); + + setImgIndex(prevValue => + { + newImgCount = (prevValue + 1); + + return newImgCount; + }); + + setPhotoImg(photos[imgIndex]); + } + + const previous = () => + { + let newImgCount = 0; + + if (imgIndex <= 0) setImgIndex(photos.length); + + setImgIndex(prevValue => + { + newImgCount = (prevValue - 1); + + return newImgCount; + }); + + setPhotoImg(photos[imgIndex]); + } + + const openProfile = (ownerId: number) => + { + GetUserProfile(ownerId); + } + + useEffect(() => + { + setPhotoImg(photoImg); + + if (imgIndex >= photos.length) setImgIndex(0); + if (imgIndex < 0) setImgIndex(photos.length); + + }, [ photoImg ]); + + return ( + (isActive) && + + + { !photoImg.w && + { LocalizeText('camera.loading') } } + + { photoImg.m && photoImg.m.length && + { photoImg.m } } + + { (photoImg.n || '') } + { new Date(photoImg.t * 1000).toLocaleDateString() } + + { (photos.length > 1) && + + previous() } /> + openProfile(photoImg.oi) }>{ photoImg.o } + next() } /> + + } + + ); +} diff --git a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx index c014d2c9..b40145d1 100644 --- a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx +++ b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx @@ -1,28 +1,25 @@ import { FC } from 'react'; -import { LocalizeText } from '../../../../api'; -import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common'; import { useFurnitureExternalImageWidget } from '../../../../hooks'; +import { CameraWidgetShowPhotoView } from '../../../camera/views/CameraWidgetShowPhotoView'; export const FurnitureExternalImageView: FC<{}> = props => { - const { objectId = -1, photoData = null, onClose = null } = useFurnitureExternalImageWidget(); + const { objectId = -1, photoData = [], photoCliked = null, onClose = null } = useFurnitureExternalImageWidget(); if((objectId === -1) || !photoData) return null; - + return ( - - { !photoData.w && - { LocalizeText('camera.loading') } } - - { photoData.m && photoData.m.length && - { photoData.m } } - - { (photoData.n || '') } - { new Date(photoData.t * 1000).toLocaleDateString() } - + { photoData.map((photoView, index) => + { + const isActive = photoView.w === photoCliked.w ? true : false; + + return + }) + } ); diff --git a/src/components/room/widgets/furniture/FurnitureWidgets.scss b/src/components/room/widgets/furniture/FurnitureWidgets.scss index e7d8bdf2..519dd098 100644 --- a/src/components/room/widgets/furniture/FurnitureWidgets.scss +++ b/src/components/room/widgets/furniture/FurnitureWidgets.scss @@ -44,10 +44,25 @@ } .nitro-external-image-widget { + .picture-preview { width: 320px; height: 320px; } + + .picture-preview-buttons { + display: flex; + align-items: center; + justify-content: space-between; + color: black; + } + + .picture-preview-buttons-previous, .picture-preview-buttons-next { + color: #222; + background-color: white; + padding: 10px; + border-radius: 50%; + } } .nitro-gift-opening { diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts index 5c6a6b17..6e0fc5c4 100644 --- a/src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts +++ b/src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts @@ -1,34 +1,66 @@ -import { RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer'; -import { useState } from 'react'; +import { RoomEngineTriggerWidgetEvent, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer'; +import { useEffect, useState } from 'react'; import { GetRoomEngine, IPhotoData } from '../../../../api'; import { useRoomEngineEvent } from '../../../events'; import { useFurniRemovedEvent } from '../../engine'; +import { useRoom } from '../../useRoom'; const useFurnitureExternalImageWidgetState = () => { const [ objectId, setObjectId ] = useState(-1); const [ category, setCategory ] = useState(-1); - const [ photoData, setPhotoData ] = useState(null); + const [ photoData, setPhotoData ] = useState([]); + const [ photoCliked, setPhotoCliked ] = useState(null); + const { roomSession = null } = useRoom(); + + if (!roomSession) return null; const onClose = () => { setObjectId(-1); setCategory(-1); - setPhotoData(null); + setPhotoData([]); + setPhotoCliked(null); } + useEffect(() => + { + setPhotoData(photoData); + + }, [ photoData ]); + useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_EXTERNAL_IMAGE, event => { const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category); + const roomTotalImages = GetRoomEngine().getRoomObjects(roomSession?.roomId, RoomObjectCategory.WALL); if(!roomObject) return; - const data = roomObject.model.getValue(RoomObjectVariable.FURNITURE_DATA); - const photoData = (JSON.parse(data) as IPhotoData); + let imgs = [ { s: null, t: null, u: '', w: '', oi: '', o: '' } ]; + imgs.shift(); + + roomTotalImages.forEach(object => + { + if(object.id < 0) return null; + + if (object.type == 'external_image_wallitem_poster_small') // Photo image + { + const data = object.model.getValue(RoomObjectVariable.FURNITURE_DATA); + const ownerId = object.model.getValue(RoomObjectVariable.FURNITURE_OWNER_ID); + const ownerName = object.model.getValue(RoomObjectVariable.FURNITURE_OWNER_NAME); + imgs.push({ s: JSON.parse(data).s, t: JSON.parse(data).t, u: JSON.parse(data).u, w: JSON.parse(data).w, oi: ownerId, o: ownerName }); + } + }); + + const photoData = JSON.parse(JSON.stringify(imgs)); + const dataCliked = roomObject.model.getValue(RoomObjectVariable.FURNITURE_DATA); + + const photoDataCliked = (JSON.parse(dataCliked) as IPhotoData); setObjectId(event.objectId); setCategory(event.category); setPhotoData(photoData); + setPhotoCliked(photoDataCliked); }); useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event => @@ -38,7 +70,7 @@ const useFurnitureExternalImageWidgetState = () => onClose(); }); - return { objectId, photoData, onClose }; + return { objectId, photoData, photoCliked, onClose }; } -export const useFurnitureExternalImageWidget = useFurnitureExternalImageWidgetState; +export const useFurnitureExternalImageWidget = useFurnitureExternalImageWidgetState; \ No newline at end of file