mirror of
https://github.com/duckietm/Nitro-Cool-UI.git
synced 2025-06-21 22:36:58 +00:00
🆙 Full Working Camera
This commit is contained in:
duckietm
parent
bcbbaf5944
commit
b322d607dd
@ -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>
|
||||
);
|
||||
};
|
||||
@ -1,22 +1,33 @@
|
||||
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>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
@ -64,7 +72,6 @@
|
||||
.picture-preview-buttons-previous,
|
||||
.picture-preview-buttons-next {
|
||||
color: #222;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user