Skip to content

Add a title bar linking to external source to video player - #557

Merged
masaball merged 2 commits into
mainfrom
title-link
Jul 11, 2024
Merged

Add a title bar linking to external source to video player#557
masaball merged 2 commits into
mainfrom
title-link

Conversation

@masaball

@masaball masaball commented Jul 9, 2024

Copy link
Copy Markdown
Contributor

Related Issue: avalonmediasystem/avalon#5898

This PR adds a custom VideoJS component to override/piggyback on the TitleBar component added to Video.js in v8.0.0 and adds a prop to the MediaPlayer component for enabling/disabling this feature. The title bar concatenates the manifest label with the active canvas's label and uses the id field as an href to render them as a hyperlink that will open a new tab for the original media page when clicked. The link will be underlined when hovered over.

Screenshot_20240709_140635

Screenshot_20240709_140649

I was unable to get tests for the prop to work. I think this may be because the component is added as a child of the player during the player.on('ready'...) block and is consequently not actually rendered in the context of the jest testing framework? Everything looked to be working as expected when testing manually.

@masaball
masaball marked this pull request as ready for review July 9, 2024 18:26
@masaball

masaball commented Jul 9, 2024

Copy link
Copy Markdown
Contributor Author

Is that transcript test maybe flaky? Tests are passing for me locally, and these changes don't touch anything related to the transcripts...

@masaball
masaball requested a review from Dananji July 9, 2024 18:34
@cjcolvar

cjcolvar commented Jul 9, 2024

Copy link
Copy Markdown
Member

Is that transcript test maybe flaky? Tests are passing for me locally, and these changes don't touch anything related to the transcripts...

Looks like it. I restarted the build and it passed.

@Dananji Dananji left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Looks great! I have one comment on the way the component is initialized;

I think you can set use the component name as an option in videoJsOptions when initializing as follow;

videoJsOptions = {
  ...
  videoJSTitleLink: enableTitleLink
}

And then player.addChild('VideoJSTitleLink'); in VideoJSPlayer component can be removed.
By setting it up this way, you might be able to access the component in tests hopefully.

@Dananji Dananji left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Looks good!

@masaball
masaball merged commit 36a2a75 into main Jul 11, 2024
@masaball
masaball deleted the title-link branch July 11, 2024 13:48
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.

3 participants