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

Add transcript section to workshop pages #186

Closed
varlese opened this issue Jan 21, 2021 · 10 comments
Closed

Add transcript section to workshop pages #186

varlese opened this issue Jan 21, 2021 · 10 comments

Comments

@varlese
Copy link
Collaborator

@varlese varlese commented Jan 21, 2021

On individual workshop pages (for example), it would be helpful to be able to display the video transcript in its own section for viewers to follow along or print for reference.

Would it be possible to add a section (either in the sidebar or a toggle) to display the transcript in full when activated?

In thinking through how to handle transcripts, it will be helpful to also consider cases in which the video is captioned or subtitled in multiple languages.

Just in case a visual is helpful, this is a very rough idea of where we could consider placement:

transcript UI

@gwwar
Copy link

@gwwar gwwar commented Feb 2, 2021

Maybe add the transcript below the fold (on the same page), and add an anchor link to jump to the start of the content?

@andreamiddleton
Copy link

@andreamiddleton andreamiddleton commented Feb 25, 2021

Or maybe a Transcription Block? Or a Summary block we use for Transcriptions? Available to a relatively low user permissions level?

@courane01
Copy link
Collaborator

@courane01 courane01 commented Feb 26, 2021

I really like the idea of tucking it behind post content but making it available. I have a student that actually prints the transcripts from our course videos as that helps her then highlight things and make notes on it herself, feeling some ownership in her learning vs passive consumption. Thus, I also would like to see the transcript have quick access to print the transcripts.

@iandunn
Copy link
Member

@iandunn iandunn commented Mar 1, 2021

It seems like we could automatically generate the transcript based on the caption files that are stored on WPTV. The formatting probably wouldn't be perfect, but it'd save some manual work.

The drawback would probably be most apparent around paragraphs, since we wouldn't be able to programmatically detect when they should be1. Without any formatting, it'd look like this:

Hello, and welcome to this Learn WordPress workshop on user

management. Today, we will learn how to add, remove and update

user accounts within your WordPress website. User

Management is important and useful for a few different

reasons. For instance, you may want to add another user to your

website without allowing public registration for new accounts.

We could possibly do some basic changes, though, like making it so that there are line breaks between sentences (assuming the captioner added them, and the written language has some kind of full stop at the end of sentences):

Hello, and welcome to this Learn WordPress workshop on user management.

Today, we will learn how to add, remove and update user accounts within your WordPress website.

User Management is important and useful for a few different reasons.

For instance, you may want to add another user to your website without allowing public registration for new accounts.

That'd still be difficult to read on a long page, but having the extra whitespace between the lines might help. Here's an example of how YouTube displays auto-generated transcripts:

Screen Shot 2021-03-01 at 2 12 16 PM

It'd be good to get input from a designed on how the page elements should be laid out.


[1] - We could use the timestamps in the TTML file to make a rough guess. But that seems overly complex, at least for v1.

@iandunn
Copy link
Member

@iandunn iandunn commented Mar 1, 2021

quick access to print the transcripts

From a dev perspective, that should be easy. There are many ways to print a selection of the page. An iframe might be simplest in this context.

@iandunn
Copy link
Member

@iandunn iandunn commented Mar 1, 2021

Er, if we're already using otter.ai to generate the captions, then their transcription export might be better than the TTML file.

@coreymckrill
Copy link
Contributor

@coreymckrill coreymckrill commented Mar 1, 2021

@iandunn Is there a way to access the caption files on wp.tv when the only thing linking a workshop post to a video is the wp.tv URL? (i.e. https://wordpress.tv/2021/01/14/anne-mccarthy-how-to-do-triage-on-github/)

@iandunn
Copy link
Member

@iandunn iandunn commented Mar 1, 2021

Probably not but default (although I haven't looked), but it should be easyish to do via the REST API and a small bit of code.

@iandunn
Copy link
Member

@iandunn iandunn commented Mar 2, 2021

I'm guessing we're going to want the transcript to be editable, regardless of whether the initial version comes from TTML or Otter.

So either way we'll need a block(s) in the template, maybe a custom one. That could maybe be as simple as extending the Group block so that it has a .workshop-transcription class hardcoded on the container.

Related discussion about the layout of the template.

@iandunn
Copy link
Member

@iandunn iandunn commented May 25, 2021

This is deployed now. Existing workshops are unaffected, but can be manually converted to the latest template to get the transcript.

New workshops will have a placeholder for it automatically.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

6 participants