persist the chat embed throughout site navigation

Closes #212

src/INITIAL_STATE.js

@@ -12,6 +12,8 @@ export default {
     chatHost: CHAT_HOST_STRIMS,
     chatSize: localStorage ? Number(localStorage.getItem('chatSize')) || 400 : 400,
     showChat: localStorage ? !(localStorage.getItem('showChat') === 'false') : true,
+    showHeader: true,
+    showFooter: true,
   },
   self: {
     isLoggedIn: false,

src/actions/index.js

@@ -141,6 +141,23 @@ export const logout = () => dispatch => {
   });
 };
 
+export const SHOW_HEADER = Symbol('SHOW_HEADER');
+export const showHeader = value => dispatch => {
+  dispatch({
+    type: SHOW_HEADER,
+    payload: value,
+  });
+};
+
+
+export const SHOW_FOOTER = Symbol('SHOW_FOOTER');
+export const showFooter = value => dispatch => {
+  dispatch({
+    type: SHOW_FOOTER,
+    payload: value,
+  });
+};
+
 export const SHOW_CHAT = Symbol('SHOW_CHAT');
 export const showChat = value => dispatch => {
   if (localStorage) {

src/components/App.jsx

@@ -1,19 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect, Provider } from 'react-redux';
-import { Router } from 'react-router-dom';
 import { compose } from 'redux';
 import { lifecycle } from 'recompose';
 
 import { login } from '../actions';
-import Routes from '../routes';
-import history from '../history';
+import RoutesWithChat from './RoutesWithChat';
 
 const App = ({ store }) =>
   <Provider store={store}>
-    <Router history={history}>
-      <Routes />
-    </Router>
+    <RoutesWithChat />
   </Provider>;
 
 App.propTypes = {

src/components/Chat.jsx

@@ -18,7 +18,6 @@ const Chat = ({ className, onClose = noop, src, style, ...rest }: Props) =>
     {...rest}
     className={cs('fill-percentage', className)}
     style={{
-      position: 'absolute',
       ...style,
     }}
     >

src/components/ChatEmbed.jsx

@@ -27,16 +27,16 @@ const ChatEmbed = ({
   }
 
   return (
-    <div className='fill-percentage' style={{ position: 'relative' }}>
+    <div style={{height: "inherit"}}>
       <Chat
         onClose={onClose}
-        style={{ visibility: isStrimsChat ? undefined : 'hidden' }}
+        style={{ display: isStrimsChat ? undefined : 'none' }}
         src={window.location.toString() === CHAT2_DOMAIN ? CHAT2_URL : CHAT_URL}
         />
       <LazyLoadOnce visible={isDggChat}>
         <Chat
           onClose={onClose}
-          style={{ visibility: isDggChat ? undefined : 'hidden' }}
+          style={{ display: isDggChat ? undefined : 'none' }}
           src='https://destiny.gg/embed/chat'
           />
       </LazyLoadOnce>
@@ -45,7 +45,7 @@ const ChatEmbed = ({
           <LazyLoadOnce visible={isServiceChat}>
             <Chat
               onClose={onClose}
-              style={{ visibility: isServiceChat ? undefined : 'hidden' }}
+              style={{ display: isServiceChat ? undefined : 'none' }}
               src={src}
               />
           </LazyLoadOnce>

src/components/Footer.jsx

@@ -37,38 +37,43 @@ const external_links = [
 
 const Footer = () =>
   <footer>
-    <div className='container'>
-      <p className='text-muted'>
-        Strims.gg
-        <br />
-        By <a href={`${GITHUB_URL}/graphs/contributors`}>memers</a> on <a href={`${DISCORD_URL}`}>Discord</a>
-        <br />
-        Support us via{'\u00a0'}
-        {
-          external_links
-          .filter(({ href }) => href)
-          .map((props, i) => <a key={i} {...props} target='_blank' rel='noopener noreferrer' />)
-          .reduce((acc, curr, i, arr) => {
-            acc.push(curr);
-            if (i !== arr.length - 1) {
-              acc.push(',\u00a0');
+      <div className='text-muted'>
+        <ul className='footer-list'>
+          <li>Strims.gg</li>
+          <li>
+           By <a href={`${GITHUB_URL}/graphs/contributors`}>memers</a> on <a href={`${DISCORD_URL}`}>Discord</a>
+          </li>
+          <li>
+            Support us via{'\u00a0'}
+            {
+            external_links
+            .filter(({ href }) => href)
+            .map((props, i) => <a key={i} {...props} target='_blank' rel='noopener noreferrer' />)
+            .reduce((acc, curr, i, arr) => {
+              acc.push(curr);
+              if (i !== arr.length - 1) {
+                acc.push(',\u00a0');
+              }
+                return acc;
+            }, [])
             }
-            return acc;
-          }, [])
-        }
-        <br />
-        {
-          CHAT_URL &&
+          </li>
+          <li>
+            {
+            CHAT_URL &&
             <React.Fragment>
               <a href={CHAT_URL}>Chat</a>
-              &nbsp; &bull; &nbsp;
             </React.Fragment>
-        }
-        <a href='/api'>API</a>
-        &nbsp; &bull; &nbsp;
-        <GitHubCommitLink hash={GIT_COMMIT_HASH} short={GIT_SHORT_COMMIT_HASH} />
-      </p>
-    </div>
+            }
+          </li>
+          <li>
+            <a href='/api'>API</a>
+          </li>
+          <li>
+            <GitHubCommitLink hash={GIT_COMMIT_HASH} short={GIT_SHORT_COMMIT_HASH} />
+          </li>
+        </ul>
+      </div>
   </footer>
   ;
 

src/components/Header.jsx

@@ -153,6 +153,7 @@ export default compose(
       isStrimsChat: state.ui.chatHost === CHAT_HOST_STRIMS,
       isServiceChat: state.ui.chatHost === CHAT_HOST_SERVICE,
       currentStreamService: idx(state, _ => _.streams[state.stream].service),
+      rustlerCount: state.streams[state.stream] ? [state.streams[state.stream].rustlers, state.streams[state.stream].viewers] : null,
       showDggChat: Boolean(idx(state, _ => _.self.profile.data.show_dgg_chat)),
     }),
     { toggleChat }

src/components/MainLayout.jsx

@@ -3,23 +3,13 @@ import PropTypes from 'prop-types';
 
 import '../css/MainLayout';
 
-import Header from './Header';
-import Footer from './Footer';
-
-
 const MainLayout = ({
-  showHeader = true,
-  showFooter = true,
-  rustlerCount,
-  history,
   children,
 }) =>
-  <div className='main-layout d-flex flex-column'>
-    {showHeader ? <Header rustlerCount={rustlerCount} history={history} /> : null}
-    <div className='d-flex flex-column flex-grow-1'>
+  <div className='main-layout d-flex '>
+    <div className='d-flex flex-column flex-grow-1' style={{width: '100%'}}>
       {children}
     </div>
-    {showFooter ? <Footer /> : null}
   </div>
   ;
 

src/components/RoutesWithChat.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import history from '../history';
+import Routes from '../routes';
+import ChatEmbed from './ChatEmbed';
+import Resizeable from './Resizeable';
+import idx from 'idx';
+
+import Header from './Header';
+import Footer from './Footer';
+
+import '../css/Stream';
+
+import {
+  setChatSize,
+  showChat,
+} from '../actions';
+
+export const RoutesWithChat = ({showHeader, showFooter, setChatSize, showLeftChat=false, chatClosed, chatSize}) =>
+{
+  let left = (
+    <div className='flex-shrink-0 stream-embed' style={{ width: chatClosed ? '100%' : `calc(100% - ${chatSize}px)` , display: 'flex', flexDirection: 'column'}}>
+      <Routes />
+      {showFooter ? <Footer /> : null}
+    </div>
+  );
+  let right = chatClosed ? null : (
+    <div className='chat-embed' style={{ width: chatSize, height: "inherit"}}>
+      <ChatEmbed onClose={() => showChat(false)} />
+    </div>
+  );
+
+
+  if (showLeftChat) {
+    const temp = left;
+    left = right;
+    right = temp;
+  }
+
+  return (
+    <div style={{height: "100%"}}>
+      <Router history={history}>
+        <div style={{height: "100%", display: 'flex', flexDirection: 'column'}}>
+          {showHeader ? <Header history={history} /> : null}
+          <Resizeable
+          className='flex-grow-1 flex-column flex-lg-row'
+          onResize={e => {
+          let newChatSize;
+          if (showLeftChat) {
+            newChatSize = e.pageX;
+          }
+          else {
+            newChatSize = window.innerWidth - e.pageX;
+          }
+            setChatSize(newChatSize);
+          }}>
+            {left}
+            {right}
+          </Resizeable>
+        </div>
+      </Router>
+    </div>
+  );
+};
+
+RoutesWithChat.propTypes = {
+  showHeader: PropTypes.bool,
+  showFooter: PropTypes.bool,
+  showLeftChat: PropTypes.bool,
+  chatClosed: PropTypes.bool,
+
+  chatSize: PropTypes.number.isRequired,
+
+  setChatSize: PropTypes.func.isRequired,
+  showChat: PropTypes.func.isRequired,
+};
+
+export default compose(
+  connect(
+    state => ({
+      showHeader: state.ui.showHeader,
+      showFooter: state.ui.showFooter,
+      chatSize: state.ui.chatSize,
+      showLeftChat: idx(state, _ => _.self.profile.data.left_chat),
+      chatClosed: !state.ui.showChat,
+    }),
+    {
+      setChatSize,
+      showChat,
+    },
+  ),
+)(RoutesWithChat);