Add previous and next capture links to the replay title block

[aaron-collier]

Add previous and next capture links to the replay title block in default_banner

This change has been requested for https://was-pywb-prod.stanford.edu/was/ and we'd like to share it upstream to avoid future upgrade constraints. Please let me know what I can improve/address in this PR and I'm happy to address any contributor concerns.

Thank you for the consideration.

Description

We have a need at Stanford Libraries to include the previous and next capture links in the playback banner. This is a small change to default_banner.js that queries the appropriate timestamps from the cdx API and inserts them into the banner_info in order to be displayed as part of set_banner.

Motivation and Context

Closes #506

Screenshots (if appropriate):

On the first capture only the next link is shown:

On a midpoint capture both links are shown:

On the last capture only the previous link is sown:

Types of changes

• [x] Replay fix (fixes a replay specific issue)
• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] I have added or updated tests to cover my changes.
• [ ] All new and existing tests passed.

[edsu]

When I look at this the title is pushed to the left and the prev/next links are unstyled. Is it possible you forgot to commit changes to pywb/static/default_banner.css?

[aaron-collier]

@edsu That's interesting, no, there isn't any custom CSS here, it's just bootstrap.

[edsu]

I'm working on a small change to see if I can fix it, and also move CSS out of default_banner.js and into default_banner.css. I also am trying to address timing issues when reloading the page: for the same URL sometimes the prev/next links appear, and other times not.

[edsu]

In looking closer at this change and how the banner works, my personal opinion is that the banner itself needs a refactor to use Vue which is introduced in the 2.7.0 branch. There are multiple async calls that alter the display state, and the JavaScript itself looks pretty antiquated. If Vue has is going to be introduced for other parts of pywb's interface I think it would be helpful to use it to refactor the banner.

[aaron-collier]

@edsu I'd be happy to pair with you on that when you're back.

[ikreymer]

Thanks for this! Yes, we are thinking of supporting this banner mode in the new vue banner for 2.7.0, and having a single implementation, which could have next / prev links as well, since it already has the cdx.

I suppose we could add this for now, want to note that potentially it could be slow fetching the cdxj again for the next/prev links. But it would better be addressed in the Vue implementation.

For now, since you already have this, perhaps it could be something that's just part of the Stanford implementation, to start.. Happy to discuss more @edsu @aaron-collier

[ikreymer]

Closing this, as we've now implemented this in 2.7.0 and this has been tested on the Stanford deployment as well.