nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-30 00:50:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix FurnitureExternalImageView

Browse Source
This commit is contained in:
Bill 2022-09-20 16:35:17 -04:00
parent 818c6b6070
commit 39fd7d247e
3 changed files with 62 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/camera/views/CameraWidgetShowPhotoView.tsx
View File

@ -5,83 +5,65 @@ import { Flex, Grid, Text } from '../../../common';
export interface CameraWidgetShowPhotoViewProps export interface CameraWidgetShowPhotoViewProps
{ {
photo: any; currentIndex: number;
photos: any; currentPhotos: IPhotoData[];
isActive: boolean;
} }
export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = props => export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = props =>
{ {
const { photo = null, photos = null, isActive = false } = props; const { currentIndex = -1, currentPhotos = null } = props;
const [ photoImg, setPhotoImg ] = useState<IPhotoData>(photo); // photo is default value when clicked the photo const [ imageIndex, setImageIndex ] = useState(0);
const [ imgIndex, setImgIndex ] = useState(0);
if(!photo) return null; const currentImage = (currentPhotos && currentPhotos.length) ? currentPhotos[imageIndex] : null;
const next = () => const next = () =>
{ {
let newImgCount = 0; setImageIndex(prevValue =>
if (imgIndex >= photos.length) setImgIndex(0);
setImgIndex(prevValue =>
{ {
newImgCount = (prevValue + 1); let newIndex = (prevValue + 1);
return newImgCount; if(newIndex >= currentPhotos.length) newIndex = 0;
return newIndex;
}); });
setPhotoImg(photos[imgIndex]);
} }
const previous = () => const previous = () =>
{ {
let newImgCount = 0; setImageIndex(prevValue =>
if (imgIndex <= 0) setImgIndex(photos.length);
setImgIndex(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(() => useEffect(() =>
{ {
setPhotoImg(photoImg); setImageIndex(currentIndex);
}, [ currentIndex ]);
if (imgIndex >= photos.length) setImgIndex(0); if(!currentImage) return null;
if (imgIndex < 0) setImgIndex(photos.length);
}, [ photoImg ]);
return ( return (
(isActive) &&
<Grid style={ { display: 'flex', flexDirection: 'column' } }> <Grid style={ { display: 'flex', flexDirection: 'column' } }>
<Flex center className="picture-preview border border-black" style={ photoImg.w ? { backgroundImage: 'url(' + photoImg.w + ')' } : {} }> <Flex center className="picture-preview border border-black" style={ currentImage.w ? { backgroundImage: 'url(' + currentImage.w + ')' } : {} }>
{ !photoImg.w && { !currentImage.w &&
<Text bold>{ LocalizeText('camera.loading') }</Text> } <Text bold>{ LocalizeText('camera.loading') }</Text> }
</Flex> </Flex>
{ photoImg.m && photoImg.m.length && { currentImage.m && currentImage.m.length &&
<Text center>{ photoImg.m }</Text> } <Text center>{ currentImage.m }</Text> }
<Flex alignItems="center" justifyContent="between"> <Flex alignItems="center" justifyContent="between">
<Text>{ (photoImg.n || '') }</Text> <Text>{ (currentImage.n || '') }</Text>
<Text>{ new Date(photoImg.t * 1000).toLocaleDateString() }</Text> <Text>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text>
</Flex> </Flex>
{ (photos.length > 1) && { (currentPhotos.length > 1) &&
<Flex className="picture-preview-buttons"> <Flex className="picture-preview-buttons">
<FontAwesomeIcon icon="arrow-left" className="cursor-pointer picture-preview-buttons-previous" onClick={ event => previous() } /> <FontAwesomeIcon icon="arrow-left" className="cursor-pointer picture-preview-buttons-previous" onClick={ previous } />
<Text underline className="cursor-pointer" onClick={ event => openProfile(photoImg.oi) }>{ photoImg.o }</Text> <Text underline className="cursor-pointer" onClick={ event => GetUserProfile(currentImage.oi) }>{ currentImage.o }</Text>
<FontAwesomeIcon icon="arrow-right" className="cursor-pointer picture-preview-buttons-next" onClick={ event => next() } /> <FontAwesomeIcon icon="arrow-right" className="cursor-pointer picture-preview-buttons-next" onClick={ next } />
</Flex> </Flex>
} }
</Grid> </Grid>

12
src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
View File

@ -5,21 +5,15 @@ import { CameraWidgetShowPhotoView } from '../../../camera/views/CameraWidgetSho
export const FurnitureExternalImageView: FC<{}> = props => 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 ( return (
<NitroCardView className="nitro-external-image-widget" theme="primary-slim"> <NitroCardView className="nitro-external-image-widget" theme="primary-slim">
<NitroCardHeaderView headerText="" onCloseClick={ onClose } /> <NitroCardHeaderView headerText="" onCloseClick={ onClose } />
<NitroCardContentView> <NitroCardContentView>
{ photoData.map((photoView, index) => <CameraWidgetShowPhotoView currentIndex={ currentPhotoIndex } currentPhotos={ currentPhotos } />
{
const isActive = photoView.w === photoCliked.w ? true : false;
return <CameraWidgetShowPhotoView key={ index } photo={ photoView } photos={ photoData } isActive={ isActive } />
})
}
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );

61
src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts
View File

@ -1,5 +1,5 @@
import { RoomEngineTriggerWidgetEvent, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer'; import { RoomEngineTriggerWidgetEvent, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
import { useEffect, useState } from 'react'; import { useState } from 'react';
import { GetRoomEngine, IPhotoData } from '../../../../api'; import { GetRoomEngine, IPhotoData } from '../../../../api';
import { useRoomEngineEvent } from '../../../events'; import { useRoomEngineEvent } from '../../../events';
import { useFurniRemovedEvent } from '../../engine'; import { useFurniRemovedEvent } from '../../engine';
@ -9,26 +9,18 @@ const useFurnitureExternalImageWidgetState = () =>
{ {
const [ objectId, setObjectId ] = useState(-1); const [ objectId, setObjectId ] = useState(-1);
const [ category, setCategory ] = useState(-1); const [ category, setCategory ] = useState(-1);
const [ photoData, setPhotoData ] = useState([]); const [ currentPhotoIndex, setCurrentPhotoIndex ] = useState(-1);
const [ photoCliked, setPhotoCliked ] = useState<IPhotoData>(null); const [ currentPhotos, setCurrentPhotos ] = useState<IPhotoData[]>([]);
const { roomSession = null } = useRoom(); const { roomSession = null } = useRoom();
if (!roomSession) return null;
const onClose = () => const onClose = () =>
{ {
setObjectId(-1); setObjectId(-1);
setCategory(-1); setCategory(-1);
setPhotoData([]); setCurrentPhotoIndex(-1);
setPhotoCliked(null); setCurrentPhotos([]);
} }
useEffect(() =>
{
setPhotoData(photoData);
}, [ photoData ]);
useRoomEngineEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_EXTERNAL_IMAGE, event => useRoomEngineEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_EXTERNAL_IMAGE, event =>
{ {
const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category); const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
@ -36,31 +28,38 @@ const useFurnitureExternalImageWidgetState = () =>
if(!roomObject) return; if(!roomObject) return;
let imgs = [ { s: null, t: null, u: '', w: '', oi: '', o: '' } ]; const datas: IPhotoData[] = [];
imgs.shift();
roomTotalImages.forEach(object => roomTotalImages.forEach(object =>
{ {
if(object.id < 0) return null; if (object.type !== 'external_image_wallitem_poster_small') return null;
if (object.type == 'external_image_wallitem_poster_small') // Photo image const data = object.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA);
{ const ownerId = object.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
const data = object.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA); const ownerName = object.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME);
const ownerId = object.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_ID);
const ownerName = object.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME); 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 });
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<string>(RoomObjectVariable.FURNITURE_DATA);
const photoDataCliked = (JSON.parse(dataCliked) as IPhotoData);
setObjectId(event.objectId); setObjectId(event.objectId);
setCategory(event.category); setCategory(event.category);
setPhotoData(photoData); setCurrentPhotos(datas);
setPhotoCliked(photoDataCliked);
const roomObjectPhotoData = (JSON.parse(roomObject.model.getValue<string>(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 => useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event =>
@ -70,7 +69,7 @@ const useFurnitureExternalImageWidgetState = () =>
onClose(); onClose();
}); });
return { objectId, photoData, photoCliked, onClose }; return { objectId, currentPhotoIndex, currentPhotos, onClose };
} }
export const useFurnitureExternalImageWidget = useFurnitureExternalImageWidgetState; export const useFurnitureExternalImageWidget = useFurnitureExternalImageWidgetState;