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 subtitles to video previews #91

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from

Conversation

jo-pol
Copy link

@jo-pol jo-pol commented Nov 21, 2024

This fixes IQSS/dataverse#11041

How to test

  • Create a dataset with a video, for example from https://toolsfairy.com/video-test/sample-mp4-files#
  • Add vtt files, an example. Publish the changes.
  • These files should have the same base name as the video, tried with extensions
    .vtt, .de.vtt, .en-US.vtt, en.vtt, .fr.vtt test-files-subtitles.zip
  • When we open the preview in a new window we can test with &locale=de-CH and with &locale=fr (these don't have exact matches with the extensions in the test data)
  • Note the highlighted language in the result (Chrome has a more complex menu than Firefox shown below)
    image image
  • Without the locale (or an invalid value) the previewer falls back to preferences configured in the browser
  • Without a match the previewer falls back to the ??? track (if a vtt files is provided without language component), or the first. Remove both english vtt files for that purpose, respectively the vtt without language.
  • Set one set of files to restricted. When logged in, the restricted video appears with subtitles.
  • Unrestrict the video but keep the vtt's restricted. When not logged, the language menu shows available languages but the subtitles don't appear.

Copy link
Member

@qqmyers qqmyers left a comment

Choose a reason for hiding this comment

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

Looks like some changes to get a real api key or to adjust to only support public files is needed. Whatever those changes end up being, it would be useful to then have an explanation of the limits of the previewer (requires using the api key rather than signed URLs, or only works when caption file are public, etc.) in the code and probably in the configuration instructions or other video.md readme file.

I'm happy to discuss ideas if you want to have a call/slack/etc.

FWIW: There has been some discussion of extending the signedUrl mechanism to support wild cards - the use case was for query parameters, but allowing a path param like the file id to be changed might support what you need here. I don't think this will get done in the near future though, so it would only help a future version.

const queryParams = new URLSearchParams(window.location.search.substring(1));
const id = queryParams.get("datasetid");
const siteUrl = queryParams.get("siteUrl");
const versionUrl = `${siteUrl}/api/datasets/${id}/versions/`
Copy link
Member

Choose a reason for hiding this comment

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

Someday it would make sense to have the retriever.js, which already gets this URL, either pass the json it gets or at least pass the signed URL (and other signed URLs, api key, etc.) through the writeContent method interface). Happy to avoid that now, but, per the comment below, it looks like at least the api key would have to be made available if this is to work with draft/restricted files.

.filter(item => regex.test(item.label))
.reduce((map, item) => {
const lang = item.label.match(regex)[2];
const url = `${siteUrl}/api/access/datafile/${item.dataFile.id}?gbrecs=true&key=93423e09-848c-47cb-a979-219dafcfa4da`;
Copy link
Member

Choose a reason for hiding this comment

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

hardcoded key? It looks like this will have to run with the apikey sent in (for draft versions anyway) rather than signedURLs because we can't currently support allowing you to get signedUrls for other files? If so, it might be better to make this a separate previewer (videoWithCaptions.js?) or maybe just use the presence of the API key ( just for non-draft datasets/non-restricted files) as a way to decide whether to try and get the captions?

Copy link
Author

Choose a reason for hiding this comment

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

Dropping the API key resulted in desired behavior. When logged in, a restricted video appears with subtitles. When not logged in and viewing a not restricted video with restricted subtitles, the menu shows available languages but the subtitles don't appear.

@jo-pol jo-pol marked this pull request as draft December 19, 2024 13:57
@jo-pol jo-pol marked this pull request as ready for review December 19, 2024 15:03
@jo-pol jo-pol requested a review from qqmyers December 19, 2024 15:14
.filter(item => regex.test(item.label))
.reduce((map, item) => {
const lang = item.label.match(regex)[2];
const url = `${siteUrl}/api/access/datafile/${item.dataFile.id}`
Copy link
Member

Choose a reason for hiding this comment

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

I think you should keep the ?gbrecs=true param - with that, Dataverse doesn't count this as a download, which is what we want when the use is in a preview and not from an actual download by the user.

Copy link
Member

@qqmyers qqmyers left a comment

Choose a reason for hiding this comment

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

Looks good - one more request - to suppress an error with null entries seen when signedUrls are used. With that change, I'll go ahead and merge.

   GET http://ec2-3-238-245-253.compute-1.amazonaws.com/dataverse-previewers/previewers/betatest/null/api/datasets/null/versions/null 404 (Not Found)

@@ -9,5 +9,106 @@ function translateBaseHtmlPage() {

function writeContent(fileUrl, file, title, authors) {
addStandardPreviewHeader(file, title, authors);
$(".preview").append($("<video/>").prop("controls",true).append($('<source/>').attr("src",fileUrl)));

const queryParams = new URLSearchParams(window.location.search.substring(1));
Copy link
Member

Choose a reason for hiding this comment

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

This only works when signedUrls aren't used. Otherwise, the id and siteUrl aren't sent as params and those variables get null below, leading to error messages when the ajax call at line 25 is made. Can you add an if siteUrl is null check that would also just revert to the fallback in line 35 to avoid that error message?

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.

Subtitles for video previews
2 participants