lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve accessibility of Watch View (#2986) 

* Improve Watch page accessibility

Co-Authored-By: Jason <84899178+jasonhenriquez@users.noreply.github.com>

* fix title issue, remove unused gotochannel function

Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>
This commit is contained in:
ChunkyProgrammer 2022-12-23 11:44:54 -05:00 committed by GitHub
parent 677dc86f76
commit 42ef2a3e26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 132 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/renderer/components/playlist-info/playlist-info.js
View File

@ -122,19 +122,6 @@ export default Vue.extend({
openExternalLink(invidiousUrl)
break
}
},
playFirstVideo() {
const playlistInfo = {
playlistId: this.id
}
this.$router.push(
{
path: `/watch/${this.firstVideoId}`,
query: playlistInfo
}
)
}
}
})

15
src/renderer/components/playlist-info/playlist-info.vue
View File

@ -3,10 +3,18 @@
<div
class="playlistThumbnail"
>
<img
:src="thumbnail"
@click="playFirstVideo"
<router-link
:to="{
path: `/watch/${firstVideoId}`,
query: { playlistId: id }
}"
tabindex="-1"
>
<img
:src="thumbnail"
alt=""
>
</router-link>
</div>
<div class="playlistStats">
@ -36,6 +44,7 @@
<img
class="channelThumbnail"
:src="channelThumbnail"
alt=""
>
<h3
class="channelName"

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

@ -334,10 +334,6 @@ export default Vue.extend({
})
},
goToChannel: function (channelId) {
this.$router.push({ path: `/channel/${channelId}` })
},
...mapActions([
'invidiousAPICall'
])

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

@ -3,14 +3,22 @@
<h4
v-if="commentData.length === 0 && !isLoading"
class="getCommentsTitle"
role="button"
tabindex="0"
@click="getCommentData"
@keydown.space.prevent="getCommentData"
@keydown.enter.prevent="getCommentData"
>
{{ $t("Comments.Click to View Comments") }}
</h4>
<h4
v-if="commentData.length > 0 && !isLoading && !showComments"
class="getCommentsTitle"
role="button"
tabindex="0"
@click="showComments = true"
@keydown.space.prevent="showComments = true"
@keydown.enter.prevent="showComments = true"
>
{{ $t("Comments.Click to View Comments") }}
</h4>
@ -29,7 +37,11 @@
{{ $t("Comments.Comments") }}
<span
class="hideComments"
role="button"
tabindex="0"
@click="showComments = false"
@keydown.space.prevent="showComments = false"
@keydown.enter.prevent="showComments = false"
>
{{ $t("Comments.Hide Comments") }}
</span>
@ -39,14 +51,20 @@
>
<div
v-for="(comment, index) in commentData"
:id="'comment' + index"
:key="index"
class="comment"
>
<img
:src="comment.authorThumb"
class="commentThumbnail"
@click="goToChannel(comment.authorLink)"
<router-link
:to="`/channel/${comment.authorLink}`"
tabindex="-1"
>
<img
:src="comment.authorThumb"
alt=""
class="commentThumbnail"
>
</router-link>
<p
v-if="comment.isPinned"
class="commentPinned"
@ -64,9 +82,12 @@
:class="{
commentOwner: comment.isOwner
}"
@click="goToChannel(comment.authorLink)"
>
{{ comment.author }}
<router-link
:to="`/channel/${comment.authorLink}`"
>
{{ comment.author }}
</router-link>
</span>
<img
v-if="comment.isMember"
@ -97,7 +118,10 @@
>
<img
:src="channelThumbnail"
:title="$t('Comments.Hearted')"
:aria-label="$t('Comments.Hearted')"
class="commentHeartBadgeImg"
alt=""
>
<font-awesome-icon
:icon="['fas', 'heart']"
@ -111,7 +135,11 @@
<span
v-if="comment.numReplies > 0"
class="commentMoreReplies"
role="button"
tabindex="0"
@click="toggleCommentReplies(index)"
@keydown.space.prevent="toggleCommentReplies(index)"
@keydown.enter.prevent="toggleCommentReplies(index)"
>
<span v-if="!comment.showReplies">{{ $t("Comments.View") }}</span>
<span v-else>{{ $t("Comments.Hide") }}</span>
@ -128,22 +156,32 @@
>
<div
v-for="(reply, replyIndex) in comment.replies"
:id="'comment' + index + '-' + replyIndex"
:key="replyIndex"
class="comment"
>
<img
:src="reply.authorThumb"
class="commentThumbnail"
<router-link
:to="`/channel/${reply.authorLink}`"
tabindex="-1"
>
<img
:src="reply.authorThumb"
class="commentThumbnail"
alt=""
>
</router-link>
<p class="commentAuthorWrapper">
<span
class="commentAuthor"
:class="{
commentOwner: reply.isOwner
}"
@click="goToChannel(reply.authorLink)"
>
{{ reply.author }}
<router-link
:to="`/channel/${reply.authorLink}`"
>
{{ reply.author }}
</router-link>
</span>
<img
v-if="reply.isMember"
@ -171,13 +209,17 @@
v-if="reply.numReplies > 0"
class="commentMoreReplies"
>
View {{ reply.numReplies }} replies
{{ $t('Comments.View {replyCount} replies', { replyCount: reply.numReplies }) }}
</p>
</div>
<div
v-if="comment.replyToken !== null"
class="showMoreReplies"
@click="getCommentReplies(index)"
role="button"
tabindex="0"
@click="getCommentReplies(index, comment.replies.length)"
@keydown.space.prevent="getCommentReplies(index, comment.replies.length)"
@keydown.enter.prevent="getCommentReplies(index, comment.replies.length)"
>
<span>{{ $t("Comments.Show More Replies") }}</span>
</div>
@ -194,7 +236,11 @@
<h4
v-if="commentData.length > 0 && !isLoading && showComments && nextPageToken"
class="getMoreComments"
role="button"
tabindex="0"
@click="getMoreComments"
@keydown.space.prevent="getMoreComments"
@keydown.enter.prevent="getMoreComments"
>
{{ $t("Comments.Load More Comments") }}
</h4>

