feat!: update implementation for vue 3 (#113)

danielroe · May 27, 2024 · ceb3145 · ceb3145
1 parent d94c4ff
commit ceb3145
Show file tree

Hide file tree

Showing 11 changed files with 341 additions and 261 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "stream-vue",
+  "type": "module",
   "version": "0.4.0",
   "packageManager": "pnpm@9.1.3",
   "description": "Cloudflare Stream component for VueJS",
@@ -41,15 +42,15 @@
     "test:types": "tsc --noEmit"
   },
   "peerDependencies": {
-    "vue": "^2.6.0"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "latest",
     "@types/jsdom": "^21.1.6",
     "@types/node": "20.12.12",
-    "@vitejs/plugin-vue2": "^2.3.1",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/coverage-v8": "^1.6.0",
-    "@vue/test-utils": "1.3.6",
+    "@vue/test-utils": "2.4.6",
     "eslint": "latest",
     "jsdom": "^24.1.0",
     "lint-staged": "latest",
@@ -58,16 +59,14 @@
     "unbuild": "latest",
     "vite": "latest",
     "vitest": "latest",
-    "vue": "2.7.15",
-    "vue-template-compiler": "2.7.15"
+    "vue": "3.4.27"
+  },
+  "resolutions": {
+    "stream-vue": "link:."
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },
-  "vetur": {
-    "tags": "vetur/tags.json",
-    "attributes": "vetur/attributes.json"
-  },
   "lint-staged": {
     "*.{js,ts,mjs,cjs,json,.*rc}": [
       "pnpm eslint --fix"

diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>stream-vue</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
diff --git a/playground/package.json b/playground/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "stream-vue-playground",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "latest",
+    "@vueuse/core": "^10.9.0",
+    "stream-vue": "latest",
+    "vite": "latest",
+    "vue": "latest"
+  }
+}
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// https://github.com/cloudflare/stream-react/blob/master/example/src/index.tsx
+
+import { VideoStream } from 'stream-vue'
+import { ref } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+
+const videostream = ref<InstanceType<typeof VideoStream> | null>(null)
+function setTime() {
+  if (videostream.value?.streamRef) {
+    videostream.value.streamRef.currentTime = 30
+  }
+}
+function play() {
+  videostream.value?.streamRef?.play()
+}
+
+const configuration = useLocalStorage('stream-state', {
+  autoplay: [true, { type: 'checkbox' }],
+  muted: [true, { type: 'checkbox' }],
+  loop: [true, { type: 'checkbox' }],
+  controls: [true, { type: 'checkbox' }],
+  responsive: [true, { type: 'checkbox' }],
+  volume: [1, { type: 'range', min: 0, max: 1, step: 0.01 }],
+  playbackRate: [1, { type: 'range', min: 0.25, max: 2, step: 0.25 }],
+} as const)
+</script>
+
+<template>
+  <div>
+    <VideoStream
+      ref="videostream"
+      src="4bcf13d23290043d9efb344b56200ebd"
+      :muted="configuration.muted[0]"
+      :loop="configuration.loop[0]"
+      :controls="configuration.controls[0]"
+      :responsive="configuration.responsive[0]"
+      :autoplay="configuration.autoplay[0]"
+      :volume="configuration.volume[0]"
+      :playback-rate="configuration.playbackRate[0]"
+    />
+    <div>
+      <label v-for="item, key in configuration" :key="key" :style="{ display: 'inline-block', border: '1px solid', padding: '4px 8px' }">
+        {{ key }}
+        <input v-model="item[0]" v-bind="item[1]">
+      </label>
+    </div>
+    <button @click="setTime">
+      seek to 30s
+    </button>
+    <button @click="play">
+      play
+    </button>
+  </div>
+</template>
diff --git a/playground/src/main.js b/playground/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+})