From 6d0e1d8010ffc2b7777f96cd93e95a87ca0ca1cd Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 15 Aug 2021 01:58:29 -0400
Subject: [PATCH] Update ExternalImageWidget

---
 src/views/room/events/IPhotoData.ts           | 32 +++++++++++++++++
 .../RoomWidgetUpdateExternalImageEvent.ts     | 36 ++-----------------
 src/views/room/events/index.ts                |  1 +
 .../FurnitureExternalImageWidgetHandler.ts    | 16 ++++-----
 .../widgets/furniture/FurnitureWidgets.scss   |  1 +
 .../FurnitureExternalImageView.scss           |  7 ++++
 .../FurnitureExternalImageView.tsx            | 27 +++++++++-----
 7 files changed, 68 insertions(+), 52 deletions(-)
 create mode 100644 src/views/room/events/IPhotoData.ts
 create mode 100644 src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss

diff --git a/src/views/room/events/IPhotoData.ts b/src/views/room/events/IPhotoData.ts
new file mode 100644
index 00000000..05441767
--- /dev/null
+++ b/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;
+}
diff --git a/src/views/room/events/RoomWidgetUpdateExternalImageEvent.ts b/src/views/room/events/RoomWidgetUpdateExternalImageEvent.ts
index 0b8f9425..781f2b44 100644
--- a/src/views/room/events/RoomWidgetUpdateExternalImageEvent.ts
+++ b/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;
-}
diff --git a/src/views/room/events/index.ts b/src/views/room/events/index.ts
index d584aa5a..b11465ce 100644
--- a/src/views/room/events/index.ts
+++ b/src/views/room/events/index.ts
@@ -1,3 +1,4 @@
+export * from './IPhotoData';
 export * from './RoomObjectItem';
 export * from './RoomWidgetAvatarInfoEvent';
 export * from './RoomWidgetChooserContentEvent';
diff --git a/src/views/room/handlers/FurnitureExternalImageWidgetHandler.ts b/src/views/room/handlers/FurnitureExternalImageWidgetHandler.ts
index 080d0044..0c45a2fc 100644
--- a/src/views/room/handlers/FurnitureExternalImageWidgetHandler.ts
+++ b/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(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;
diff --git a/src/views/room/widgets/furniture/FurnitureWidgets.scss b/src/views/room/widgets/furniture/FurnitureWidgets.scss
index 9f5271ea..31176553 100644
--- a/src/views/room/widgets/furniture/FurnitureWidgets.scss
+++ b/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';
diff --git a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss b/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss
new file mode 100644
index 00000000..4e39e9d0
--- /dev/null
+++ b/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss
@@ -0,0 +1,7 @@
+.nitro-external-image-widget {
+
+    .picture-preview {
+        width: 320px;
+        height: 320px;
+    }
+}
diff --git a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx b/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx
index e38bab45..4a748685 100644
--- a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx
+++ b/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 { 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>
     );