refactor TemplateCover

src/components/TemplateCover.js

@@ -1,10 +1,16 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import MediaOverlay from '../../Overlay/Media'
 import marked from 'marked'
+import MediaOverlay from './Overlay/Media'
 
 const MEDIA_HIDDEN = -2
 
+/**
+ * Manages the presentation of props that come in from the store's app.cover.
+ * These are documented in docs/custom-cover.md.
+ * The component is a bit of a mess, keeping a lot of internal state and using
+ * a couple of weird offset calculations... but it works for the time being.
+ */
 class TemplateCover extends React.Component {
   constructor (props) {
     super(props)
@@ -17,15 +23,61 @@ class TemplateCover extends React.Component {
     if (index < headerEndIndex) {
       return this.props.cover.headerVideos[index]
     } else if (index >= 0) {
-      return this.props.cover.videos[index]
+      return this.props.cover.videos[index - headerEndIndex]
     } else {
       return null
     }
   }
 
-  render () {
+  onVideoClickHandler (index) {
+    const buffer = this.props.cover.headerVideos ? this.props.cover.headerVideos.length : 0
+    return () => {
+      this.setState({
+        video: index + buffer
+      })
+    }
+  }
+
+  renderHeaderVideos () {
     const { headerVideos } = this.props.cover
-    var video = this.getVideo(this.state.video, headerVideos.length || 0)
+    return (
+      <div className='row'>
+        { headerVideos.slice(0, 2).map((media, index) => (
+          <div className='cell plain' onClick={() => this.setState({ video: index })}>
+            {media.buttonTitle}
+          </div>
+        )) }
+      </div>
+    )
+  }
+
+  renderMediaOverlay () {
+    const video = this.getVideo(this.state.video, this.props.cover.headerVideos ? this.props.cover.headerVideos.length : 0)
+    return (
+      <MediaOverlay
+        opaque
+        source={
+          {
+            title: video.title,
+            desc: video.desc,
+            paths: [video.file],
+            poster: video.poster
+          }}
+        translations={video.translations}
+        onCancel={() => this.setState({ video: MEDIA_HIDDEN })}
+      />
+    )
+  }
+
+  render () {
+    if (!this.props.cover) {
+      return (
+        <div className='default-cover-container'>
+          You haven't specified any cover props. Put them in the values that overwrite the store in <code>app.cover</code>
+        </div>
+      )
+    }
+
     return (
       <div className='default-cover-container'>
         <div className='cover-content'>
@@ -54,15 +106,7 @@ class TemplateCover extends React.Component {
           <hr />
           <div className='hero thin'>
             {
-              headerVideos ? (
-                <div className='row'>
-                  { headerVideos.slice(0, 2).map((media, index) => (
-                    <div className='cell plain' onClick={() => this.setState({ video: index })}>
-                      {media.buttonTitle}
-                    </div>
-                  )) }
-                </div>
-              ) : null
+              this.props.cover.headerVideos ? this.renderHeaderVideos() : null
             }
             <div className='row'>
               <div className='cell yellow' onClick={this.props.showAppHandler}>
@@ -79,7 +123,7 @@ class TemplateCover extends React.Component {
                 <div className='row'>
                   {/* NOTE: only take first four videos, drop any others for style reasons */}
                   { this.props.cover.videos.slice(0, 4).map((media, index) => (
-                    <div className='cell small' onClick={() => this.setState({ video: index + (headerVideos.length || 0) })} >
+                    <div className='cell small' onClick={this.onVideoClickHandler(index)} >
                       {media.buttonTitle}<br />{media.buttonSubtitle}
                     </div>
                   )) }
@@ -90,20 +134,7 @@ class TemplateCover extends React.Component {
         </div>
 
         {
-          this.state.video !== MEDIA_HIDDEN ? (
-            <MediaOverlay
-              opaque
-              source={
-                {
-                  title: video.title,
-                  desc: video.desc,
-                  paths: [video.file],
-                  poster: video.poster
-                }}
-              translations={video.translations}
-              onCancel={() => this.setState({ video: MEDIA_HIDDEN })}
-            />
-          ) : null }
+          this.state.video !== MEDIA_HIDDEN ? this.renderMediaOverlay() : null }
       </div>
     )
   }