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 chapters support to Invidious #4111

Open
wants to merge 29 commits into
base: master
Choose a base branch
from

Conversation

syeopite
Copy link
Member

@syeopite syeopite commented Sep 19, 2023

This PR adds a chapters menu to the player control bar and a separate widget within the description to select chapters along with their thumbnail similar to what's on YouTube. See screenshots below.

Unfortunately, we can't segment the progress bar into multiple chunks like what YouTube does yet. VideoJS doesn't support this natively and it doesn't look like there are any extensions that does this.

Related: videojs/video.js#8235

chapters
chapters widget

Closes chapters component of #2395

@syeopite syeopite requested review from SamantazFox and a team as code owners September 19, 2023 21:10
@absidue
Copy link
Contributor

absidue commented Sep 20, 2023

Is there a reason you decided to create a completely new JSON API endpoint instead of just including it in the existing /api/v1/videos/{video id}? Seems like it will add extra unnecessary load on Invidious, as apps like FreeTube will be making the request for every video, but it'll frequently be pointless, as most videos don't have any chapters.
Integrating it into the existing API response will make integration a lot easier.

@syeopite
Copy link
Member Author

syeopite commented Sep 20, 2023

I'm not actually sure why I did that... good catch! Data for chapters should now be available in the standard /api/v1/videos/{video id} endpoint

@absidue
Copy link
Contributor

absidue commented Sep 26, 2023

Thanks!

1 similar comment
@absidue

This comment has been minimized.

src/invidious/videos.cr Outdated Show resolved Hide resolved
src/invidious/routes/watch.cr Outdated Show resolved Hide resolved
src/invidious/routes/images.cr Outdated Show resolved Hide resolved
assets/css/player.css Show resolved Hide resolved
src/invidious/routes/api/v1/videos.cr Show resolved Hide resolved
src/invidious/routing.cr Show resolved Hide resolved
src/invidious/videos/chapters.cr Outdated Show resolved Hide resolved
src/invidious/videos/chapters.cr Outdated Show resolved Hide resolved
Comment on lines 12 to 13
<%- start_in_seconds = chapter.start_ms.total_seconds.to_i %>
<a href="/watch?v=<%-= video.id %>&t=<%=start_in_seconds %>">
Copy link
Member

Choose a reason for hiding this comment

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

The attributes data-onclick="jump_to_time" data-jump-time="<seconds>" should go on this <a> element. They don't need to go anywhere else!

Copy link
Member

Choose a reason for hiding this comment

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

Also, we can pass a floating point number, with full ms precision, as the function that decodes the t parameter supports milliseconds precision (And on the JS side, player.currentTime() does too).

Comment on lines 22 to 26
<%- if start_in_seconds > 0 -%>
<p data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>"><%-= recode_length_seconds(start_in_seconds) -%></p>
<%- else -%>
<p data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>">0:00</p>
<%- end -%>
Copy link
Member

Choose a reason for hiding this comment

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

Can you instead change recode_length_seconds() to return "0:00" is the provided time is 0? It also makes sense in all the other places that use that function.

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm a bit hesitant to change that since Invidious also uses a 0 to represent a nil value when length information isn't available

Copy link

This pull request has been automatically marked as stale and will be closed in 30 days because it has not had recent activity and is much likely abandoned or outdated. If you think this pull request is still relevant and applicable, you just have to post a comment and it will be unmarked.

@github-actions github-actions bot added the stale label Apr 27, 2024
syeopite and others added 11 commits April 28, 2024 20:14
Prior to this commit we used an Array of Chapter structs to represent
a video's chapters. However, as we often needed to apply operations on
the entire sequence of chapters, multiple isolated functions had to be
created and in turn clogged up the code.

By grouping everything together under a chapters struct that stores a
sequence of chapters, these functions can be grouped together, and can
be simplifed due to instance variables containing the data that they need.

Co-authored-by: Samantaz Fox <coding@samantaz.fr>
@syeopite syeopite removed the stale label Apr 29, 2024
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.

None yet

3 participants