diff --git a/src/renderer/App.vue b/src/renderer/App.vue index e47bf8d57d6ea..0a7df65be74cd 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -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) { diff --git a/src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.css b/src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.css index 67bb50b62f7e1..0bc4f06a89a67 100644 --- a/src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.css +++ b/src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.css @@ -232,3 +232,45 @@ position: relative; inset-block-start: 0.45rem; } + +.title { + margin: 0; +} + +.title, +.popoutChatButton { + padding: 10px; +} + +.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; +} + +.titleContainer { + display: flex; + justify-content: space-between; + margin-block: 1em; +} diff --git a/src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.vue b/src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.vue index 557e47465096c..28eeeb7c426e1 100644 --- a/src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.vue +++ b/src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.vue @@ -41,15 +41,34 @@ v-else class="relative" > -