|
|
|
@@ -1,6 +1,6 @@
|
|
|
|
|
import { CreateLinkEvent, Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait, YouTubeRoomSettingsEvent } from '@nitrots/nitro-renderer';
|
|
|
|
|
import { AnimatePresence, motion, Variants } from 'framer-motion';
|
|
|
|
|
import { FC, useEffect, useMemo, useState } from 'react';
|
|
|
|
|
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
|
|
|
import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
|
|
|
|
|
import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
|
|
|
|
|
import { useAchievements, useFriends, useHasPermission, useInventoryUnseenTracker, useMessageEvent, useMessenger, useModTools, useNitroEvent, useSessionInfo, useWiredTools } from '../../hooks';
|
|
|
|
@@ -8,17 +8,9 @@ import { ToolbarItemView } from './ToolbarItemView';
|
|
|
|
|
import { ToolbarMeView } from './ToolbarMeView';
|
|
|
|
|
import { YouTubePlayerView } from './YouTubePlayerView';
|
|
|
|
|
|
|
|
|
|
// The 4 nav rows + backplate are ALWAYS mounted and animate between
|
|
|
|
|
// hidden/visible via framer-motion variants. Rapid show/hide toggles
|
|
|
|
|
// just retarget the in-flight spring instead of interrupting an
|
|
|
|
|
// AnimatePresence enter/exit cycle, so the pre-refactor artifacts
|
|
|
|
|
// (icons stuck at opacity 0 or scale 0.8 after spam-clicking the
|
|
|
|
|
// toggle) can no longer happen — framer's spring solver picks up from
|
|
|
|
|
// whatever the current animated value is.
|
|
|
|
|
|
|
|
|
|
const containerVariants: Variants = {
|
|
|
|
|
hidden: { transition: { staggerChildren: 0.03, staggerDirection: -1 } },
|
|
|
|
|
visible: { transition: { staggerChildren: 0.05 } }
|
|
|
|
|
hidden: { transition: { staggerChildren: 0.015, staggerDirection: -1 } },
|
|
|
|
|
visible: { transition: { staggerChildren: 0.025 } }
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const itemVariants: Variants = {
|
|
|
|
@@ -34,6 +26,7 @@ const shellVariants: Variants = {
|
|
|
|
|
const SHELL_TRANSITION = { type: 'spring' as const, stiffness: 260, damping: 26 };
|
|
|
|
|
const NAV_TRANSITION = { type: 'spring' as const, stiffness: 300, damping: 28 };
|
|
|
|
|
const ME_POPOVER_TRANSITION = { type: 'spring' as const, stiffness: 420, damping: 28 };
|
|
|
|
|
const TOGGLE_LOCK_MS = 220;
|
|
|
|
|
|
|
|
|
|
export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
{
|
|
|
|
@@ -50,9 +43,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
const { iconState = MessengerIconState.HIDDEN } = useMessenger();
|
|
|
|
|
const { openMonitor, showToolbarButton } = useWiredTools();
|
|
|
|
|
const isMod = useHasPermission('acc_supporttool');
|
|
|
|
|
// Surface the open-ticket count on the toolbar ModTools button so a
|
|
|
|
|
// new CFH pings the mod even when the launcher itself is closed.
|
|
|
|
|
// useBetween-shared state — no extra subscription cost.
|
|
|
|
|
const { tickets = [] } = useModTools();
|
|
|
|
|
const openTicketsCount = useMemo(
|
|
|
|
|
() => isMod ? tickets.filter(ticket => ticket && (ticket.state === 1)).length : 0,
|
|
|
|
@@ -60,31 +50,40 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
);
|
|
|
|
|
const isVisible = (isToolbarOpen || !isInRoom);
|
|
|
|
|
const visibilityVariant = isVisible ? 'visible' : 'hidden';
|
|
|
|
|
const toggleLockRef = useRef(false);
|
|
|
|
|
const toggleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
|
|
|
|
|
|
const desktopToolbarFrameClasses = isTouchLayout ? '' : 'md:left-1/2 md:right-auto md:h-[52px] md:w-[420px] md:-translate-x-1/2 md:items-center md:px-[6px] md:py-[4px] lg:w-[460px]';
|
|
|
|
|
const desktopToolbarOpenClasses = isTouchLayout ? '' : 'md:rounded-none md:border-0 md:bg-transparent md:shadow-none';
|
|
|
|
|
const desktopToggleClasses = isTouchLayout ? '' : 'md:mb-0';
|
|
|
|
|
const desktopToggleIconClasses = isTouchLayout ? '' : (isToolbarOpen ? 'md:-rotate-90' : 'md:rotate-90');
|
|
|
|
|
const desktopChatInputClasses = isTouchLayout ? '' : 'md:px-0';
|
|
|
|
|
const mobileOnlyClasses = isTouchLayout ? '' : 'md:hidden';
|
|
|
|
|
const desktopBlockClasses = isTouchLayout ? 'hidden' : 'hidden md:block';
|
|
|
|
|
const desktopFlexClasses = isTouchLayout ? 'hidden' : 'hidden md:flex';
|
|
|
|
|
useEffect(() => () =>
|
|
|
|
|
{
|
|
|
|
|
if(toggleTimeoutRef.current) clearTimeout(toggleTimeoutRef.current);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
// Compute the wrapper variants. `isInRoom` affects the hidden-state
|
|
|
|
|
// offset (the nav slides in from the side when in a room, from the
|
|
|
|
|
// bottom otherwise) so the variant object is derived from props.
|
|
|
|
|
const leftNavVariants: Variants = {
|
|
|
|
|
const handleToggleClick = useCallback(() =>
|
|
|
|
|
{
|
|
|
|
|
if(toggleLockRef.current) return;
|
|
|
|
|
toggleLockRef.current = true;
|
|
|
|
|
setIsToolbarOpen(value => !value);
|
|
|
|
|
if(toggleTimeoutRef.current) clearTimeout(toggleTimeoutRef.current);
|
|
|
|
|
toggleTimeoutRef.current = setTimeout(() => { toggleLockRef.current = false; }, TOGGLE_LOCK_MS);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const compactFramePosition = (isToolbarOpen && isInRoom) ? 'bottom-[55px] min-[1540px]:bottom-0' : 'bottom-0';
|
|
|
|
|
const desktopFrameTransparencyClasses = isTouchLayout ? '' : 'min-[1540px]:rounded-none min-[1540px]:border-0 min-[1540px]:bg-transparent min-[1540px]:shadow-none';
|
|
|
|
|
const mobileOnlyClasses = isTouchLayout ? '' : 'min-[1540px]:hidden';
|
|
|
|
|
const desktopBlockClasses = isTouchLayout ? 'hidden' : 'hidden min-[1540px]:block';
|
|
|
|
|
const desktopFlexClasses = isTouchLayout ? 'hidden' : 'hidden min-[1540px]:flex';
|
|
|
|
|
const leftNavVariants = useMemo<Variants>(() => ({
|
|
|
|
|
hidden: { opacity: 0, x: isInRoom ? -10 : 0, y: isInRoom ? 0 : 8, pointerEvents: 'none' },
|
|
|
|
|
visible: { opacity: 1, x: 0, y: 0, pointerEvents: 'auto' }
|
|
|
|
|
};
|
|
|
|
|
const rightNavVariants: Variants = {
|
|
|
|
|
}), [ isInRoom ]);
|
|
|
|
|
const rightNavVariants = useMemo<Variants>(() => ({
|
|
|
|
|
hidden: { opacity: 0, x: 10, pointerEvents: 'none' },
|
|
|
|
|
visible: { opacity: 1, x: 0, pointerEvents: 'auto' }
|
|
|
|
|
};
|
|
|
|
|
const mobileNavVariants: Variants = {
|
|
|
|
|
}), []);
|
|
|
|
|
const mobileNavVariants = useMemo<Variants>(() => ({
|
|
|
|
|
hidden: { opacity: 0, y: 8, pointerEvents: 'none' },
|
|
|
|
|
visible: { opacity: 1, y: 0, pointerEvents: 'auto' }
|
|
|
|
|
};
|
|
|
|
|
}), []);
|
|
|
|
|
|
|
|
|
|
useMessageEvent<YouTubeRoomSettingsEvent>(YouTubeRoomSettingsEvent, event =>
|
|
|
|
|
{
|
|
|
|
@@ -163,46 +162,39 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
{ youtubeEnabled && <YouTubePlayerView /> }
|
|
|
|
|
|
|
|
|
|
{ isInRoom &&
|
|
|
|
|
<div className={ `fixed bottom-0 left-0 right-0 z-40 flex h-[52px] items-end px-0 pt-[2px] pb-0 pointer-events-none ${ desktopToolbarFrameClasses } ${ isToolbarOpen ? `${ desktopToolbarOpenClasses } rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(10,10,12,0.58)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]` : `border-0 bg-transparent shadow-none ${ desktopToolbarOpenClasses }` }` }>
|
|
|
|
|
<div className={ `tb-frame fixed ${ compactFramePosition } left-1/2 -translate-x-1/2 z-40 flex h-[52px] w-[420px] max-w-[95vw] items-center px-[6px] py-[4px] pointer-events-none ${ isToolbarOpen ? `${ desktopFrameTransparencyClasses } rounded-[12px] border border-white/8 bg-[rgba(10,10,12,0.58)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]` : `border-0 bg-transparent shadow-none ${ desktopFrameTransparencyClasses }` }` }>
|
|
|
|
|
<motion.div
|
|
|
|
|
className={ `tb-toggle pointer-events-auto mr-2 mb-[4px] flex-shrink-0 ${ desktopToggleClasses }` }
|
|
|
|
|
onClick={ () => setIsToolbarOpen(value => !value) }
|
|
|
|
|
className="tb-toggle pointer-events-auto mr-2 flex-shrink-0"
|
|
|
|
|
onClick={ handleToggleClick }
|
|
|
|
|
whileTap={ { scale: 0.9 } }>
|
|
|
|
|
<svg
|
|
|
|
|
className={ `h-3.5 w-3.5 text-white/70 transition-transform duration-300 ${ isToolbarOpen ? 'rotate-180' : 'rotate-0' } ${ desktopToggleIconClasses }` }
|
|
|
|
|
<motion.svg
|
|
|
|
|
className="h-3.5 w-3.5 text-white/70"
|
|
|
|
|
animate={ { rotate: isToolbarOpen ? 180 : 0 } }
|
|
|
|
|
transition={ { type: 'spring', stiffness: 320, damping: 24 } }
|
|
|
|
|
fill="none"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
stroke="currentColor">
|
|
|
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={ 2.5 } d="M5 15l7-7 7 7" />
|
|
|
|
|
</svg>
|
|
|
|
|
</motion.svg>
|
|
|
|
|
</motion.div>
|
|
|
|
|
<Flex
|
|
|
|
|
alignItems="center"
|
|
|
|
|
justifyContent="center"
|
|
|
|
|
className={ `pointer-events-auto h-full w-full min-w-0 flex-1 px-[6px] ${ desktopChatInputClasses }` }
|
|
|
|
|
className="pointer-events-auto h-full w-full min-w-0 flex-1"
|
|
|
|
|
id="toolbar-chat-input-container" />
|
|
|
|
|
<div className={ `pointer-events-auto relative mr-[6px] shrink-0 ${ mobileOnlyClasses }` }>
|
|
|
|
|
<ToolbarItemView icon="friendall" onClick={ () => CreateLinkEvent('friends/toggle') } className="tb-icon" />
|
|
|
|
|
{ (requests.length > 0) &&
|
|
|
|
|
<LayoutItemCountView count={ requests.length } className="absolute -right-1 top-0" /> }
|
|
|
|
|
</div>
|
|
|
|
|
</div> }
|
|
|
|
|
|
|
|
|
|
{ /* Desktop backplate. Always mounted; opacity-driven. */ }
|
|
|
|
|
<motion.div
|
|
|
|
|
initial="hidden"
|
|
|
|
|
animate={ visibilityVariant }
|
|
|
|
|
variants={ shellVariants }
|
|
|
|
|
transition={ SHELL_TRANSITION }
|
|
|
|
|
className={ `pointer-events-none fixed bottom-0 left-0 right-0 z-[39] h-[52px] rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(10,10,12,0.58)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)] ${ desktopBlockClasses }` } />
|
|
|
|
|
|
|
|
|
|
{ /* Left nav — desktop. Container variant inheritance staggers items in/out. */ }
|
|
|
|
|
<motion.div
|
|
|
|
|
initial="hidden"
|
|
|
|
|
animate={ visibilityVariant }
|
|
|
|
|
variants={ leftNavVariants }
|
|
|
|
|
transition={ NAV_TRANSITION }
|
|
|
|
|
className={ `fixed bottom-0 left-0 z-40 h-[52px] max-w-[calc(50vw-242px)] items-center overflow-visible pl-3 ${ desktopFlexClasses }` }>
|
|
|
|
|
className={ `tb-nav-clip fixed bottom-0 left-0 z-40 h-[52px] max-w-[calc(50vw-242px)] items-center pl-3 ${ desktopFlexClasses }` }>
|
|
|
|
|
<motion.div
|
|
|
|
|
variants={ containerVariants }
|
|
|
|
|
className="tb-open-shell flex h-[52px] max-w-full items-center gap-2 overflow-visible bg-transparent px-[8px] pt-[10px] pb-[2px]">
|
|
|
|
@@ -250,7 +242,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
setMeExpanded(value => !value);
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
} }>
|
|
|
|
|
<LayoutAvatarImageView headOnly={ true } direction={ 2 } figure={ userFigure } className="tb-icon !h-[44px] !w-[32px] !bg-center !bg-no-repeat" style={ { marginTop: '4px' } } />
|
|
|
|
|
<LayoutAvatarImageView headOnly={ true } direction={ 2 } figure={ userFigure } className="tb-icon !h-[64px] !w-[32px] !bg-center !bg-no-repeat" style={ { marginTop: "8px" } } />
|
|
|
|
|
</motion.div>
|
|
|
|
|
{ (getTotalUnseen > 0) &&
|
|
|
|
|
<LayoutItemCountView count={ getTotalUnseen } className="pointer-events-none absolute -right-1 -top-1 z-10" /> }
|
|
|
|
@@ -279,14 +271,12 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
</motion.div> }
|
|
|
|
|
</motion.div>
|
|
|
|
|
</motion.div>
|
|
|
|
|
|
|
|
|
|
{ /* Right nav — desktop */ }
|
|
|
|
|
<motion.div
|
|
|
|
|
initial="hidden"
|
|
|
|
|
animate={ visibilityVariant }
|
|
|
|
|
variants={ rightNavVariants }
|
|
|
|
|
transition={ NAV_TRANSITION }
|
|
|
|
|
className={ `fixed bottom-0 z-40 h-[52px] max-w-[calc(50vw-242px)] items-center overflow-visible pr-3 ${ desktopFlexClasses } ${ isInRoom ? 'right-0' : 'right-3' }` }>
|
|
|
|
|
className={ `tb-nav-clip fixed bottom-0 z-40 h-[52px] max-w-[calc(50vw-242px)] items-center pr-3 ${ desktopFlexClasses } ${ isInRoom ? 'right-0' : 'right-3' }` }>
|
|
|
|
|
<motion.div
|
|
|
|
|
variants={ containerVariants }
|
|
|
|
|
className="tb-open-shell flex h-[52px] max-w-full items-center gap-3 overflow-visible bg-transparent px-[8px] pt-[10px] pb-[2px]">
|
|
|
|
@@ -303,14 +293,12 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
<div className={ `h-full shrink-0 ${ desktopBlockClasses }` } id="toolbar-friend-bar-container-desktop" />
|
|
|
|
|
</motion.div>
|
|
|
|
|
</motion.div>
|
|
|
|
|
|
|
|
|
|
{ /* Mobile nav. Two staggered halves split by the Me avatar. */ }
|
|
|
|
|
<motion.div
|
|
|
|
|
initial="hidden"
|
|
|
|
|
animate={ visibilityVariant }
|
|
|
|
|
variants={ mobileNavVariants }
|
|
|
|
|
transition={ NAV_TRANSITION }
|
|
|
|
|
className={ `fixed left-1/2 z-40 flex w-[95vw] -translate-x-1/2 items-center overflow-visible ${ mobileOnlyClasses } ${ isInRoom ? 'bottom-[52px] rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(10,10,12,0.58)] px-[6px] py-[4px] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]' : 'bottom-0' }` }>
|
|
|
|
|
className={ `fixed left-1/2 bottom-0 z-40 flex w-[95vw] -translate-x-1/2 items-center overflow-visible ${ mobileOnlyClasses } ${ isInRoom ? 'rounded-[12px] border border-white/8 bg-[rgba(10,10,12,0.58)] px-[6px] py-[4px] mb-[3px] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]' : '' }` }>
|
|
|
|
|
<motion.div
|
|
|
|
|
variants={ containerVariants }
|
|
|
|
|
className="tb-bar-scroll flex h-full min-w-0 flex-1 items-center gap-2 overflow-x-auto overflow-y-visible px-1">
|
|
|
|
@@ -359,7 +347,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
setMeExpanded(value => !value);
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
} }>
|
|
|
|
|
<LayoutAvatarImageView headOnly={ true } direction={ 2 } figure={ userFigure } className="tb-icon !h-[44px] !w-[32px] !bg-center !bg-no-repeat" style={ { marginTop: '4px' } } />
|
|
|
|
|
<LayoutAvatarImageView headOnly={ true } direction={ 2 } figure={ userFigure } className="tb-icon !h-[64px] !w-[32px] !bg-center !bg-no-repeat" style={ { marginTop: "8px" } } />
|
|
|
|
|
</motion.div>
|
|
|
|
|
{ (getTotalUnseen > 0) &&
|
|
|
|
|
<LayoutItemCountView count={ getTotalUnseen } className="pointer-events-none absolute -right-1 -top-1 z-10" /> }
|
|
|
|
@@ -389,12 +377,11 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
<motion.div variants={ itemVariants }>
|
|
|
|
|
<ToolbarItemView icon="furnieditor" onClick={ () => CreateLinkEvent('furni-editor/toggle') } className="tb-icon" />
|
|
|
|
|
</motion.div> }
|
|
|
|
|
{ !isInRoom &&
|
|
|
|
|
<motion.div variants={ itemVariants } className="relative">
|
|
|
|
|
<ToolbarItemView icon="friendall" onClick={ () => CreateLinkEvent('friends/toggle') } className="tb-icon" />
|
|
|
|
|
{ (requests.length > 0) &&
|
|
|
|
|
<LayoutItemCountView count={ requests.length } className="absolute -right-2 -top-1" /> }
|
|
|
|
|
</motion.div> }
|
|
|
|
|
<motion.div variants={ itemVariants } className="relative">
|
|
|
|
|
<ToolbarItemView icon="friendall" onClick={ () => CreateLinkEvent('friends/toggle') } className="tb-icon" />
|
|
|
|
|
{ (requests.length > 0) &&
|
|
|
|
|
<LayoutItemCountView count={ requests.length } className="absolute -right-2 -top-1" /> }
|
|
|
|
|
</motion.div>
|
|
|
|
|
</motion.div>
|
|
|
|
|
</motion.div>
|
|
|
|
|
</>
|
|
|
|
@@ -402,6 +389,34 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const TOOLBAR_STYLES = `
|
|
|
|
|
/* The frame's background / border / shadow swap when the toolbar
|
|
|
|
|
toggles is a plain class change, so without an explicit
|
|
|
|
|
transition the visuals snap instantly while framer-motion is
|
|
|
|
|
still animating the nav children — looked broken on rapid
|
|
|
|
|
toggles. Easing it over the same timing as the spring smooths
|
|
|
|
|
the burst-click case out. (No 'will-change' here — those props
|
|
|
|
|
change about once per toggle, but a permanent compositor layer
|
|
|
|
|
would be re-rasterised on every browser-window resize tick,
|
|
|
|
|
which is what made dragging the window corner feel sluggish.) */
|
|
|
|
|
.tb-frame {
|
|
|
|
|
transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, border-radius 220ms ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Left + right nav containers shrink with the viewport, but the icons
|
|
|
|
|
inside don't. Without horizontal clipping they overflow into the
|
|
|
|
|
centred chat input around the md breakpoint. 'overflow-x: clip'
|
|
|
|
|
clips horizontally WITHOUT creating a scroll container the way
|
|
|
|
|
'overflow-x: hidden' would — so the Me popover that animates
|
|
|
|
|
upwards from the avatar still escapes vertically, and the browser
|
|
|
|
|
doesn't render a stray vertical scrollbar thumb on the nav.
|
|
|
|
|
Negative inset margins on the clip path keep vertical breathing
|
|
|
|
|
room for the popover even on engines that fall back to 'hidden'. */
|
|
|
|
|
.tb-nav-clip {
|
|
|
|
|
overflow-x: clip;
|
|
|
|
|
overflow-y: visible;
|
|
|
|
|
overflow-clip-margin: 0 0 200px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tb-icon {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transition: transform 0.15s ease;
|
|
|
|
|
DuckieTM