Add prettier pkg and yarn script (#131)

* Add prettier pkg and yarn script * Run prettier write
muxinc · Jan 28, 2022 · 29d77bf · 29d77bf · vercel · Jan 28, 2022
1 parent 07dfba2
commit 29d77bf
Show file tree

Hide file tree

Showing 81 changed files with 1,923 additions and 1,315 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,4 +14,4 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - run: yarn install --frozen-lockfile
       - run: yarn test
-      - run: yarn build
+      - run: yarn build
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
@@ -8,14 +8,15 @@ Web components allow us to "extend the browser", and in this project we take tha
 
 Media chrome UI elements emit events to request media state changes. These events bubble up the DOM and are caught by a parent `<media-controller>` element. The media-controller handles the request and calls the appropriate API on a child media element, designated with the attribute `slot="media"`. A media element can be `<video>`, `<audio>`, or any element with a matching API.
 
-Media state is set on UI elements via HTML attributes, for example `<media-ui-element media-paused>`. For UI elements that are children of or associated with a media-controller, the media-controller will update these attributes automatically.  
+Media state is set on UI elements via HTML attributes, for example `<media-ui-element media-paused>`. For UI elements that are children of or associated with a media-controller, the media-controller will update these attributes automatically.
 
 UI elements that are not children of a media-controller can be associated with a media-controller through a javascript function or the `media-controller=""` attribute.
 
 > Note: We have been through many different approaches to the architecture:
+>
 > 1. A UI element "discovers" a media element by finding a parent media-container, then has a direct reference to the media element
 > 2. A parent media-container injects a reference to a media element into all child UI elements
-> 
+>
 > Moving to a single centralized _controller_ handling all operations against the media element has made debugging, monitoring user interactions, and refactoring much easier.
 
 ## Element Independence
@@ -27,7 +28,8 @@ A goal of this project is that each UI element could be used independently of th
 Many js application frameworks today like React follow a "unidirectional data flow" pattern. We want to make sure media chrome elements are not blocked or complicated to use in these contexts.
 
 ## Element Naming
-* Prefix with `media-` for scoping.
-* The suffix should make it clear what the primary user interaction is with the element, mapping to the matching native HTML element when possible. e.g. `-button`, `-range`, `-image`.
-  * Use `-container` for elements that are purely for laying out other elements. More specific layout names like `-bar` are acceptible when the name is clear and intentional.
-  * Use `-display` when the primary use is displaying a state or data detail. e.g. `media-duration-display`.
+
+- Prefix with `media-` for scoping.
+- The suffix should make it clear what the primary user interaction is with the element, mapping to the matching native HTML element when possible. e.g. `-button`, `-range`, `-image`.
+  - Use `-container` for elements that are purely for laying out other elements. More specific layout names like `-bar` are acceptible when the name is clear and intentional.
+  - Use `-display` when the primary use is displaying a state or data detail. e.g. `media-duration-display`.
diff --git a/README.md b/README.md
diff --git a/docs/architecture-diagrams.md b/docs/architecture-diagrams.md
@@ -1,7 +1,6 @@
-Architecture Diagrams
-=====================
+# Architecture Diagrams
 
-Any control element can *send* user input to the [`MediaController`](https://github.com/muxinc/media-chrome/blob/main/src/js/media-controller.js#L33) and *receive* media state from the `MediaController`.
+Any control element can _send_ user input to the [`MediaController`](https://github.com/muxinc/media-chrome/blob/main/src/js/media-controller.js#L33) and _receive_ media state from the `MediaController`.
 
 ### Sending
 
@@ -11,7 +10,7 @@ The `MediaController` receives user input via [`MediaUIEvents`](https://github.c
   The DOM element that will receive bubbling up events from the control element is the `<media-controller>` element, it's also called an **associated element** in the codebase.
 
 - From a control element that is **not** nested under the `<media-controller>` element (see [diagram 2](#2-by-media-controller-id)).  
-  An **associated element** is created by targeting the media controller via the `media-controller` attribute or property. 
+  An **associated element** is created by targeting the media controller via the `media-controller` attribute or property.
 
   ```html
   <media-controller id="my-ctrl">
@@ -47,17 +46,16 @@ Any **associated element** or any of its descendants can receive media state fro
   ```html
   <div media-chrome-attributes="media-paused media-current-time"></div>
   ```
-  
+
 <br>
 <br>
 
 ### 1\. by `<media-controller>` Nesting
 
-
 ![media chrome diagram](./assets/media-chrome-diagram-media-controller-nesting.png)
 
 [View Figma embed](https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJfpS4VVSJgvywPHEYAr7Ie%2FMedia-Chrome-Diagrams%3Fnode-id%3D0%253A1)
-  
+
 <br>
 <br>
 

diff --git a/docs/media-airplay-button.md b/docs/media-airplay-button.md
@@ -11,8 +11,8 @@ _None_
 
 # Slots
 
-| Name      | Default Type | Description                                              |
-| --------- | ------------ | -------------------------------------------------------- |
+| Name      | Default Type | Description                                        |
+| --------- | ------------ | -------------------------------------------------- |
 | `airplay` | `svg`        | The element shown for the AirPlay button's display |
 
 ### Example

diff --git a/docs/media-controller.md b/docs/media-controller.md
@@ -4,7 +4,7 @@ The `<media-controller/>` manages communication of state and state change reques
 
 # Attributes
 
-* `autohide (seconds, default: 0)` - (`video` only) Use this to autohide all controls/chrome (except for the `media`) after `n` seconds of inactivity, unless the media is paused. To disable `autohide`, set the value to -1.
+- `autohide (seconds, default: 0)` - (`video` only) Use this to autohide all controls/chrome (except for the `media`) after `n` seconds of inactivity, unless the media is paused. To disable `autohide`, set the value to -1.
 
 Example:
 
@@ -62,7 +62,7 @@ Example (`autohide` disabled):
 
 # Styling
 
-* `aspect-ratio` - While this is [a standard CSS style](https://css-tricks.com/almanac/properties/a/aspect-ratio/), it's fairly new, and you're likely to want to use it frequently on `<media-controller/>`, at least for `video` use cases. Most often, you'll want the `aspect-ratio` to match your video content's aspect ratio.
+- `aspect-ratio` - While this is [a standard CSS style](https://css-tricks.com/almanac/properties/a/aspect-ratio/), it's fairly new, and you're likely to want to use it frequently on `<media-controller/>`, at least for `video` use cases. Most often, you'll want the `aspect-ratio` to match your video content's aspect ratio.
 
 Example:
 
@@ -92,7 +92,8 @@ Example:
 Just in case your browser doesn't support `aspect-ratio` (all major evergreen browsers should!), you can always set it manually.
 
 ```html
-<media-controller style="width: 800px; height: calc(800px * 9/16)"> <!-- for 16:9 aspect ratio where you want an explicit width and a "derived" height -->
+<media-controller style="width: 800px; height: calc(800px * 9/16)">
+  <!-- for 16:9 aspect ratio where you want an explicit width and a "derived" height -->
   <video
     slot="media"
     src="https://stream.mux.com/BlSb4AuUfA00wchgJ3D00bz4VTppg3eo5Y/high.mp4"
@@ -115,6 +116,7 @@ Just in case your browser doesn't support `aspect-ratio` (all major evergreen br
 ```
 
 # Layout - Slots
+
 Slots are used to tell `<media-controller/>` where you want your controls positioned. Even if you aren't explicitly naming a slot, you're still using one (the "default slot"). Most commonly, you'll put media control elements like `<media-play-button/>` or `<media-fullscreen-button/>` inside slots. But any arbitrary markup can be placed inside a slot.
 
 This gives you a lot of flexibility when customizing your player. For example, here is a player that has an h3 title in the top slot and a play button in the centered slot.
@@ -156,7 +158,8 @@ You also may want to show different slots on mobile vs. desktop. For example, he
   <div slot="centered-chrome" class="mobile">
     <media-play-button></media-play-button>
   </div>
-  <media-control-bar class="desktop">  <!-- This will go in the default slot, effectively the "bottom-chrome" -->
+  <media-control-bar class="desktop">
+    <!-- This will go in the default slot, effectively the "bottom-chrome" -->
     <media-play-button></media-play-button>
   </media-control-bar>
 </media-controller>
@@ -179,13 +182,13 @@ For an interactive example of how each of the slots render for `video`, check ou
 <br>
 <br>
 
-* Render Location: Each child that doesn't specify a slot will render at the bottom of the `<media-controller/>`. If you have more than one element like this they will be stacked vertically.
+- Render Location: Each child that doesn't specify a slot will render at the bottom of the `<media-controller/>`. If you have more than one element like this they will be stacked vertically.
 
-* Common/Example use cases: showing one or more rows of controls at the bottom of the `<media-controller/>`. For many use cases, you can simply add a `<media-control-bar/>` for each row of controls you'd like, which will provide you with additional automatic sizing and layout behavior.
-  * [Basic example](https://media-chrome.mux.dev/examples/basic.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/basic.html))
-  * [Mobile example](https://media-chrome.mux.dev/examples/mobile.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/mobile.html))
-  * [Youtube theme](https://media-chrome.mux.dev/examples/themes/youtube-theme.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/youtube-theme.html))
-  * [Netflix theme](https://media-chrome.mux.dev/examples/themes/netflix-theme.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/netflix-theme.html))
+- Common/Example use cases: showing one or more rows of controls at the bottom of the `<media-controller/>`. For many use cases, you can simply add a `<media-control-bar/>` for each row of controls you'd like, which will provide you with additional automatic sizing and layout behavior.
+  - [Basic example](https://media-chrome.mux.dev/examples/basic.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/basic.html))
+  - [Mobile example](https://media-chrome.mux.dev/examples/mobile.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/mobile.html))
+  - [Youtube theme](https://media-chrome.mux.dev/examples/themes/youtube-theme.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/youtube-theme.html))
+  - [Netflix theme](https://media-chrome.mux.dev/examples/themes/netflix-theme.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/netflix-theme.html))
 
 ### `top-chrome`
 
@@ -194,10 +197,10 @@ For an interactive example of how each of the slots render for `video`, check ou
 <br>
 <br>
 
-* Render Location: Each child that specifies `slot="top-chrome"` will render at the top of the `<media-controller/>`. If you have more than one element like this they will be stacked vertically.
+- Render Location: Each child that specifies `slot="top-chrome"` will render at the top of the `<media-controller/>`. If you have more than one element like this they will be stacked vertically.
 
-* Common/Example use cases: showing one or more rows of controls at the top of the `<media-controller/>`. For many use cases, you can simply add a `<media-control-bar/>` for each row of controls you'd like.
-  * [Demuxed 2021 theme](https://media-chrome.mux.dev/examples/themes/demuxed-2021-theme.html) (mobile screen sizes only) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/demuxed-2021-theme.html))
+- Common/Example use cases: showing one or more rows of controls at the top of the `<media-controller/>`. For many use cases, you can simply add a `<media-control-bar/>` for each row of controls you'd like.
+  - [Demuxed 2021 theme](https://media-chrome.mux.dev/examples/themes/demuxed-2021-theme.html) (mobile screen sizes only) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/demuxed-2021-theme.html))
 
 ### `middle-chrome`
 
@@ -206,10 +209,10 @@ For an interactive example of how each of the slots render for `video`, check ou
 <br>
 <br>
 
-* Render Location: Children that specify `slot="middle-chrome"` will show up in the available space between any "`top-chrome`" children and any default slot/"`bottom-chrome`" children.
+- Render Location: Children that specify `slot="middle-chrome"` will show up in the available space between any "`top-chrome`" children and any default slot/"`bottom-chrome`" children.
 
-* Common/Example use cases: `middle-chrome` would generally be used for more specific cases, such as custom subtitle/caption rendering, or additional related content you'd like to show while the media is paused or has finished playback. While you **_can_** have multiple children that are "slotted to" `middle-chrome`, most likely, you'll want to use one and style it to size/layout any custom content you'd like.
-  * (Examples coming!)
+- Common/Example use cases: `middle-chrome` would generally be used for more specific cases, such as custom subtitle/caption rendering, or additional related content you'd like to show while the media is paused or has finished playback. While you **_can_** have multiple children that are "slotted to" `middle-chrome`, most likely, you'll want to use one and style it to size/layout any custom content you'd like.
+  - (Examples coming!)
 
 ### `centered-chrome`
 
@@ -218,11 +221,11 @@ For an interactive example of how each of the slots render for `video`, check ou
 <br>
 <br>
 
-* Render Location: The child that specifies `slot="centered-chrome"` will show up in the center of the `<media-controller/>` and will be "above" anything in the default slot, `top-chrome`, or `middle-chrome`.
+- Render Location: The child that specifies `slot="centered-chrome"` will show up in the center of the `<media-controller/>` and will be "above" anything in the default slot, `top-chrome`, or `middle-chrome`.
 
-* Common/Example use cases: "big button" controls that are centered and horizontally layed out "on top of" the media. While you **_can_** have multiple children that are "slotted to" `centered-chrome`, most likely, you'll want to use only one, making styling and layout easier and more predictable.
-  * [Mobile example](https://media-chrome.mux.dev/examples/mobile.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/mobile.html))
-  * [Demuxed 2021 theme](https://media-chrome.mux.dev/examples/themes/demuxed-2021-theme.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/demuxed-2021-theme.html))
+- Common/Example use cases: "big button" controls that are centered and horizontally layed out "on top of" the media. While you **_can_** have multiple children that are "slotted to" `centered-chrome`, most likely, you'll want to use only one, making styling and layout easier and more predictable.
+  - [Mobile example](https://media-chrome.mux.dev/examples/mobile.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/mobile.html))
+  - [Demuxed 2021 theme](https://media-chrome.mux.dev/examples/themes/demuxed-2021-theme.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/demuxed-2021-theme.html))
 
 ### Other use cases
 
@@ -238,13 +241,12 @@ For an interactive example of how each of the slots render for `video`, check ou
 <figcaption>Use media queries for desktop-only or mobile-only controls, just like any HTML element</figcaption>
 </figure>
 
-
 ## Working with slots (audio)
 
 Since `audio` chromes vary much more than `video`, it's recommended that you only use the default slot and only add a single element (e.g. a single `<media-control-bar/>`) and style it however you'd like.
 
 As we work through other common use cases, both internally and with the community, we may start adding additional "built-in" styling and layout for `<media-control-bar/>` slots used with `audio`.
 
-* Example use cases:
-  * [Basic example](https://media-chrome.mux.dev/examples/basic.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/basic.html))
-  * [Spotify theme](https://media-chrome.mux.dev/examples/themes/spotify-theme.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/spotify-theme.html))
+- Example use cases:
+  - [Basic example](https://media-chrome.mux.dev/examples/basic.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/basic.html))
+  - [Spotify theme](https://media-chrome.mux.dev/examples/themes/spotify-theme.html) ([view source](https://github.com/muxinc/media-chrome/blob/main/examples/themes/spotify-theme.html))
diff --git a/docs/media-fullscreen-button.md b/docs/media-fullscreen-button.md
@@ -11,10 +11,10 @@ _None_
 
 # Slots
 
-| Name        | Default Type | Description |
-| ----------- | ------------ | ----------- |
-| `enter`     | `svg`        | An element shown when the media is not in fullscreen and pressing the button will trigger entering fullscreen |
-| `exit`      | `svg`        | An element shown when the media is in fullscreen and pressing the button will trigger exiting fullscreen |
+| Name    | Default Type | Description                                                                                                   |
+| ------- | ------------ | ------------------------------------------------------------------------------------------------------------- |
+| `enter` | `svg`        | An element shown when the media is not in fullscreen and pressing the button will trigger entering fullscreen |
+| `exit`  | `svg`        | An element shown when the media is in fullscreen and pressing the button will trigger exiting fullscreen      |
 
 ### Example
 
@@ -27,4 +27,4 @@ _None_
 
 # Styling
 
-See our [styling docs](./styling.md#Buttons)
+See our [styling docs](./styling.md#Buttons)
diff --git a/docs/media-loading-indicator.md b/docs/media-loading-indicator.md
@@ -7,14 +7,14 @@ Shows a loading indicator when the media is buffering.
 
 # Attributes
 
-| Name            | Type     | Default Value | Description                                                                                 |
-| --------------- | -------- | ------------- | ------------------------------------------------------------------------------------------- |
+| Name            | Type     | Default Value | Description                                                                                   |
+| --------------- | -------- | ------------- | --------------------------------------------------------------------------------------------- |
 | `loading-delay` | `number` | `500`         | The amount of time in ms the media has to be buffering before the loading indicator is shown. |
 
 # Slots
 
-| Name      | Default Type | Description                                                 |
-| --------- | ------------ | ----------------------------------------------------------- |
+| Name      | Default Type | Description                                                   |
+| --------- | ------------ | ------------------------------------------------------------- |
 | `loading` | `svg`        | The element shown for when the media is in a buffering state. |
 
 ### Example

diff --git a/docs/media-playback-rate-button.md b/docs/media-playback-rate-button.md
@@ -7,8 +7,8 @@ Button to change the speed of playback.
 
 # Attributes
 
-| Name                    | Type   | Default Value       | Description                                                       |
-| ----------------------- | ------ | ------------------- | ----------------------------------------------------------------- |
+| Name    | Type   | Default Value       | Description                                                       |
+| ------- | ------ | ------------------- | ----------------------------------------------------------------- |
 | `rates` | `list` | `1 1.25 1.5 1.75 2` | List of playback rates to toggle through when pressing the button |
 
 # Slots