@instructure/studio-player

studio-player

Sources

• sources renamed to src: can be an url or an array of objects with the following props:
  • src type width height
• instead of label you have to provide the width and height, this is important, because the player will be able to collect the qualities based on these.

example:

[
  {
    src: 'my-video1.mp4',
    type: 'video/mp4',
    width: 1920,
    height: 1080,
  },
  {
    src: 'my-video2.mp4',
    type: 'video/mp4',
    width: 1280,
    height: 720,
  },
];

Captions

• tracks has been renamed to captions
• id and kind is not used
• type should be the subtitle format, vtt or srt

example:

[
  {
    src: 'my-captions-en.srt',
    label: 'English',
    language: 'en',
    type: 'srt',
  },
  {
    src: 'my-captions-es.srt',
    label: 'Spanish',
    language: 'es',
    type: 'srt',
  },
];

Kebab menu elements

The kebabMenuElements prop can be used to display a kebab menu in the top right corner of the player. There are 4 predefined icons currently: media, transcript, share, delete.

[
  {
    id: 'media',
    text: 'Download Media',
    icon: 'media',
    onClick: id => console.log('Clicked', id),
  },
  {
    id: 'transcript',
    text: 'Download Transcript',
    icon: 'transcript',
    onClick: id => console.log('Clicked', id),
  },
];

Manage captions menu

If you provide a function as the onCaptionsDelete prop, the Manage Captions menu will appear in the captions menu, and for each caption there will be a menu option to delete that caption.

function deleteCaption(caption: CaptionMetaData) {
  // implement your caption deletion logic, alerts, etc.
}

...

<StudioPlayer
  ...
  onCaptionsDelete={deleteCaption}
  ...
/>

Deprecated props compared to old Media Player

these props are no longer used and you can remove them from the code:

• onLoadedMetadata
• captionPosition
• autoShowCaption

Translations

Handling translations is manual for now since we don't except too frequent changes to it.

Upload

One would need to do the proper assume commands to get the rights to access our S3 bucket. Please ask this from an engineer in team.

After one having correct credentials,

./i18n-utils/upload.sh

Upon proper upload one must see Upload completed successfully! message.

Notice: It might appear that after script runs your source translation file is changed, it sorts keys in alphabetical order. In that case, please commit that change!

Download

One would need to do the proper assume commands to get the rights to access our S3 bucket. Please ask this from an engineer in team.

After one having correct credentials,

./i18n-utils/download.sh

This will download the translated content and put it in the correct folder. Feel free to upload to a branch and make a PR from it.

E2E Testing

1. Setup

   • Create a .env file:

     SB_BASE_URL="http://localhost"
     SB_PORT="6010"
     

2. Running Tests

   • pnpm test:pw - Runs Playwright tests in Firefox (Storybook starts automatically)
   • pnpm test:pw:show-report - View the latest test report

3. Debugging

   • One can debug through VS Code extension and tick Show browser option OR
   • pnpm test:pw <FileName> --debug which gives a line-by-line debugger

4. Notes:

• Using a separate port (e.g. 6010 instead of 6006) prevents conflicts with your development Storybook instance.
• Highly recommended to install Playwright VS Code extension, also check out Getting started in VS Code