5
src/renderer/components/watch-video-info/watch-video-info.sass
View File

@ -11,6 +11,11 @@
font-size: 22px
margin: 0 0 24px
word-break: break-word
display: block
margin-block-end: 1em
margin-inline-start: 0px
margin-inline-end: 0px
font-weight: normal
.channelInformation
.profileRow

4
src/renderer/components/watch-video-info/watch-video-info.vue
View File

@ -1,11 +1,11 @@
<template>
<ft-card class="watchVideoInfo">
<div>
<p
<h1
class="videoTitle"
>
{{ title }}
</p>
</h1>
<div
class="channelInformation"
>

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

@ -250,11 +250,6 @@ export default Vue.extend({
})
this.stayAtBottom = true
this.showScrollToBottom = false
},
preventDefault: function (event) {
event.stopPropagation()
event.preventDefault()
}
}
})

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

@ -49,13 +49,20 @@
<div
v-for="(comment, index) in superChatComments"
:key="index"
:aria-label="$t('Video.Show Super Chat Comment')"
:style="{ backgroundColor: 'var(--primary-color)' }"
class="superChat"
:class="comment.superchat.colorClass"
role="button"
tabindex="0"
@click="showSuperChatComment(comment)"
@keydown.space.prevent="showSuperChatComment(comment)"
@keydown.enter.prevent="showSuperChatComment(comment)"
>
<img
:src="comment.author.thumbnail.url"
class="channelThumbnail"
alt=""
>
<p
class="superChatContent"
@ -72,11 +79,15 @@
v-if="showSuperChat"
class="openedSuperChat"
:class="superChat.superchat.colorClass"
role="button"
tabindex="0"
@click="showSuperChat = false"
@keydown.space.prevent="showSuperChat = false"
@keydown.enter.prevent="showSuperChat = false"
>
<div
class="superChatMessage"
@click="e => preventDefault(e)"
@click.stop.prevent
>
<div
class="upperSuperChatMessage"
@ -84,6 +95,7 @@
<img
:src="superChat.author.thumbnail.url"
class="channelThumbnail"
alt=""
>
<p
class="channelName"
@ -125,6 +137,7 @@
<img
:src="comment.author.thumbnail.url"
class="channelThumbnail"
alt=""
>
<p
class="channelName"
@ -149,6 +162,7 @@
<img
:src="comment.author.thumbnail.url"
class="channelThumbnail"
alt=""
>
<p
class="chatContent"
@ -169,7 +183,7 @@
>
<img
:src="comment.author.badge.thumbnail.url"
:alt="comment.author.badge.thumbnail.alt"
alt=""
:title="comment.author.badge.thumbnail.alt"
class="badgeImage"
>
@ -186,7 +200,12 @@
<div
v-if="showScrollToBottom"
class="scrollToBottom"
:aria-label="$t('Video.Scroll to Bottom')"
role="button"
tabindex="0"
@click="scrollToBottom"
@keydown.space.prevent="scrollToBottom"
@keydown.enter.prevent="scrollToBottom"
>
<font-awesome-icon
class="icon"

