tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace jquery in live chat and improve the message styling (#2666) 

* Replace jquery in live chat and improve the message styling

* Fix the automatic scrolling
This commit is contained in:
absidue 2022-10-04 19:55:13 +02:00 committed by GitHub
parent 39af7bbf0b
commit f87014aedc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
View File

@ -19,6 +19,11 @@
margin: 0;
}
:deep(.liveChatEmoji) {
vertical-align: middle;
margin: 0 2px;
}
.errorIcon {
width: 100%;
color: var(--tertiary-text-color);
@ -47,6 +52,7 @@
margin-right: 2px;
height: 30px;
cursor: pointer;
background-color: var(--primary-color);
border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
}
@ -54,6 +60,7 @@
.superChatContent {
margin-left: 32px;
margin-top: 6px;
color: var(--text-with-main-color);
}
.superChat .channelThumbnail {
@ -142,17 +149,18 @@
width: 100%;
padding-top: 5px;
padding-bottom: 7px;
display: grid;
grid-template-columns: min-content auto;
gap: 5px;
}
.channelThumbnail {
width: 25px;
float: left;
border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border-radius: 200px;
-webkit-border-radius: 200px;
}
.chatContent {
margin-left: 30px;
margin-top: 5px;
margin-bottom: 2px;
font-size: 12px;
@ -162,7 +170,6 @@
.channelName {
color: var(--tertiary-text-color);
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
}

31
src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
View File

@ -5,7 +5,6 @@ import FtCard from '../ft-card/ft-card.vue'
import FtButton from '../ft-button/ft-button.vue'
import FtListVideo from '../ft-list-video/ft-list-video.vue'
import $ from 'jquery'
import autolinker from 'autolinker'
import { LiveChat } from '@freetube/youtube-chat'
@ -74,8 +73,13 @@ export default Vue.extend({
return '445px'
}
},
hideLiveChat: function () {
return this.$store.getters.getHideLiveChat
},
scrollingBehaviour: function () {
return this.$store.getters.getDisableSmoothScrolling ? 'auto' : 'smooth'
}
},
created: function () {
@ -146,6 +150,8 @@ export default Vue.extend({
comment.messageHtml = ''
comment.message.forEach((text) => {
if (typeof text === 'undefined') return
if (typeof (text.navigationEndpoint) !== 'undefined') {
if (typeof (text.navigationEndpoint.watchEndpoint) !== 'undefined') {
const htmlRef = `<a href="https://www.youtube.com/watch?v=${text.navigationEndpoint.watchEndpoint.videoId}">${text.text}</a>`
@ -154,7 +160,7 @@ export default Vue.extend({
comment.messageHtml = (comment.messageHtml + text.text).replace(/(<([^>]+)>)/ig, '')
}
} else if (typeof (text.alt) !== 'undefined') {
const htmlImg = `<img src="${text.url}" alt="${text.alt}" height="24" width="24" />`
const htmlImg = `<img src="${text.url}" alt="${text.alt}" class="liveChatEmoji" height="24" width="24" />`
comment.messageHtml = comment.messageHtml.replace(/(<([^>]+)>)/ig, '') + htmlImg
} else {
comment.messageHtml = (comment.messageHtml + text.text).replace(/(<([^>]+)>)/ig, '')
@ -163,10 +169,7 @@ export default Vue.extend({
comment.messageHtml = autolinker.link(comment.messageHtml)
const liveChatComments = $('.liveChatComments')
const liveChatMessage = $('.liveChatMessage')
if (typeof (liveChatComments.get(0)) === 'undefined' && typeof (liveChatMessage.get(0)) === 'undefined') {
if (typeof this.$refs.liveChatComments === 'undefined' && typeof this.$refs.liveChatMessage === 'undefined') {
console.error("Can't find chat object. Stopping chat connection")
this.liveChat.stop()
return
@ -202,7 +205,12 @@ export default Vue.extend({
}
if (this.stayAtBottom) {
liveChatComments.animate({ scrollTop: liveChatComments.prop('scrollHeight') })
setTimeout(() => {
this.$refs.liveChatComments?.scrollTo({
top: this.$refs.liveChatComments.scrollHeight,
behavior: this.scrollingBehaviour
})
})
}
if (this.comments.length > 150 && this.stayAtBottom) {
@ -226,9 +234,8 @@ export default Vue.extend({
},
onScroll: function (event) {
const liveChatComments = $('.liveChatComments').get(0)
const liveChatComments = this.$refs.liveChatComments
if (event.wheelDelta >= 0 && this.stayAtBottom) {
$('.liveChatComments').data('animating', 0)
this.stayAtBottom = false
if (liveChatComments.scrollHeight > liveChatComments.clientHeight) {
@ -242,8 +249,10 @@ export default Vue.extend({
},
scrollToBottom: function () {
const liveChatComments = $('.liveChatComments')
liveChatComments.animate({ scrollTop: liveChatComments.prop('scrollHeight') })
this.$refs.liveChatComments.scrollTo({
top: this.$refs.liveChatComments.scrollHeight,
behavior: this.scrollingBehaviour
})
this.stayAtBottom = true
this.showScrollToBottom = false
},

8
src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
View File

@ -28,6 +28,7 @@
</div>
<div
v-else-if="comments.length === 0"
ref="liveChatMessage"
class="messageContainer liveChatMessage"
>
<p
@ -48,7 +49,6 @@
<div
v-for="(comment, index) in superChatComments"
:key="index"
:style="{ backgroundColor: 'var(--primary-color)' }"
class="superChat"
:class="comment.superchat.colorClass"
@click="showSuperChatComment(comment)"
@ -59,7 +59,6 @@
>
<p
class="superChatContent"
:style="{ color: 'var(--text-with-main-color)' }"
>
<span
class="donationAmount"
@ -105,6 +104,7 @@
</div>
</div>
<div
ref="liveChatComments"
class="liveChatComments"
:style="{ height: chatHeight }"
@mousewheel="e => onScroll(e)"
@ -143,7 +143,7 @@
v-html="comment.messageHtml"
/>
</div>
<div
<template
v-else
>
<img
@ -180,7 +180,7 @@
v-html="comment.messageHtml"
/>
</p>
</div>
</template>
</div>
</div>
<div