Skip to content

Added "focus on chatter" feature#552

Closed
DanielFirpo wants to merge 7 commits into
SevenTV:masterfrom
DanielFirpo:focus-on-chatter
Closed

Added "focus on chatter" feature#552
DanielFirpo wants to merge 7 commits into
SevenTV:masterfrom
DanielFirpo:focus-on-chatter

Conversation

@DanielFirpo
Copy link
Copy Markdown

https://imgur.com/a/66m5PSQ

Added the ability to double click on a username in chat to dim all others, so you can easily see messages from that user. Also added setting to disable/enable.

I think it's planned to add a better user card that shows all of a user's messages, at which point this feature could be argued to be redundant, but I think it might still have a place as a more convenient way to quickly focus on a chatter for a few seconds to see if they respond to something, without needing to have the user card open on your screen. Idk, what do u think?

Copy link
Copy Markdown
Contributor

@AnatoleAM AnatoleAM left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is unfortunately quite low quality, I would advise learning a little bit about Vue (the framework used by the Extension) first, then this could be integrated better now that we have a proper user card, for example a button inside the card to toggle this.

Comment on lines +389 to +411
onMounted(() => {
window.addEventListener("click", handleClick);
});

onUnmounted(() => {
window.removeEventListener("click", handleClick);
});

// Reset focused chatter state when clicking anywhere but a username
function handleClick(e: MouseEvent) {
if (e.target) {
const clickedElement = e.target as Element;
if (clickedElement.parentNode) {
if (clickedElement.parentNode.parentNode) {
const parentOfParent = clickedElement.parentNode.parentNode as Element;
if (parentOfParent.classList.contains("seventv-chat-user-username")) {
return;
}
}
}
}
focusedChatters.value = [];
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you doing DOM operations on our own elements?

Comment on lines +273 to +289
function handleUsernameClick(ev: MouseEvent) {
if (clickToFocusOnChatterEnabled.value) {
const target = ev.currentTarget;
if (ev.detail === 1) {
clickTimer = setTimeout(() => {
// Single click
openViewerCard(ev, msg.value.author!.username, msg.value.id, target);
}, 300);
} else if (ev.detail >= 2) {
// Double click
clearTimeout(clickTimer);
onUsernameDoubleClick();
}
} else {
openViewerCard(ev, msg.value.author!.username, msg.value.id);
}
}
Copy link
Copy Markdown
Contributor

@AnatoleAM AnatoleAM Jun 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Such logic should be built into a directive.

Or simply using the dblclick event

Comment on lines +35 to +58
function onUsernameDoubleClick() {
if (!focusedChatters) return;
focusedChatters.value.push(props.token.content.recipient);
// Clear blue selection after double clicking username
document.getSelection()?.empty();
}

let clickTimer = -1;
function onClick(ev: MouseEvent) {
tools.openViewerCard(ev, props.token.content.recipient, props.msg.id);
if (clickToFocusOnChatterEnabled.value) {
const target = ev.currentTarget;
if (ev.detail === 1) {
clickTimer = setTimeout(() => {
// Single click
tools.openViewerCard(ev, props.token.content.recipient, props.msg.id, target);
}, 300);
} else if (ev.detail >= 2) {
// Double click
clearTimeout(clickTimer);
onUsernameDoubleClick();
}
} else {
tools.openViewerCard(ev, props.token.content.recipient, props.msg.id);
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate code, why?

@AnatoleAM AnatoleAM closed this Jun 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants