mirror of
https://github.com/FreeTubeApp/FreeTube
synced 2025-01-26 11:51:14 +01:00
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
GitHub
parent
677dc86f76
commit
42ef2a3e26
@ -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
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -334,10 +334,6 @@ export default Vue.extend({
|
||||
})
|
||||
},
|
||||
|
||||
goToChannel: function (channelId) {
|
||||
this.$router.push({ path: `/channel/${channelId}` })
|
||||
},
|
||||
|
||||
...mapActions([
|
||||
'invidiousAPICall'
|
||||
])
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<ft-card class="watchVideoInfo">
|
||||
<div>
|
||||
<p
|
||||
<h1
|
||||
class="videoTitle"
|
||||
>
|
||||
{{ title }}
|
||||
</p>
|
||||
</h1>
|
||||
<div
|
||||
class="channelInformation"
|
||||
>
|
||||
|
||||
@ -250,11 +250,6 @@ export default Vue.extend({
|
||||
})
|
||||
this.stayAtBottom = true
|
||||
this.showScrollToBottom = false
|
||||
},
|
||||
|
||||
preventDefault: function (event) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -8,6 +8,10 @@
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.getNextPage:hover, .getNextPage:focus {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -44,6 +44,7 @@
|
||||
<img
|
||||
:src="thumbnail"
|
||||
class="upcomingThumbnail"
|
||||
alt=""
|
||||
>
|
||||
<div
|
||||
class="premiereDate"
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user