From c8c492f18cd41ab13d8328367cf82ea5af15c3dd Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Mon, 12 Aug 2024 14:51:36 -0500 Subject: [PATCH 1/5] docs: add v4 migration --- docs/src/config.ts | 1 + .../docs/en/migration/from-3.x-to-4.0.md | 64 +++++++++++++++++++ 2 files changed, 65 insertions(+) create mode 100644 docs/src/pages/docs/en/migration/from-3.x-to-4.0.md diff --git a/docs/src/config.ts b/docs/src/config.ts index 979ee7d74..36a5eeb30 100644 --- a/docs/src/config.ts +++ b/docs/src/config.ts @@ -121,6 +121,7 @@ export const SIDEBAR: Sidebar = { { text: 'Migrating to 1.0', link: 'docs/en/migration/from-0.x-to-1.0' }, { text: 'Migrating to 2.0', link: 'docs/en/migration/from-1.x-to-2.0' }, { text: 'Migrating to 3.0', link: 'docs/en/migration/from-2.x-to-3.0' }, + { text: 'Migrating to 4.0', link: 'docs/en/migration/from-3.x-to-4.0' }, { text: 'Showcase', link: 'docs/en/showcase' }, ], }, diff --git a/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md b/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md new file mode 100644 index 000000000..38a92e454 --- /dev/null +++ b/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md @@ -0,0 +1,64 @@ +--- +title: Migrating from v3.x to v4.0 +description: Migration guide +layout: ../../../../layouts/MainLayout.astro +--- + +There are 3 breaking changes in v4 that should be relatively easy to migrate to. +Here's a high level overview: + +### Breaking changes + +**Tooltips are enabled by default** +- v4 comes with tooltips enabled by default. If you don't want them, you can disable them by setting the `notooltip` attribute on the specfic button. To disable all tooltips you can set the CSS var `--media-tooltip-display: none;` in `:host` or target a specific element. + +**Deprecated experimental selectmenu related components** +- `media-chrome-listbox`, `media-chrome-option`, `media-chrome-selectmenu` and variants for captions, playback rate, rendition and audio tracks are now deprecated. Instead you can use the new menu components. + +**Menu components moved to separate import** +- The menu components that were included by default in v3 are now moved to a separate import. This gives you more granular control and can save some extra weight in the final JS bundle if you don't need these components. You can import them from `media-chrome/dist/menu/index.js`. + +### Example of HTML changes + +**Before** + +```html + + + + + + + + + + + + + +``` + +**After** + +```html + + + + + + + + + + + + + + +``` From 82e6ce8c54d15885f912d9e9cc558ec14445ad10 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Tue, 13 Aug 2024 15:34:21 -0500 Subject: [PATCH 2/5] docs: add release notes and an extra example --- .../docs/en/migration/from-3.x-to-4.0.md | 63 ++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md b/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md index 38a92e454..9ec6153a2 100644 --- a/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md +++ b/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md @@ -7,10 +7,20 @@ layout: ../../../../layouts/MainLayout.astro There are 3 breaking changes in v4 that should be relatively easy to migrate to. Here's a high level overview: +### Release notes + +- The Media Chrome source code is now completely written in TypeScript. +- A new component `` is introduced to show tooltips for the control buttons. +- Menu related components are moved to a separate import. + + ### Breaking changes +**Media Chrome source code is now written in TypeScript** +- The source code is now written in TypeScript. In most cases this should not affect your app, only in some rare cases you might have to update some types in your app. If you're importing the source code directly, you will need to update your import paths to `.ts` files. + **Tooltips are enabled by default** -- v4 comes with tooltips enabled by default. If you don't want them, you can disable them by setting the `notooltip` attribute on the specfic button. To disable all tooltips you can set the CSS var `--media-tooltip-display: none;` in `:host` or target a specific element. +- v4 comes with tooltips enabled by default. If you don't want them, you can disable them by setting the `notooltip` attribute on the specfic button. To disable all tooltips you can set the CSS var `--media-tooltip-display: none;` on the `media-controller` element. **Deprecated experimental selectmenu related components** - `media-chrome-listbox`, `media-chrome-option`, `media-chrome-selectmenu` and variants for captions, playback rate, rendition and audio tracks are now deprecated. Instead you can use the new menu components. @@ -18,8 +28,59 @@ Here's a high level overview: **Menu components moved to separate import** - The menu components that were included by default in v3 are now moved to a separate import. This gives you more granular control and can save some extra weight in the final JS bundle if you don't need these components. You can import them from `media-chrome/dist/menu/index.js`. + ### Example of HTML changes +#### Disable default enabled tooltips for all buttons + +**Before** + +```html + + + + + + + + + + + + +``` + +**After** + +```html + + + + + + + + + + + + + + +``` + +#### Menu components moved to separate import + **Before** ```html From 5ef69d55c4bb3d34011fc224373119c514b9b7e3 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Tue, 13 Aug 2024 15:58:48 -0500 Subject: [PATCH 3/5] docs: add seperate module import callout --- .../pages/docs/en/components/media-audio-track-menu.mdx | 7 +++++++ docs/src/pages/docs/en/components/media-captions-menu.mdx | 7 +++++++ .../pages/docs/en/components/media-playback-rate-menu.mdx | 7 +++++++ docs/src/pages/docs/en/components/media-settings-menu.mdx | 7 +++++++ docs/src/pages/docs/en/themes/index.md | 7 +++++++ 5 files changed, 35 insertions(+) diff --git a/docs/src/pages/docs/en/components/media-audio-track-menu.mdx b/docs/src/pages/docs/en/components/media-audio-track-menu.mdx index 990655290..458c17986 100644 --- a/docs/src/pages/docs/en/components/media-audio-track-menu.mdx +++ b/docs/src/pages/docs/en/components/media-audio-track-menu.mdx @@ -9,6 +9,13 @@ import SandpackContainer from "../../../../components/SandpackContainer.astro"; A menu for audio tracks. +> Remember to add the seperate menu module for the menu components. + +```js +import "media-chrome"; +import "media-chrome/menu"; +``` + ### Default usage Remember to add the seperate menu module for the menu components. + +```js +import "media-chrome"; +import "media-chrome/menu"; +``` + ### Default usage Remember to add the seperate menu module for the menu components. + +```js +import "media-chrome"; +import "media-chrome/menu"; +``` + ### Default usage Remember to add the seperate menu module for the menu components. + +```js +import "media-chrome"; +import "media-chrome/menu"; +``` + ### Default usage Remember to add the seperate media-theme-element module for the theme component. + +```js +import "media-chrome"; +import "media-chrome/media-theme-element"; +``` + ## Basics Themes are created primarily with HTML + CSS and its contents are defined in a From 0df693c7fb7c1e729269df12c377434f24cefc66 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Wed, 14 Aug 2024 09:20:45 -0500 Subject: [PATCH 4/5] docs: use cleaner module urls --- docs/src/pages/docs/en/migration/from-3.x-to-4.0.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md b/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md index 9ec6153a2..1cc7a750c 100644 --- a/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md +++ b/docs/src/pages/docs/en/migration/from-3.x-to-4.0.md @@ -26,7 +26,7 @@ Here's a high level overview: - `media-chrome-listbox`, `media-chrome-option`, `media-chrome-selectmenu` and variants for captions, playback rate, rendition and audio tracks are now deprecated. Instead you can use the new menu components. **Menu components moved to separate import** -- The menu components that were included by default in v3 are now moved to a separate import. This gives you more granular control and can save some extra weight in the final JS bundle if you don't need these components. You can import them from `media-chrome/dist/menu/index.js`. +- The menu components that were included by default in v3 are now moved to a separate import. This gives you more granular control and can save some extra weight in the final JS bundle if you don't need these components. You can import them from `media-chrome/menu`. ### Example of HTML changes @@ -106,7 +106,7 @@ Here's a high level overview: ```html - + Date: Wed, 14 Aug 2024 09:30:02 -0500 Subject: [PATCH 5/5] docs: update @3 to @4 in jsdelivr urls --- README.md | 4 ++-- docs/src/pages/docs/en/audio-player.md | 2 +- docs/src/pages/docs/en/get-started.mdx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7ae4f4b5a..388a206f0 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ You can find the [documentation for v0.x of media-chrome here.](https://v0.media ### Video Example ```html - +