Add media browser hint for first time usage

Author: samuelmaddock

packages/metastream-app/src/components/browser/Controls.css

@@ -53,3 +53,10 @@
 .requestButtonContainer button {
   height: 100%;
 }
+
+.addHintTooltip {
+  background-color: white !important;
+  color: #222 !important;
+  max-width: 360px !important;
+  padding: 1rem 2rem !important;
+}

packages/metastream-app/src/components/browser/Controls.tsx

@@ -1,11 +1,13 @@
 import React, { Component } from 'react'
 import cx from 'classnames'
 
+import { t } from 'locale'
+import { StorageKey } from 'constants/storage'
+import { Webview } from 'components/Webview'
 import { IconButton, HighlightButton } from 'components/common/button'
+import { HighlightText, MediumText } from '../common/typography'
 
 import styles from './Controls.css'
-import { t } from 'locale'
-import { Webview } from 'components/Webview'
 
 interface IProps {
   initialUrl: string
@@ -18,18 +20,28 @@ interface IState {
   url?: string
   loading?: boolean
   canRequest?: boolean
+  showAddHint?: boolean
 }
 
 export class WebControls extends Component<IProps, IState> {
   private webview: Webview | null = null
   private addressInput: HTMLInputElement | null = null
+  private mounted: boolean = false
 
   state: IState = {}
 
   private get addressUrl() {
     return (this.addressInput && this.addressInput.value) || ''
   }
 
+  componentDidMount() {
+    this.mounted = true
+  }
+
+  componentWillUnmount() {
+    this.mounted = false
+  }
+
   render(): JSX.Element {
     // back, forward, location bar, play button, exit
     const addressUrl = this.addressUrl
@@ -57,7 +69,6 @@ export class WebControls extends Component<IProps, IState> {
             this.webview.goForward()
           }
         }}
-        // disabled={this.webview ? !this.webContents.canGoForward() : true}
       />
     )
 
@@ -98,6 +109,19 @@ export class WebControls extends Component<IProps, IState> {
           onClick={this.onPlayClicked.bind(this)}
           disabled={!this.state.canRequest}
           highlight={this.state.canRequest}
+          title={
+            <MediumText>
+              When you&rsquo;re ready to share, press the{' '}
+              <HighlightText>Add To Session</HighlightText> button.
+            </MediumText>
+          }
+          tooltipProps={
+            {
+              classes: { tooltip: styles.addHintTooltip },
+              placement: 'bottom-end',
+              open: !!this.state.showAddHint
+            } as any
+          }
         >
           {t('requestUrl')}
         </HighlightButton>
@@ -217,7 +241,6 @@ export class WebControls extends Component<IProps, IState> {
         this.requestUrl(url)
       } else if (url) {
         this.loadURL(url)
-        // this.webview!.focus()
       }
     }
   }
@@ -227,6 +250,22 @@ export class WebControls extends Component<IProps, IState> {
     const canRequest = !!(url && url.length >= 1)
     if (canRequest !== this.state.canRequest) {
       this.setState({ canRequest })
+
+      if (canRequest) {
+        this.checkShowAddHint()
+      }
+    }
+  }
+
+  private checkShowAddHint() {
+    const hasRequestedMediaBefore = Boolean(localStorage.getItem(StorageKey.RequestCount))
+
+    if (!hasRequestedMediaBefore) {
+      setTimeout(() => {
+        if (this.mounted) {
+          this.setState({ showAddHint: true })
+        }
+      }, 5e3)
     }
   }
 

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

@@ -2,12 +2,14 @@ import React from 'react'
 import * as cx from 'classnames'
 import styles from './button.css'
 import { Icon } from 'components/Icon'
-import Tooltip from '@material-ui/core/Tooltip'
+import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip'
 
 export interface IIconButtonProps {
   icon: string
   iconSize?: 'small'
-  title?: string
+
+  title?: React.ReactNode
+  tooltipProps?: TooltipProps
 
   /** Disable button interaction */
   disabled?: boolean
@@ -21,9 +23,10 @@ export interface IIconButtonProps {
 const nbsp = '\u00A0'
 
 export const IconButton: React.SFC<IIconButtonProps> = ({
-  title,
   icon,
   iconSize,
+  title,
+  tooltipProps,
   children,
   ...props
 }) => {
@@ -40,7 +43,7 @@ export const IconButton: React.SFC<IIconButtonProps> = ({
       {...props}
     >
       {title ? (
-        <Tooltip title={title}>
+        <Tooltip {...tooltipProps} title={title}>
           <div className={styles.tooltip} />
         </Tooltip>
       ) : null}

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

@@ -0,0 +1,9 @@
+.highlightText {
+  color: var(--color-highlight);
+  font-weight: bold;
+}
+
+.mediumText {
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import cx from 'classnames'
+import styles from './typography.css'
+
+export const HighlightText = (props: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span {...props} className={cx(props.className, styles.highlightText)}>
+    {props.children}
+  </span>
+)
+
+export const MediumText = (props: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span {...props} className={cx(props.className, styles.mediumText)}>
+    {props.children}
+  </span>
+)

packages/metastream-app/src/constants/storage.ts

@@ -0,0 +1,3 @@
+export const enum StorageKey {
+  RequestCount = 'requestCount'
+}

packages/metastream-app/src/lobby/actions/mediaPlayer.ts

@@ -17,6 +17,7 @@ import { addChat } from './chat'
 import { AppThunkAction } from 'types/redux-thunk'
 import { translateEscaped, t } from 'locale'
 import { isIP } from 'utils/network'
+import { StorageKey } from '../../constants/storage'
 
 /** Code-split media parsing due to large dependencies and it's only used by the host. */
 const getMediaParser = () => import(/* webpackChunkName: "media-parser" */ 'media')
@@ -170,8 +171,8 @@ export const sendMediaRequest = (url: string, source: string): AppThunkAction =>
 
     const requestPromise = dispatch(server_requestMedia(url))
 
-    const requestCount = parseInt(localStorage.getItem('requestCount') || '0', 10) || 0
-    localStorage.setItem('requestCount', `${requestCount + 1}`)
+    const requestCount = parseInt(localStorage.getItem(StorageKey.RequestCount) || '0', 10) || 0
+    localStorage.setItem(StorageKey.RequestCount, `${requestCount + 1}`)
 
     {
       ga('event', { ec: 'session', ea: 'request_media', el: source })