LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-23 17:47:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Ability to dismiss Pinned Comment in Livestream

Browse source 
This serves as a temp fix to regain the chat space in Mobile, until the Livestream page in Mobile is revamped.
This commit is contained in:
infinite-persistence 2021-08-25 14:19:40 +08:00
parent a8a437bc54
commit 3d48c9852a
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
3 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/app-strings.json
View file

@ -2087,6 +2087,7 @@
"Remove Comment": "Remove Comment", "Remove Comment": "Remove Comment",
"Are you sure you want to remove this comment?": "Are you sure you want to remove this comment?", "Are you sure you want to remove this comment?": "Are you sure you want to remove this comment?",
"This comment has a tip associated with it which cannot be reverted.": "This comment has a tip associated with it which cannot be reverted.", "This comment has a tip associated with it which cannot be reverted.": "This comment has a tip associated with it which cannot be reverted.",
"Dismiss pinned comment": "Dismiss pinned comment",
"Recent Comments": "Recent Comments", "Recent Comments": "Recent Comments",
"%title% by %channelTitle%": "%title% by %channelTitle%", "%title% by %channelTitle%": "%title% by %channelTitle%",
"%title% by %channelTitle% %ariaDate%": "%title% by %channelTitle% %ariaDate%", "%title% by %channelTitle% %ariaDate%": "%title% by %channelTitle% %ariaDate%",

10
ui/component/livestreamComments/view.jsx
View file

@ -52,6 +52,7 @@ export default function LivestreamComments(props: Props) {
const commentsRef = React.createRef(); const commentsRef = React.createRef();
const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT); const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT);
const [scrollPos, setScrollPos] = React.useState(0); const [scrollPos, setScrollPos] = React.useState(0);
const [showPinned, setShowPinned] = React.useState(true);
const claimId = claim && claim.claim_id; const claimId = claim && claim.claim_id;
const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length; const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length;
const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? commentsByChronologicalOrder : superChatsByTipAmount; const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? commentsByChronologicalOrder : superChatsByTipAmount;
@ -238,7 +239,7 @@ export default function LivestreamComments(props: Props) {
</div> </div>
)} )}
{pinnedComment && viewMode === VIEW_MODE_CHAT && ( {pinnedComment && showPinned && viewMode === VIEW_MODE_CHAT && (
<div className="livestream-pinned__wrapper"> <div className="livestream-pinned__wrapper">
<LivestreamComment <LivestreamComment
key={pinnedComment.comment_id} key={pinnedComment.comment_id}
@ -253,6 +254,13 @@ export default function LivestreamComments(props: Props) {
isPinned={pinnedComment.is_pinned} isPinned={pinnedComment.is_pinned}
commentIsMine={pinnedComment.channel_id && isMyComment(pinnedComment.channel_id)} commentIsMine={pinnedComment.channel_id && isMyComment(pinnedComment.channel_id)}
/> />
<Button
title={__('Dismiss pinned comment')}
button="inverse"
className="close-button"
onClick={() => setShowPinned(false)}
icon={ICONS.REMOVE}
/>
</div> </div>
)} )}

8
ui/scss/component/_livestream.scss
View file

@ -234,6 +234,7 @@ $recent-msg-button__height: 2rem;
} }
.livestream-pinned__wrapper { .livestream-pinned__wrapper {
display: flex;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
padding: var(--spacing-s) var(--spacing-xs); padding: var(--spacing-s) var(--spacing-xs);
@ -243,11 +244,18 @@ $recent-msg-button__height: 2rem;
width: 100%; width: 100%;
.livestream-comment { .livestream-comment {
width: 100%;
padding-top: var(--spacing-xs); padding-top: var(--spacing-xs);
max-height: 6rem; max-height: 6rem;
overflow-y: scroll; overflow-y: scroll;
} }
.close-button {
border-left: 1px solid var(--color-border);
padding: 0 calc(var(--spacing-m) - var(--spacing-xs)) 0 var(--spacing-m);
color: var(--color-text-subtitle);
}
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
padding: var(--spacing-xs); padding: var(--spacing-xs);
width: var(--livestream-comments-width); width: var(--livestream-comments-width);