Skip to content

Add button to open live chat popup in browser #8278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ozrendev wants to merge 8 commits into
base: development
Choose a base branch
from
+75 −10
Open

Add button to open live chat popup in browser #8278

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d6e318e
add pop out button to live chat
ozrendev Nov 13, 2025
a53478b
remove nested styling
ozrendev Dec 10, 2025
c76d9fe
change to a element for external link handling
ozrendev Jan 8, 2026
b08d11a
remove deprecated App.js
ozrendev Jan 8, 2026
c7da41e
Merge branch 'development' of github.com:FreeTubeApp/FreeTube into ad…
ozrendev Jan 8, 2026
3b183cb
change external link regex
ozrendev Jan 8, 2026
304a3f6
Remove last bit of nested CSS
absidue Jan 8, 2026
b0a605a
css tweaks
ozrendev Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/renderer/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,8 +459,8 @@ function handleLinkClick(event) {
const href = event.target.href
event.preventDefault()

// Check if it's a YouTube link
const youtubeUrlPattern = /^https?:\/\/((www\.)?youtube\.com(\/embed)?|youtu\.be)\/.*$/
// Check if it's a YouTube link, but exclude live chat pop out
const youtubeUrlPattern = /^https?:\/\/((www\.)?youtube\.com(\/embed)?|youtu\.be)\/(?!.*live_chat).*$/
const isYoutubeLink = youtubeUrlPattern.test(href)

if (isYoutubeLink) {
Expand Down
40 changes: 40 additions & 0 deletions src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,3 +232,43 @@
position: relative;
inset-block-start: 0.45rem;
}

.popoutChatButton {
border-radius: 50%;
border-style: none;
background-color: transparent;
line-height: 1em;
color: var(--primary-text-color);
cursor: pointer;
font-size: 20px;
transition: background 0.2s ease-out;
}

.popoutChatButton:hover {
background-color: var(--side-nav-hover-color);
color: var(--side-nav-hover-text-color);
transition: background 0.2s ease-in;
}

.popoutChatButton:active {
background-color: var(--tertiary-text-color);
color: var(--side-nav-active-text-color);
transition: background 0.2s ease-in;
}

.popoutChatIcon {
pointer-events: none;
Copy link
Member

@absidue absidue Jan 8, 2026

Choose a reason for hiding this comment

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

Why did you add this?

Copy link
Contributor Author

@ozrendev ozrendev Jan 9, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

The external link handling wouldn't trigger without this being set

With regular text inside the <a> element, it would trigger correctly. But with <FontAwesomeIcon> inside, it wouldn't without this.

}

.titleContainer {
display: flex;
justify-content: space-between;
margin-block: 1em;

}

.title,
.popoutChatButton {
padding: 10px;
}

32 changes: 26 additions & 6 deletions src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,34 @@
v-else
class="relative"
>
<h4>
{{ t("Video.Live Chat") }}
<div
class="titleContainer"
>
<span
v-if="!hideVideoViews && watchingCount !== null"
class="watchingCount"
class="title"
>
{{ t('Global.Counts.Watching Count', { count: formattedWatchingCount }, watchingCount) }}
{{ t("Video.Live Chat") }}
<span
v-if="!hideVideoViews && watchingCount !== null"
class="watchingCount"
>
{{ t('Global.Counts.Watching Count', { count: formattedWatchingCount }, watchingCount) }}
</span>
</span>
</h4>
<a
:href="`https://www.youtube.com/live_chat?is_popout=1&v=${props.videoId}`"
:title="$t('Video.Popout Live Chat')"
target="_blank"
class="popoutChatButton"
>
<FontAwesomeIcon
class="popoutChatIcon"
:icon="['fas', 'fa-arrow-up-right-from-square']"
>
{{ t("Video.Popout Live Chat") }}
</FontAwesomeIcon>
</a>
</div>
<div
v-if="superChatComments.length > 0"
class="superChatComments"
Expand Down Expand Up @@ -575,6 +594,7 @@ function scrollToBottom() {
stayAtBottom = true
showScrollToBottom.value = false
}

</script>

<style scoped src="./WatchVideoLiveChat.css" />
2 changes: 2 additions & 0 deletions src/renderer/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
faArrowLeft,
faArrowRight,
faArrowUp,
faArrowUpRightFromSquare,
faBars,
faBarsProgress,
faBorderAll,
Expand Down Expand Up @@ -149,6 +150,7 @@ library.add(
faArrowLeft,
faArrowRight,
faArrowUp,
faArrowUpRightFromSquare,
faBars,
faBarsProgress,
faBorderAll,
Expand Down
1 change: 1 addition & 0 deletions static/locales/en-US.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -879,6 +879,7 @@ Video:
Live Now: Live Now
Live Chat: Live Chat
Enable Live Chat: Enable Live Chat
Popout Live Chat: Popout Chat
Live Chat is currently not supported in this build.: Live Chat is currently not
supported in this build.
Live chat is enabled. Chat messages will appear here once sent.: Live chat is enabled. Chat
Expand Down
Loading