refactor: cleanup sidebar actions

packages/metastream-app/src/assets/homescreen.html

@@ -145,7 +145,7 @@
         <div class="column input-container">
           <input
             id="urlinput"
-            placeholder="Or paste any URL (e.g. https://cool.website/video/123)"
+            placeholder="Or paste any link (e.g. https://cool.website/video/123)"
             autocomplete="url"
             spellcheck="false"
           />

packages/metastream-app/src/components/GameLobby.tsx

@@ -25,6 +25,7 @@ import { IReactReduxProps } from 'types/redux-thunk'
 import { ChatLocation } from './chat/Location'
 import { setPendingMedia } from 'lobby/actions/mediaPlayer'
 import { sendMediaRequest, ClientMediaRequestOptions } from 'lobby/actions/media-request'
+import { Sidebar } from './sidebar'
 
 interface IProps {
   host: boolean
@@ -122,13 +123,7 @@ class _GameLobby extends React.Component<PrivateProps, IState> {
 
         {this.renderControls()}
 
-        {this.props.isChatDocked && (
-          <Chat
-            theRef={el => (this.chat = el)}
-            className={styles.chatDocked}
-            disabled={!!this.state.modal}
-          />
-        )}
+        {this.props.isChatDocked && <Sidebar className={styles.chatDocked} />}
 
         {this.isInactive && <div className={styles.inactiveOverlay} />}
       </div>
@@ -142,20 +137,25 @@ class _GameLobby extends React.Component<PrivateProps, IState> {
       <>
         {this.renderPlaybackControls()}
 
-        <UserList
-          className={styles.users}
-          onInvite={() => this.openModal(LobbyModal.SessionSettings)}
-        />
-        <MediaList className={styles.queue} onShowInfo={this.showInfo} />
-
         {!this.props.isChatDocked && (
-          <Chat
-            theRef={el => (this.chat = el)}
-            className={styles.chatFloat}
-            disabled={!!this.state.modal}
-            showHint
-            fade
-          />
+          <>
+            <UserList
+              className={styles.users}
+              onInvite={() => this.openModal(LobbyModal.SessionSettings)}
+            />
+            <MediaList
+              className={styles.queue}
+              onOpenMediaBrowser={this.showBrowser}
+              onShowInfo={this.showInfo}
+            />
+            <Chat
+              theRef={el => (this.chat = el)}
+              className={styles.chatFloat}
+              disabled={!!this.state.modal}
+              showHint
+              fade
+            />
+          </>
         )}
 
         {this.state.modal && this.renderModal()}
@@ -272,6 +272,10 @@ class _GameLobby extends React.Component<PrivateProps, IState> {
     )
   }
 
+  private showBrowser = () => {
+    this.openModal(LobbyModal.Browser)
+  }
+
   private showInfo = (media?: IMediaItem) => {
     this.openModal(LobbyModal.MediaInfo, { media })
   }

packages/metastream-app/src/components/chat/Chat.css

@@ -47,7 +47,6 @@
 
 .staticBackground {
   composes: absolute-full from '~styles/layout.css';
-  background: var(--color-transparent-dark-66);
 }
 
 .foreground {
@@ -68,6 +67,7 @@
   composes: scroller from '~styles/layout.css';
   max-height: 100%;
   flex-grow: 1;
+  /* align-self: flex-end; */
   overflow-y: auto;
   position: relative;
   cursor: auto;

packages/metastream-app/src/components/chat/ChatLayoutButton.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import styles from './PanelHeader.css'
+import { useDispatch, useSelector } from 'react-redux'
+import { setSetting } from 'actions/settings'
+import { ChatLocation } from './Location'
+import { IAppState } from 'reducers'
+import { t } from 'locale'
+import { IconButton } from 'components/common/button'
+
+interface Props {
+  className?: string
+}
+
+export const ChatLayoutButton: React.SFC<Props> = ({ className }) => {
+  const dispatch = useDispatch()
+
+  const chatLocation = useSelector<IAppState>(state => state.settings.chatLocation)
+  const isFloating = chatLocation === ChatLocation.FloatLeft
+
+  function toggleChatLayout() {
+    dispatch(
+      setSetting('chatLocation', location =>
+        location === ChatLocation.DockRight ? ChatLocation.FloatLeft : ChatLocation.DockRight
+      )
+    )
+  }
+
+  return (
+    <IconButton
+      icon={isFloating ? 'dock-right' : 'undock-float'}
+      iconSize="small"
+      className={className}
+      onClick={toggleChatLayout}
+      title={t(isFloating ? 'uiDockToRight' : 'uiUndock')}
+    />
+  )
+}

packages/metastream-app/src/components/chat/index.tsx

@@ -7,17 +7,14 @@ import { Messages } from './Messages'
 import { ChatForm } from './ChatForm'
 
 import styles from './Chat.css'
-import { IconButton } from '../common/button'
-import { t } from 'locale'
 import { connect } from 'react-redux'
 import { IAppState } from 'reducers/index'
 import { sendChat, notifyTyping } from 'lobby/actions/chat'
-import { setSetting } from 'actions/settings'
-import { ChatLocation } from './Location'
 import { UserTyping } from './UserTyping'
 import { throttle } from 'lodash-es'
 import { TYPING_DURATION } from '../../lobby/reducers/chat.helpers'
 import { Cancelable } from 'lodash'
+import { ChatLayoutButton } from './ChatLayoutButton'
 
 const CSS_PROP_CHAT_FADE_DELAY = '--chat-fade-delay'
 
@@ -41,7 +38,6 @@ interface ConnectedProps {
 
 interface DispatchProps {
   sendMessage(text: string): void
-  toggleChatLayout(): void
   notifyTyping: () => void & Cancelable
 }
 
@@ -170,14 +166,7 @@ export class ChatComponent extends PureComponent<PrivateProps, State> {
             >
               <UserTyping />
             </ChatForm>
-            {this.props.showDockOption && (
-              <IconButton
-                icon={this.props.fade ? 'dock-right' : 'undock-float'}
-                className={styles.btnLayout}
-                onClick={this.props.toggleChatLayout}
-                title={t(this.props.fade ? 'chatDockToRight' : 'chatUndock')}
-              />
-            )}
+            {this.props.showDockOption && <ChatLayoutButton className={styles.btnLayout} />}
           </div>
         </div>
       </div>
@@ -261,13 +250,6 @@ export const Chat = connect(
   },
   (dispatch: Function): DispatchProps => ({
     sendMessage: (text: string) => dispatch(sendChat(text)),
-    toggleChatLayout() {
-      dispatch(
-        setSetting('chatLocation', location =>
-          location === ChatLocation.DockRight ? ChatLocation.FloatLeft : ChatLocation.DockRight
-        )
-      )
-    },
     notifyTyping: throttle(() => dispatch(notifyTyping()), TYPING_DURATION - 500, {
       trailing: false
     })

packages/metastream-app/src/components/common/button.css

@@ -80,3 +80,18 @@
 .tooltip {
   composes: absolute-full from '~styles/layout.css';
 }
+
+.iconButton {
+  display: flex;
+}
+
+.iconChildren {
+  align-self: center;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.iconHighlight {
+  color: var(--color-highlight);
+  font-weight: bolder;
+}

packages/metastream-app/src/components/common/button.tsx

@@ -8,6 +8,7 @@ export interface IIconButtonProps {
   id?: string
   icon: string
   iconSize?: 'small'
+  highlight?: boolean
 
   title?: React.ReactNode
   tooltipProps?: TooltipProps
@@ -29,11 +30,15 @@ export const IconButton: React.SFC<IIconButtonProps> = ({
   title,
   tooltipProps,
   children,
+  highlight,
   ...props
 }) => {
   return (
     <button
       type="button"
+      className={cx(styles.iconButton, props.className, {
+        [styles.iconHighlight]: highlight
+      })}
       style={
         title
           ? {
@@ -50,7 +55,7 @@ export const IconButton: React.SFC<IIconButtonProps> = ({
       ) : null}
       <Icon name={icon} size={iconSize} pointerEvents="none" />
       {!!children && nbsp}
-      {children ? <span>{children}</span> : undefined}
+      {children ? <span className={styles.iconChildren}>{children}</span> : undefined}
     </button>
   )
 }

packages/metastream-app/src/components/lobby/ListOverlay.tsx

@@ -3,6 +3,7 @@ import cx from 'classnames'
 import styles from './ListOverlay.css'
 
 import Menu from '@material-ui/core/Menu'
+import { PanelHeader } from './PanelHeader'
 
 interface IProps<T> {
   id: string
@@ -31,11 +32,11 @@ export class ListOverlay<T = any> extends Component<IProps<T>, IState<T>> {
           active: this.state.menuOpen
         })}
       >
-        <header className={styles.header}>
-          <h2 className={styles.title}>{this.props.title}</h2>
-          {this.props.tagline && <span className={styles.tagline}>{this.props.tagline}</span>}
-          <div className={styles.actions}>{this.props.action}</div>
-        </header>
+        <PanelHeader
+          title={this.props.title}
+          tagline={this.props.tagline}
+          action={this.props.action}
+        />
         <div className={styles.list}>
           {React.Children.count(this.props.children) > 0 ? (
             this.props.children

packages/metastream-app/src/components/lobby/MediaList.tsx

@@ -29,6 +29,7 @@ import { LobbyModal } from 'reducers/ui'
 interface IProps {
   className?: string
   onShowInfo(media?: IMediaItem): void
+  onOpenMediaBrowser(): void
 }
 
 interface IConnectedProps {
@@ -39,7 +40,6 @@ interface IConnectedProps {
 }
 
 interface DispatchProps {
-  openMediaBrowser(): void
   moveToTop(mediaId: string): void
   sendMediaRequest(url: string): void
   deleteMedia(mediaId: string): void
@@ -163,7 +163,12 @@ class _MediaList extends Component<Props> {
     if (!hasPlaybackPermissions && mediaQueueLocked) return
 
     return (
-      <HighlightButton icon="plus" onClick={this.props.openMediaBrowser} title={t('addMedia')} />
+      <IconButton
+        icon="plus"
+        iconSize="small"
+        title={t('addMedia')}
+        onClick={this.props.onOpenMediaBrowser}
+      />
     )
   }
 }
@@ -177,9 +182,6 @@ export const MediaList = withNamespaces()(
       mediaQueueLocked: state.mediaPlayer.queueLocked
     }),
     (dispatch): DispatchProps => ({
-      openMediaBrowser() {
-        dispatch(setLobbyModal(LobbyModal.Browser))
-      },
       moveToTop(mediaId) {
         dispatch(server_requestMoveToTop(mediaId) as any)
       },

packages/metastream-app/src/components/lobby/PanelHeader.css

@@ -0,0 +1,36 @@
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px;
+  flex-wrap: nowrap;
+}
+
+.title {
+  composes: single-line from '~styles/text.css';
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-right: 5px;
+  text-overflow: clip;
+}
+
+.tagline {
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  padding: 2px 4px;
+  font-size: 12px;
+  min-width: 18px;
+  text-align: center;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin-left: auto;
+}
+
+.actions > *:not(:last-child) {
+  margin-right: 0.5rem;
+}

packages/metastream-app/src/components/lobby/PanelHeader.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import styles from './PanelHeader.css'
+
+interface Props {
+  title?: string
+  tagline?: string
+  action?: React.ReactNode
+}
+
+export const PanelHeader: React.SFC<Props> = ({ title, tagline, action }) => {
+  return (
+    <header className={styles.header}>
+      <h2 className={styles.title}>{title}</h2>
+      {tagline && <span className={styles.tagline}>{tagline}</span>}
+      <div className={styles.actions}>{action}</div>
+    </header>
+  )
+}