From b322d607dd74516916428e4e63c220aa0f26ddf3 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Tue, 18 Mar 2025 16:04:04 +0100
Subject: [PATCH] :up: Full Working Camera

---
 .../views/CameraWidgetShowPhotoView.tsx       | 81 +++++++++----------
 .../furniture/FurnitureExternalImageView.tsx  | 29 ++++---
 src/css/widgets/FurnitureWidgets.css          | 11 ++-
 3 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
index 08d3a29..212bee3 100644
--- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx
+++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
@@ -1,71 +1,68 @@
+import { GetRoomEngine, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
 import { GetUserProfile, IPhotoData, LocalizeText } from '../../../api';
 import { Flex, Grid, Text } from '../../../common';
 
-export interface CameraWidgetShowPhotoViewProps
-{
+export interface CameraWidgetShowPhotoViewProps {
     currentIndex: number;
     currentPhotos: IPhotoData[];
+    onClick?: () => void;
 }
 
-export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = props =>
-{
-    const { currentIndex = -1, currentPhotos = null } = props;
-    const [ imageIndex, setImageIndex ] = useState(0);
+export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = props => {
+    const { currentIndex = -1, currentPhotos = null, onClick = null } = props;
+    const [imageIndex, setImageIndex] = useState(0);
 
-    const currentImage = (currentPhotos && currentPhotos.length) ? currentPhotos[imageIndex] : null;
-
-    const next = () =>
-    {
-        setImageIndex(prevValue =>
-        {
-            let newIndex = (prevValue + 1);
-
-            if(newIndex >= currentPhotos.length) newIndex = 0;
+    const currentImage = currentPhotos && currentPhotos.length ? currentPhotos[imageIndex] : null;
 
+    const next = () => {
+        setImageIndex(prevValue => {
+            let newIndex = prevValue + 1;
+            if (newIndex >= currentPhotos.length) newIndex = 0;
             return newIndex;
         });
     };
 
-    const previous = () =>
-    {
-        setImageIndex(prevValue =>
-        {
-            let newIndex = (prevValue - 1);
-
-            if(newIndex < 0) newIndex = (currentPhotos.length - 1);
-
+    const previous = () => {
+        setImageIndex(prevValue => {
+            let newIndex = prevValue - 1;
+            if (newIndex < 0) newIndex = currentPhotos.length - 1;
             return newIndex;
         });
     };
 
-    useEffect(() =>
-    {
+    useEffect(() => {
         setImageIndex(currentIndex);
-    }, [ currentIndex ]);
+    }, [currentIndex]);
 
-    if(!currentImage) return null;
+    if (!currentImage) return null;
+	
+	const getUserData = (roomId: number, objectId: number, type: string): number | string =>
+    {
+        const roomObject = GetRoomEngine().getRoomObject(roomId, objectId, RoomObjectCategory.WALL);
+        if (!roomObject) return;
+        return type == 'username' ? roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_NAME) : roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
+    }
 
     return (
-        <Grid style={ { display: 'flex', flexDirection: 'column' } }>
-            <Flex center className="picture-preview border border-black" style={ currentImage.w ? { backgroundImage: 'url(' + currentImage.w + ')' } : {} }>
-                { !currentImage.w &&
-                    <Text bold>{ LocalizeText('camera.loading') }</Text> }
+        <Grid style={{ display: 'flex', flexDirection: 'column' }}>
+            <Flex center className="picture-preview border border-black" style={currentImage.w ? { backgroundImage: 'url(' + currentImage.w + ')' } : {}} onClick={onClick}>
+                {!currentImage.w && <Text bold>{LocalizeText('camera.loading')}</Text>}
             </Flex>
-            { currentImage.m && currentImage.m.length &&
-                <Text center>{ currentImage.m }</Text> }
-            <div className="flex items-center justify-between">
-                <Text>{ (currentImage.n || '') }</Text>
-                <Text>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text>
+            {currentImage.m && currentImage.m.length && <Text center>{currentImage.m}</Text>}
+            <div className="flex items-center center justify-between">
+                <Text>{currentImage.n || ''}</Text>
+				<Text onClick={() => GetUserProfile(Number(getUserData(currentImage.s, Number(currentImage.u), 'id')))}> { getUserData(currentImage.s, Number(currentImage.u), 'username') } </Text>
+				<Text className="cursor-pointer" onClick={() => GetUserProfile(currentImage.oi)}>{currentImage.o}</Text>
+                <Text>{new Date(currentImage.t * 1000).toLocaleDateString()}</Text>				
             </div>
-            { (currentPhotos.length > 1) &&
+            {currentPhotos.length > 1 && (
                 <Flex className="picture-preview-buttons">
-                    <FaArrowLeft className="cursor-pointer picture-preview-buttons-previous fa-icon" onClick={ previous } />
-                    <Text underline className="cursor-pointer" onClick={ event => GetUserProfile(currentImage.oi) }>{ currentImage.o }</Text>
-                    <FaArrowRight className="cursor-pointer picture-preview-buttons-next fa-icon" onClick={ next } />
+                    <FaArrowLeft  onClick={previous} />					
+                    <FaArrowRight className="cursor-pointer"onClick={next} />
                 </Flex>
-            }
+            )}
         </Grid>
     );
-};
+};
\ No newline at end of file
diff --git a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
index 5e8d4eb..7fe070c 100644
--- a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
@@ -1,23 +1,34 @@
-import { GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { ReportType } from '../../../../api';
+import { GetConfigurationValue, LocalizeText, ReportType } from '../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { useFurnitureExternalImageWidget, useHelp } from '../../../../hooks';
 import { CameraWidgetShowPhotoView } from '../../../camera/views/CameraWidgetShowPhotoView';
 
-export const FurnitureExternalImageView: FC<{}> = props =>
-{
+export const FurnitureExternalImageView: FC<{}> = props => {
     const { objectId = -1, currentPhotoIndex = -1, currentPhotos = null, onClose = null } = useFurnitureExternalImageWidget();
     const { report = null } = useHelp();
 
-    if((objectId === -1) || (currentPhotoIndex === -1)) return null;
+    if (objectId === -1 || currentPhotoIndex === -1) return null;
+
+    const handleOpenFullPhoto = () => {
+        const photoUrl = currentPhotos[currentPhotoIndex].w.replace('_small.png', '.png');
+        if (photoUrl) {
+            console.log("Opened photo URL:", photoUrl);
+            window.open(photoUrl, '_blank');
+        }
+    };
 
     return (
-        <NitroCardView className="nitro-external-image-widget" theme="primary-slim">
-            <NitroCardHeaderView headerText="" isGalleryPhoto={ true } onCloseClick={ onClose } onReportPhoto={ () => report(ReportType.PHOTO, { extraData: currentPhotos[currentPhotoIndex].w, roomId: currentPhotos[currentPhotoIndex].s, reportedUserId: GetSessionDataManager().userId, roomObjectId: Number(currentPhotos[currentPhotoIndex].u) }) } />
+        <NitroCardView className="nitro-external-image-widget no-resize" uniqueKey="photo-viewer" theme="primary-slim">
+            <NitroCardHeaderView
+                headerText={ LocalizeText('camera.interface.title') }
+                isGalleryPhoto={true}
+                onCloseClick={onClose}
+                onReportPhoto={() => report(ReportType.PHOTO, { extraData: currentPhotos[currentPhotoIndex].w, roomId: currentPhotos[currentPhotoIndex].s, reportedUserId: GetSessionDataManager().userId, roomObjectId: Number(currentPhotos[currentPhotoIndex].u) })}
+            />
             <NitroCardContentView>
-                <CameraWidgetShowPhotoView currentIndex={ currentPhotoIndex } currentPhotos={ currentPhotos } />
+                <CameraWidgetShowPhotoView currentIndex={currentPhotoIndex} currentPhotos={currentPhotos} onClick={handleOpenFullPhoto} />
             </NitroCardContentView>
         </NitroCardView>
     );
-};
+};
\ No newline at end of file
diff --git a/src/css/widgets/FurnitureWidgets.css b/src/css/widgets/FurnitureWidgets.css
index 54ba0e5..1f6b799 100644
--- a/src/css/widgets/FurnitureWidgets.css
+++ b/src/css/widgets/FurnitureWidgets.css
@@ -2,6 +2,14 @@
     pointer-events: none;
 }
 
+.no-resize {
+    resize: none !important;
+    min-width: 340px !important;
+    max-width: 340px !important;
+    min-height: 430px !important;
+    max-height: 430px !important;
+}
+
 .nitro-widget-custom-stack-height {
     width: 275px;
     height: 220px;
@@ -53,7 +61,7 @@
         width: 320px;
         height: 320px;
     }
-
+    
     .picture-preview-buttons {
         display: flex;
         align-items: center;
@@ -64,7 +72,6 @@
     .picture-preview-buttons-previous,
     .picture-preview-buttons-next {
         color: #222;
-        background-color: white;
         padding: 10px;
         border-radius: 50%;
     }