Handle Media Types Correctly In AAPBRecord (#140)

app/classes/aapbRecordHelpers.tsx

@@ -66,7 +66,6 @@ export class AAPBRecord extends Component<AAPBRecordProps> {
   async componentDidMount() {
     var hyphenGuid: Guid = normalizeGuid(this.props.guid)
     var record = await retrieveAapbRecord(hyphenGuid)
-
     let isWide = false
     if (record?.pbcoreDescriptionDocument?.pbcoreInstantiation) {
       let inst = record.pbcoreDescriptionDocument.pbcoreInstantiation
@@ -96,15 +95,17 @@ export class AAPBRecord extends Component<AAPBRecordProps> {
           }
         }
       }
-      this.setState({ guid: hyphenGuid, pbcore: record, wide: isWide })
     }
+
+    this.setState({ guid: hyphenGuid, pbcore: record, wide: isWide, mediaType: this.mediaType(record) })
+
   }
 
   mediaType(pbcore: PBCore) {
     let inst: PBCoreInstantiation | PBCoreInstantiation[] =
       pbcore.pbcoreDescriptionDocument?.pbcoreInstantiation
     if (!inst) {
-      return
+      return false
     }
     if (!(inst instanceof Array)) {
       inst = [inst]
@@ -179,14 +180,17 @@ export class AAPBRecord extends Component<AAPBRecordProps> {
       if (this.props.showTitle) {
         titleBar = (
           <div className="shade-bar">
-            <div>{this.aapbTitle(this.state.pbcore)}</div>
+            <a href={`https://americanarchive.org/catalog/${this.state.guid}`}>
+              { this.aapbTitle(this.state.pbcore) }
+            </a>
           </div>
         )
       }
 
       let thumbnail
       if (this.props.showThumbnail) {
-        if (this.mediaType(this.state.pbcore) == 'Moving Image') {
+        let mt = this.state.mediaType
+        if (mt == "Moving Image") {
           // check here for digitized? if not show VIDEO THUMB
           var ci_pbi =
             this.state.pbcore.pbcoreDescriptionDocument.pbcoreIdentifier.find(
@@ -202,14 +206,26 @@ export class AAPBRecord extends Component<AAPBRecordProps> {
               backgroundImage: `url(/VIDEO_SMALL.png)`,
             }
           }
-        } else {
+        } else if(mt == "Sound") {
           // AUDIO THUMB
           thumbnail = {
             backgroundImage: `url(/AUDIO_SMALL.png)`,
           }
+        } else {
+          thumbnail = {
+            backgroundImage: `url(/other.jpg)`,
+          }
         }
       }
 
+      let playButton
+      if(this.state.mediaType){
+        playButton = (
+          <div className="blue-circle">
+            <div />
+          </div>
+        )
+      }
       if (this.state.showEmbed) {
         recordBlock = this.embed(
           this.state.guid,
@@ -218,17 +234,16 @@ export class AAPBRecord extends Component<AAPBRecordProps> {
           this.state.wide
         )
       } else {
+
         if (this.props.embedPlayer) {
           recordBlock = (
             <a
               style={thumbnail}
               className="content-aapbblock"
               onClick={() => this.setState({ showEmbed: true })}
             >
-              {titleBar}
-              <div className="blue-circle">
-                <div />
-              </div>
+              { titleBar }
+              { playButton }
             </a>
           )
         } else {
@@ -239,10 +254,8 @@ export class AAPBRecord extends Component<AAPBRecordProps> {
               className="content-aapbblock"
               href={this.aapbCatalogURL(this.state.guid)}
             >
-              {titleBar}
-              <div className="blue-circle">
-                <div />
-              </div>
+              { titleBar }
+              { playButton }
             </a>
           )
         }
@@ -266,17 +279,18 @@ export class AAPBRecords extends Component<AAPBRecordBlockProps> {
 
   async componentDidMount() {
     this.setState({ aapb_host: window.ENV.AAPB_HOST }, async () => {
+      var data
       if (this.props.specialCollections) {
         // fetch actual number of records from this special collection search
-        var data = await fetch(
-          // this endpoint takes a bare solr query within each filter option (q, fq, etc.), NOT BLACKLIGHT URL PARAMS
-          `${window.ENV.AAPB_HOST}/api.json?fq=special_collections:${this.props.specialCollections} AND access_types:online&sort=title+asc&rows=0`
+        data = await fetch(
+        // this endpoint takes a bare solr query within each filter option (q, fq, etc.), NOT BLACKLIGHT URL PARAMS
+        `${window.ENV.AAPB_HOST}/api.json?fq=special_collections:${this.props.specialCollections} AND access_types:online&sort=title+asc&rows=0`
         )
-          .then(response => response.json())
-          .catch(error => console.error(error))
-        if (data) {
-          this.setState({ numRecords: parseInt(data['response']['numFound']) })
-        }
+        .then(response => response.json())
+        .catch(error => console.error(error))
+      }
+      if (data) {
+        this.setState({ numRecords: parseInt(data['response']['numFound']) })
       }
     })
   }
@@ -301,11 +315,21 @@ export class AAPBRecords extends Component<AAPBRecordBlockProps> {
     if (this.props.specialCollections) {
       recordsSearchLink += `?f[special_collections][]=${this.props.specialCollections}&sort=title+asc&f[access_types][]=online`
     }
+    var msg
+    if(this.state.numRecords > 0){
+      if(this.state.numRecords == 1){
+        msg = `View on AAPB >`
+      } else {
+        msg = `View all ${this.state.numRecords} on AAPB >`
+      }
+    } else {
+      msg = `View more on AAPB >`
+    }
     return (
       <div className="aapb-records">
         {aapbRecords}
         <a className="aapb-records-seemore" href={recordsSearchLink}>
-          View all {this.state.numRecords} on AAPB &gt;
+          {msg}
         </a>
       </div>
     )

app/classes/meta.tsx

@@ -6,18 +6,18 @@ export const extractMeta = (server_url: URL, article: Article) => [
   { property: 'og:title', content: article.title },
   {
     property: 'og:description',
-    content: article.meta.search_description || 'GBH Open Vault Exhibit',
+    content: article.meta?.search_description || 'GBH Open Vault Exhibit',
   },
-  { property: 'og:image', content: article.cover_image.url },
+  { property: 'og:image', content: article.cover_image?.url },
   { name: 'twitter:card', content: 'summary_large_image' },
   { property: 'twitter:domain', content: 'openvault.wgbh.org' },
   { property: 'twitter:url', content: server_url },
   { name: 'twitter:title', content: article.title },
   {
     name: 'twitter:description',
-    content: article.meta.search_description || 'GBH Open Vault Exhibit',
+    content: article.meta?.search_description || 'GBH Open Vault Exhibit',
   },
-  { name: 'twitter:image', content: article.cover_image.url },
+  { name: 'twitter:image', content: article.cover_image?.url },
 ]
 
 export const Meta = [

app/routes/collections.$collectionSlug.tsx

@@ -27,7 +27,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     {
       name: 'description',
       content:
-        collection.meta.search_description || 'GBH Open Vault Collection',
+        collection.meta?.search_description || 'GBH Open Vault Collection',
     },
     ...extractMeta(data.server_url, collection),
   ]

app/routes/credits.jsx

@@ -128,6 +128,15 @@ export default function Credits() {
                 <div className="black">Susan Levene, Content Producer</div>
               </div>
 
+              <div className="hidden">
+                <div className="purple bold spaced">GBH Archives</div>
+                <div className="black">Peter Higgins, Archives Manager</div>
+                <div className="black">Erica Titkemeyer, Archives Systems and Technology Manager</div>
+                <div className="black">Andrew Meyers, Senior Software Developer</div>
+                <div className="black">Henry Neels, Senior Software Developer</div>
+                <div className="black">Ryan Harbert, Software Developer</div>
+              </div>
+
               <div>
                 <div className="purple bold spaced">GBH Legal</div>
                 <div className="black">Nike Okediji</div>

app/routes/exhibits.$exhibitSlug.tsx

@@ -30,7 +30,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     {
       name: 'description',
       content:
-        exhibit.meta.search_description ||
+        exhibit.meta?.search_description ||
         'Scholar Exhibit from GBH Open Vault',
     },
     ...extractMeta(data.server_url, exhibit),

app/routes/faq.jsx

@@ -1,3 +1,4 @@
+import { renderPageTitleBar } from '~/classes/pageHelpers'
 import { Meta } from '~/classes/meta'
 
 export const meta = () => {
@@ -14,9 +15,16 @@ export const meta = () => {
 }
 
 export default function FAQ() {
+    let titleBar = renderPageTitleBar(
+      'Frequently Asked Questions',
+      'https://s3.amazonaws.com/openvault.wgbh.org/carousel/Master_Control_multiple_dark_1978_1979.jpg'
+    )
+
   return (
     <div>
       <div className="page-container">
+        {titleBar}
+
         <div className="page-sidebar" />
 
         <div className="page-body-container">

app/routes/terms.jsx

@@ -32,6 +32,8 @@ export default function Terms() {
             <p>
               THE FOLLOWING TERMS AND CONDITIONS GOVERN YOUR USE OF THE SITE.
               PLEASE READ THESE TERMS OF USE CAREFULLY BEFORE USING THIS SITE.
+            </p>
+            <p>
               By using the Site, you agree to be bound by these Terms of Use and
               the Privacy Policy. If you do not agree to these Terms of Use and
               the Privacy Policy, please exit the Site and do not use the Site

app/routes/visit-us.jsx

@@ -54,11 +54,13 @@ export default function VisitUs() {
               <img src="https://s3.amazonaws.com/openvault.wgbh.org/logos/GBH_Archives_rgb_color.png" />
             </div>
             <div className="static-halfbox purple bold">
-              Please contact GBH Archives at archive_requests@wgbh.org and state
+              Please contact GBH Archives at <a style={{ textDecoration: "underline" }} href="mailto:archive_requests@wgbh.org">archive_requests@wgbh.org</a> and state
               the nature of your research interest and your academic or
               professional affiliation.
             </div>
 
+            <hr className="spaced-hr" />
+
             <h2>Guidelines</h2>
 
             <p className="static-section">

app/styles/styles.css

@@ -201,6 +201,8 @@ a.series-alphabet-link {
 }
 
 ul {
+  margin-left: 1em;
+  padding-inline-start: 0;
   margin-block-start: 0;
 }
 
@@ -266,8 +268,9 @@ div.static-halfbox {
   vertical-align: middle;
   display: inline-block;
   width: 48%;
-  font-size: 1em;
+  font-size: 0.8em;
   margin-bottom: 1.2em;
+
 }
 
 a.big-blue-link {
@@ -927,8 +930,9 @@ div.med-heading {
 }
 
 div.med-textline {
-  font-size: 1.1em;
+  font-size: 1em;
   margin-bottom: 2em;
+  font-family: "Red Hat Text";
 }
 
 .blockquote-text {
@@ -1071,10 +1075,15 @@ a.content-aapbblock div.shade-bar {
   overflow: hidden;
 }
 
-a.content-aapbblock div.shade-bar div {
+a.content-aapbblock div.shade-bar a {
   /*  extra element here to pad without changing shade bar size */
   width: 100%;
   padding-left: 2vw;
+  color: #fff;
+}
+
+a.content-aapbblock div.shade-bar a:hover {
+  text-decoration: underline;
 }
 
 a.content-aapbblock div.blue-circle {