duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Full Working Camera

Browse Source
This commit is contained in:
duckietm 2025-03-18 16:04:04 +01:00
parent bcbbaf5944
commit b322d607dd
3 changed files with 68 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,71 +1,68 @@
import { GetRoomEngine, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'; import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
import { GetUserProfile, IPhotoData, LocalizeText } from '../../../api'; import { GetUserProfile, IPhotoData, LocalizeText } from '../../../api';
import { Flex, Grid, Text } from '../../../common'; import { Flex, Grid, Text } from '../../../common';
export interface CameraWidgetShowPhotoViewProps export interface CameraWidgetShowPhotoViewProps {
{
currentIndex: number; currentIndex: number;
currentPhotos: IPhotoData[]; currentPhotos: IPhotoData[];
onClick?: () => void;
} }
export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = props => export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = props => {
{ const { currentIndex = -1, currentPhotos = null, onClick = null } = props;
const { currentIndex = -1, currentPhotos = null } = props; const [imageIndex, setImageIndex] = useState(0);
const [ imageIndex, setImageIndex ] = useState(0);
const currentImage = (currentPhotos && currentPhotos.length) ? currentPhotos[imageIndex] : null; const currentImage = currentPhotos && currentPhotos.length ? currentPhotos[imageIndex] : null;
const next = () =>
{
setImageIndex(prevValue =>
{
let newIndex = (prevValue + 1);
if(newIndex >= currentPhotos.length) newIndex = 0;
const next = () => {
setImageIndex(prevValue => {
let newIndex = prevValue + 1;
if (newIndex >= currentPhotos.length) newIndex = 0;
return newIndex; return newIndex;
}); });
}; };
const previous = () => const previous = () => {
{ setImageIndex(prevValue => {
setImageIndex(prevValue => let newIndex = prevValue - 1;
{ if (newIndex < 0) newIndex = currentPhotos.length - 1;
let newIndex = (prevValue - 1);
if(newIndex < 0) newIndex = (currentPhotos.length - 1);
return newIndex; return newIndex;
}); });
}; };
useEffect(() => useEffect(() => {
{
setImageIndex(currentIndex); 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 ( return (
<Grid style={ { display: 'flex', flexDirection: 'column' } }> <Grid style={{ display: 'flex', flexDirection: 'column' }}>
<Flex center className="picture-preview border border-black" style={ currentImage.w ? { backgroundImage: 'url(' + currentImage.w + ')' } : {} }> <Flex center className="picture-preview border border-black" style={currentImage.w ? { backgroundImage: 'url(' + currentImage.w + ')' } : {}} onClick={onClick}>
{ !currentImage.w && {!currentImage.w && <Text bold>{LocalizeText('camera.loading')}</Text>}
<Text bold>{ LocalizeText('camera.loading') }</Text> }
</Flex> </Flex>
{ currentImage.m && currentImage.m.length && {currentImage.m && currentImage.m.length && <Text center>{currentImage.m}</Text>}
<Text center>{ currentImage.m }</Text> } <div className="flex items-center center justify-between">
<div className="flex items-center justify-between"> <Text>{currentImage.n || ''}</Text>
<Text>{ (currentImage.n || '') }</Text> <Text onClick={() => GetUserProfile(Number(getUserData(currentImage.s, Number(currentImage.u), 'id')))}> { getUserData(currentImage.s, Number(currentImage.u), 'username') } </Text>
<Text>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text> <Text className="cursor-pointer" onClick={() => GetUserProfile(currentImage.oi)}>{currentImage.o}</Text>
<Text>{new Date(currentImage.t * 1000).toLocaleDateString()}</Text>
</div> </div>
{ (currentPhotos.length > 1) && {currentPhotos.length > 1 && (
<Flex className="picture-preview-buttons"> <Flex className="picture-preview-buttons">
<FaArrowLeft className="cursor-pointer picture-preview-buttons-previous fa-icon" onClick={ previous } /> <FaArrowLeft onClick={previous} />
<Text underline className="cursor-pointer" onClick={ event => GetUserProfile(currentImage.oi) }>{ currentImage.o }</Text> <FaArrowRight className="cursor-pointer"onClick={next} />
<FaArrowRight className="cursor-pointer picture-preview-buttons-next fa-icon" onClick={ next } />
</Flex> </Flex>
} )}
</Grid> </Grid>
); );
}; };

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

@ -1,22 +1,33 @@
import { GetSessionDataManager } from '@nitrots/nitro-renderer';
import { FC } from 'react'; import { FC } from 'react';
import { ReportType } from '../../../../api'; import { GetConfigurationValue, LocalizeText, ReportType } from '../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { useFurnitureExternalImageWidget, useHelp } from '../../../../hooks'; import { useFurnitureExternalImageWidget, useHelp } from '../../../../hooks';
import { CameraWidgetShowPhotoView } from '../../../camera/views/CameraWidgetShowPhotoView'; 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 { objectId = -1, currentPhotoIndex = -1, currentPhotos = null, onClose = null } = useFurnitureExternalImageWidget();
const { report = null } = useHelp(); 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 ( return (
<NitroCardView className="nitro-external-image-widget" theme="primary-slim"> <NitroCardView className="nitro-external-image-widget no-resize" uniqueKey="photo-viewer" 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) }) } /> <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> <NitroCardContentView>
<CameraWidgetShowPhotoView currentIndex={ currentPhotoIndex } currentPhotos={ currentPhotos } /> <CameraWidgetShowPhotoView currentIndex={currentPhotoIndex} currentPhotos={currentPhotos} onClick={handleOpenFullPhoto} />
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );

9
src/css/widgets/FurnitureWidgets.css
View File

@ -2,6 +2,14 @@
pointer-events: none; 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 { .nitro-widget-custom-stack-height {
width: 275px; width: 275px;
height: 220px; height: 220px;
@ -64,7 +72,6 @@
.picture-preview-buttons-previous, .picture-preview-buttons-previous,
.picture-preview-buttons-next { .picture-preview-buttons-next {
color: #222; color: #222;
background-color: white;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
} }