UI/Design of Transcripts

[hzoo]

Based off #4

Ideally we could show profile picture with name and then leave the timestamp on the side (or use a # link)

I like changelog's format too

Maybe timestamp off to the side (just want a way to deep link it to the player, so that it seeks to that convo when you click through it somehow). And bold the name?

[hzoo]

Next step is to integrate a way to show timestamps, I imagine it like above? It would be offset to the side and linkable to the timestamp stuff @jlengstorf and I worked on in @amberleyromo's https://github.com/amberleyromo/gatsby-themes (#playFrom=10) - would need to transform the timestamp link into seconds though.

I assume one can parse the timestamp and do it like https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-autolink-headers?

[DSchau]

Nice!

So you have (or could have) Markdown like:

[00:03:54.10] Right, that happens all the time...

right? As long as it's a consistently parsable structure (without a lot of edge cases with other content, e.g. falsely detecting a timestamp), I like your idea of a plugin.

I have a few preliminary questions, then I'll try to give a more informed answer!

1. Given a timestamp in Markdown, we want to deep link into a podcast right? e.g. at that exact time?
2. If so -- the complexity theoretically is making the plugin aware of the "parent" page data, e.g. the embed URL you can deep link into?

Sorta challenging request -- but we can definitely help you figure this out!

[hzoo]

@DSchau Thanks for the response!

Yeah, we implemented a simple deep linking functionality into the player via https://github.com/amberleyromo/gatsby-themes/blob/c697f483a7f90e224d27cccb8b15281b526be54b/packages/syntax-podcast-player/src/PodcastPlayer.js#L201-L214 where the url is just a hash like: #playFrom=<number of seconds> (e.g. #playFrom=120).

Given a timestamp in Markdown, we want to deep link into a podcast right? e.g. at that exact time?

Yeah for 1, we would need it to convert that timestamp format to seconds most likely (or whatever format the code will understand). So for that timestamp we would just need it to create an <a> tag similar to the anchor linking and then make the url a hash.

If so -- the complexity theoretically is making the plugin aware of the "parent" page data, e.g. the embed URL you can deep link into?

We don't need to do anything fancy with the url because the functionality will be in the player already. Ideally, it just knows there's a hash change and can auto play based on the url. Similar to how youtube works and what we've described in #6.

Seems like we just need to look at the AST to find a paragraph and specify a unique parsing thing to work with?

[DSchau]

@hzoo got it, got it!

Exactly! I've put together a quick gist here of what this would look like!

A much broader approach but it could be worth checking out MDX as well. You could swap out the p component for a custom one wherein you could do this quite easily :)

[hzoo]

I think I got it (trying the replacing p component way)

[DSchau]

Nice!! I’m glad that worked out so well!

[hzoo]

Sorta got this working in this repo (not as a theme though) #29, https://hopeinsource.com/shalom/