New photo gallery on camera - Issue #128

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;
 }

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<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);
+
+    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) &&
+        <Grid style={ { display: 'flex', flexDirection: 'column' } }>
+            <Flex center className="picture-preview border border-black" style={ photoImg.w ? { backgroundImage: 'url(' + photoImg.w + ')' } : {} }>
+                { !photoImg.w &&
+                    <Text bold>{ LocalizeText('camera.loading') }</Text> }
+            </Flex>
+            { photoImg.m && photoImg.m.length &&
+                <Text center>{ photoImg.m }</Text> }
+            <Flex alignItems="center" justifyContent="between">
+                <Text>{ (photoImg.n || '') }</Text>
+                <Text>{ new Date(photoImg.t * 1000).toLocaleDateString() }</Text>
+            </Flex>
+            { (photos.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() } />
+                </Flex>
+            }
+        </Grid>
+    );
+}

src/components/room/widgets/furniture/FurnitureExternalImageView.tsx

@@ -1,11 +1,11 @@
 import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
-import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } 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;
 
@@ -13,16 +13,13 @@ export const FurnitureExternalImageView: FC<{}> = props =>
         <NitroCardView className="nitro-external-image-widget" theme="primary-slim">
             <NitroCardHeaderView headerText="" onCloseClick={ onClose } />
             <NitroCardContentView>
-                <Flex center className="picture-preview border border-black" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>
+                { photoData.map((photoView, index) =>
-                    { !photoData.w &&
+                {
-                        <Text bold>{ LocalizeText('camera.loading') }</Text> }
+                    const isActive = photoView.w === photoCliked.w ? true : false;
-                </Flex>
+
-                { photoData.m && photoData.m.length &&
+                    return <CameraWidgetShowPhotoView key={ index } photo={ photoView } photos={ photoData } isActive={ isActive } />
-                    <Text center>{ photoData.m }</Text> }
+                })
-                <Flex alignItems="center" justifyContent="between">
+                }
-                    <Text>{ (photoData.n || '') }</Text>
-                    <Text>{ new Date(photoData.t * 1000).toLocaleDateString() }</Text>
-                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );

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 {

src/hooks/rooms/widgets/furniture/useFurnitureExternalImageWidget.ts

@@ -1,34 +1,66 @@
-import { RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
+import { RoomEngineTriggerWidgetEvent, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { useState } from 'react';
+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<IPhotoData>(null);
+    const [ photoData, setPhotoData ] = useState([]);
+    const [ photoCliked, setPhotoCliked ] = useState<IPhotoData>(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>(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<string>(RoomObjectVariable.FURNITURE_DATA);
+        let imgs = [ { s: null, t: null, u: '', w: '', oi: '', o: '' } ];
-        const photoData = (JSON.parse(data) as IPhotoData);
+        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<string>(RoomObjectVariable.FURNITURE_DATA);
+                const ownerId = object.model.getValue<string>(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 });
+            }
+        });
+
+        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);
     });
 
     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;