Timestamp links to shownotes

[swordfischer]

We talked about being able to link directly to a part in the shownotes.

This should be easy achievable by adding id="timestamp-00:00:00" to the elements, then using url/#timestamp-00:00:00 - probably even have some JS to highlight the line.

[swordfischer]

Oh, apparently css has :target for that purpose.

https://steamlug.org/cast/s01e10#ts-00:04:40

[Cheeseness]

Oh wow, nice work. Is there more that needs doing or can we close this issue?

I wonder what kind of access we can get to the audio widget. it would kinda be neat to have the shownotes scroll to what you were currently listening to.

[Cheeseness]

Actually, @epitron in IRC put together this script for automatic timestamp highlighting https://gist.github.com/epitron/6896795

I haven't had a look at it yet.

[epitron]

That gist has some bugs... I'm currently fixing it.

[epitron]

Okay! Fixed!

https://gist.github.com/epitron/6896795

It's super easy to integrate. Just plop it in, as I demonstrated in the_html.html, and add the CSS classes.

[epitron]

BTW, a couple of the timestamps on Episode 10 are messed up. eg: 00:04:40 Monkey Island [source] should be 05:40. (They're really obvious because they're out of order.)

[Cheeseness]

Fixed the Monkey Island time (it was super rushed - my bad).

@meklu mentioned that this doesn't pass jslint, so we may want to do a little refactoring on it if we want to adopt it.

[epitron]

I just ran my code through JSLint. These are 95% style issues. The rest are just pedantic.

Try the code! It works good!

[epitron]

BTW, I wrote the code so that if there's an error, the player doesn't stop working. It's purely listening to events and highlighting the timestamps.

[Cheeseness]

Something I was thinking yesterday was that we could use the same kind of approach to make a tool for shownote creation where keyboard shortcuts could pause, play, seek and automatically add a timestamp without removing focus from the text input area.

When I've done shownotes for SteamLUG Cast and transcribing other things, switching focus back and forth between my audio and text applications has been the biggest bottleneck, so for at least how I do things, that could have a huge impact on how quickly and efficiently that job could be done.

[epitron]

Yep, that could be a nice simple little piece of Javascript.

But back on topic... are you ready to put my script on your site? :)

[Cheeseness]

As I said originally, it might be a couple of weeks before I personally get time to review it, but I have no objections to one of the others committing it if they feel it's ready.

Edit: I do want to highlight though that I am hugely appreciative of this contribution :D

[meklu]

I've gone through the linting process now, and have pushed this live. Thanks @epitron!

[meklu]

Err, I think we might want to leave this issue open after all, for the fragment stuff. "Oops."

[epitron]

Fragment stuff? Is this something I can help with?

[johndrinkwater]

Whycome this is open, thought it was completed? @meklu ?

[meklu]

The URL doesn't get changed when you hit a timestamp, making it somewhat tedious to link to a specific point in time. You have to manually put the element id (#ts-HH:MM:SS) in the URL to do so.

[johndrinkwater]

Can add something like
history.pushState( { time: this.seconds }, "Skipped to" + time.seconds, "#ts-" + (new Date(time.seconds*1000)).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1") );
on this line
https://github.com/SteamLUG/steamlug.org/blob/master/scripts/castseek.js#L54

Each call to pushState will replace #fragment for us :)