Make the #xywh in storyboard.vtt URLs be optional

[victorvianaom]

Hello there! thank you so much for this amazing project.

I created my own storyboard.vtt file, storing everything in AWS S3, with urls to images without the #xywh fragment identifier. For example:

00:00:00.000 --> 00:00:10.000
example.com/thumbnail-1.jpg

00:00:10.000 --> 00:00:20.000
example.com/thumbnail-2.jpg

But it doesn't display anything, nothing happens, no error messages also.
When I add some dummy #xywh=... the images are properly requested on mouse hover, but I get a CORS error. Its looks like this error message is just a red herring (my S3 config is allowing requests from anywhere), and the real reason for the error seems to be related to url encoding (the # is being treated as an unsafe character for URL). Probably when I add some special character the AWS signature isn't matching.

Some questions arise for me:

Does vidstack really only show the images if we put the #xywh? Probably related to this line. If it is so, does it make sense to open a feature request asking to make the #xywh optional in storyboad.vtt files?

Is it possible to add the proper encoding to the image url just before the request gets sent to aws?

Or is there any other solution to my case?

Thanks in advance.

[mihar-22]

Does vidstack really only show the images if we put the #xywh? Probably related to this line. If it is so, does it make sense to open a feature request asking to make the #xywh optional in storyboad.vtt files?

No that'd be a bug, you should be able to provide multiple thumbail images. I'll get that fixed :)

[mihar-22]

Fixed and rolled out in 1.4.9 today!

[victorvianaom]

Thank you so much @mihar-22, I tested the new version here, and it works fine!

By the way, is in your plans making the .vtt file optional? Like we could as an alternative pass an object, something like the code bellow would fit my use-case:

  <TimeSlider.Thumbnail.Root
    cues={[
      // This would be a loop, taking into account the video duration 
      // and the granularity we wish to have for the thumbs...
      {
        startTime: 0,
        endTime: 10,
        text: `https://customer-m033z5x00ks6nunl.cloudflarestream.com/${signedToken}/thumbnails/thumbnail.jpg?time=5s&height=160`,
      },
      {
        startTime: 10,
        endTime: 20,
        text: `https://customer-m033z5x00ks6nunl.cloudflarestream.com/${signedToken}/thumbnails/thumbnail.jpg?time=15s&height=160`,
      },
      {
        startTime: 20,
        endTime: 30,
        text: `https://customer-m033z5x00ks6nunl.cloudflarestream.com/${signedToken}/thumbnails/thumbnail.jpg?time=25s&height=160`,
      },
    ]}
    className="vds-slider-thumbnail vds-thumbnail"
  >
    <TimeSlider.Thumbnail.Img />
  </TimeSlider.Thumbnail.Root>

That way we could have more control programmatically over the thumbnails urls, for example if we need pass a signed token for videos that require some authentication, or if the API does not generate automatically the storyboard image + .vtt files pair, like Mux does. It is the case in cloudflare API, which just support generating thumbnails on the fly.

[mihar-22]

I've added support for JSON files (releasing shortly in 1.5.0) exactly as you've specified but you still need to load it as a remote source. My recommendation is to build the JSON on the server and return it with the Content-Type header set to application/json.

You can then set the thumbnails like so:

// Note: create signed tokens on the server.
<TimeSlider.Thumbnail.Root src={`/api/videos/thumbnails/${CLOUDFLARE_STREAM_UID}`}

Hope this resolves the issue, let me know if this doesn't work for you and why :)

[victorvianaom]

@mihar-22 I'm extremely grateful for your attention!
It works, now I'm able to sign the urls and get the images directly from Cloudflare API.
Cheers!