@sweet-player/vue 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +80 -0
  2. package/dist/index.cjs +2 -0
  3. package/dist/index.d.cts +6 -4
  4. package/dist/index.d.ts +6 -4
  5. package/dist/index.js +2 -0
  6. package/package.json +2 -2
package/README.md ADDED
@@ -0,0 +1,80 @@
1
+ # @sweet-player/vue
2
+
3
+ [@sweet-player/core](https://www.npmjs.com/package/@sweet-player/core) 的 Vue 3 组件封装。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ npm install @sweet-player/vue
9
+ ```
10
+
11
+ ## 使用
12
+
13
+ ```vue
14
+ <script setup lang="ts">
15
+ import { ref } from 'vue';
16
+ import { SweetPlayer } from '@sweet-player/vue';
17
+ import type { SweetPlayerCore } from '@sweet-player/vue';
18
+
19
+ const player = ref<SweetPlayerCore | null>(null);
20
+
21
+ function onReady(p: SweetPlayerCore) {
22
+ player.value = p;
23
+ }
24
+ </script>
25
+
26
+ <template>
27
+ <SweetPlayer
28
+ src="https://example.com/video.m3u8"
29
+ title="影片标题"
30
+ id="ep-01"
31
+ :volume="80"
32
+ :seek-step="10"
33
+ :auto-next="5"
34
+ @ready="onReady"
35
+ @next="() => console.log('next')"
36
+ />
37
+ </template>
38
+ ```
39
+
40
+ ## Props
41
+
42
+ 所有 `@sweet-player/core` 的选项（除 `container`）均可作为 props 传入：
43
+
44
+ | Prop | 类型 | 说明 |
45
+ |------|------|------|
46
+ | `src` | `string` | 视频地址（.m3u8 或普通视频） |
47
+ | `title` | `string` | 左上角标题 |
48
+ | `id` | `string` | 传入后自动断点续播 |
49
+ | `volume` | `number` | 音量 0-100 |
50
+ | `seekStep` | `number` | 快进快退秒数 |
51
+ | `autoNext` | `boolean \| number` | 播完自动下一个（数字为倒计时秒数） |
52
+ | `locale` | `string` | 语言（内置 zh-CN / en） |
53
+ | `plugins` | `SweetPlayerPlugin[]` | 插件列表 |
54
+ | ... | | [完整选项见 core 文档](https://www.npmjs.com/package/@sweet-player/core) |
55
+
56
+ ## Events
57
+
58
+ | 事件 | 参数 | 说明 |
59
+ |------|------|------|
60
+ | `@ready` | `SweetPlayerCore` | 播放器实例创建完成 |
61
+ | `@prev` | — | 点击上一个 |
62
+ | `@next` | — | 点击下一个 |
63
+ | `@qualityChange` | `QualityLevel` | 画质切换 |
64
+ | `@audioTrackChange` | `AudioTrackInfo` | 音轨切换 |
65
+
66
+ ## 实例方法
67
+
68
+ 通过 `@ready` 事件获取播放器实例后，可调用所有方法：
69
+
70
+ ```ts
71
+ player.value?.play();
72
+ player.value?.seek(60);
73
+ player.value?.setVolume(50);
74
+ player.value?.toggleFullscreen();
75
+ player.value?.togglePip();
76
+ ```
77
+
78
+ ## License
79
+
80
+ MIT
package/dist/index.cjs CHANGED
@@ -48,6 +48,7 @@ var SweetPlayer = (0, import_vue.defineComponent)({
48
48
  autoNext: [Boolean, Number],
49
49
  locale: String,
50
50
  localeStrings: Object,
51
+ hiddenControls: Array,
51
52
  plugins: Array,
52
53
  hlsConfig: Object
53
54
  },
@@ -76,6 +77,7 @@ var SweetPlayer = (0, import_vue.defineComponent)({
76
77
  autoNext: props.autoNext,
77
78
  locale: props.locale,
78
79
  localeStrings: props.localeStrings,
80
+ hiddenControls: props.hiddenControls,
79
81
  plugins: props.plugins,
80
82
  hlsConfig: props.hlsConfig,
81
83
  onPrev: () => emit("prev"),
package/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as vue from 'vue';
2
2
  import { PropType } from 'vue';
3
- import { LongSeekOptions, AspectRatio, QualityLevel, AudioTrackInfo, SweetPlayerPlugin } from '@sweet-player/core';
4
- export { AspectRatio, AudioTrackInfo, LongSeekOptions, PlayerEventMap, QualityLevel, SweetPlayer as SweetPlayerCore, SweetPlayerOptions, SweetPlayerPlugin } from '@sweet-player/core';
3
+ import { LongSeekOptions, AspectRatio, QualityLevel, AudioTrackInfo, ControlName, SweetPlayerPlugin } from '@sweet-player/core';
4
+ export { AspectRatio, AudioTrackInfo, ControlName, LongSeekOptions, PlayerEventMap, QualityLevel, SweetPlayer as SweetPlayerCore, SweetPlayerOptions, SweetPlayerPlugin } from '@sweet-player/core';
5
5
 
6
6
  declare const SweetPlayer: vue.DefineComponent<vue.ExtractPropTypes<{
7
7
  src: {
@@ -30,11 +30,12 @@ declare const SweetPlayer: vue.DefineComponent<vue.ExtractPropTypes<{
30
30
  autoNext: PropType<boolean | number>;
31
31
  locale: StringConstructor;
32
32
  localeStrings: PropType<Record<string, string>>;
33
+ hiddenControls: PropType<ControlName[]>;
33
34
  plugins: PropType<SweetPlayerPlugin[]>;
34
35
  hlsConfig: PropType<Record<string, unknown>>;
35
36
  }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
36
37
  [key: string]: any;
37
- }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("ready" | "prev" | "next" | "quality-change" | "audio-track-change")[], "ready" | "prev" | "next" | "quality-change" | "audio-track-change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
38
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("prev" | "next" | "ready" | "quality-change" | "audio-track-change")[], "prev" | "next" | "ready" | "quality-change" | "audio-track-change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
38
39
  src: {
39
40
  type: StringConstructor;
40
41
  required: true;
@@ -61,12 +62,13 @@ declare const SweetPlayer: vue.DefineComponent<vue.ExtractPropTypes<{
61
62
  autoNext: PropType<boolean | number>;
62
63
  locale: StringConstructor;
63
64
  localeStrings: PropType<Record<string, string>>;
65
+ hiddenControls: PropType<ControlName[]>;
64
66
  plugins: PropType<SweetPlayerPlugin[]>;
65
67
  hlsConfig: PropType<Record<string, unknown>>;
66
68
  }>> & Readonly<{
67
- onReady?: ((...args: any[]) => any) | undefined;
68
69
  onPrev?: ((...args: any[]) => any) | undefined;
69
70
  onNext?: ((...args: any[]) => any) | undefined;
71
+ onReady?: ((...args: any[]) => any) | undefined;
70
72
  "onQuality-change"?: ((...args: any[]) => any) | undefined;
71
73
  "onAudio-track-change"?: ((...args: any[]) => any) | undefined;
72
74
  }>, {
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as vue from 'vue';
2
2
  import { PropType } from 'vue';
3
- import { LongSeekOptions, AspectRatio, QualityLevel, AudioTrackInfo, SweetPlayerPlugin } from '@sweet-player/core';
4
- export { AspectRatio, AudioTrackInfo, LongSeekOptions, PlayerEventMap, QualityLevel, SweetPlayer as SweetPlayerCore, SweetPlayerOptions, SweetPlayerPlugin } from '@sweet-player/core';
3
+ import { LongSeekOptions, AspectRatio, QualityLevel, AudioTrackInfo, ControlName, SweetPlayerPlugin } from '@sweet-player/core';
4
+ export { AspectRatio, AudioTrackInfo, ControlName, LongSeekOptions, PlayerEventMap, QualityLevel, SweetPlayer as SweetPlayerCore, SweetPlayerOptions, SweetPlayerPlugin } from '@sweet-player/core';
5
5
 
6
6
  declare const SweetPlayer: vue.DefineComponent<vue.ExtractPropTypes<{
7
7
  src: {
@@ -30,11 +30,12 @@ declare const SweetPlayer: vue.DefineComponent<vue.ExtractPropTypes<{
30
30
  autoNext: PropType<boolean | number>;
31
31
  locale: StringConstructor;
32
32
  localeStrings: PropType<Record<string, string>>;
33
+ hiddenControls: PropType<ControlName[]>;
33
34
  plugins: PropType<SweetPlayerPlugin[]>;
34
35
  hlsConfig: PropType<Record<string, unknown>>;
35
36
  }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
36
37
  [key: string]: any;
37
- }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("ready" | "prev" | "next" | "quality-change" | "audio-track-change")[], "ready" | "prev" | "next" | "quality-change" | "audio-track-change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
38
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("prev" | "next" | "ready" | "quality-change" | "audio-track-change")[], "prev" | "next" | "ready" | "quality-change" | "audio-track-change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
38
39
  src: {
39
40
  type: StringConstructor;
40
41
  required: true;
@@ -61,12 +62,13 @@ declare const SweetPlayer: vue.DefineComponent<vue.ExtractPropTypes<{
61
62
  autoNext: PropType<boolean | number>;
62
63
  locale: StringConstructor;
63
64
  localeStrings: PropType<Record<string, string>>;
65
+ hiddenControls: PropType<ControlName[]>;
64
66
  plugins: PropType<SweetPlayerPlugin[]>;
65
67
  hlsConfig: PropType<Record<string, unknown>>;
66
68
  }>> & Readonly<{
67
- onReady?: ((...args: any[]) => any) | undefined;
68
69
  onPrev?: ((...args: any[]) => any) | undefined;
69
70
  onNext?: ((...args: any[]) => any) | undefined;
71
+ onReady?: ((...args: any[]) => any) | undefined;
70
72
  "onQuality-change"?: ((...args: any[]) => any) | undefined;
71
73
  "onAudio-track-change"?: ((...args: any[]) => any) | undefined;
72
74
  }>, {
package/dist/index.js CHANGED
@@ -31,6 +31,7 @@ var SweetPlayer = defineComponent({
31
31
  autoNext: [Boolean, Number],
32
32
  locale: String,
33
33
  localeStrings: Object,
34
+ hiddenControls: Array,
34
35
  plugins: Array,
35
36
  hlsConfig: Object
36
37
  },
@@ -59,6 +60,7 @@ var SweetPlayer = defineComponent({
59
60
  autoNext: props.autoNext,
60
61
  locale: props.locale,
61
62
  localeStrings: props.localeStrings,
63
+ hiddenControls: props.hiddenControls,
62
64
  plugins: props.plugins,
63
65
  hlsConfig: props.hlsConfig,
64
66
  onPrev: () => emit("prev"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sweet-player/vue",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Vue 3 component for sweet-player",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -32,7 +32,7 @@
32
32
  "vue3"
33
33
  ],
34
34
  "dependencies": {
35
- "@sweet-player/core": "0.2.0"
35
+ "@sweet-player/core": "0.3.0"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "vue": "^3.0.0"