mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-20 07:26:19 +00:00
🆙 Init V3
This commit is contained in:
DuckieTM
@@ -0,0 +1,222 @@
|
||||
import { GetRoomCameraWidgetManager, IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, NitroLogger, RoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { FaSave, FaSearchMinus, FaSearchPlus, FaTrash } from 'react-icons/fa';
|
||||
import ReactSlider from 'react-slider';
|
||||
import { CameraEditorTabs, CameraPicture, CameraPictureThumbnail, LocalizeText } from '../../../../api';
|
||||
import { Button, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
|
||||
import { CameraWidgetEffectListView } from './effect-list';
|
||||
|
||||
export interface CameraWidgetEditorViewProps {
|
||||
picture: CameraPicture;
|
||||
availableEffects: IRoomCameraWidgetEffect[];
|
||||
myLevel: number;
|
||||
onClose: () => void;
|
||||
onCancel: () => void;
|
||||
onCheckout: (pictureUrl: string) => void;
|
||||
}
|
||||
|
||||
const TABS: string[] = [ CameraEditorTabs.COLORMATRIX, CameraEditorTabs.COMPOSITE ];
|
||||
|
||||
export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props => {
|
||||
const { picture = null, availableEffects = null, myLevel = 1, onClose = null, onCancel = null, onCheckout = null } = props;
|
||||
const [ currentTab, setCurrentTab ] = useState(TABS[0]);
|
||||
const [ selectedEffectName, setSelectedEffectName ] = useState<string>(null);
|
||||
const [ selectedEffects, setSelectedEffects ] = useState<IRoomCameraWidgetSelectedEffect[]>([]);
|
||||
const [ effectsThumbnails, setEffectsThumbnails ] = useState<CameraPictureThumbnail[]>([]);
|
||||
const [ isZoomed, setIsZoomed ] = useState(false);
|
||||
const [ currentPictureUrl, setCurrentPictureUrl ] = useState<string>('');
|
||||
const isBusy = useRef<boolean>(false);
|
||||
|
||||
const getColorMatrixEffects = useMemo(() => {
|
||||
return availableEffects.filter(effect => effect.colorMatrix);
|
||||
}, [ availableEffects ]);
|
||||
|
||||
const getCompositeEffects = useMemo(() => {
|
||||
return availableEffects.filter(effect => effect.texture);
|
||||
}, [ availableEffects ]);
|
||||
|
||||
const getEffectList = useCallback(() => {
|
||||
return currentTab === CameraEditorTabs.COLORMATRIX ? getColorMatrixEffects : getCompositeEffects;
|
||||
}, [ currentTab, getColorMatrixEffects, getCompositeEffects ]);
|
||||
|
||||
const getSelectedEffectIndex = useCallback((name: string) => {
|
||||
if (!name || !name.length || !selectedEffects || !selectedEffects.length) return -1;
|
||||
return selectedEffects.findIndex(effect => effect.effect.name === name);
|
||||
}, [ selectedEffects ]);
|
||||
|
||||
const getCurrentEffectIndex = useMemo(() => {
|
||||
return getSelectedEffectIndex(selectedEffectName);
|
||||
}, [ selectedEffectName, getSelectedEffectIndex ]);
|
||||
|
||||
const getCurrentEffect = useMemo(() => {
|
||||
if (!selectedEffectName) return null;
|
||||
return selectedEffects[getCurrentEffectIndex] || null;
|
||||
}, [ selectedEffectName, getCurrentEffectIndex, selectedEffects ]);
|
||||
|
||||
const setSelectedEffectAlpha = useCallback((alpha: number) => {
|
||||
const index = getCurrentEffectIndex;
|
||||
if (index === -1) return;
|
||||
|
||||
setSelectedEffects(prevValue => {
|
||||
const clone = [ ...prevValue ];
|
||||
const currentEffect = clone[index];
|
||||
clone[index] = new RoomCameraWidgetSelectedEffect(currentEffect.effect, alpha);
|
||||
return clone;
|
||||
});
|
||||
}, [ getCurrentEffectIndex ]);
|
||||
|
||||
const processAction = useCallback((type: string, effectName: string = null) => {
|
||||
switch (type) {
|
||||
case 'close':
|
||||
onClose();
|
||||
return;
|
||||
case 'cancel':
|
||||
onCancel();
|
||||
return;
|
||||
case 'checkout':
|
||||
onCheckout(currentPictureUrl);
|
||||
return;
|
||||
case 'change_tab':
|
||||
setCurrentTab(String(effectName));
|
||||
return;
|
||||
case 'select_effect': {
|
||||
const existingIndex = getSelectedEffectIndex(effectName);
|
||||
if (existingIndex >= 0) return;
|
||||
|
||||
const effect = availableEffects.find(effect => effect.name === effectName);
|
||||
if (!effect) return;
|
||||
|
||||
setSelectedEffects(prevValue => [ ...prevValue, new RoomCameraWidgetSelectedEffect(effect, 1) ]);
|
||||
setSelectedEffectName(effect.name);
|
||||
return;
|
||||
}
|
||||
case 'remove_effect': {
|
||||
const existingIndex = getSelectedEffectIndex(effectName);
|
||||
if (existingIndex === -1) return;
|
||||
|
||||
setSelectedEffects(prevValue => {
|
||||
const clone = [ ...prevValue ];
|
||||
clone.splice(existingIndex, 1);
|
||||
return clone;
|
||||
});
|
||||
|
||||
if (selectedEffectName === effectName) setSelectedEffectName(null);
|
||||
return;
|
||||
}
|
||||
case 'clear_effects':
|
||||
setSelectedEffectName(null);
|
||||
setSelectedEffects([]);
|
||||
return;
|
||||
case 'download': {
|
||||
(async () => {
|
||||
const image = new Image();
|
||||
image.src = currentPictureUrl;
|
||||
const newWindow = window.open('');
|
||||
newWindow.document.write(image.outerHTML);
|
||||
})();
|
||||
return;
|
||||
}
|
||||
case 'zoom':
|
||||
setIsZoomed(prev => !prev);
|
||||
return;
|
||||
}
|
||||
}, [ availableEffects, selectedEffectName, currentPictureUrl, getSelectedEffectIndex, onCancel, onCheckout, onClose ]);
|
||||
|
||||
useEffect(() => {
|
||||
const processThumbnails = async () => {
|
||||
const renderedEffects = await Promise.all(
|
||||
availableEffects.map(effect =>
|
||||
GetRoomCameraWidgetManager().applyEffects(picture.texture, [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false)
|
||||
)
|
||||
);
|
||||
setEffectsThumbnails(renderedEffects.map((image, index) => new CameraPictureThumbnail(availableEffects[index].name, image.src)));
|
||||
};
|
||||
processThumbnails();
|
||||
}, [ picture, availableEffects ]);
|
||||
|
||||
useEffect(() => {
|
||||
GetRoomCameraWidgetManager()
|
||||
.applyEffects(picture.texture, selectedEffects, false) // Remove isZoomed from here
|
||||
.then(imageElement => {
|
||||
setCurrentPictureUrl(imageElement.src);
|
||||
})
|
||||
.catch(error => {
|
||||
NitroLogger.error('Failed to apply effects to picture', error);
|
||||
});
|
||||
}, [ picture, selectedEffects ]); // Remove isZoomed from dependency array
|
||||
|
||||
return (
|
||||
<NitroCardView className="w-[600px] h-[500px]">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('camera.editor.button.text') } onCloseClick={ event => processAction('close') } />
|
||||
<NitroCardTabsView>
|
||||
{ TABS.map(tab => (
|
||||
<NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ event => processAction('change_tab', tab) }>
|
||||
<i className={ 'nitro-icon icon-camera-' + tab }></i>
|
||||
</NitroCardTabsItemView>
|
||||
)) }
|
||||
</NitroCardTabsView>
|
||||
<NitroCardContentView>
|
||||
<Grid>
|
||||
<Column overflow="hidden" size={ 5 }>
|
||||
<CameraWidgetEffectListView
|
||||
myLevel={ myLevel }
|
||||
selectedEffects={ selectedEffects }
|
||||
effects={ getEffectList() }
|
||||
thumbnails={ effectsThumbnails }
|
||||
processAction={ processAction }
|
||||
/>
|
||||
</Column>
|
||||
<Column justifyContent="between" overflow="hidden" size={ 7 }>
|
||||
<Column center>
|
||||
<LayoutImage
|
||||
style={{
|
||||
width: '320px',
|
||||
height: '320px',
|
||||
backgroundImage: `url(${currentPictureUrl})`,
|
||||
backgroundPosition: isZoomed ? 'center' : 'top left',
|
||||
backgroundSize: isZoomed ? 'contain' : 'auto', // Zoom only affects display
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
/>
|
||||
{ selectedEffectName && (
|
||||
<Column center fullWidth gap={ 1 }>
|
||||
<Text>{ LocalizeText('camera.effect.name.' + selectedEffectName) }</Text>
|
||||
<ReactSlider
|
||||
className="nitro-slider"
|
||||
min={ 0 }
|
||||
max={ 1 }
|
||||
step={ 0.01 }
|
||||
value={ getCurrentEffect.strength }
|
||||
onChange={ event => setSelectedEffectAlpha(event) }
|
||||
renderThumb={ ({ key, ...props }, state) => <div key={ key } { ...props }>{ state.valueNow }</div> }
|
||||
/>
|
||||
</Column>
|
||||
) }
|
||||
</Column>
|
||||
<div className="flex justify-between">
|
||||
<div className="relative inline-flex align-middle">
|
||||
<Button onClick={ event => processAction('clear_effects') }>
|
||||
<FaTrash className="fa-icon" />
|
||||
</Button>
|
||||
<Button onClick={ event => processAction('download') }>
|
||||
<FaSave className="fa-icon" />
|
||||
</Button>
|
||||
<Button onClick={ event => processAction('zoom') }>
|
||||
{ isZoomed ? <FaSearchMinus className="fa-icon" /> : <FaSearchPlus className="fa-icon" /> }
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button onClick={ event => processAction('cancel') }>
|
||||
{ LocalizeText('generic.cancel') }
|
||||
</Button>
|
||||
<Button onClick={ event => processAction('checkout') }>
|
||||
{ LocalizeText('camera.preview.button.text') }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Column>
|
||||
</Grid>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user