Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Formatted timestamps in the transcript should link! #5

Closed
wants to merge 3 commits into from

Conversation

hzoo
Copy link

@hzoo hzoo commented Aug 2, 2019

😱😱😱 Fixes hzoo/hopeinsource.com#5

Screen Shot 2019-08-02 at 12 40 47 AM

Just me trying to get this working (although now I'm trying to test and noticing some weirdness like are the timestamps they put actually accurate..)

Also mobile view of the player (and now these links) aren't great!

@hzoo hzoo force-pushed the transcript-timestamp-linking branch from 0c18057 to 7579cbf Compare August 2, 2019 05:11
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\d))?\]/);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check all the p tags, only check the first child in each one (since we are checking for [00:00:00]

Regex: https://regexr.com/

Screen Shot 2019-08-02 at 1 10 49 AM

Also did some simple stuff to compute the number of seconds from the timestamp..

});

return (
<p id={hasTimestamp ? `playFrom=${hasTimestamp}` : ''}>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess if we want it to move to the correct paragraph we need an id?? It's covered by the player atm though so it would be nice to move the player to the bottom maybe?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example

test

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the way heavybit does it, where there's no jump, and the player sticks to the top on scroll https://www.heavybit.com/library/podcasts/jamstack-radio/ep-42-structuring-content-with-simen-svale-skogsrud-and-knut-melvaer-of-sanity-io/

@hzoo hzoo changed the title formatted timestamps should link Formatted timestamps in the transcript should link! Aug 2, 2019
@hzoo hzoo closed this by deleting the head repository Feb 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI/Design of Transcripts
2 participants