From 39fd7d247eae7b5bd68830d06dd428790ef45600 Mon Sep 17 00:00:00 2001 From: Bill Date: Tue, 20 Sep 2022 16:35:17 -0400 Subject: [PATCH] Fix FurnitureExternalImageView --- .../views/CameraWidgetShowPhotoView.tsx | 74 +++++++------------ .../furniture/FurnitureExternalImageView.tsx | 12 +-- .../useFurnitureExternalImageWidget.ts | 63 ++++++++-------- 3 files changed, 62 insertions(+), 87 deletions(-) diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx index bcd926c8..6b5748a2 100644 --- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx +++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx @@ -5,83 +5,65 @@ import { Flex, Grid, Text } from '../../../common'; export interface CameraWidgetShowPhotoViewProps { - photo: any; - photos: any; - isActive: boolean; + currentIndex: number; + currentPhotos: IPhotoData[]; } 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); + const { currentIndex = -1, currentPhotos = null } = props; + const [ imageIndex, setImageIndex ] = useState(0); - if(!photo) return null; + const currentImage = (currentPhotos && currentPhotos.length) ? currentPhotos[imageIndex] : null; const next = () => { - let newImgCount = 0; - - if (imgIndex >= photos.length) setImgIndex(0); - - setImgIndex(prevValue => + setImageIndex(prevValue => { - newImgCount = (prevValue + 1); + let newIndex = (prevValue + 1); - return newImgCount; + if(newIndex >= currentPhotos.length) newIndex = 0; + + return newIndex; }); - - setPhotoImg(photos[imgIndex]); } const previous = () => { - let newImgCount = 0; - - if (imgIndex <= 0) setImgIndex(photos.length); - - setImgIndex(prevValue => + setImageIndex(prevValue => { - newImgCount = (prevValue - 1); + let newIndex = (prevValue - 1); - return newImgCount; + if(newIndex < 0) newIndex = (currentPhotos.length - 1); + + return newIndex; }); - - setPhotoImg(photos[imgIndex]); - } - - const openProfile = (ownerId: number) => - { - GetUserProfile(ownerId); } useEffect(() => { - setPhotoImg(photoImg); + setImageIndex(currentIndex); + }, [ currentIndex ]); - if (imgIndex >= photos.length) setImgIndex(0); - if (imgIndex < 0) setImgIndex(photos.length); - - }, [ photoImg ]); + if(!currentImage) return null; return ( - (isActive) && - - { !photoImg.w && + + { !currentImage.w && { LocalizeText('camera.loading') } } - { photoImg.m && photoImg.m.length && - { photoImg.m } } + { currentImage.m && currentImage.m.length && + { currentImage.m } } - { (photoImg.n || '') } - { new Date(photoImg.t * 1000).toLocaleDateString() } + { (currentImage.n || '') } + { new Date(currentImage.t * 1000).toLocaleDateString() } - { (photos.length > 1) && + { (currentPhotos.length > 1) && - previous() } /> - openProfile(photoImg.oi) }>{ photoImg.o } - next() } /> + + GetUserProfile(currentImage.oi) }>{ currentImage.o } + } diff --git a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx index b40145d1..301aac3f 100644 --- a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx +++ b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx @@ -5,21 +5,15 @@ import { CameraWidgetShowPhotoView } from '../../../camera/views/CameraWidgetSho export const FurnitureExternalImageView: FC<{}> = props => { - const { objectId = -1, photoData = [], photoCliked = null, onClose = null } = useFurnitureExternalImageWidget(); + const { objectId = -1, currentPhotoIndex = -1, currentPhotos = null, onClose = null } = useFurnitureExternalImageWidget(); - if((objectId === -1) || !photoData) return null; + if((objectId === -1) || (currentPhotoIndex === -1)) return null; return ( - { photoData.map((photoView, index) => - { - const isActive = photoView.w === photoCliked.w ? true : false; - - return - }) - } + ); diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts index 6e0fc5c4..de65ff24 100644 --- a/src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts +++ b/src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts @@ -1,5 +1,5 @@ import { RoomEngineTriggerWidgetEvent, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { GetRoomEngine, IPhotoData } from '../../../../api'; import { useRoomEngineEvent } from '../../../events'; import { useFurniRemovedEvent } from '../../engine'; @@ -9,26 +9,18 @@ const useFurnitureExternalImageWidgetState = () => { const [ objectId, setObjectId ] = useState(-1); const [ category, setCategory ] = useState(-1); - const [ photoData, setPhotoData ] = useState([]); - const [ photoCliked, setPhotoCliked ] = useState(null); + const [ currentPhotoIndex, setCurrentPhotoIndex ] = useState(-1); + const [ currentPhotos, setCurrentPhotos ] = useState([]); const { roomSession = null } = useRoom(); - if (!roomSession) return null; - const onClose = () => { setObjectId(-1); setCategory(-1); - setPhotoData([]); - setPhotoCliked(null); + setCurrentPhotoIndex(-1); + setCurrentPhotos([]); } - useEffect(() => - { - setPhotoData(photoData); - - }, [ photoData ]); - useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_EXTERNAL_IMAGE, event => { const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category); @@ -36,31 +28,38 @@ const useFurnitureExternalImageWidgetState = () => if(!roomObject) return; - let imgs = [ { s: null, t: null, u: '', w: '', oi: '', o: '' } ]; - imgs.shift(); + const datas: IPhotoData[] = []; roomTotalImages.forEach(object => { - if(object.id < 0) return null; + if (object.type !== 'external_image_wallitem_poster_small') return null; + + 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); - 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 }); - } + datas.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); + setCurrentPhotos(datas); + + const roomObjectPhotoData = (JSON.parse(roomObject.model.getValue(RoomObjectVariable.FURNITURE_DATA)) as IPhotoData); + + setCurrentPhotoIndex(prevValue => + { + let index = 0; + + if(roomObjectPhotoData) + { + index = datas.findIndex(data => (data.u === roomObjectPhotoData.u)) + } + + if(index < 0) index = 0; + + return index; + }); }); useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event => @@ -70,7 +69,7 @@ const useFurnitureExternalImageWidgetState = () => onClose(); }); - return { objectId, photoData, photoCliked, onClose }; + return { objectId, currentPhotoIndex, currentPhotos, onClose }; } -export const useFurnitureExternalImageWidget = useFurnitureExternalImageWidgetState; \ No newline at end of file +export const useFurnitureExternalImageWidget = useFurnitureExternalImageWidgetState;