diff --git a/static/app-strings.json b/static/app-strings.json index f786b48e7..e85a4ef86 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2087,6 +2087,7 @@ "Remove Comment": "Remove 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.", + "Dismiss pinned comment": "Dismiss pinned comment", "Recent Comments": "Recent Comments", "%title% by %channelTitle%": "%title% by %channelTitle%", "%title% by %channelTitle% %ariaDate%": "%title% by %channelTitle% %ariaDate%", diff --git a/ui/component/livestreamComments/view.jsx b/ui/component/livestreamComments/view.jsx index a7c418d21..ee3af8eda 100644 --- a/ui/component/livestreamComments/view.jsx +++ b/ui/component/livestreamComments/view.jsx @@ -52,6 +52,7 @@ export default function LivestreamComments(props: Props) { const commentsRef = React.createRef(); const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT); const [scrollPos, setScrollPos] = React.useState(0); + const [showPinned, setShowPinned] = React.useState(true); const claimId = claim && claim.claim_id; const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length; const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? commentsByChronologicalOrder : superChatsByTipAmount; @@ -238,7 +239,7 @@ export default function LivestreamComments(props: Props) { )} - {pinnedComment && viewMode === VIEW_MODE_CHAT && ( + {pinnedComment && showPinned && viewMode === VIEW_MODE_CHAT && (
+
)} diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss index 51ae19b5f..6d9cab57c 100644 --- a/ui/scss/component/_livestream.scss +++ b/ui/scss/component/_livestream.scss @@ -234,6 +234,7 @@ $recent-msg-button__height: 2rem; } .livestream-pinned__wrapper { + display: flex; flex-shrink: 0; position: relative; padding: var(--spacing-s) var(--spacing-xs); @@ -243,11 +244,18 @@ $recent-msg-button__height: 2rem; width: 100%; .livestream-comment { + width: 100%; padding-top: var(--spacing-xs); max-height: 6rem; 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) { padding: var(--spacing-xs); width: var(--livestream-comments-width);