Merge remote-tracking branch 'origin/dev' into feature/user-profile

src/views/room/RoomView.tsx

@@ -1,6 +1,5 @@
 import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { FC, useEffect, useRef, useState } from 'react';
 import { GetNitroInstance, InitializeRoomInstanceRenderingCanvas } from '../../api';
 import { DispatchMouseEvent } from '../../api/nitro/room/DispatchMouseEvent';
 import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
@@ -21,6 +20,7 @@ export const RoomView: FC<RoomViewProps> = props =>
     const [ roomCanvas, setRoomCanvas ] = useState<HTMLCanvasElement>(null);
     const [ canvasId, setCanvasId ] = useState(-1);
     const [ widgetHandler, setWidgetHandler ] = useState<IRoomWidgetHandlerManager>(null);
+    const elementRef = useRef<HTMLDivElement>();
 
     useEffect(() =>
     {
@@ -111,6 +111,8 @@ export const RoomView: FC<RoomViewProps> = props =>
             GetNitroInstance().render();
         }
 
+        if(elementRef && elementRef.current) elementRef.current.appendChild(canvas);
+
         setRoomCanvas(canvas);
         setCanvasId(canvasId);
     }, [ roomSession ]);
@@ -119,15 +121,12 @@ export const RoomView: FC<RoomViewProps> = props =>
 
     return (
         <RoomContextProvider value={ { roomSession, canvasId, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }>
-            <div className="nitro-room w-100 h-100">
-               <div id="room-view" className="nitro-room-container"></div>
-                { roomCanvas && createPortal(null, document.getElementById('room-view').appendChild(roomCanvas)) }
+            <div ref={ elementRef } id="room-view" className="nitro-room-container" />
             { widgetHandler && 
                 <>
                     <RoomColorView />
                     <RoomWidgetsView />
                 </> }
-            </div>
         </RoomContextProvider>
     );
 }

src/views/room/widgets/context-menu/ContextMenuView.tsx

@@ -80,8 +80,8 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
         
         const deltaY = (location.y - maxStack);
 
-        let x = (location.x - (elementRef.current.offsetWidth / 2));
-        let y = (deltaY + offset);
+        let x = Math.round(location.x - (elementRef.current.offsetWidth / 2));
+        let y = Math.round(deltaY + offset);
 
         const maxLeft = ((GetNitroInstance().width - elementRef.current.offsetWidth) - SPACE_AROUND_EDGES);
         const maxTop = ((GetNitroInstance().height - elementRef.current.offsetHeight) - SPACE_AROUND_EDGES);

src/views/shared/friendly-time/FriendlyTimeView.tsx

@@ -0,0 +1,34 @@
+import { FriendlyTime } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FriendlyTimeViewProps } from './FriendlyTimeView.types';
+
+export const FriendlyTimeView: FC<FriendlyTimeViewProps> = props =>
+{
+    const { seconds = 0, isShort = false, ...rest } = props;
+    const [ updateId, setUpdateId ] = useState(-1);
+
+    const getStartSeconds = useMemo(() =>
+    {
+        return (Math.round(new Date().getSeconds()) - seconds);
+    }, [ seconds ]);
+
+    const getFriendlyTime = useCallback(() =>
+    {
+        const value = (Math.round(new Date().getSeconds()) - getStartSeconds);
+
+        if(isShort) return FriendlyTime.format(value);
+
+        return FriendlyTime.format(value);
+    }, [ getStartSeconds, isShort ]);
+
+    useEffect(() =>
+    {
+        const interval = setInterval(() => setUpdateId(prevValue => (prevValue + 1)), 10000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div { ...rest }>{ getFriendlyTime() }</div>
+    );
+}

src/views/shared/friendly-time/FriendlyTimeView.types.ts

@@ -0,0 +1,7 @@
+import { DetailsHTMLAttributes } from 'react';
+
+export interface FriendlyTimeViewProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    seconds: number;
+    isShort?: boolean;
+}