Merge pull request #8767 from marmelab/gif-to-webm

[Doc] Convert GIF files to WebM

Author: fzaninotto

docs/AppBar.md

@@ -228,7 +228,7 @@ export const MyAppBar = () => (
 If your app uses [authentication](./Authentication.md), the `<AppBar>` component displays a button to display the user menu on the right side. By default, the user menu only contains a logout button.
 
 <video controls autoplay muted loop width="100%">
-  <source src="./img/AppBar-user-menu.webm" type="video/webm">
+  <source src="./img/AppBar-user-menu.webm" type="video/webm"/>
   Your browser does not support the video tag.
 </video>
 
@@ -440,7 +440,7 @@ export const MyLayout = (props) => (
 By default, users can override the page title [in configurable mode](./Features.md#configurable-ui).
 
 <video controls autoplay muted loop width="100%">
-  <source src="./img/TitleConfigurable.webm" type="video/webm">
+  <source src="./img/TitleConfigurable.webm" type="video/webm"/>
   Your browser does not support the video tag.
 </video>
 

docs/Architecture.md

@@ -105,7 +105,11 @@ We spend a great deal of time refining the UI to make it as intuitive as possibl
 
 React-admin produces a user interface that is voluntarily bland by default because we want to emphasize content rather than chrome.
 
-![Sort Button](./img/sort-button.gif)
+<video controls autoplay muted loop>
+  <source src="./img/sort-button.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 As for the developer experience, react-admin is constantly evolving to find the sweet spot between an intuitive API, power user features, not too much magic, and just enough documentation. The core team are the first testers of react-admin, and pay attention to the productivity, debuggability, discoverability, performance, and robustness of all the hooks and components.
 

docs/ArrayInput.md

@@ -7,7 +7,11 @@ title: "The ArrayInput Component"
 
 To edit arrays of data embedded inside a record, `<ArrayInput>` creates a list of sub-forms.
 
-![ArrayInput](./img/array-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/array-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 `<ArrayInput>` allows editing of embedded arrays, like the `items` field in the following `order` record:
 

docs/AuthProviderWriting.md

@@ -320,7 +320,11 @@ export default {
 };
 ```
 
-![Logout button](./img/logout.gif)
+<video controls autoplay muted loop>
+  <source src="./img/logout.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 The `authProvider.logout()` method is also a good place to notify the authentication backend that the user credentials are no longer valid after logout.
 

docs/Authentication.md

@@ -5,7 +5,11 @@ title: "security"
 
 # Security
 
-![Login](./img/login.gif)
+<video controls autoplay muted loop>
+  <source src="./img/login.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 React-admin lets you secure your admin app with the authentication strategy of your choice. Since there are many possible strategies (Basic Auth, JWT, OAuth, etc.), react-admin delegates authentication logic to an `authProvider`.
 

docs/AutocompleteArrayInput.md

@@ -8,7 +8,11 @@ title: "The AutocompleteArrayInput Component"
 To let users choose multiple values in a list using a dropdown with autocompletion, use `<AutocompleteArrayInput>`.
 It renders using Material UI [Autocomplete](https://mui.com/material-ui/react-autocomplete/).
 
-![AutocompleteArrayInput](./img/autocomplete-array-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/autocomplete-array-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 This input allows editing values that are arrays of scalar values, e.g. `[123, 456]`.
 
@@ -133,7 +137,11 @@ const choices = possibleValues.map(value => ({ id: value, name: ucfirst(value) }
 
 To allow users to add new options, pass a React element as the `create` prop. `<AutocompleteArrayInput>` will then render a "Create" option at the bottom of the choices list. When clicked, it will render the create element.
 
-![create option](./img/autocomplete-array-input-create.gif)
+<video controls autoplay muted loop>
+  <source src="./img/autocomplete-array-input-create.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 {% raw %}
 ```jsx

docs/AutocompleteInput.md

@@ -8,7 +8,11 @@ title: "The AutocompleteInput Component"
 To let users choose a value in a list using a dropdown with autocompletion, use `<AutocompleteInput>`.
 It renders using [Material UI's `<Autocomplete>`](https://mui.com/material-ui/react-autocomplete/).
 
-![AutocompleteInput](./img/autocomplete-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/autocomplete-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 This input allows editing record fields that are scalar values, e.g. `123`, `'admin'`, etc. 
 

docs/BooleanInput.md

@@ -7,7 +7,11 @@ title: "The BooleanInput Component"
 
 `<BooleanInput />` renders a switch allowing users to set the value `true` or `false` to a record field.
 
-![BooleanInput](./img/boolean-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/boolean-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 **Tip**: This input doesn't let users set a `null` value - only `true` or `false`. Use the [`<NullableBooleanInput />`](./NullableBooleanInput.md) component if you have to handle non-required booleans.
 

docs/Buttons.md

@@ -256,7 +256,11 @@ export const PostList = () => (
 
 This button is an internal component used by react-admin in [the Filter button/form combo](./FilteringTutorial.md#the-filter-buttonform-combo).
 
-![List Filters](./img/list_filter.gif)
+<video controls autoplay muted loop>
+  <source src="./img/list_filter.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 #### `sx`: CSS API
 
@@ -365,7 +369,11 @@ To override the style of all instances of `<SkipNavigationButton>` using the [Ma
 
 The `<MenuItemLink>` component displays a menu item with a label and an icon - or only the icon with a tooltip when the sidebar is minimized. It also handles the automatic closing of the menu on tap on mobile.
 
-![custom menu icons](./img/custom-menu.gif)
+<video controls autoplay muted loop>
+  <source src="./img/custom-menu.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 | Prop          | Required | Type                 | Default | Description                              |
 | ------------- | -------- | -------------------- | ------- | ---------------------------------------- |

docs/CheckboxGroupInput.md

@@ -7,7 +7,11 @@ title: "The CheckboxGroupInput Component"
 
 If you want to let the user choose multiple values among a list of possible values by showing them all, `<CheckboxGroupInput>` is the right component.
 
-![CheckboxGroupInput](./img/checkbox-group-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/checkbox-group-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 This input allows editing values that are arrays of scalar values, e.g. `[123, 456]`.