refactor: cleanup sidebar actions

Author: samuelmaddock

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/assets/icons/dock-right.svg

@@ -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/assets/icons/link.svg

@@ -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/assets/icons/undock-float.svg

@@ -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/GameLobby.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/chat/Chat.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/chat/ChatLayoutButton.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>
   )
 }