formatted timestamps should link

amberleyromo · Aug 2, 2019 · 0c18057 · 0c18057
1 parent c697f48
commit 0c18057
Show file tree

Hide file tree

Showing 3 changed files with 391 additions and 1 deletion.
diff --git a/packages/gatsby-theme-podcast/src/templates/episode-page.js b/packages/gatsby-theme-podcast/src/templates/episode-page.js
@@ -3,6 +3,7 @@ import { Link, graphql } from "gatsby";
 import get from "lodash.get";
 import PodcastPlayer from "syntax-podcast-player";
 
+import { MDXProvider } from '@mdx-js/react'
 import { MDXRenderer } from "gatsby-plugin-mdx";
 import Layout from "../components/Layout";
 import Support from "../components/Support";
@@ -11,6 +12,51 @@ import SEO from "../components/SEO";
 import { rhythm } from "../utils/typography";
 
 import "./player-styles.css";
+import "./transcript.css";
+
+const TranscriptParagraph = props => {
+  let hasTimestamp = false;
+  const children = React.Children.toArray(props.children).map((child, i) => {
+    if (i === 0 && typeof child === "string") {
+      const timestamp = child.match(/^\[(\d\d):(\d\d)(?::(\d+))?\]/);
+      if (timestamp) {
+
+        let seconds = 0;
+        if (timestamp[3]) {
+          seconds =
+            Number(timestamp[1]) * 3600 +
+            Number(timestamp[2]) * 60 +
+            Number(timestamp[3]);
+        } else {
+          seconds = Number(timestamp[1]) * 60 + Number(timestamp[2]);
+        }
+        hasTimestamp = seconds;
+
+        return (
+          <a
+            key={child}
+            className="timestamp"
+            href={`#playFrom=${seconds}`}
+          >
+            {child}
+          </a>
+        );
+      }
+    }
+    return child;
+  });
+
+  return (
+    <p id={hasTimestamp ? `playFrom=${hasTimestamp}` : ''}>
+      {children}
+    </p>
+  );
+};
+
+const components = {
+  p: TranscriptParagraph,
+}
+
 class RssItemPageTemplate extends React.Component {
   render() {
     const rssItem = this.props.data.rssFeedItem;
@@ -66,7 +112,9 @@ class RssItemPageTemplate extends React.Component {
             }}
           />
 
-          <MDXRenderer>{rssItem.childMdx.body}</MDXRenderer>
+          <MDXProvider components={components}>
+            <MDXRenderer>{rssItem.childMdx.body}</MDXRenderer>
+          </MDXProvider>
 
           <p>
             <a href={discussUrl} target="_blank" rel="noopener noreferrer">

diff --git a/packages/gatsby-theme-podcast/src/templates/transcript.css b/packages/gatsby-theme-podcast/src/templates/transcript.css
@@ -0,0 +1,4 @@
+.timestamp {
+  float: left;
+  margin-left: -4.3rem;	
+}