Skip to content

Commit 099087d

Browse files
ascorbicascorbic
authored
docs: Add API reference for Astro (muxinc#1194)
Adds `REFERENCE.md` files for Astro components. These match the existing files in format, but with the Astro props. While doing this I noticed that `MuxPlayer` is missing some of the props from `mux-player`, so I'll add those to the types and references in another PR.
1 parent 9c0f58f commit 099087d

File tree

4 files changed

+330
-217
lines changed

4 files changed

+330
-217
lines changed

‎packages/mux-player-astro/README.md‎

Lines changed: 0 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -38,199 +38,6 @@ import { MuxPlayer } from '@mux/mux-player-astro';
3838
}}
3939
/>
4040
```
41-
42-
## With Styling
43-
44-
```astro
45-
---
46-
import { MuxPlayer } from '@mux/mux-player-astro';
47-
---
48-
49-
<MuxPlayer
50-
playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
51-
style={{
52-
display: 'block',
53-
aspectRatio: '16/9',
54-
backgroundColor: '#000',
55-
}}
56-
autoplay
57-
muted
58-
streamType="on-demand"
59-
proudlyDisplayMuxBadge
60-
/>
61-
```
62-
63-
## With Themes
64-
65-
You can use one of the built-in themes by passing the theme name as a string to the `theme` prop:
66-
67-
```astro
68-
---
69-
import { MuxPlayer } from '@mux/mux-player-astro';
70-
---
71-
72-
<MuxPlayer
73-
playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
74-
theme="classic"
75-
style={{
76-
display: 'block',
77-
aspectRatio: '16/9',
78-
}}
79-
/>
80-
```
81-
82-
Available themes:
83-
- `classic` - Classic player theme
84-
- `minimal` - Minimal player theme
85-
- `microvideo` - Microvideo theme for short-form content
86-
- `gerwig` - P, pretty, I, intelligent, N, never sad, K, cool
87-
- `news` - News theme
88-
89-
Alternatively you can use a [Media Chrome theme](https://www.mux.com/docs/guides/player-themes#media-chrome-themes) by passing the theme name as a string and including the theme `<template>` element with that ID in your page:
90-
91-
```astro
92-
---
93-
import { MuxPlayer } from '@mux/mux-player-astro';
94-
---
95-
<template id="tiny-theme">
96-
<media-controller>
97-
<slot name="media" slot="media"></slot>
98-
<media-control-bar>
99-
<media-play-button></media-play-button>
100-
</media-control-bar>
101-
</media-controller>
102-
</template>
103-
<MuxPlayer
104-
playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
105-
theme="tiny-theme"
106-
/>
107-
```
108-
109-
## With Event Handling
110-
111-
To add event listeners to the component you can use [a client-side script](https://docs.astro.build/en/guides/client-side-scripts/). You can get the correct types for the player element by importing `MuxPlayerElement` from `@mux/mux-player-astro` and casting the element to that type.
112-
113-
```astro
114-
---
115-
import { MuxPlayer } from '@mux/mux-player-astro';
116-
---
117-
118-
<MuxPlayer
119-
id="my-player"
120-
playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
121-
/>
122-
123-
<script>
124-
import type { MuxPlayerElement } from '@mux/mux-player-astro';
125-
126-
const player = document.getElementById('my-player') as MuxPlayerElement;
127-
128-
player.addEventListener('play', (event) => {
129-
console.log('Player started playing!');
130-
});
131-
132-
player.addEventListener('pause', (event) => {
133-
console.log('Player paused!');
134-
});
135-
136-
player.addEventListener('timeupdate', (event) => {
137-
console.log('Current time: ', player.currentTime);
138-
});
139-
140-
player.addEventListener('ended', (event) => {
141-
console.log('Video ended!');
142-
});
143-
</script>
144-
```
145-
146-
## Audio Content
147-
148-
```astro
149-
---
150-
import { MuxPlayer } from '@mux/mux-player-astro';
151-
---
152-
153-
<MuxPlayer
154-
playbackId="your-audio-playback-id"
155-
audio
156-
metadata={{
157-
video_title: 'My Podcast Episode',
158-
}}
159-
/>
160-
```
161-
162-
## Live Streams
163-
164-
```astro
165-
---
166-
import { MuxPlayer } from '@mux/mux-player-astro';
167-
---
168-
169-
<MuxPlayer
170-
playbackId="your-live-playback-id"
171-
streamType="live"
172-
targetLiveWindow={Infinity}
173-
title="Live Stream"
174-
/>
175-
```
176-
177-
## Custom Colors
178-
179-
```astro
180-
---
181-
import { MuxPlayer } from '@mux/mux-player-astro';
182-
---
183-
184-
<MuxPlayer
185-
playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
186-
primaryColor="#ff6b35"
187-
secondaryColor="#ffffff"
188-
accentColor="#0066cc"
189-
/>
190-
```
191-
192-
# Props
193-
194-
All props from the underlying `mux-player` web component are supported, including:
195-
196-
## Core Props
197-
- `playbackId` - Mux playback ID for the video
198-
- `src` - Direct video URL (alternative to playbackId)
199-
- `poster` - Poster image URL
200-
- `audio` - Enable audio-only mode
201-
202-
## Playback Props
203-
- `autoplay` - Auto-start playback
204-
- `muted` - Start muted
205-
- `loop` - Loop the video
206-
- `playsInline` - Play inline on mobile
207-
- `currentTime` - Set initial playback position
208-
- `playbackRate` - Playback speed (1.0 = normal)
209-
210-
## Stream Props
211-
- `streamType` - Type of stream ('on-demand', 'live', 'll-live')
212-
- `targetLiveWindow` - Live stream window duration
213-
214-
## Metadata Props
215-
- `metadata` - Object with video_id, video_title, viewer_user_id
216-
- `envKey` - Environment key for Mux Data
217-
- `customDomain` - Custom domain for video delivery
218-
219-
## UI Props
220-
- `theme` - Player theme component
221-
- `primaryColor` - Primary UI color
222-
- `secondaryColor` - Secondary UI color
223-
- `accentColor` - Accent UI color
224-
- `proudlyDisplayMuxBadge` - Show Mux badge
225-
226-
## Advanced Props
227-
- `tokens` - Signed tokens for private videos
228-
- `storyboardSrc` - Custom storyboard/thumbnail track
229-
- `chapters` - Chapter markers
230-
- `renditionOrder` - Quality selection ordering
231-
- `maxResolution` - Maximum playback resolution
232-
- `minResolution` - Minimum playback resolution
233-
23441
# Docs
23542

23643
Docs and guides live on [docs.mux.com](https://docs.mux.com/guides/video/mux-player?utm_source=github-mux-player).

0 commit comments

Comments
 (0)