3 files changed, 46 insertions, 9 deletions
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
index 3a441fa..7a8db0e 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
@@ -1,9 +1,11 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 
 import ChecklistDropdown from './checklist.dropdown'
 import ChecklistContent from './checklist.content'
+import CreditsContent from './credits.content'
 
 class Checklist extends Component {
   state = {
@@ -20,16 +22,27 @@ class Checklist extends Component {
     const { currentSection } = this.state
     return (
       <div className="checklist">
-        <ChecklistDropdown
-          currentSection={currentSection}
-          onChange={this.handleSectionChange}
-        />
-        <ChecklistContent
-          currentSection={currentSection}
-        />
+        (viewer.checklist && (
+          <div>
+            <ChecklistDropdown
+              currentSection={currentSection}
+              onChange={this.handleSectionChange}
+            />
+            <ChecklistContent
+              currentSection={currentSection}
+            />
+          </div>
+        )
+        (viewer.credits && (
+          <CreditsContent />
+        ))
       </div>
     )
   }
 }
 
-export default Checklist
+const mapStateToProps = state => ({
+  viewer: state.viewer,
+})
+
+export default connect(mapStateToProps)(Checklist)
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css
index efb4de3..c805ed9 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.css
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css
@@ -71,7 +71,8 @@
 
 /* checklist content */
 
-.checklist-content {
+.checklist-content,
+.credits-content {
   flex: 1;
   height: 100%;
   overflow-x: hidden;
diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.content.js b/animism-align/frontend/app/views/viewer/checklist/credits.content.js
new file mode 100644
index 0000000..8683563
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.content.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+
+import {
+  Schedule,
+  Credits,
+} from '../player/components.inline/inline.utility'
+
+import SubscriptionForm from '../forms/subscription.form'
+
+export default class CreditsContent extends Component {
+  render() {
+    return (
+      <div className='credits-content'>
+        <div className='section_heading'>
+          <span>Credits</span>
+        </div>
+        <Schedule />
+        <Credits />
+        <SubscriptionForm />
+      </div>
+    )
+  }
+}