Merge branch 'dev' of https://git.krews.org/nitro/nitro-react into dev

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/chat-history/ChatHistoryView.tsx

@@ -1,6 +1,6 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
-import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { AddEventLinkTracker, ChatEntryType, LocalizeText, RemoveLinkEventTracker } from '../../api';
 import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { useChatHistory } from '../../hooks';
@@ -8,61 +8,25 @@ import { useChatHistory } from '../../hooks';
 export const ChatHistoryView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
+    const [ searchText, setSearchText ] = useState<string>('');
     const { chatHistory = [] } = useChatHistory();
     const elementRef = useRef<List>(null);
 
-    const [ searchText, setSearchText ] = useState<string>('');
-
-    const cache = useMemo(() => new CellMeasurerCache({ defaultHeight: 25, fixedWidth: true }), []);
+    const cache = useMemo(() => new CellMeasurerCache({ defaultHeight: 35, fixedWidth: true }), []);
 
     const filteredChatHistory = useMemo(() => 
     {
         if (searchText.length === 0) return chatHistory;
 
-        return chatHistory.filter((i) => (i.message && i.message.includes(searchText)) || i.name.includes(searchText));
+        let text = searchText.toLowerCase();
+
+        return chatHistory.filter(entry => (entry.message.toLowerCase().includes(text)) || entry.name.includes(text));
     }, [ chatHistory, searchText ]);
 
     useEffect(() =>
     {
-        cache.clearAll();
-    }, [ filteredChatHistory ]);
-
-    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
-    {
-        const item = filteredChatHistory[props.index];
-
-        if (!item) return null;
-
-        return (
-            <CellMeasurer cache={ cache } columnIndex={ 0 } key={ props.key } parent={ props.parent } rowIndex={ props.index }>
-                <Flex key={ props.key } style={ props.style } className="p-1" gap={ 2 }>
-                    <Text variant="muted">{ item.timestamp }</Text>
-                    { (item.type === ChatEntryType.TYPE_CHAT) &&
-                        <div className="bubble-container" style={ { position: 'relative' } }>
-                            { (item.style === 0) &&
-                            <div className="user-container-bg" style={ { backgroundColor: item.color } } /> }
-                            <div className={ `chat-bubble bubble-${ item.style } type-${ item.chatType }` } style={ { maxWidth: '100%' } }>
-                                <div className="user-container">
-                                    { item.imageUrl && (item.imageUrl.length > 0) &&
-                        <div className="user-image" style={ { backgroundImage: `url(${ item.imageUrl })` } } /> }
-                                </div>
-                                <div className="chat-content">
-                                    <b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ item.name }: ` } } />
-                                    <span className="message" dangerouslySetInnerHTML={ { __html: `${ item.message }` } } />
-                                </div>
-                            </div>
-                        </div> }
-                    { (item.type === ChatEntryType.TYPE_ROOM_INFO) &&
-                        <>
-                            <i className="icon icon-small-room" />
-                            <Text textBreak wrap grow>{ item.name }</Text>
-                        </> }
-                </Flex>
-            </CellMeasurer>
-        );
-    };
-
-    const onResize = (info: Size) => cache.clearAll();
+        if(elementRef && elementRef.current && isVisible) elementRef.current.scrollToRow(-1);
+    }, [ isVisible ]);
 
     useEffect(() =>
     {
@@ -94,30 +58,62 @@ export const ChatHistoryView: FC<{}> = props =>
         return () => RemoveLinkEventTracker(linkTracker);
     }, []);
 
-    useEffect(() =>
-    {
-        if(elementRef && elementRef.current && isVisible) elementRef.current.scrollToRow(-1);
-    }, [ isVisible ]);
-
     if(!isVisible) return null;
 
+    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        const item = filteredChatHistory[props.index];
+
+        if (!item) return null;
+
+        return (
+            <CellMeasurer cache={ cache } columnIndex={ 0 } key={ props.key } parent={ props.parent } rowIndex={ props.index }>
+                <Flex alignItems="center" style={ props.style } className="p-1" gap={ 2 }>
+                    <Text variant="muted">{ item.timestamp }</Text>
+                    { (item.type === ChatEntryType.TYPE_CHAT) &&
+                        <div className="bubble-container" style={ { position: 'relative' } }>
+                            { (item.style === 0) &&
+                            <div className="user-container-bg" style={ { backgroundColor: item.color } } /> }
+                            <div className={ `chat-bubble bubble-${ item.style } type-${ item.chatType }` } style={ { maxWidth: '100%' } }>
+                                <div className="user-container">
+                                    { item.imageUrl && (item.imageUrl.length > 0) &&
+                        <div className="user-image" style={ { backgroundImage: `url(${ item.imageUrl })` } } /> }
+                                </div>
+                                <div className="chat-content">
+                                    <b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ item.name }: ` } } />
+                                    <span className="message" dangerouslySetInnerHTML={ { __html: `${ item.message }` } } />
+                                </div>
+                            </div>
+                        </div> }
+                    { (item.type === ChatEntryType.TYPE_ROOM_INFO) &&
+                        <>
+                            <i className="icon icon-small-room" />
+                            <Text textBreak wrap grow>{ item.name }</Text>
+                        </> }
+                </Flex>
+            </CellMeasurer>
+        );
+    };
+
     return (
         <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('room.chathistory.button.text') } onCloseClick={ event => setIsVisible(false) }/>
-            <NitroCardContentView>
+            <NitroCardContentView overflow="hidden">
                 <Flex column fullHeight gap={ 2 }>
                     <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchText } onChange={ event => setSearchText(event.target.value) } />
                     <div className="h-100">
-                        <AutoSizer defaultWidth={ 300 } defaultHeight={ 170 } onResize={ onResize }>
+                        <AutoSizer defaultWidth={ 300 } defaultHeight={ 170 }>
                             { ({ height, width }) => 
                             {
+                                cache.clearAll();
+
                                 return (
                                     <List
                                         ref={ elementRef }
                                         width={ width }
                                         height={ height }
-                                        rowCount={ chatHistory.length }
-                                        rowHeight={ cache.rowHeight }
+                                        rowCount={ filteredChatHistory.length }
+                                        rowHeight={ 35 }
                                         className={ 'chat-history-list' }
                                         rowRenderer={ RowRenderer }
                                         deferredMeasurementCache={ cache } />

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

@@ -1,11 +1,11 @@
 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;
 
@@ -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.w &&
-                        <Text bold>{ LocalizeText('camera.loading') }</Text> }
-                </Flex>
-                { photoData.m && photoData.m.length &&
-                    <Text center>{ photoData.m }</Text> }
-                <Flex alignItems="center" justifyContent="between">
-                    <Text>{ (photoData.n || '') }</Text>
-                    <Text>{ new Date(photoData.t * 1000).toLocaleDateString() }</Text>
-                </Flex>
+                { photoData.map((photoView, index) =>
+                {
+                    const isActive = photoView.w === photoCliked.w ? true : false;
+
+                    return <CameraWidgetShowPhotoView key={ index } photo={ photoView } photos={ photoData } isActive={ isActive } />
+                })
+                }
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/room/widgets/furniture/FurnitureWidgets.scss

@@ -49,10 +49,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 { 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<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);
-        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<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;