docs: add vitepress docs content

OrbisK · OrbisK · commit bdcfb7f787b7 · 2024-11-26T17:17:18.000+01:00
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: '@orbisk/vue-use-media-recorder',
+  title: 'Vue Use Media Recorder',
   description: 'A Vue Composable for MediaRecorder API',
   vite: {
     resolve: {
@@ -19,20 +19,28 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/api-examples' },
+      { text: 'Installation', link: '/installation' },
+      { text: 'Usage', link: '/usage' },
+      { text: 'Examples', link: '/examples' },
     ],
 
     sidebar: [
+      {
+        text: 'Installation',
+        link: '/installation',
+      },
+      {
+        text: 'Usage',
+        link: '/usage',
+      },
       {
         text: 'Examples',
-        items: [
-          { text: 'Runtime API Examples', link: '/api-examples' },
-        ],
+        link: '/examples',
       },
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+      { icon: 'github', link: 'https://github.com/OrbisK/vue-use-media-recorder' },
     ],
   },
 })
diff --git a/docs/api-examples.md b/docs/api-examples.md
diff --git a/docs/basic-example.vue b/docs/basic-example.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { useMediaRecorder } from '@orbisk/vue-use-media-recorder'
+import { computed } from 'vue'
+
+const {
+  data,
+  start,
+  stop,
+  pause,
+  resume,
+  state,
+} = useMediaRecorder({ constraints: { audio: true, video: true } })
+
+const length = computed(() => {
+  return data.value.length ?? 0
+})
+
+const startBtnText = computed(() => {
+  switch (state.value) {
+    case 'recording':
+      return 'Pause'
+    case 'paused':
+      return 'Resume'
+    default:
+      return 'Start'
+  }
+})
+
+function handleStartClick() {
+  switch (state.value) {
+    case 'recording':
+      pause()
+      break
+    case 'paused':
+      resume()
+      break
+    default:
+      start()
+  }
+}
+
+const audio = computed(() => {
+  if (!data.value?.length || state.value !== 'inactive')
+    return
+  const blob = new Blob(data.value)
+  return URL.createObjectURL(blob)
+})
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column">
+    <button style="border-radius: 5px; background-color: greenyellow; color: black" @click="handleStartClick">
+      {{ startBtnText }}
+    </button>
+    <button style="border-radius: 5px; background-color: orangered; color: white" @click="stop">
+      Stop
+    </button>
+    <pre>state: {{ state ? state : 'undefined (no interaction)' }}</pre>
+    <pre>recorded data (array length): {{ length }}</pre>
+    <audio v-if="audio" controls>
+      <source :src="audio">
+    </audio>
+  </div>
+</template>
diff --git a/docs/example.vue b/docs/example.vue
diff --git a/docs/examples.md b/docs/examples.md
@@ -0,0 +1,34 @@
+---
+outline: deep
+---
+
+# Examples
+
+## Basic Example
+
+This is a basic example of how to use the `<script setup>` syntax in a Vue component.
+
+
+<script setup>
+import BasicExample from './basic-example.vue'
+import TimesliceExample from './timeslice-example.vue'
+</script>
+
+<BasicExample />
+
+### Code
+
+<<< @/basic-example.vue
+
+
+## Set timeslice
+
+You can control the timeslice of the data Blob creation. See [
+`MediaRecorder.start(timeslice)`](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start#syntax) for more
+information. The default value is `undefined` (this means that the timeslice is not set -> `data.value` will be set when
+stopping).
+
+<TimesliceExample />
+
+
+<<< @/timeslice-example.vue {40}
diff --git a/docs/index.md b/docs/index.md
@@ -3,19 +3,22 @@
 layout: home
 
 hero:
-  name: "vue-composable-starter"
-  text: "A Vue Composable"
-  tagline: My great project tagline
+  name: "@orbisk/vue-use-media-recorder"
+  text: "A Vue Composable for the MediaRecorder API"
   actions:
     - theme: brand
-      text: API Examples
-      link: /api-examples
+      text: Installation
+      link: /installtion
+    - theme: secondary
+      text: Usage 
+      link: /usage
 
-features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+
+#features:
+#  - title: Feature A
+#    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+#  - title: Feature B
+#    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+#  - title: Feature C
+#    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
diff --git a/docs/installation.md b/docs/installation.md
@@ -0,0 +1,21 @@
+---
+outline: deep
+---
+
+# Installation
+
+## Install the package
+
+```bash
+pnpm add -D @orbisk/vue-use-media-recorder
+```
+
+### Nuxt
+
+- Auto import for Nuxt is supported. Just add the module to your `nuxt.config`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@orbisk/vue-use-media-recorder/nuxt']
+})
+```
diff --git a/docs/timeslice-example.vue b/docs/timeslice-example.vue
@@ -0,0 +1,70 @@
+<script setup>
+import { useMediaRecorder } from '@orbisk/vue-use-media-recorder'
+import { computed, ref } from 'vue'
+
+const {
+  data,
+  start,
+  stop,
+  pause,
+  resume,
+  state,
+} = useMediaRecorder({ constraints: { audio: true, video: true } })
+
+const timeslice = ref(1000)
+
+const length = computed(() => {
+  return data.value.length ?? 0
+})
+
+const startBtnText = computed(() => {
+  switch (state.value) {
+    case 'recording':
+      return 'Pause'
+    case 'paused':
+      return 'Resume'
+    default:
+      return 'Start'
+  }
+})
+
+function handleStartClick() {
+  switch (state.value) {
+    case 'recording':
+      pause()
+      break
+    case 'paused':
+      resume()
+      break
+    default:
+      start(timeslice.value)
+  }
+}
+
+const audio = computed(() => {
+  if (!data.value?.length || state.value !== 'inactive')
+    return
+  const blob = new Blob(data.value)
+  return URL.createObjectURL(blob)
+})
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column">
+    <label for="timeslice">
+      Timeslice (ms):
+      <input id="timeslice" type="number" v-model="timeslice"/>
+    </label>
+    <button style="border-radius: 5px; background-color: greenyellow; color: black" @click="handleStartClick">
+      {{ startBtnText }}
+    </button>
+    <button style="border-radius: 5px; background-color: orangered; color: white" @click="stop">
+      Stop
+    </button>
+    <pre>state: {{ state ? state : 'undefined (no interaction)' }}</pre>
+    <pre>recorded data (array length): {{ length }}</pre>
+    <audio v-if="audio" controls>
+      <source :src="audio">
+    </audio>
+  </div>
+</template>
diff --git a/docs/usage.md b/docs/usage.md
@@ -0,0 +1,29 @@
+---
+outline: deep
+---
+
+# Usage
+
+```vue
+
+<script setup>
+  import { useMediaRecorder } from '@orbisk/vue-use-media-recorder'
+
+  const {
+    data,
+    stream,
+    start,
+    pause,
+    resume,
+    stop,
+    state,
+    isSupported,
+    isMimeTypeSupported,
+    mimeType,
+    mediaRecorder,
+  } = useMediaRecorder({constraints: {audio: true, video: true}})
+  
+  start()
+</script>
+```
+
