mirror of
https://github.com/yusufipk/YTChatHub.git
synced 2026-09-11 19:06:14 +00:00
fix: prevent pulse animation on initial load and hide N/A messages in chat/overlay
This commit is contained in:
@@ -49,6 +49,7 @@ export default function DashboardPage() {
|
|||||||
const [memberPulse, setMemberPulse] = useState(false);
|
const [memberPulse, setMemberPulse] = useState(false);
|
||||||
const prevSuperChatCountRef = useRef(0);
|
const prevSuperChatCountRef = useRef(0);
|
||||||
const prevMemberCountRef = useRef(0);
|
const prevMemberCountRef = useRef(0);
|
||||||
|
const hasInitializedRef = useRef(false);
|
||||||
|
|
||||||
const handleSelect = useCallback(
|
const handleSelect = useCallback(
|
||||||
async (message: ChatMessage) => {
|
async (message: ChatMessage) => {
|
||||||
@@ -113,13 +114,24 @@ export default function DashboardPage() {
|
|||||||
const newMembers = useMemo(() => messages.filter(m => m.membershipGift || m.membershipGiftPurchase), [messages]);
|
const newMembers = useMemo(() => messages.filter(m => m.membershipGift || m.membershipGiftPurchase), [messages]);
|
||||||
const regularMessages = useMemo(() => messages.filter(m => !m.superChat && !m.membershipGift && !m.membershipGiftPurchase), [messages]);
|
const regularMessages = useMemo(() => messages.filter(m => !m.superChat && !m.membershipGift && !m.membershipGiftPurchase), [messages]);
|
||||||
|
|
||||||
|
// Initialize counts on first load without triggering pulse
|
||||||
|
useEffect(() => {
|
||||||
|
if (!hasInitializedRef.current && messages.length > 0) {
|
||||||
|
prevSuperChatCountRef.current = superChats.length;
|
||||||
|
prevMemberCountRef.current = newMembers.length;
|
||||||
|
hasInitializedRef.current = true;
|
||||||
|
}
|
||||||
|
}, [messages.length, superChats.length, newMembers.length]);
|
||||||
|
|
||||||
// Detect new superchats and trigger pulse
|
// Detect new superchats and trigger pulse
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (!hasInitializedRef.current) return;
|
||||||
|
|
||||||
const prevCount = prevSuperChatCountRef.current;
|
const prevCount = prevSuperChatCountRef.current;
|
||||||
const currentCount = superChats.length;
|
const currentCount = superChats.length;
|
||||||
|
|
||||||
// Trigger pulse if count increased (but not on initial mount when both are 0)
|
// Trigger pulse if count increased
|
||||||
if (currentCount > prevCount && !(prevCount === 0 && currentCount === 0)) {
|
if (currentCount > prevCount) {
|
||||||
setSuperChatPulse(true);
|
setSuperChatPulse(true);
|
||||||
const timer = setTimeout(() => setSuperChatPulse(false), 10000);
|
const timer = setTimeout(() => setSuperChatPulse(false), 10000);
|
||||||
prevSuperChatCountRef.current = currentCount;
|
prevSuperChatCountRef.current = currentCount;
|
||||||
@@ -131,11 +143,13 @@ export default function DashboardPage() {
|
|||||||
|
|
||||||
// Detect new members and trigger pulse
|
// Detect new members and trigger pulse
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (!hasInitializedRef.current) return;
|
||||||
|
|
||||||
const prevCount = prevMemberCountRef.current;
|
const prevCount = prevMemberCountRef.current;
|
||||||
const currentCount = newMembers.length;
|
const currentCount = newMembers.length;
|
||||||
|
|
||||||
// Trigger pulse if count increased (but not on initial mount when both are 0)
|
// Trigger pulse if count increased
|
||||||
if (currentCount > prevCount && !(prevCount === 0 && currentCount === 0)) {
|
if (currentCount > prevCount) {
|
||||||
setMemberPulse(true);
|
setMemberPulse(true);
|
||||||
const timer = setTimeout(() => setMemberPulse(false), 10000);
|
const timer = setTimeout(() => setMemberPulse(false), 10000);
|
||||||
prevMemberCountRef.current = currentCount;
|
prevMemberCountRef.current = currentCount;
|
||||||
@@ -613,7 +627,7 @@ function ChatItem({ message, isSelected, onSelect, onLinkClick }: ChatItemProps)
|
|||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
) : message.text && (
|
) : message.text && message.text !== 'N/A' && (
|
||||||
<p className="chatItem__text">
|
<p className="chatItem__text">
|
||||||
<MessageText text={message.text} onLinkClick={onLinkClick} />
|
<MessageText text={message.text} onLinkClick={onLinkClick} />
|
||||||
</p>
|
</p>
|
||||||
@@ -652,7 +666,7 @@ function MemberItem({ message, isSelected, onSelect, onLinkClick }: ChatItemProp
|
|||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
) : message.text && (
|
) : message.text && message.text !== 'N/A' && (
|
||||||
<p className="memberItem__text">
|
<p className="memberItem__text">
|
||||||
<MessageText text={message.text} onLinkClick={onLinkClick} />
|
<MessageText text={message.text} onLinkClick={onLinkClick} />
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -629,7 +629,7 @@ main {
|
|||||||
background: #1f1f1f;
|
background: #1f1f1f;
|
||||||
border: 1px solid #2a2a2a;
|
border: 1px solid #2a2a2a;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
transition: all 150ms ease;
|
transition: all 250ms ease-out;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -647,6 +647,7 @@ main {
|
|||||||
background: rgba(59, 130, 246, 0.15);
|
background: rgba(59, 130, 246, 0.15);
|
||||||
border-color: rgba(59, 130, 246, 0.5);
|
border-color: rgba(59, 130, 246, 0.5);
|
||||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||||
|
filter: brightness(0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatItem__header {
|
.chatItem__header {
|
||||||
@@ -781,7 +782,7 @@ main {
|
|||||||
background: #1f1f1f;
|
background: #1f1f1f;
|
||||||
border: 1px solid #2a2a2a;
|
border: 1px solid #2a2a2a;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
transition: all 150ms ease;
|
transition: all 250ms ease-out;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@@ -796,6 +797,7 @@ main {
|
|||||||
background: rgba(16, 185, 129, 0.15);
|
background: rgba(16, 185, 129, 0.15);
|
||||||
border-color: rgba(16, 185, 129, 0.5);
|
border-color: rgba(16, 185, 129, 0.5);
|
||||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
|
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
|
||||||
|
filter: brightness(0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
.memberItem__header {
|
.memberItem__header {
|
||||||
|
|||||||
@@ -89,7 +89,7 @@ export default function OverlayPage() {
|
|||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
) : message.text && (
|
) : message.text && message.text !== 'N/A' && (
|
||||||
<p className="overlay__superchat-text">{message.text}</p>
|
<p className="overlay__superchat-text">{message.text}</p>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
@@ -119,7 +119,7 @@ export default function OverlayPage() {
|
|||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
) : message.text && (
|
) : message.text && message.text !== 'N/A' && (
|
||||||
<p className="overlay__membership-text">{message.text}</p>
|
<p className="overlay__membership-text">{message.text}</p>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
@@ -156,7 +156,7 @@ export default function OverlayPage() {
|
|||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
) : message.text && (
|
) : message.text && message.text !== 'N/A' && (
|
||||||
<p className="overlay__text">{message.text}</p>
|
<p className="overlay__text">{message.text}</p>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user