Update ExternalImageWidget

src/views/room/events/IPhotoData.ts

@@ -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;
+}

src/views/room/events/RoomWidgetUpdateExternalImageEvent.ts

@@ -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;
-}

src/views/room/events/index.ts

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

src/views/room/handlers/FurnitureExternalImageWidgetHandler.ts

@@ -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(roomObject.id, photoData));
-
-                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateExternalImageEvent(this._lastFurniId, dataObj));
                 return;
             }
-            case RoomEngineTriggerWidgetEvent.CLOSE_WIDGET: 
+            case RoomEngineTriggerWidgetEvent.CLOSE_WIDGET: {
-            {
                 const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
 
                 if(widgetEvent.objectId !== this._lastFurniId) return;

src/views/room/widgets/furniture/FurnitureWidgets.scss

@@ -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';

src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss

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

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

@@ -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 [ photoData, setPhotoData ] = useState<IPhotoData>(null);
-
+    const { eventDispatcher = null } = useRoomContext();
-    const { roomSession = null, 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=""/>
+                <div className="d-flex justify-content-center align-items-center picture-preview border mb-2" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>
-                {photoData.m && <div>{photoData.m}</div>}
+                    { !photoData.w &&
-                <div>{`${photoData.n} - ${new Date(photoData.t * 1000).toLocaleDateString()}`}</div>
+                        <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>
     );