mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
🆙 Small updates
This commit is contained in:
duckietm
@@ -6,7 +6,6 @@ import { GetConfigurationValue, LocalizeText, SendMessageComposer, SetLocalStora
|
||||
import { Text } from '../../../../common';
|
||||
import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
|
||||
import { getRegisteredPlugins, INitroPlugin, subscribePlugins } from '../../../plugins/NitroPluginApi';
|
||||
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
|
||||
|
||||
export const RoomToolsWidgetView: FC<{}> = props => {
|
||||
const [areBubblesMuted, setAreBubblesMuted] = useState(false);
|
||||
@@ -16,7 +15,6 @@ export const RoomToolsWidgetView: FC<{}> = props => {
|
||||
const [roomTags, setRoomTags] = useState<string[]>(null);
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
const [isOpenHistory, setIsOpenHistory] = useState<boolean>(false);
|
||||
const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
|
||||
const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]);
|
||||
const [plugins, setPlugins] = useState<INitroPlugin[]>([]);
|
||||
const { navigatorData = null } = useNavigator();
|
||||
@@ -81,11 +79,10 @@ export const RoomToolsWidgetView: FC<{}> = props => {
|
||||
|
||||
const onChangeRoomHistory = (roomId: number, roomName: string) => {
|
||||
let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]');
|
||||
if (newStorage.some((room: { roomId: number }) => room.roomId === roomId)) return;
|
||||
|
||||
newStorage = newStorage.filter((room: { roomId: number }) => room.roomId !== roomId);
|
||||
newStorage = [ ...newStorage, { roomId, roomName } ];
|
||||
|
||||
if (newStorage.length > 10) newStorage = newStorage.slice(-10);
|
||||
if (newStorage.length >= 10) newStorage.shift();
|
||||
newStorage = [...newStorage, { roomId, roomName }];
|
||||
|
||||
setRoomHistory(newStorage);
|
||||
SetLocalStorage('nitro.room.history', newStorage);
|
||||
@@ -102,55 +99,48 @@ export const RoomToolsWidgetView: FC<{}> = props => {
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if(roomName || roomOwner || (roomTags && roomTags.length)) setIsOpen(true);
|
||||
setIsOpen(true);
|
||||
const timeout = setTimeout(() => setIsOpen(false), 5000);
|
||||
return () => clearTimeout(timeout);
|
||||
}, [roomName, roomOwner, roomTags]);
|
||||
|
||||
useEffect(() => {
|
||||
if(!isCollapsed && (roomName || roomOwner || (roomTags && roomTags.length))) setIsOpen(true);
|
||||
}, [ isCollapsed, roomName, roomOwner, roomTags ]);
|
||||
|
||||
useEffect(() => {
|
||||
setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]'));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="nitro-room-tools-container">
|
||||
<div className="nitro-room-tools-rail">
|
||||
<button type="button" className={ `nitro-room-tools-toggle ${ isCollapsed ? 'is-collapsed' : 'is-open' }` } onClick={ () => setIsCollapsed(value => !value) } title={ isCollapsed ? 'Apri strumenti stanza' : 'Chiudi strumenti stanza' }>
|
||||
{ isCollapsed ? <FaChevronRight className="text-[11px]" /> : <FaChevronLeft className="text-[11px]" /> }
|
||||
</button>
|
||||
<AnimatePresence initial={ false }>
|
||||
{ !isCollapsed &&
|
||||
<motion.div
|
||||
initial={ { opacity: 0, x: -10, scale: 0.96 } }
|
||||
animate={ { opacity: 1, x: 0, scale: 1 } }
|
||||
exit={ { opacity: 0, x: -10, scale: 0.96 } }
|
||||
transition={ { duration: 0.26, ease: [ 0.16, 1, 0.3, 1 ] } }
|
||||
className="flex flex-col items-center justify-center p-2 nitro-room-tools">
|
||||
<div className="cursor-pointer nitro-icon icon-cog" title={LocalizeText('room.settings.button.text')} onClick={() => handleToolClick('settings')} />
|
||||
<div className={classNames('cursor-pointer', 'nitro-icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more'))} title={LocalizeText('room.zoom.button.text')} onClick={() => handleToolClick('zoom')} />
|
||||
<div className="cursor-pointer nitro-icon icon-chat-history" title={LocalizeText('room.chathistory.button.text')} onClick={() => handleToolClick('chat_history')} />
|
||||
<div className={classNames('cursor-pointer', 'nitro-icon', (areBubblesMuted ? 'icon-chat-disablebubble' : 'icon-chat-enablebubble'))} title={areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')} onClick={() => handleToolClick('hiddenbubbles')} />
|
||||
useEffect(() => {
|
||||
const handleTabClose = () => {
|
||||
window.localStorage.removeItem('nitro.room.history');
|
||||
};
|
||||
window.addEventListener('beforeunload', handleTabClose);
|
||||
return () => window.removeEventListener('beforeunload', handleTabClose);
|
||||
}, []);
|
||||
|
||||
{navigatorData.canRate && (
|
||||
<div className="cursor-pointer nitro-icon icon-like-room" title={LocalizeText('room.like.button.text')} onClick={() => handleToolClick('like_room')} />
|
||||
)}
|
||||
<div className="cursor-pointer nitro-icon icon-room-link" title={LocalizeText('navigator.embed.caption')} onClick={() => handleToolClick('toggle_room_link')} />
|
||||
<div className="cursor-pointer nitro-icon icon-room-history-enabled" title={LocalizeText('room.history.button.tooltip')} onClick={() => handleToolClick('room_history')} />
|
||||
{plugins.map(plugin => (
|
||||
<div
|
||||
key={plugin.name}
|
||||
className={`cursor-pointer nitro-icon ${plugin.icon || 'icon-cog'}`}
|
||||
title={plugin.label}
|
||||
onClick={() => plugin.onOpen()}
|
||||
/>
|
||||
))}
|
||||
</motion.div> }
|
||||
</AnimatePresence>
|
||||
return (
|
||||
<div className="flex space-x-2 nitro-room-tools-container">
|
||||
<div className="flex flex-col items-center justify-center p-2 nitro-room-tools">
|
||||
<div className="cursor-pointer nitro-icon icon-cog" title={LocalizeText('room.settings.button.text')} onClick={() => handleToolClick('settings')} />
|
||||
<div className={classNames('cursor-pointer', 'nitro-icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more'))} title={LocalizeText('room.zoom.button.text')} onClick={() => handleToolClick('zoom')} />
|
||||
<div className="cursor-pointer nitro-icon icon-chat-history" title={LocalizeText('room.chathistory.button.text')} onClick={() => handleToolClick('chat_history')} />
|
||||
<div className={classNames('cursor-pointer', 'nitro-icon', (areBubblesMuted ? 'icon-chat-disablebubble' : 'icon-chat-enablebubble'))} title={areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')} onClick={() => handleToolClick('hiddenbubbles')} />
|
||||
|
||||
{navigatorData.canRate && (
|
||||
<div className="cursor-pointer nitro-icon icon-like-room" title={LocalizeText('room.like.button.text')} onClick={() => handleToolClick('like_room')} />
|
||||
)}
|
||||
<div className="cursor-pointer nitro-icon icon-room-link" title={LocalizeText('navigator.embed.caption')} onClick={() => handleToolClick('toggle_room_link')} />
|
||||
<div className="cursor-pointer nitro-icon icon-room-history-enabled" title={LocalizeText('room.history.button.tooltip')} onClick={() => handleToolClick('room_history')} />
|
||||
{plugins.map(plugin => (
|
||||
<div
|
||||
key={plugin.name}
|
||||
className={`cursor-pointer nitro-icon ${plugin.icon || 'icon-cog'}`}
|
||||
title={plugin.label}
|
||||
onClick={() => plugin.onOpen()}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col justify-center nitro-room-tools-side-container">
|
||||
<div className="flex flex-col justify-center">
|
||||
<AnimatePresence>
|
||||
{(!isCollapsed && (isOpen || !!roomName || !!roomOwner || !!(roomTags && roomTags.length))) && (
|
||||
{isOpen && (
|
||||
<motion.div initial={{ x: -100 }} animate={{ x: 0 }} exit={{ x: -100 }} transition={{ duration: 0.3 }}>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="flex flex-col px-3 py-2 rounded nitro-room-tools-info">
|
||||
@@ -171,7 +161,7 @@ export const RoomToolsWidgetView: FC<{}> = props => {
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
{(!isCollapsed && isOpenHistory) && (
|
||||
{isOpenHistory && (
|
||||
<motion.div initial={{ x: -100 }} animate={{ x: 0 }} exit={{ x: -100 }} transition={{ duration: 0.3 }} className="nitro-room-tools-history">
|
||||
<div className="flex flex-col px-3 py-2 rounded nitro-room-history">
|
||||
{roomHistory.map(history => (
|
||||
|
||||
@@ -11,7 +11,7 @@ export const ToolbarItemView = forwardRef<HTMLDivElement, PropsWithChildren<{
|
||||
<div
|
||||
ref={ ref }
|
||||
className={ classNames(
|
||||
'relative h-[32px] w-[32px] shrink-0 cursor-pointer bg-center bg-no-repeat transition-transform duration-200 ease-out hover:-translate-y-[1px] active:translate-y-0',
|
||||
'cursor-pointer relative',
|
||||
`nitro-icon icon-${ icon }`,
|
||||
className
|
||||
) }
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, RoomObjectCategory } from '@nitrots/nitro-renderer';
|
||||
import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer';
|
||||
import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react';
|
||||
import { DispatchUiEvent, GetConfigurationValue, GetRoomSession, GetUserProfile, LocalizeText } from '../../api';
|
||||
import { LayoutItemCountView } from '../../common';
|
||||
import { Flex, LayoutItemCountView } from '../../common';
|
||||
import { GuideToolEvent } from '../../events';
|
||||
import { ToolbarItemView } from './ToolbarItemView';
|
||||
|
||||
export const ToolbarMeView: FC<PropsWithChildren<{
|
||||
useGuideTool: boolean;
|
||||
@@ -11,8 +10,8 @@ export const ToolbarMeView: FC<PropsWithChildren<{
|
||||
setMeExpanded: Dispatch<SetStateAction<boolean>>;
|
||||
}>> = props =>
|
||||
{
|
||||
const { useGuideTool = false, unseenAchievementCount = 0, children = null } = props;
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
const { useGuideTool = false, unseenAchievementCount = 0, setMeExpanded = null, children = null, ...rest } = props;
|
||||
const elementRef = useRef<HTMLDivElement>();
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
@@ -23,22 +22,29 @@ export const ToolbarMeView: FC<PropsWithChildren<{
|
||||
GetRoomEngine().selectRoomObject(roomSession.roomId, roomSession.ownRoomIndex, RoomObjectCategory.UNIT);
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const onClick = (event: MouseEvent) => setMeExpanded(false);
|
||||
|
||||
document.addEventListener('click', onClick);
|
||||
|
||||
return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
|
||||
}, [ setMeExpanded ]);
|
||||
|
||||
return (
|
||||
<div className="w-fit max-w-[min(calc(100vw-16px),520px)] rounded-[12px] border border-white/8 bg-[rgba(10,10,12,0.58)] px-[10px] py-[7px] shadow-[0_10px_24px_rgba(0,0,0,0.2)]" ref={ elementRef }>
|
||||
<div className="flex items-center gap-[8px] overflow-x-auto overflow-y-visible whitespace-nowrap">
|
||||
{ (GetConfigurationValue('guides.enabled') && useGuideTool) &&
|
||||
<ToolbarItemView icon="me-helper-tool" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } title={ LocalizeText('guide.help.button.label') } /> }
|
||||
<ToolbarItemView icon="me-achievements" onClick={ event => CreateLinkEvent('achievements/toggle') } title={ LocalizeText('toolbar.icon.label.achievements') }>
|
||||
{ (unseenAchievementCount > 0) &&
|
||||
<LayoutItemCountView count={ unseenAchievementCount } /> }
|
||||
</ToolbarItemView>
|
||||
<ToolbarItemView icon="me-profile" onClick={ event => GetUserProfile(GetSessionDataManager().userId) } title={ LocalizeText('toolbar.icon.label.memenu') } />
|
||||
<ToolbarItemView icon="me-rooms" onClick={ event => CreateLinkEvent('navigator/search/myworld_view') } title={ LocalizeText('navigator.myworlds') } />
|
||||
<ToolbarItemView icon="me-clothing" onClick={ event => CreateLinkEvent('avatar-editor/toggle') } title={ LocalizeText('widget.memenu.settings.avatar') } />
|
||||
<ToolbarItemView icon="me-settings" onClick={ event => CreateLinkEvent('user-settings/toggle') } title={ LocalizeText('widget.memenu.settings.title') } />
|
||||
<ToolbarItemView icon="me-forums" onClick={ event => CreateLinkEvent('groupforum/toggle') } title={ LocalizeText('toolbar.icon.label.forums') } />
|
||||
{ children }
|
||||
<Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,20,20,.95)] border border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,255,255,.1),inset_-2px_-2px_rgba(255,255,255,.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
|
||||
{ (GetConfigurationValue('guides.enabled') && useGuideTool) &&
|
||||
<div className="navigation-item relative nitro-icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
|
||||
<div className="navigation-item relative nitro-icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }>
|
||||
{ (unseenAchievementCount > 0) &&
|
||||
<LayoutItemCountView count={ unseenAchievementCount } /> }
|
||||
</div>
|
||||
</div>
|
||||
<div className="navigation-item relative nitro-icon icon-me-profile cursor-pointer" onClick={ event => GetUserProfile(GetSessionDataManager().userId) } />
|
||||
<div className="navigation-item relative nitro-icon icon-me-rooms cursor-pointer" onClick={ event => CreateLinkEvent('navigator/search/myworld_view') } />
|
||||
<div className="navigation-item relative nitro-icon icon-me-clothing cursor-pointer" onClick={ event => CreateLinkEvent('avatar-editor/toggle') } />
|
||||
<div className="navigation-item relative nitro-icon icon-me-settings cursor-pointer" onClick={ event => CreateLinkEvent('user-settings/toggle') } />
|
||||
<div className="navigation-item relative nitro-icon icon-me-forums cursor-pointer" onClick={ event => CreateLinkEvent('groupforum/toggle') } title={ LocalizeText('toolbar.icon.label.forums') } />
|
||||
{ children }
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,28 +3,15 @@ import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
|
||||
import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
|
||||
import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo, useWiredTools } from '../../hooks';
|
||||
import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks';
|
||||
import { ToolbarItemView } from './ToolbarItemView';
|
||||
import { ToolbarMeView } from './ToolbarMeView';
|
||||
import { YouTubePlayerView } from './YouTubePlayerView';
|
||||
|
||||
const containerVariants = {
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.05 } },
|
||||
exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 as const } }
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 10, scale: 0.8 },
|
||||
visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
|
||||
exit: { opacity: 0, y: 6, scale: 0.85, transition: { duration: 0.1 } }
|
||||
};
|
||||
|
||||
export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
{
|
||||
const { isInRoom } = props;
|
||||
const [ isMeExpanded, setMeExpanded ] = useState(false);
|
||||
const [ isToolbarOpen, setIsToolbarOpen ] = useState(false);
|
||||
const [ useGuideTool, setUseGuideTool ] = useState(false);
|
||||
const [ youtubeEnabled, setYoutubeEnabled ] = useState(false);
|
||||
const { userFigure = null } = useSessionInfo();
|
||||
@@ -32,10 +19,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
const { getTotalUnseen = 0 } = useAchievements();
|
||||
const { requests = [] } = useFriends();
|
||||
const { iconState = MessengerIconState.HIDDEN } = useMessenger();
|
||||
const { openMonitor, showToolbarButton } = useWiredTools();
|
||||
const isMod = GetSessionDataManager().isModerator;
|
||||
const hasDesktopUnifiedShell = (isInRoom && isToolbarOpen);
|
||||
const showDesktopShell = (isToolbarOpen || !isInRoom);
|
||||
|
||||
useMessageEvent<YouTubeRoomSettingsEvent>(YouTubeRoomSettingsEvent, event =>
|
||||
{
|
||||
@@ -78,11 +62,13 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
|
||||
const targetBounds = target.getBoundingClientRect();
|
||||
const imageBounds = image.getBoundingClientRect();
|
||||
|
||||
const left = (imageBounds.x - targetBounds.x);
|
||||
const top = (imageBounds.y - targetBounds.y);
|
||||
const squared = Math.sqrt(((left * left) + (top * top)));
|
||||
const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
|
||||
const height = 20;
|
||||
|
||||
const motionName = (`ToolbarBouncing[${ iconName }]`);
|
||||
|
||||
if(!Motions.getMotionByTag(motionName))
|
||||
@@ -153,62 +139,3 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const TOOLBAR_STYLES = `
|
||||
.tb-icon {
|
||||
opacity: 1;
|
||||
transition: transform 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tb-icon:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tb-icon:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.tb-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 9px;
|
||||
background: rgba(18, 16, 14, 0.80);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.tb-toggle:hover {
|
||||
background: rgba(30, 26, 20, 0.88);
|
||||
border-color: rgba(255, 255, 255, 0.13);
|
||||
}
|
||||
|
||||
.tb-bar-scroll {
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.tb-bar-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tb-open-shell {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.tb-open-shell::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -220,6 +220,7 @@
|
||||
font-family: Ubuntu, sans-serif;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.content-area {
|
||||
@@ -247,7 +248,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
@media (max-width: 991.98px) {
|
||||
.nitro-card {
|
||||
resize: none !important;
|
||||
max-width: calc(100vw - 16px) !important;
|
||||
|
||||
Reference in New Issue
Block a user