From b3ed0027ffb49c900efc81a21d511f8b1f357089 Mon Sep 17 00:00:00 2001 From: Rafael Date: Wed, 2 Feb 2022 09:48:24 -0300 Subject: [PATCH] SwipeableDrawer improvements Fix css stuf Split mobile and small popout window styles Fix failed logic that broke desktop player --- ui/component/claimPreview/view.jsx | 15 +- ui/component/commentsList/view.jsx | 4 +- ui/component/livestreamChatLayout/index.js | 2 + .../livestreamChatLayout/livestream-menu.jsx | 44 +++-- .../livestream-superchats.jsx | 113 ++++++++----- ui/component/livestreamChatLayout/view.jsx | 117 +++++++++++--- ui/component/livestreamComment/view.jsx | 4 +- ui/component/livestreamComments/view.jsx | 11 +- ui/component/livestreamLayout/view.jsx | 83 +++++----- ui/component/swipeableDrawer/view.jsx | 77 ++++++--- ui/page/file/view.jsx | 42 +++-- ui/scss/all.scss | 1 - ui/scss/component/_card.scss | 25 +++ ui/scss/component/_livestream-chat.scss | 150 ++++++++++-------- ui/scss/component/_livestream-comment.scss | 26 +-- ui/scss/component/_main.scss | 6 + ui/scss/component/_media.scss | 4 + ui/scss/component/_swipeable-drawer.scss | 10 +- ui/scss/component/_textarea-suggestions.scss | 5 + 19 files changed, 489 insertions(+), 250 deletions(-) diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index b1c5b6cd3..e2f275aad 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -33,6 +33,7 @@ import ClaimPreviewHidden from './claim-preview-no-mature'; import ClaimPreviewNoContent from './claim-preview-no-content'; import { ENABLE_NO_SOURCE_CLAIMS } from 'config'; import CollectionEditButtons from 'component/collectionEditButtons'; +import { useIsMobile } from 'effects/use-screensize'; const AbandonedChannelPreview = lazyImport(() => import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */) @@ -153,6 +154,8 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { unavailableUris, } = props; + const isMobile = useIsMobile(); + const isCollection = claim && claim.value_type === 'collection'; const collectionClaimId = isCollection && claim && claim.claim_id; const listId = collectionId || collectionClaimId; @@ -434,13 +437,11 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { )} {claim && ( - {typeof properties === 'function' ? ( - properties(claim) - ) : properties !== undefined ? ( - properties - ) : ( - - )} + {typeof properties === 'function' + ? properties(claim) + : properties !== undefined + ? properties + : !isMobile && } )} diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx index 6a7991e97..df31f2869 100644 --- a/ui/component/commentsList/view.jsx +++ b/ui/component/commentsList/view.jsx @@ -308,8 +308,8 @@ function CommentList(props: Props) {
    {readyToDisplayComments && pinnedComments && getCommentElems(pinnedComments)} diff --git a/ui/component/livestreamChatLayout/index.js b/ui/component/livestreamChatLayout/index.js index b6ca8a9a8..c109d173f 100644 --- a/ui/component/livestreamChatLayout/index.js +++ b/ui/component/livestreamChatLayout/index.js @@ -9,6 +9,7 @@ import { selectSuperChatTotalAmountForUri, selectPinnedCommentsForUri, } from 'redux/selectors/comments'; +import { selectThemePath } from 'redux/selectors/settings'; import LivestreamChatLayout from './view'; const select = (state, props) => { @@ -20,6 +21,7 @@ const select = (state, props) => { pinnedComments: selectPinnedCommentsForUri(state, uri), superChats: selectSuperChatsForUri(state, uri), superChatsTotalAmount: selectSuperChatTotalAmountForUri(state, uri), + theme: selectThemePath(state), }; }; diff --git a/ui/component/livestreamChatLayout/livestream-menu.jsx b/ui/component/livestreamChatLayout/livestream-menu.jsx index 217140edb..06a5fa769 100644 --- a/ui/component/livestreamChatLayout/livestream-menu.jsx +++ b/ui/component/livestreamChatLayout/livestream-menu.jsx @@ -4,7 +4,6 @@ import { Global } from '@emotion/react'; import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button'; import { useHistory } from 'react-router-dom'; -import { useIsMobile } from 'effects/use-screensize'; import usePersistedState from 'effects/use-persisted-state'; import * as ICONS from 'constants/icons'; import Icon from 'component/common/icon'; @@ -14,20 +13,27 @@ type Props = { isPopoutWindow?: boolean, superchatsHidden?: boolean, noSuperchats?: boolean, + isMobile?: boolean, hideChat?: () => void, setPopoutWindow?: (any) => void, toggleSuperchats?: () => void, }; export default function LivestreamMenu(props: Props) { - const { isPopoutWindow, superchatsHidden, noSuperchats, hideChat, setPopoutWindow, toggleSuperchats } = props; + const { + isPopoutWindow, + superchatsHidden, + noSuperchats, + isMobile, + hideChat, + setPopoutWindow, + toggleSuperchats, + } = props; const { location: { pathname }, } = useHistory(); - const isMobile = useIsMobile(); - const [showTimestamps, setShowTimestamps] = usePersistedState('live-timestamps', false); function handlePopout() { @@ -42,19 +48,9 @@ export default function LivestreamMenu(props: Props) { } } - const MenuGlobalStyles = () => ( - - ); - return ( <> - + @@ -103,3 +99,21 @@ export default function LivestreamMenu(props: Props) { ); } + +type GlobalStylesProps = { + showTimestamps?: boolean, +}; + +const MenuGlobalStyles = (globalStylesProps: GlobalStylesProps) => { + const { showTimestamps } = globalStylesProps; + + return ( + + ); +}; diff --git a/ui/component/livestreamChatLayout/livestream-superchats.jsx b/ui/component/livestreamChatLayout/livestream-superchats.jsx index 287966ac4..1cbfd0ac2 100644 --- a/ui/component/livestreamChatLayout/livestream-superchats.jsx +++ b/ui/component/livestreamChatLayout/livestream-superchats.jsx @@ -11,14 +11,17 @@ import OptimizedImage from 'component/optimizedImage'; import React from 'react'; import Tooltip from 'component/common/tooltip'; import UriIndicator from 'component/uriIndicator'; +import Slide from '@mui/material/Slide'; type Props = { superChats: Array, + superchatsHidden?: boolean, + isMobile?: boolean, toggleSuperChat: () => void, }; export default function LivestreamSuperchats(props: Props) { - const { superChats: superChatsByAmount, toggleSuperChat } = props; + const { superChats: superChatsByAmount, superchatsHidden, isMobile, toggleSuperChat } = props; const superChatTopTen = React.useMemo(() => { return superChatsByAmount ? superChatsByAmount.slice(0, 10) : superChatsByAmount; @@ -29,54 +32,82 @@ export default function LivestreamSuperchats(props: Props) { const showMore = superChatTopTen && superChatsByAmount && superChatTopTen.length < superChatsByAmount.length; return !superChatTopTen ? null : ( -
    -
    - {superChatTopTen.map((superChat: Comment) => { - const { comment, comment_id, channel_url, support_amount, is_fiat } = superChat; - const isSticker = stickerSuperChats && stickerSuperChats.includes(superChat); - const stickerImg = ; - - return ( - -
    - + +
    +
    + {superChatTopTen.map((superChat: Comment) => { + const { comment, comment_id, channel_url, support_amount, is_fiat } = superChat; + const isSticker = stickerSuperChats && stickerSuperChats.includes(superChat); + const stickerImg = ; + return ( +
    -
    - + - +
    +
    + + + +
    + + {isSticker &&
    {stickerImg}
    }
    - - {isSticker &&
    {stickerImg}
    }
    -
    -     - ); - })} + + ); + })} - {showMore && ( -
    -
    + ); } + +type SliderProps = { + superchatsHidden?: boolean, + isMobile?: boolean, + children: any, +}; + +const Slider = (sliderProps: SliderProps) => { + const { superchatsHidden, isMobile, children } = sliderProps; + + return isMobile ? ( + + {children} + + ) : ( + <>{children} + ); +}; diff --git a/ui/component/livestreamChatLayout/view.jsx b/ui/component/livestreamChatLayout/view.jsx index 6c88e51dd..926c19ccc 100644 --- a/ui/component/livestreamChatLayout/view.jsx +++ b/ui/component/livestreamChatLayout/view.jsx @@ -1,6 +1,11 @@ // @flow import 'scss/component/_livestream-chat.scss'; +// $FlowFixMe +import { Global } from '@emotion/react'; +// $FlowFixMe +import { grey } from '@mui/material/colors'; + import { formatLbryUrlForWeb } from 'util/url'; import { useIsMobile } from 'effects/use-screensize'; import * as ICONS from 'constants/icons'; @@ -16,6 +21,7 @@ import React from 'react'; import Spinner from 'component/spinner'; import Yrbl from 'component/yrbl'; import { getTipValues } from 'util/livestream'; +import Slide from '@mui/material/Slide'; const VIEW_MODES = { CHAT: 'chat', @@ -35,6 +41,7 @@ type Props = { hideHeader?: boolean, superchatsHidden?: boolean, customViewMode?: string, + theme: string, doCommentList: (string, string, number, number) => void, doResolveUris: (Array, boolean) => void, doSuperChatList: (string) => void, @@ -52,12 +59,13 @@ export default function LivestreamChatLayout(props: Props) { hideHeader, superchatsHidden, customViewMode, + theme, doCommentList, doResolveUris, doSuperChatList, } = props; - const isMobile = useIsMobile(); + const isMobile = useIsMobile() && !isPopoutWindow; const discussionElement = document.querySelector('.livestream__comments'); @@ -225,6 +233,7 @@ export default function LivestreamChatLayout(props: Props) { isPopoutWindow={isPopoutWindow} hideChat={() => setChatHidden(true)} setPopoutWindow={(v) => setPopoutWindow(v)} + isMobile={isMobile} />
    @@ -247,32 +256,60 @@ export default function LivestreamChatLayout(props: Props) { )}
    -
    - {viewMode === VIEW_MODES.CHAT && superChatsByAmount && !superchatsHidden && ( - +
    + {isMobile && ((pinnedComment && showPinned) || (superChatsByAmount && !superchatsHidden)) && ( + )} - {pinnedComment && showPinned && viewMode === VIEW_MODES.CHAT && ( -
    - setShowPinned(false)} - /> - - {!isMobile && ( -
    + {viewMode === VIEW_MODES.CHAT && superChatsByAmount && ( + )} + + {pinnedComment && + viewMode === VIEW_MODES.CHAT && + (isMobile ? ( + +
    + setShowPinned(false)} + isMobile + /> +
    +     + ) : ( + showPinned && ( +
    + setShowPinned(false)} + /> + +
    + ) + ))}
    {viewMode === VIEW_MODES.SUPERCHAT && resolvingSuperChats ? ( @@ -280,7 +317,12 @@ export default function LivestreamChatLayout(props: Props) {
    ) : ( - + )} {scrollPos < 0 && ( @@ -308,3 +350,28 @@ export default function LivestreamChatLayout(props: Props) {
    ); } + +type GradientProps = { + theme: string, +}; + +const MobileDrawerTopGradient = (gradientProps: GradientProps) => { + const { theme } = gradientProps; + + const DrawerGlobalStyles = () => ( + + ); + + return ( + <> + +
    + + ); +}; diff --git a/ui/component/livestreamComment/view.jsx b/ui/component/livestreamComment/view.jsx index 9a8c69688..b7cd70e4f 100644 --- a/ui/component/livestreamComment/view.jsx +++ b/ui/component/livestreamComment/view.jsx @@ -26,11 +26,12 @@ type Props = { claim: StreamClaim, myChannelIds: ?Array, stakedLevel: number, + isMobile?: boolean, handleDismissPin?: () => void, }; export default function LivestreamComment(props: Props) { - const { comment, forceUpdate, uri, claim, myChannelIds, stakedLevel, handleDismissPin } = props; + const { comment, forceUpdate, uri, claim, myChannelIds, stakedLevel, isMobile, handleDismissPin } = props; const { channel_url: authorUri, @@ -65,6 +66,7 @@ export default function LivestreamComment(props: Props) { 'livestream__comment--superchat': supportAmount > 0, 'livestream__comment--sticker': isSticker, 'livestream__comment--mentioned': hasUserMention, + 'livestream__comment--mobile': isMobile, })} > {supportAmount > 0 && ( diff --git a/ui/component/livestreamComments/view.jsx b/ui/component/livestreamComments/view.jsx index ab8e526f9..be2051e70 100644 --- a/ui/component/livestreamComments/view.jsx +++ b/ui/component/livestreamComments/view.jsx @@ -11,10 +11,11 @@ type Props = { commentsToDisplay: Array, fetchingComments: boolean, uri: string, + isMobile?: boolean, }; export default function LivestreamComments(props: Props) { - const { commentsToDisplay, fetchingComments, uri } = props; + const { commentsToDisplay, fetchingComments, uri, isMobile } = props; const [forceUpdate, setForceUpdate] = React.useState(0); @@ -49,7 +50,13 @@ export default function LivestreamComments(props: Props) { .slice(0) .reverse() .map((comment) => ( - + ))}
    ); diff --git a/ui/component/livestreamLayout/view.jsx b/ui/component/livestreamLayout/view.jsx index 1ffaf81de..0d7ad0e63 100644 --- a/ui/component/livestreamLayout/view.jsx +++ b/ui/component/livestreamLayout/view.jsx @@ -1,4 +1,6 @@ // @flow +import 'scss/component/_swipeable-drawer.scss'; + import { lazyImport } from 'util/lazyImport'; import { useIsMobile } from 'effects/use-screensize'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; @@ -8,9 +10,9 @@ import React from 'react'; import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view'; import FileRenderInitiator from 'component/fileRenderInitiator'; import LivestreamIframeRender from './iframe-render'; -import Button from 'component/button'; import * as ICONS from 'constants/icons'; import SwipeableDrawer from 'component/swipeableDrawer'; +import { DrawerExpandButton } from 'component/swipeableDrawer/view'; import LivestreamMenu from 'component/livestreamChatLayout/livestream-menu'; import Icon from 'component/common/icon'; import CreditAmount from 'component/common/credit-amount'; @@ -57,31 +59,6 @@ export default function LivestreamLayout(props: Props) { if (!claim || !claim.signing_channel) return null; const { name: channelName, claim_id: channelClaimId } = claim.signing_channel; - const { superChatsFiatAmount, superChatsLBCAmount } = getTipValues(superChats); - - const ChatModeSelector = () => ( - - - - {chatViewMode === VIEW_MODES.CHAT ? __('Live Chat') : __('Super Chats')} - - - - - - setChatViewMode(VIEW_MODES.CHAT)}> - {__('Live Chat')} - - - setChatViewMode(VIEW_MODES.SUPERCHAT)}> -
    - / - {__('Tipped')} -
    -     -     -     - ); return ( <> @@ -132,12 +109,19 @@ export default function LivestreamLayout(props: Props) { setShowChat(!showChat)} - title={} + title={ + setChatViewMode(mode)} + /> + } actions={ setSuperchatsHidden(!superchatsHidden)} + isMobile /> } > @@ -148,17 +132,9 @@ export default function LivestreamLayout(props: Props) { customViewMode={chatViewMode} /> - - )} - {isMobile && ( -
    - - ); - return ( <> @@ -93,8 +79,8 @@ export default function SwipeableDrawer(props: Props) { > {open && (
    - - + +
    )} @@ -103,3 +89,56 @@ export default function SwipeableDrawer(props: Props) { ); } + +type PullerProps = { + theme: string, +}; + +const Puller = (pullerProps: PullerProps) => { + const { theme } = pullerProps; + + return ( + + ); +}; + +type HeaderProps = { + title: any, + actions?: any, + toggleDrawer: () => void, +}; + +const HeaderContents = (headerProps: HeaderProps) => { + const { title, actions, toggleDrawer } = headerProps; + + return ( +
    + {title} + +
    + {actions} + +
    +
    + ); +}; + +type ExpandButtonProps = { + label: any, + toggleDrawer: () => void, +}; + +export const DrawerExpandButton = (expandButtonProps: ExpandButtonProps) => { + const { label, toggleDrawer } = expandButtonProps; + + return ( +