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

Feat: Channel Member Icons + Load Custom Channel Emojis in Comments (#1819) 

* channel member + custom channel emojis

* accessibility improvements

* show member icon for comment replies

* update yt-comment-scraper. make member icon more accessible.
This commit is contained in:
ChunkyProgrammer 2022-05-14 13:33:00 -04:00 committed by GitHub
parent cfff65d2f5
commit 62bdf5e4d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -55,7 +55,7 @@
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^2.0.2",
"@freetube/youtube-chat": "^1.1.2",
"@freetube/yt-comment-scraper": "^6.0.0",
"@freetube/yt-comment-scraper": "^6.1.0",
"@silvermine/videojs-quality-selector": "^1.2.5",
"autolinker": "^3.15.0",
"bulma-pro": "^0.2.0",

6
src/renderer/components/watch-video-comments/watch-video-comments.css
View File

@ -78,6 +78,12 @@
font-size: 12px;
}
.commentMemberIcon {
margin-left: 5px;
width: 14px;
height: 14px;
}
.commentLikeCount {
font-size: 11px;
margin-left: 70px;

5
src/renderer/components/watch-video-comments/watch-video-comments.js
View File

@ -269,6 +269,11 @@ export default Vue.extend({
comment.likes = null
}
comment.text = autolinker.link(comment.text.replace(/(<(?!br>)([^>]+)>)/ig, ''))
if (comment.customEmojis.length > 0) {
comment.customEmojis.forEach(emoji => {
comment.text = comment.text.replace(emoji.text, `<img width="14" height="14" class="commentCustomEmoji" alt="${emoji.text.substring(2, emoji.text.length - 1)}" src="${emoji.emojiThumbnails[0].url}">`)
})
}
return comment
})

14
src/renderer/components/watch-video-comments/watch-video-comments.vue
View File

@ -68,6 +68,14 @@
>
{{ comment.author }}
</span>
<img
v-if="comment.isMember"
:src="comment.memberIconUrl"
:title="$t('Comments.Member')"
:aria-label="$t('Comments.Member')"
class="commentMemberIcon"
alt=""
>
<span class="commentDate">
{{ comment.time }}
</span>
@ -137,6 +145,12 @@
>
{{ reply.author }}
</span>
<img
v-if="reply.isMember"
:src="reply.memberIconUrl"
class="commentMemberIcon"
alt=""
>
<span class="commentDate">
{{ reply.time }}
</span>

1
static/locales/en-US.yaml
View File

@ -646,6 +646,7 @@ Comments:
Load More Comments: Load More Comments
No more comments available: No more comments available
Pinned by: Pinned by
Member: Member
Up Next: Up Next
#Tooltips

8
yarn.lock
View File

@ -1332,10 +1332,10 @@
axios "^0.21.1"
tslib "^1.11.1"
"@freetube/yt-comment-scraper@^6.0.0":
version "6.0.0"
resolved "https://registry.npmjs.org/@freetube/yt-comment-scraper/-/yt-comment-scraper-6.0.0.tgz"
integrity sha512-QZbfuuhjT1ZmEUd15CQ9rvBiNfW9BCtciaB06qW9z7xC22ViC9NmRTlwSXTS/a5OxUH8app13O05xgGhZbxnmA==
"@freetube/yt-comment-scraper@^6.1.0":
version "6.1.0"
resolved "https://registry.yarnpkg.com/@freetube/yt-comment-scraper/-/yt-comment-scraper-6.1.0.tgz#13583dedf5cf0cff6d42d155ef5f2474c64fd4ee"
integrity sha512-Cj6Of7DPkTH1ax1AcaOn0xul179YsnfaNNoH11lQ4xUxUrmtf70Qj04+FDI+7/O/qsOR3RMq1mreCvM6BQI6Aw==
dependencies:
axios "^0.21.1"