Dimmer and Friends stuff

This commit is contained in:
MyNameIsBatman 2021-09-15 13:26:51 -03:00
parent bee5513c13
commit a55f33578e
38 changed files with 89 additions and 98 deletions

View File

@ -33,6 +33,7 @@
"system.packet.log": false,
"system.pong.manually": true,
"system.pong.interval.ms": 20000,
"room.color.skip.transition": true,
"avatar.mandatory.libraries": [
"bd:1",
"li:0"

View File

@ -5,24 +5,7 @@
"thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
"url.prefix": "http://localhost:3000",
"chat.viewer.height.percentage": 0.40,
"navigator.slider.enabled": true,
"navigator.slider.content": [
{
"title": "Games Hub",
"image": "https://i.imgur.com/TFoivxi.png",
"roomId": 2240
},
{
"title": "Help Desk",
"image": "https://i.imgur.com/GO981GC.png",
"roomId": 2351
},
{
"title": "The Lido",
"image": "https://i.imgur.com/NVH38bV.png",
"roomId": 2346
}
],
"widget.dimmer.colorwheel": true,
"hotelview": {
"widgets": {
"slot.1.widget": "promoarticle",

View File

@ -1,4 +1,4 @@
import { MessengerFriend } from '../../views/friend-list/common/MessengerFriend';
import { MessengerFriend } from '../../views/friends/common/MessengerFriend';
import { FriendListEvent } from './FriendListEvent';
export class FriendListContentEvent extends FriendListEvent

View File

@ -1,12 +1,17 @@
import { FC, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { NitroCardAccordionItemViewProps } from './NitroCardAccordionItemView.types';
export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
{
const { className = '', headerClassName = '', contentClassName = '', headerText = '' } = props;
const { className = '', headerClassName = '', contentClassName = '', headerText = '', defaultState = false } = props;
const [ isExpanded, setIsExpanded ] = useState(false);
useEffect(() =>
{
setIsExpanded(defaultState);
}, [ defaultState ]);
return (
<div className={ 'nitro-card-accordion-item ' + className + (isExpanded ? ' active' : '') }>
<div className={ 'nitro-card-accordion-item-header px-2 py-1 d-flex ' + headerClassName } onClick={ () => setIsExpanded((value) => !value) }>

View File

@ -4,4 +4,5 @@ export interface NitroCardAccordionItemViewProps
headerClassName?: string;
contentClassName?: string;
headerText: string;
defaultState?: boolean;
}

View File

@ -2,7 +2,7 @@
@import './avatar-editor/AvatarEditorView';
@import './camera/CameraWidgetView';
@import './catalog/CatalogView';
@import './friend-list/FriendListView';
@import './friends/FriendsView';
@import './groups/GroupView';
@import './hotel-view/HotelView';
@import './inventory/InventoryView';

View File

@ -1,5 +0,0 @@
.nitro-friend-list {
width: 250px;
}
@import './views//friend-bar/FriendBarView';

View File

@ -1,17 +0,0 @@
import { FC } from 'react';
import { FriendListFriendsItemView } from '../friends-item/FriendListFriendsItemView';
import { FriendListFriendsViewProps } from './FriendListFriendsView.types';
export const FriendListFriendsView: FC<FriendListFriendsViewProps> = props =>
{
const { list = null } = props;
if(!list) return null;
return (<>
{ list.map((friend, index) =>
{
return <FriendListFriendsItemView key={ index } friend={ friend } />
}) }
</>);
}

View File

@ -1,5 +0,0 @@
import { MessengerFriend } from './../../common/MessengerFriend';
export interface FriendListFriendsViewProps
{
list: MessengerFriend[];
}

View File

@ -1,6 +0,0 @@
import { MessengerRequest } from './../../common/MessengerRequest';
export interface FriendListRequestsItemViewProps
{
request: MessengerRequest;
}

View File

@ -1,17 +0,0 @@
import { FC } from 'react';
import { FriendListRequestsItemView } from '../requests-item/FriendListRequestsItemView';
import { FriendListRequestsViewProps } from './FriendListRequestsView.types';
export const FriendListRequestsView: FC<FriendListRequestsViewProps> = props =>
{
const { list = null } = props;
if(!list) return null;
return (<>
{ list.map((request, index) =>
{
return <FriendListRequestsItemView key={ index } request={ request } />
}) }
</>);
};

View File

@ -1,6 +0,0 @@
import { MessengerRequest } from './../../common/MessengerRequest';
export interface FriendListRequestsViewProps
{
list: MessengerRequest[];
}

View File

@ -0,0 +1,5 @@
.nitro-friend-list {
width: 250px;
}
@import './views/friend-bar/FriendBarView';

View File

@ -11,15 +11,13 @@ import { SendMessageHook } from '../../hooks/messages/message-event';
import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
import { FriendListContextProvider } from './context/FriendListContext';
import { FriendListMessageHandler } from './FriendListMessageHandler';
import { FriendListViewProps } from './FriendListView.types';
import { FriendListReducer, initialFriendList } from './reducers/FriendListReducer';
import { FriendBarView } from './views/friend-bar/FriendBarView';
import { FriendListFriendsView } from './views/friends/FriendListFriendsView';
import { FriendListRequestsView } from './views/requests/FriendListRequestsView';
import { FriendsListView } from './views/list/FriendsListView';
const TABS: string[] = ['friendlist.friends', 'generic.search'];
export const FriendListView: FC<FriendListViewProps> = props =>
export const FriendsView: FC<{}> = props =>
{
const [ friendListState, dispatchFriendListState ] = useReducer(FriendListReducer, initialFriendList);
const { friends = null, requests = null, settings = null } = friendListState;
@ -120,14 +118,14 @@ export const FriendListView: FC<FriendListViewProps> = props =>
</NitroCardTabsView>
<div className="text-black">
{ currentTab === 0 && <NitroCardAccordionView>
<NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` }>
<FriendListFriendsView list={ onlineFriends } />
<NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } defaultState={ true }>
<FriendsListView list={ onlineFriends } />
</NitroCardAccordionItemView>
<NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
<FriendListFriendsView list={ offlineFriends } />
<FriendsListView list={ offlineFriends } />
</NitroCardAccordionItemView>
{ requests.length > 0 && <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${requests.length})` }>
<FriendListRequestsView list={ requests } />
<FriendsListView list={ requests } />
</NitroCardAccordionItemView> }
</NitroCardAccordionView> }
</div>

View File

@ -1,6 +1,3 @@
export interface FriendListViewProps
{}
export class FriendListTabs
{
public static readonly FRIENDS: string = 'friendlist.friends';

View File

@ -4,9 +4,9 @@ import { LocalizeText } from '../../../../api';
import { SendMessageHook } from '../../../../hooks';
import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
import { MessengerFriend } from '../../common/MessengerFriend';
import { FriendListFriendsItemViewProps } from './FriendListFriendsItemView.types';
import { FriendsListItemViewProps } from './FriendsListItemView.types';
export const FriendListFriendsItemView: FC<FriendListFriendsItemViewProps> = props =>
export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
{
const { friend = null } = props;

View File

@ -1,6 +1,6 @@
import { MessengerFriend } from '../../common/MessengerFriend';
export interface FriendListFriendsItemViewProps
export interface FriendsListItemViewProps
{
friend: MessengerFriend;
}

View File

@ -0,0 +1,25 @@
import React, { FC } from 'react';
import { MessengerFriend } from '../../common/MessengerFriend';
import { MessengerRequest } from '../../common/MessengerRequest';
import { FriendsListItemView } from '../friend-item/FriendsListItemView';
import { FriendsRequestItemView } from '../request-item/FriendsRequestItemView';
import { FriendsListViewProps } from './FriendsListView.types';
export const FriendsListView: FC<FriendsListViewProps> = props =>
{
const { list = null } = props;
if(!list) return null;
return (<>
{ list.map((item, index) =>
{
if(item instanceof MessengerFriend)
return <FriendsListItemView key={ index } friend={ item } />
else if(item instanceof MessengerRequest)
return <FriendsRequestItemView key={ index } request={ item } />
else
return null;
}) }
</>);
}

View File

@ -0,0 +1,7 @@
import { MessengerFriend } from '../../common/MessengerFriend';
import { MessengerRequest } from '../../common/MessengerRequest';
export interface FriendsListViewProps
{
list: MessengerFriend[] | MessengerRequest[];
}

View File

@ -2,9 +2,9 @@ import { AcceptFriendComposer, DeclineFriendComposer } from '@nitrots/nitro-rend
import { FC, useCallback } from 'react';
import { SendMessageHook } from '../../../../hooks/messages/message-event';
import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
import { FriendListRequestsItemViewProps } from './FriendListRequestsItemView.types';
import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types';
export const FriendListRequestsItemView: FC<FriendListRequestsItemViewProps> = props =>
export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
{
const { request = null } = props;

View File

@ -0,0 +1,6 @@
import { MessengerRequest } from '../../common/MessengerRequest';
export interface FriendsRequestItemViewProps
{
request: MessengerRequest;
}

View File

@ -7,7 +7,7 @@ import { AchievementsView } from '../achievements/AchievementsView';
import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
import { CameraWidgetView } from '../camera/CameraWidgetView';
import { CatalogView } from '../catalog/CatalogView';
import { FriendListView } from '../friend-list/FriendListView';
import { FriendsView } from '../friends/FriendsView';
import { GroupsView } from '../groups/GroupsView';
import { HotelView } from '../hotel-view/HotelView';
import { InventoryView } from '../inventory/InventoryView';
@ -63,7 +63,7 @@ export const MainView: FC<MainViewProps> = props =>
<NavigatorView />
<InventoryView />
<CatalogView />
<FriendListView />
<FriendsView />
<RightSideView />
<UserSettingsView />
<UserProfileView />

View File

@ -6,4 +6,8 @@
height: 79px;
background: url(../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png) center no-repeat;
}
.color-swatch {
height: 30px;
}
}

View File

@ -1,7 +1,7 @@
import { NitroEvent, RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import ReactSlider from 'react-slider';
import { GetRoomEngine, LocalizeText, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetDimmerUpdateEvent, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
import { GetConfiguration, GetRoomEngine, LocalizeText, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetDimmerUpdateEvent, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
import { RoomDimmerPreset } from '../../../../../api/nitro/room/widgets/events/RoomDimmerPreset';
import { RoomWidgetDimmerStateUpdateEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
import { RoomWidgetDimmerChangeStateMessage } from '../../../../../api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage';
@ -10,12 +10,15 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro
import { useRoomContext } from '../../../context/RoomContext';
import { FurnitureDimmerData } from './FurnitureDimmerData';
const DEFAULT_COLORS: string[] = ['#74F5F5', '#0053F7', '#E759DE', '#EA4532', '#F2F851', '#82F349', '#000000'];
export const FurnitureDimmerView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);
const [ isActive, setIsActive ] = useState<boolean>(false);
const [ isFreeColorMode, setIsFreeColorMode ] = useState<boolean>(false);
const [ selectedPresetId, setSelectedPresetId ] = useState<number>(-1);
const [ presets, setPresets ] = useState<RoomDimmerPreset[]>([]);
@ -28,6 +31,11 @@ export const FurnitureDimmerView: FC<{}> = props =>
return parseInt(previewColor.replace('#', ''), 16);
}, [ previewColor ]);
useEffect(() =>
{
if(GetConfiguration<boolean>('widget.dimmer.colorwheel')) setIsFreeColorMode(true);
}, []);
useEffect(() =>
{
if(selectedPresetId === -1 || presets.length === 0 || !isActive) return;
@ -132,7 +140,14 @@ export const FurnitureDimmerView: FC<{}> = props =>
<div className="p-2">
<div className="form-group mb-2">
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
<input type="color" className="form-control" value={ previewColor } onChange={ (e) => setPreviewColor(e.target.value) } />
{ isFreeColorMode && <input type="color" className="form-control" value={ previewColor } onChange={ (e) => setPreviewColor(e.target.value) } /> }
{ !isFreeColorMode && <div className="d-flex gap-2">
{ DEFAULT_COLORS.map((color, index) =>
{
return <div key={ index } className="rounded w-100 color-swatch cursor-pointer" onClick={ () => setPreviewColor(color) } style={{ backgroundColor: color }}></div>;
}) }
</div> }
</div>
<div className="form-group mb-2">
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>