Skip to content

Commit b74f972

Browse files
OrbisKOrbisK
committed
feat: add useMediaRecorder composable
1 parent 3c8bcfb commit b74f972

File tree

26 files changed

+1590
-508
lines changed

26 files changed

+1590
-508
lines changed

‎.github/FUNDING.yml

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 🪝 vue-composable-starter
1+
# 🪝 vue-use-media-recorder
22

33
A minimalist starting point for your next Vue 3 composable.
44

‎docs/.vitepress/config.ts

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

44
// https://vitepress.dev/reference/site-config
55
export default defineConfig({
6-
title: 'vue-composable-starter',
7-
description: 'A Vue Composable',
6+
title: '@orbisk/vue-use-media-recorder',
7+
description: 'A Vue Composable for MediaRecorder API',
88
vite: {
99
resolve: {
1010
alias: [
1111
{
12-
find: 'vue-composable-starter',
12+
find: '@orbisk/vue-use-media-recorder',
1313
replacement: resolve(__dirname, '../../src/index.ts'),
1414
},
1515
],

‎docs/example.vue

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
<script setup>
2-
import { useToggle } from 'vue-composable-starter'
3-
4-
const [toggleable, toggle] = useToggle()
52
</script>
63

74
<template>
8-
<button :style="{ background: toggleable ? 'green' : 'red' }" @click="toggle">
9-
Toggle: {{ toggleable }}
10-
</button>
5+
<div>
6+
app
7+
</div>
118
</template>

‎package.json

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
{
2-
"name": "vue-composable-starter",
2+
"name": "@orbisk/vue-use-media-recorder",
33
"type": "module",
44
"version": "1.0.0",
55
"packageManager": "[email protected]",
6-
"description": "🪝 Minimalist starting point for your next Vue Composable",
7-
"author": "Yaël GUILLOUX <[email protected]>",
6+
"description": "🪝 Vue Composable around MediaRecorder API",
7+
"author": "Robin Kehl <[email protected]>",
88
"license": "MIT",
9-
"homepage": "https://github.com/Tahul/vue-composable-starter#readme",
10-
"repository": "https://github.com/Tahul/vue-composable-starter",
9+
"homepage": "https://github.com/OrbisK/vue-use-media-recorder#readme",
10+
"repository": "https://github.com/OrbisK/vue-use-media-recorder",
1111
"bugs": {
12-
"url": "https://github.com/Tahul/vue-composable-starter/issues"
12+
"url": "https://github.com/OrbisK/vue-use-media-recorder/issues"
1313
},
1414
"keywords": [
1515
"vue",
16-
"composable"
16+
"composable",
17+
"media-recorder"
1718
],
1819
"sideEffects": false,
1920
"exports": {
@@ -54,7 +55,8 @@
5455
"prepare:nuxt": "pnpm --filter playgrounds-nuxt prepare:nuxt",
5556
"docs:dev": "vitepress dev docs",
5657
"docs:build": "vitepress build docs",
57-
"docs:preview": "vitepress preview docs"
58+
"docs:preview": "vitepress preview docs",
59+
"test:browser": "vitest --workspace=vitest.workspace.js"
5860
},
5961
"peerDependencies": {
6062
"vue": ">=3.0.0"
@@ -64,14 +66,20 @@
6466
"@nuxt/kit": "^3.14.159",
6567
"@nuxt/module-builder": "^0.8.4",
6668
"@types/fs-extra": "^11.0.4",
69+
"@vitejs/plugin-vue": "^5.1.4",
70+
"@vitest/browser": "^2.1.5",
6771
"@vitest/coverage-v8": "^2.1.4",
6872
"eslint": "^9.14.0",
73+
"globby": "^14.0.2",
6974
"happy-dom": "^15.11.3",
7075
"lint-staged": "^15.2.10",
76+
"nuxt": "^3.14.1592",
77+
"playwright": "^1.49.0",
7178
"typescript": "^5.6.3",
7279
"unbuild": "^2.0.0",
7380
"vitepress": "^1.5.0",
74-
"vitest": "^2.1.4"
81+
"vitest": "^2.1.5",
82+
"vitest-browser-vue": "^0.0.1"
7583
},
7684
"gitHooks": {
7785
"pre-commit": "lint-staged"

‎playgrounds/nuxt/app/app.vue

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
<script setup>
2-
const [toggleable, toggle] = useToggle()
2+
33
</script>
44

55
<template>
6-
<div>
7-
<NuxtRouteAnnouncer />
8-
as component:
9-
<Toggle />
10-
plain:
11-
<button @click="toggle">
12-
Toggle: {{ toggleable }}
13-
</button>
14-
</div>
6+
<ClientOnly>
7+
<RecorderDemo />
8+
</ClientOnly>
159
</template>

‎playgrounds/nuxt/app/components/recorder-demo.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup lang="ts">
2+
const audio = ref()
3+
const video = ref()
4+
const { start, stop, pause, resume, data, state, isMimeTypeSupported, isSupported, mimeType } = useMediaRecorder({
5+
constraints: {
6+
audio: true,
7+
video: false,
8+
},
9+
})
10+
function handleStop() {
11+
stop()
12+
const blob = new Blob(data.value)
13+
const blobVideo = new Blob(data.value)
14+
audio.value.src = URL.createObjectURL(blob)
15+
video.value.src = URL.createObjectURL(blobVideo)
16+
data.value = []
17+
}
18+
</script>
19+
20+
<template>
21+
<div>
22+
<button @click="start()">
23+
start
24+
</button>
25+
<button @click="pause">
26+
pause
27+
</button>
28+
<button @click="resume">
29+
resume
30+
</button>
31+
<button @click="handleStop">
32+
stop
33+
</button>
34+
<audio ref="audio" controls />
35+
<video ref="video" controls />
36+
<pre>state: {{ state }}</pre>
37+
<pre>supported: {{ isSupported }}</pre>
38+
<pre>mime type: {{ mimeType }}</pre>
39+
<pre>mime supported: {{ isMimeTypeSupported }}</pre>
40+
</div>
41+
</template>

‎playgrounds/nuxt/nuxt.config.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ export default defineNuxtConfig({
66
devLogs: false,
77
},
88
alias: {
9-
'vue-composable-starter': resolve(__dirname, '../../src/index.ts'),
10-
'vue-composable-starter/nuxt': resolve(__dirname, '../../src/nuxt/src/module.ts'),
9+
'@orbisk/vue-use-media-recorder': resolve(__dirname, '../../src/index.ts'),
10+
'@orbisk/vue-use-media-recorder/nuxt': resolve(__dirname, '../../src/nuxt/src/module.ts'),
1111
},
1212
modules: [
13-
'vue-composable-starter/nuxt',
13+
'@orbisk/vue-use-media-recorder/nuxt',
1414
],
1515
compatibilityDate: '2024-04-03',
1616
devtools: { enabled: true },

‎playgrounds/vite/src/App.vue

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
<script setup lang="ts">
2-
import { useToggle, Toggle } from 'vue-composable-starter'
3-
4-
const [toggleable, toggle] = useToggle()
52
63
</script>
74

85
<template>
96
<div>
10-
as component:
11-
<Toggle />
12-
plain:
13-
<button @click="toggle">
14-
Toggle: {{ toggleable }}
15-
</button>
7+
app
168
</div>
179
</template>

‎playgrounds/vite/src/components/HelloWorld.vue

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

0 commit comments

Comments
 (0)