Fix output container resizing

streamhut · Jun 22, 2020 · 20c7427 · 20c7427
1 parent bf5637f
commit 20c7427
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 77 deletions.
diff --git a/src/components/channel/Channel.tsx b/src/components/channel/Channel.tsx
@@ -19,6 +19,7 @@ import Header from 'src/components/global/Header'
 import Clipboard from 'src/components/functional/Clipboard'
 import DragAndDrop from 'src/components/functional/DragAndDrop'
 import Tag from 'src/components/functional/Tag'
+import { getShareUrl } from 'src/config'
 
 Terminal.applyAddon(fit)
 Terminal.applyAddon(fullscreen)
@@ -98,6 +99,8 @@ function genRandString() {
 
 const UI = {
   SiteContainer: styled.main`
+    display: flex;
+    flex-direction: column;
   `,
   Header: styled.header`
     display: flex;
@@ -107,6 +110,42 @@ const UI = {
     position: relative;
     padding-right: 35px;
   `,
+  OutputContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 2;
+  `,
+  Output: styled.output`
+    width: 100%;
+    max-height: 300px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 1rem;
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex: 2;
+    flex-direction: column;
+    box-shadow: 0 1px 10px rgba(151,164,175,0.1);
+
+    @media (max-width: 500px) {
+      padding: 0;
+    }
+
+    textarea {
+      font-size: 12px;
+    }
+
+    .item footer .copy {
+      margin-left: 0.5rem;
+    }
+
+    video {
+      width: 100%;
+      height: auto;
+      max-width: 500px;
+    }
+  `,
   Form: styled.form`
     display: flex;
     justify-content: space-between;
@@ -220,9 +259,19 @@ const UI = {
     }
   `,
   NoMessages: styled.div`
-    font-style: italic;
-    color: #7b7b7b;
-    font-size: 1rem;
+    display: flex;
+    align-items: flex-end;
+    flex: 1;
+    span {
+      display: inline-block;
+      font-style: italic;
+      color: #7b7b7b;
+      font-size: 1rem;
+    }
+
+    @media (max-width: 500px) {
+      padding: 2em;
+    }
   `,
   /* background: #293238; */
   TerminalContainer: styled.div`
@@ -328,7 +377,7 @@ class Channel extends Component<Props, State> {
       text: '',
       file: null,
       messages: [],
-      shareUrl: this.getShareUrl(channel),
+      shareUrl: getShareUrl(channel),
       fullScreen: false,
       queuedFiles: [],
       fullScreenUrl: '',
@@ -359,18 +408,6 @@ class Channel extends Component<Props, State> {
     this.terminalResizerRef = React.createRef()
   }
 
-  getShareUrl (channel: string) {
-    let protocol = window.location.protocol
-    let host = window.location.host
-    let pathname = `s/${channel}`
-    if (host === 'streamhut.io') {
-      host = 'stream.ht'
-      pathname = channel
-    }
-
-    return `${protocol}//${host}/${pathname}`
-  }
-
   setFullScreen () {
     document.body.classList.add('fullscreen')
   }
@@ -689,6 +726,8 @@ class Channel extends Component<Props, State> {
     container.style.height = newHeight + 'px'
     terminal.style.height = (newHeight - this.borderSize) + 'px'
     this.term.fit()
+
+    this.resizeOutputContainer()
   }, 20)
 
   setupTerminalResizer () {
@@ -703,11 +742,25 @@ class Channel extends Component<Props, State> {
     document.addEventListener('mouseup', event => {
       document.removeEventListener('mousemove', this.resizeTerminal, false)
     }, false)
+
+    // TODO: fix resizing on mobile
     // document.addEventListener('touchstart', event => {
     // document.removeEventListener('touchmove', this.resizeTerminal, false)
     // }, false)
   }
 
+  resizeOutputContainer () {
+    const outputContainer = document.getElementById('output-container') as HTMLElement
+    const output = document.getElementById('output') as HTMLElement
+    const form = document.getElementById('form') as HTMLElement
+
+    const terminalContainer = this.terminalContainerRef.current
+    const maxHeightAllowed = window.outerHeight - terminalContainer.offsetHeight - terminalContainer.offsetTop - form.offsetHeight - 25
+    const maxHeight = outputContainer.offsetHeight - form.offsetHeight
+
+    output.style.maxHeight = `${Math.min(maxHeight, maxHeightAllowed)}px`
+  }
+
   sendArrayBuffer (arrayBuffer, mime) {
     const abWithMime = arrayBufferWithMime(arrayBuffer, mime)
     try {
@@ -947,7 +1000,9 @@ class Channel extends Component<Props, State> {
   }
 
   render () {
-    let messages: any = <UI.NoMessages>no messages</UI.NoMessages>
+    let messages: any = <UI.NoMessages>
+      <span>no messages</span>
+    </UI.NoMessages>
     if (this.state.messages.length) {
       messages = this.state.messages.map(x => this.renderMessage(x))
     }
@@ -1041,12 +1096,12 @@ class Channel extends Component<Props, State> {
           >☰</UI.TerminalResizer>
         </UI.TerminalContainer>
 
-        <div>
-          <output
+        <UI.OutputContainer id="output-container">
+          <UI.Output
             id="output"
             ref={this.output}>
             {messages}
-          </output>
+          </UI.Output>
           <UI.Form
             id="form"
             onSubmit={event => this.handleSubmit(event)}>
@@ -1095,7 +1150,7 @@ class Channel extends Component<Props, State> {
                   Send</button></div>
             </UI.FormGroup>
           </UI.Form>
-        </div>
+        </UI.OutputContainer>
         <DragAndDrop
           handleDrop={files => this.handleDrop(files)} />
       </UI.SiteContainer>

diff --git a/src/components/global/Footer.tsx b/src/components/global/Footer.tsx
@@ -8,7 +8,7 @@ import MaxWidthContainer from 'src/components/functional/MaxWidthContainer'
 const UI = {
   Footer: styled.footer`
     align-items: start;
-    padding: 2rem;
+    padding: 4em 2rem;
     width: 100%;
     font-size: 1rem;
     text-align: right;

diff --git a/src/components/global/Header.tsx b/src/components/global/Header.tsx
@@ -6,6 +6,7 @@ import ClipboardJS from 'clipboard'
 import Clipboard from 'src/components/functional/Clipboard'
 import HelpTooltip from 'src/components/functional/HelpTooltip'
 import MaxWidthContainer from 'src/components/functional/MaxWidthContainer'
+import { streamHostname, streamPort } from 'src/config'
 
 const UI = {
   Header: styled.header`
@@ -189,8 +190,8 @@ class Header extends Component<Props, State> {
     super(props)
 
     this.state = {
-      hostname: window.location.hostname,
-      port: 1337,
+      hostname: streamHostname,
+      port: streamPort,
       showExampleWithChannel: false,
       channel: window.location.pathname.substr(3)
     }

diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import GithubIcon from 'mdi-material-ui/GithubCircle'
 import MaxWidthContainer from 'src/components/functional/MaxWidthContainer'
 import SubscribeForm from './SubscribeForm'
+import { streamHostname, streamPort } from 'src/config'
 
 const UI = {
   Main: styled.div`
@@ -15,9 +16,6 @@ const UI = {
     justify-content: center;
     flex-direction: column;
     padding: 6rem 3rem;
-    @media (max-width: 500px) {
-      padding: 3rem 1rem;
-    }
   `,
   HeroImage: styled.div`
     display: block;
@@ -33,7 +31,7 @@ const UI = {
       max-width: 500px;
       height: auto;
       @media (max-width: 500px) {
-        max-width: 200px;
+        max-width: 320px;
       }
     }
   `,
@@ -69,7 +67,6 @@ const UI = {
       max-width: 345px;
     }
     @media (max-width: 500px) {
-      padding: 3rem 1rem;
       small {
         max-width: 100%;
       }
@@ -214,9 +211,6 @@ const UI = {
     text-align: center;
     color: #fff;
     font-size: 1.5rem;
-    @media (max-width: 500px) {
-      padding: 3rem 1rem;
-    }
     h3 {
       font-size: 1.8rem;
       font-weight: 700;
@@ -262,9 +256,6 @@ const UI = {
     padding: 5rem 2rem;
     text-align: center;
     font-size: 1.2rem;
-    @media (max-width: 500px) {
-      font-size: 1rem;
-    }
     h3 {
       font-size: 1.8rem;
       font-weight: 700;
@@ -291,9 +282,6 @@ const UI = {
     font-size: 1.2rem;
     background: #fff url('https://s3.amazonaws.com/assets.streamhut.io/background-pattern-round.png') repeat 0 0;
     border-top: 1px solid #f4f4f5;
-    @media (max-width: 500px) {
-      font-size: 1rem;
-    }
     h3 {
       font-size: 1.8rem;
       font-weight: 700;
@@ -345,8 +333,8 @@ class Home extends Component<Props, State> {
   constructor (props) {
     super(props)
     this.state = {
-      hostname: window.location.hostname,
-      port: 1337
+      hostname: streamHostname,
+      port: streamPort
     }
   }
 
@@ -399,9 +387,14 @@ class Home extends Component<Props, State> {
           </div>
           <div>
             <div>
-              <img
+              <a
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Open gif"
+              href="https://s3.amazonaws.com/assets.streamhut.io/streamhut_demo_1.gif"
+              ><img
                 src="https://s3.amazonaws.com/assets.streamhut.io/streamhut_demo_1.gif"
-                alt="screencast" />
+                alt="screencast" /></a>
             </div>
           </div>
         </UI.Cast>

diff --git a/src/config/config.ts b/src/config/config.ts
@@ -0,0 +1,16 @@
+const windowHostname = window.location.hostname
+export const streamHostname = /^streamhut.(io|net|org|co|me|sh)$/gi.test(windowHostname) ? 'stream.ht'
+: windowHostname
+export const streamPort = 1337
+
+export const getShareUrl = (channel: string) => {
+  let protocol = window.location.protocol
+  let host = window.location.host
+  let pathname = `s/${channel}`
+  if (host === 'streamhut.io') {
+    host = 'stream.ht'
+    pathname = channel
+  }
+
+  return `${protocol}//${host}/${pathname}`
+}
diff --git a/src/config/index.ts b/src/config/index.ts
@@ -0,0 +1 @@
+export * from './config'
diff --git a/src/index.css b/src/index.css
@@ -203,29 +203,6 @@ input[type="text"]:focus {
   }
 }
 
-#output {
-  width: 100%;
-  max-height: 300px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 1rem;
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 1px 10px rgba(151,164,175,.1);
-}
-
-@media (max-width: 500px) {
-  #output {
-    padding: 0;
-  }
-}
-
-#output textarea {
-  font-size: 12px;
-}
-
 .copy {
   text-decoration: none;
   -webkit-appearance: none;
@@ -248,21 +225,11 @@ input[type="text"]:focus {
   text-decoration: none;
 }
 
-#output .item footer .copy {
-  margin-left: 0.5rem;
-}
-
-#output video {
-  width: 100%;
-  height: auto;
-  max-width: 500px;
-}
-
 /* sticky footer */
 
 #site-container {
     min-height: 100%;
-    margin-bottom: -10rem;
+    margin-bottom: -15rem;
 }
 
 #site-container:after {
@@ -271,7 +238,7 @@ input[type="text"]:focus {
 }
 
 #footer, #site-container:after {
-    height: 10rem;
+    height: 15rem;
 }
 
 /* end sticky footer */