20
src/renderer/components/watch-video-playlist/watch-video-playlist.vue
View File

@ -37,33 +37,53 @@
:class="{ playlistIconActive: loopEnabled }"
:icon="['fas', 'retweet']"
:title="$t('Video.Loop Playlist')"
role="button"
tabindex="0"
@click="toggleLoop"
@keydown.enter.prevent="toggleLoop"
@keydown.space.prevent="toggleLoop"
/>
<font-awesome-icon
class="playlistIcon"
:class="{ playlistIconActive: shuffleEnabled }"
:icon="['fas', 'random']"
:title="$t('Video.Shuffle Playlist')"
role="button"
tabindex="0"
@click="toggleShuffle"
@keydown.enter.prevent="toggleShuffle"
@keydown.space.prevent="toggleShuffle"
/>
<font-awesome-icon
class="playlistIcon"
:class="{ playlistIconActive: reversePlaylist }"
:icon="['fas', 'exchange-alt']"
:title="$t('Video.Reverse Playlist')"
role="button"
tabindex="0"
@click="toggleReversePlaylist"
@keydown.enter.prevent="toggleReversePlaylist"
@keydown.space.prevent="toggleReversePlaylist"
/>
<font-awesome-icon
class="playlistIcon"
:icon="['fas', 'step-backward']"
:title="$t('Video.Play Previous Video')"
role="button"
tabindex="0"
@click="playPreviousVideo"
@keydown.enter.prevent="playPreviousVideo"
@keydown.space.prevent="playPreviousVideo"
/>
<font-awesome-icon
class="playlistIcon"
:icon="['fas', 'step-forward']"
:title="$t('Video.Play Next Video')"
role="button"
tabindex="0"
@click="playNextVideo"
@keydown.enter.prevent="playNextVideo"
@keydown.space.prevent="playNextVideo"
/>
</p>
<div

4
src/renderer/views/Search/Search.css
View File

@ -8,6 +8,10 @@
margin-top: 16px;
}
.getNextPage:hover, .getNextPage:focus {
background-color: var(--side-nav-hover-color);
}
.card {
width: 85%;
margin: 0 auto;

4
src/renderer/views/Search/Search.vue
View File

@ -16,7 +16,11 @@
/>
<div
class="getNextPage"
role="button"
tabindex="0"
@click="nextPage"
@keydown.enter.prevent="nextPage"
@keydown.space.prevent="nextPage"
>
<font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
</div>

1
src/renderer/views/Watch/Watch.vue
View File

@ -44,6 +44,7 @@
<img
:src="thumbnail"
class="upcomingThumbnail"
alt=""
>
<div
class="premiereDate"

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

@ -578,6 +578,8 @@ Video:
'Live Chat is currently not supported with the Invidious API. A direct connection to YouTube is required.': Live
Chat is currently not supported with the Invidious API. A direct connection to
YouTube is required.
Show Super Chat Comment: Show Super Chat Comment
Scroll to Bottom: Scroll to Bottom
Download Video: Download Video
video only: video only
audio only: audio only
@ -727,6 +729,7 @@ Comments:
Sort by: Sort by
Top comments: Top comments
Newest first: Newest First
View {replyCount} replies: View {replyCount} replies
# Context: View 10 Replies, View 1 Reply, View 1 Reply from Owner, View 2 Replies from Owner and others
View: View
Hide: Hide
@ -741,6 +744,7 @@ Comments:
No more comments available: No more comments available
Pinned by: Pinned by
Member: Member
Hearted: Hearted
Up Next: Up Next
#Tooltips