Skip to content

Commit bdcfb7f

Browse files
OrbisKOrbisK
committed
docs: add vitepress docs content
1 parent 88cdacc commit bdcfb7f

File tree

9 files changed

+247
-41
lines changed

9 files changed

+247
-41
lines changed

‎docs/.vitepress/config.ts

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { defineConfig } from 'vitepress'
33

44
// https://vitepress.dev/reference/site-config
55
export default defineConfig({
6-
title: '@orbisk/vue-use-media-recorder',
6+
title: 'Vue Use Media Recorder',
77
description: 'A Vue Composable for MediaRecorder API',
88
vite: {
99
resolve: {
@@ -19,20 +19,28 @@ export default defineConfig({
1919
// https://vitepress.dev/reference/default-theme-config
2020
nav: [
2121
{ text: 'Home', link: '/' },
22-
{ text: 'Examples', link: '/api-examples' },
22+
{ text: 'Installation', link: '/installation' },
23+
{ text: 'Usage', link: '/usage' },
24+
{ text: 'Examples', link: '/examples' },
2325
],
2426

2527
sidebar: [
28+
{
29+
text: 'Installation',
30+
link: '/installation',
31+
},
32+
{
33+
text: 'Usage',
34+
link: '/usage',
35+
},
2636
{
2737
text: 'Examples',
28-
items: [
29-
{ text: 'Runtime API Examples', link: '/api-examples' },
30-
],
38+
link: '/examples',
3139
},
3240
],
3341

3442
socialLinks: [
35-
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
43+
{ icon: 'github', link: 'https://github.com/OrbisK/vue-use-media-recorder' },
3644
],
3745
},
3846
})

‎docs/api-examples.md

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎docs/basic-example.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<script setup>
2+
import { useMediaRecorder } from '@orbisk/vue-use-media-recorder'
3+
import { computed } from 'vue'
4+
5+
const {
6+
data,
7+
start,
8+
stop,
9+
pause,
10+
resume,
11+
state,
12+
} = useMediaRecorder({ constraints: { audio: true, video: true } })
13+
14+
const length = computed(() => {
15+
return data.value.length ?? 0
16+
})
17+
18+
const startBtnText = computed(() => {
19+
switch (state.value) {
20+
case 'recording':
21+
return 'Pause'
22+
case 'paused':
23+
return 'Resume'
24+
default:
25+
return 'Start'
26+
}
27+
})
28+
29+
function handleStartClick() {
30+
switch (state.value) {
31+
case 'recording':
32+
pause()
33+
break
34+
case 'paused':
35+
resume()
36+
break
37+
default:
38+
start()
39+
}
40+
}
41+
42+
const audio = computed(() => {
43+
if (!data.value?.length || state.value !== 'inactive')
44+
return
45+
const blob = new Blob(data.value)
46+
return URL.createObjectURL(blob)
47+
})
48+
</script>
49+
50+
<template>
51+
<div style="display: flex; flex-direction: column">
52+
<button style="border-radius: 5px; background-color: greenyellow; color: black" @click="handleStartClick">
53+
{{ startBtnText }}
54+
</button>
55+
<button style="border-radius: 5px; background-color: orangered; color: white" @click="stop">
56+
Stop
57+
</button>
58+
<pre>state: {{ state ? state : 'undefined (no interaction)' }}</pre>
59+
<pre>recorded data (array length): {{ length }}</pre>
60+
<audio v-if="audio" controls>
61+
<source :src="audio">
62+
</audio>
63+
</div>
64+
</template>

‎docs/example.vue

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎docs/examples.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
outline: deep
3+
---
4+
5+
# Examples
6+
7+
## Basic Example
8+
9+
This is a basic example of how to use the `<script setup>` syntax in a Vue component.
10+
11+
12+
<script setup>
13+
import BasicExample from './basic-example.vue'
14+
import TimesliceExample from './timeslice-example.vue'
15+
</script>
16+
17+
<BasicExample />
18+
19+
### Code
20+
21+
<<< @/basic-example.vue
22+
23+
24+
## Set timeslice
25+
26+
You can control the timeslice of the data Blob creation. See [
27+
`MediaRecorder.start(timeslice)`](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start#syntax) for more
28+
information. The default value is `undefined` (this means that the timeslice is not set -> `data.value` will be set when
29+
stopping).
30+
31+
<TimesliceExample />
32+
33+
34+
<<< @/timeslice-example.vue {40}

‎docs/index.md

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,22 @@
33
layout: home
44

55
hero:
6-
name: "vue-composable-starter"
7-
text: "A Vue Composable"
8-
tagline: My great project tagline
6+
name: "@orbisk/vue-use-media-recorder"
7+
text: "A Vue Composable for the MediaRecorder API"
98
actions:
109
- theme: brand
11-
text: API Examples
12-
link: /api-examples
10+
text: Installation
11+
link: /installtion
12+
- theme: secondary
13+
text: Usage
14+
link: /usage
1315

14-
features:
15-
- title: Feature A
16-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
17-
- title: Feature B
18-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
19-
- title: Feature C
20-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
16+
17+
#features:
18+
# - title: Feature A
19+
# details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
20+
# - title: Feature B
21+
# details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
22+
# - title: Feature C
23+
# details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
2124
---

‎docs/installation.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
outline: deep
3+
---
4+
5+
# Installation
6+
7+
## Install the package
8+
9+
```bash
10+
pnpm add -D @orbisk/vue-use-media-recorder
11+
```
12+
13+
### Nuxt
14+
15+
- Auto import for Nuxt is supported. Just add the module to your `nuxt.config`:
16+
17+
```ts
18+
export default defineNuxtConfig({
19+
modules: ['@orbisk/vue-use-media-recorder/nuxt']
20+
})
21+
```

‎docs/timeslice-example.vue

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script setup>
2+
import { useMediaRecorder } from '@orbisk/vue-use-media-recorder'
3+
import { computed, ref } from 'vue'
4+
5+
const {
6+
data,
7+
start,
8+
stop,
9+
pause,
10+
resume,
11+
state,
12+
} = useMediaRecorder({ constraints: { audio: true, video: true } })
13+
14+
const timeslice = ref(1000)
15+
16+
const length = computed(() => {
17+
return data.value.length ?? 0
18+
})
19+
20+
const startBtnText = computed(() => {
21+
switch (state.value) {
22+
case 'recording':
23+
return 'Pause'
24+
case 'paused':
25+
return 'Resume'
26+
default:
27+
return 'Start'
28+
}
29+
})
30+
31+
function handleStartClick() {
32+
switch (state.value) {
33+
case 'recording':
34+
pause()
35+
break
36+
case 'paused':
37+
resume()
38+
break
39+
default:
40+
start(timeslice.value)
41+
}
42+
}
43+
44+
const audio = computed(() => {
45+
if (!data.value?.length || state.value !== 'inactive')
46+
return
47+
const blob = new Blob(data.value)
48+
return URL.createObjectURL(blob)
49+
})
50+
</script>
51+
52+
<template>
53+
<div style="display: flex; flex-direction: column">
54+
<label for="timeslice">
55+
Timeslice (ms):
56+
<input id="timeslice" type="number" v-model="timeslice"/>
57+
</label>
58+
<button style="border-radius: 5px; background-color: greenyellow; color: black" @click="handleStartClick">
59+
{{ startBtnText }}
60+
</button>
61+
<button style="border-radius: 5px; background-color: orangered; color: white" @click="stop">
62+
Stop
63+
</button>
64+
<pre>state: {{ state ? state : 'undefined (no interaction)' }}</pre>
65+
<pre>recorded data (array length): {{ length }}</pre>
66+
<audio v-if="audio" controls>
67+
<source :src="audio">
68+
</audio>
69+
</div>
70+
</template>

‎docs/usage.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
outline: deep
3+
---
4+
5+
# Usage
6+
7+
```vue
8+
9+
<script setup>
10+
import { useMediaRecorder } from '@orbisk/vue-use-media-recorder'
11+
12+
const {
13+
data,
14+
stream,
15+
start,
16+
pause,
17+
resume,
18+
stop,
19+
state,
20+
isSupported,
21+
isMimeTypeSupported,
22+
mimeType,
23+
mediaRecorder,
24+
} = useMediaRecorder({constraints: {audio: true, video: true}})
25+
26+
start()
27+
</script>
28+
```
29+

0 commit comments

Comments
 (0)