nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +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
{
photo: any;
photos: any;
isActive: boolean;
currentIndex: number;
currentPhotos: IPhotoData[];
}
export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = props =>
{
const { photo = null, photos = null, isActive = false } = props;
const [ photoImg, setPhotoImg ] = useState<IPhotoData>(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) &&
<Grid style={ { display: 'flex', flexDirection: 'column' } }>
<Flex center className="picture-preview border border-black" style={ photoImg.w ? { backgroundImage: 'url(' + photoImg.w + ')' } : {} }>
{ !photoImg.w &&
<Flex center className="picture-preview border border-black" style={ currentImage.w ? { backgroundImage: 'url(' + currentImage.w + ')' } : {} }>
{ !currentImage.w &&
<Text bold>{ LocalizeText('camera.loading') }</Text> }
</Flex>
{ photoImg.m && photoImg.m.length &&
<Text center>{ photoImg.m }</Text> }
{ currentImage.m && currentImage.m.length &&
<Text center>{ currentImage.m }</Text> }
<Flex alignItems="center" justifyContent="between">
<Text>{ (photoImg.n || '') }</Text>
<Text>{ new Date(photoImg.t * 1000).toLocaleDateString() }</Text>
<Text>{ (currentImage.n || '') }</Text>
<Text>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text>
</Flex>
{ (photos.length > 1) &&
{ (currentPhotos.length > 1) &&
<Flex className="picture-preview-buttons">
<FontAwesomeIcon icon="arrow-left" className="cursor-pointer picture-preview-buttons-previous" onClick={ event => previous() } />
<Text underline className="cursor-pointer" onClick={ event => openProfile(photoImg.oi) }>{ photoImg.o }</Text>
<FontAwesomeIcon icon="arrow-right" className="cursor-pointer picture-preview-buttons-next" onClick={ event => next() } />
<FontAwesomeIcon icon="arrow-left" className="cursor-pointer picture-preview-buttons-previous" onClick={ previous } />
<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={ next } />
</Flex>
}
</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 =>
{
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 (
<NitroCardView className="nitro-external-image-widget" theme="primary-slim">
<NitroCardHeaderView headerText="" onCloseClick={ onClose } />
<NitroCardContentView>
{ photoData.map((photoView, index) =>
{
const isActive = photoView.w === photoCliked.w ? true : false;
return <CameraWidgetShowPhotoView key={ index } photo={ photoView } photos={ photoData } isActive={ isActive } />
})
}
<CameraWidgetShowPhotoView currentIndex={ currentPhotoIndex } currentPhotos={ currentPhotos } />
</NitroCardContentView>
</NitroCardView>
);

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

@ -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<IPhotoData>(null);
const [ currentPhotoIndex, setCurrentPhotoIndex ] = useState(-1);
const [ currentPhotos, setCurrentPhotos ] = useState<IPhotoData[]>([]);
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>(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;
if (object.type == 'external_image_wallitem_poster_small') // Photo image
{
const data = object.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA);
const ownerId = object.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_ID);
const ownerId = object.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
const ownerName = object.model.getValue<string>(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<string>(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<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 =>
@ -70,7 +69,7 @@ const useFurnitureExternalImageWidgetState = () =>
onClose();
});
return { objectId, photoData, photoCliked, onClose };
return { objectId, currentPhotoIndex, currentPhotos, onClose };
}
export const useFurnitureExternalImageWidget = useFurnitureExternalImageWidgetState;