nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update ExternalImageWidget

Browse Source
This commit is contained in:
Bill 2021-08-15 01:58:29 -04:00
parent 243c0dc6dc
commit 6d0e1d8010
7 changed files with 68 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/room/events/IPhotoData.ts Normal file
View File

@ -0,0 +1,32 @@
export interface IPhotoData
{
/**
* creator username
*/
n?: string;
/**
* creator user id
*/
s?: number;
/**
* photo unique id
*/
u?: number;
/**
* creation timestamp
*/
t?: number;
/**
* photo caption
*/
m?: string;
/**
* photo image url
*/
w?: string;
}

36
src/views/room/events/RoomWidgetUpdateExternalImageEvent.ts
View File

@ -1,8 +1,9 @@
import { IPhotoData } from './IPhotoData';
import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
export class RoomWidgetUpdateExternalImageEvent extends RoomWidgetUpdateEvent
{
public static UPDATE_EXTERNAL_IMAGE: string = 'RWUCSHE_UPDATE_EXTERNAL_IMAGE';
public static UPDATE_EXTERNAL_IMAGE: string = 'RWUEIE_UPDATE_EXTERNAL_IMAGE';
private _objectId: number;
private _photoData: IPhotoData;
@ -25,36 +26,3 @@ export class RoomWidgetUpdateExternalImageEvent extends RoomWidgetUpdateEvent
return this._photoData;
}
}
export interface IPhotoData
{
/**
* creator username
*/
n?: string;
/**
* creator user id
*/
s?: number;
/**
* photo unique id
*/
u?: number;
/**
* creation timestamp
*/
t?: number;
/**
* photo caption
*/
m?: string;
/**
* photo image url
*/
w?: string;
}

1
src/views/room/events/index.ts
View File

@ -1,3 +1,4 @@
export * from './IPhotoData';
export * from './RoomObjectItem';
export * from './RoomWidgetAvatarInfoEvent';
export * from './RoomWidgetChooserContentEvent';

16
src/views/room/handlers/FurnitureExternalImageWidgetHandler.ts
View File

@ -1,7 +1,8 @@
import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable, RoomWidgetEnum } from 'nitro-renderer';
import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable, RoomWidgetEnum } from '@nitrots/nitro-renderer';
import { GetRoomEngine } from '../../../api';
import { IPhotoData } from '../events';
import { RoomWidgetUpdateEvent } from '../events/RoomWidgetUpdateEvent';
import { IPhotoData, RoomWidgetUpdateExternalImageEvent } from '../events/RoomWidgetUpdateExternalImageEvent';
import { RoomWidgetUpdateExternalImageEvent } from '../events/RoomWidgetUpdateExternalImageEvent';
import { RoomWidgetMessage } from '../messages/RoomWidgetMessage';
import { RoomWidgetHandler } from './RoomWidgetHandler';
@ -13,8 +14,7 @@ export class FurnitureExternalImageWidgetHandler extends RoomWidgetHandler
{
switch(event.type)
{
case(RoomEngineTriggerWidgetEvent.OPEN_WIDGET):
{
case RoomEngineTriggerWidgetEvent.OPEN_WIDGET: {
const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
@ -24,14 +24,12 @@ export class FurnitureExternalImageWidgetHandler extends RoomWidgetHandler
this._lastFurniId = widgetEvent.objectId;
const data = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA);
const photoData = (JSON.parse(data) as IPhotoData);
const dataObj: IPhotoData = JSON.parse(data);
this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateExternalImageEvent(this._lastFurniId, dataObj));
this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateExternalImageEvent(roomObject.id, photoData));
return;
}
case RoomEngineTriggerWidgetEvent.CLOSE_WIDGET:
{
case RoomEngineTriggerWidgetEvent.CLOSE_WIDGET: {
const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
if(widgetEvent.objectId !== this._lastFurniId) return;

1
src/views/room/widgets/furniture/FurnitureWidgets.scss
View File

@ -1,5 +1,6 @@
@import './dimmer/FurnitureDimmerView';
@import './exchange-credit/FurnitureExchangeCreditView';
@import './external-image/FurnitureExternalImageView';
@import './friend-furni/FurnitureFriendFurniView';
@import './manipulation-menu/FurnitureManipulationMenuView';
@import './mannequin/FurnitureMannequinView';

7
src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss Normal file
View File

@ -0,0 +1,7 @@
.nitro-external-image-widget {
.picture-preview {
width: 320px;
height: 320px;
}
}

27
src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx
View File

@ -1,15 +1,16 @@
import { FC, useCallback, useState } from 'react';
import { CreateEventDispatcherHook } from '../../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { LocalizeText } from '../../../../../utils';
import { useRoomContext } from '../../../context/RoomContext';
import { IPhotoData, RoomWidgetUpdateExternalImageEvent } from '../../../events/RoomWidgetUpdateExternalImageEvent';
import { IPhotoData } from '../../../events';
import { RoomWidgetUpdateExternalImageEvent } from '../../../events/RoomWidgetUpdateExternalImageEvent';
export const FurnitureExternalImageView: FC<{}> = props =>
{
const [ objectId, setObjectId ] = useState(-1);
const [photoData, setPhotoData ] = useState<IPhotoData>(null);
const { roomSession = null, eventDispatcher = null } = useRoomContext();
const [ photoData, setPhotoData ] = useState<IPhotoData>(null);
const { eventDispatcher = null } = useRoomContext();
const close = useCallback(() =>
{
@ -30,15 +31,23 @@ export const FurnitureExternalImageView: FC<{}> = props =>
CreateEventDispatcherHook(RoomWidgetUpdateExternalImageEvent.UPDATE_EXTERNAL_IMAGE, eventDispatcher, onRoomWidgetUpdateExternalImageEvent);
if(objectId === -1 || !photoData) return null;
if((objectId === -1) || !photoData) return null;
return(
<NitroCardView>
<NitroCardView className="nitro-external-image-widget">
<NitroCardHeaderView headerText={ '' } onCloseClick={ close } />
<NitroCardContentView>
<img src={photoData.w} alt=""/>
{photoData.m && <div>{photoData.m}</div>}
<div>{`${photoData.n} - ${new Date(photoData.t * 1000).toLocaleDateString()}`}</div>
<div className="d-flex justify-content-center align-items-center picture-preview border mb-2" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>
{ !photoData.w &&
<div className="text-black fw-bold">
{ LocalizeText('camera.loading') }
</div> }
</div>
<span className="text-center text-black">{ photoData.m && <div>{ photoData.m }</div> }</span>
<div className="d-flex align-items-center justify-content-between">
<span className="text-black">{ (photoData.n || '') }</span>
<span className="text-black">{ new Date(photoData.t * 1000).toLocaleDateString() }</span>
</div>
</NitroCardContentView>
</NitroCardView>
);