mpegts-vue3 0.2.0 → 0.3.2

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 (5) hide show
  1. package/dist/index.cjs +29 -7
  2. package/dist/index.d.cts +2 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +30 -8
  5. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -25,7 +25,7 @@ let vue = require("vue");
25
25
  let mpegts_js = require("mpegts.js");
26
26
  mpegts_js = __toESM(mpegts_js);
27
27
  //#region src/components/MpegtsPlayer.vue
28
- const _hoisted_1 = { class: "relative w-full h-full bg-black rounded-lg overflow-hidden" };
28
+ const _hoisted_1 = { class: "relative w-full h-full bg-black overflow-hidden" };
29
29
  const _hoisted_2 = {
30
30
  key: 0,
31
31
  class: "absolute inset-0 flex flex-col items-center justify-center bg-gray-900/90"
@@ -54,10 +54,14 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
54
54
  type: Boolean,
55
55
  default: true
56
56
  },
57
+ objectFit: {},
57
58
  type: { default: "mse" },
58
59
  cors: { type: Boolean },
59
60
  withCredentials: { type: Boolean },
60
- hasAudio: { type: Boolean },
61
+ hasAudio: {
62
+ type: Boolean,
63
+ default: true
64
+ },
61
65
  hasVideo: {
62
66
  type: Boolean,
63
67
  default: true
@@ -87,6 +91,7 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
87
91
  const videoRef = (0, vue.ref)();
88
92
  const status = (0, vue.ref)("nosignal");
89
93
  let player = null;
94
+ const videoStyle = (0, vue.computed)(() => ({ objectFit: props.objectFit ?? "fill" }));
90
95
  function destroyPlayer() {
91
96
  if (!player) return;
92
97
  status.value = "destroying";
@@ -133,7 +138,7 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
133
138
  };
134
139
  if (props.cors !== void 0) source.cors = props.cors;
135
140
  if (props.withCredentials !== void 0) source.withCredentials = props.withCredentials;
136
- if (props.hasAudio !== void 0) source.hasAudio = props.hasAudio;
141
+ source.hasAudio = props.hasAudio;
137
142
  if (props.hasVideo !== void 0) source.hasVideo = props.hasVideo;
138
143
  if (props.duration !== void 0) source.duration = props.duration;
139
144
  if (props.filesize !== void 0) source.filesize = props.filesize;
@@ -169,8 +174,24 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
169
174
  status.value = "playing";
170
175
  emit("status", "playing");
171
176
  }).catch(() => {
172
- status.value = "stopped";
173
- emit("status", "stopped");
177
+ if (!props.muted && videoRef.value && player) {
178
+ videoRef.value.muted = true;
179
+ const fallbackResult = player.play();
180
+ if (fallbackResult instanceof Promise) fallbackResult.then(() => {
181
+ status.value = "playing";
182
+ emit("status", "playing");
183
+ }).catch(() => {
184
+ status.value = "stopped";
185
+ emit("status", "stopped");
186
+ });
187
+ else {
188
+ status.value = "playing";
189
+ emit("status", "playing");
190
+ }
191
+ } else {
192
+ status.value = "stopped";
193
+ emit("status", "stopped");
194
+ }
174
195
  });
175
196
  else {
176
197
  status.value = "playing";
@@ -215,10 +236,11 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
215
236
  (0, vue.createElementVNode)("video", {
216
237
  ref_key: "videoRef",
217
238
  ref: videoRef,
218
- class: "absolute inset-0 w-full h-full object-contain",
239
+ class: "absolute inset-0 w-full h-full",
240
+ style: (0, vue.normalizeStyle)(videoStyle.value),
219
241
  onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"])),
220
242
  onContextmenu: _cache[1] || (_cache[1] = (0, vue.withModifiers)(() => {}, ["prevent"]))
221
- }, null, 544),
243
+ }, null, 36),
222
244
  status.value === "nosignal" || !__props.url ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [..._cache[2] || (_cache[2] = [(0, vue.createStaticVNode)("<div class=\"mb-3 flex items-center gap-2 text-gray-400\"><svg class=\"size-10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\"><path d=\"m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M18 12 6 12M18 8 6 8M18 16l-12 0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></div><span class=\"text-sm font-medium text-gray-400 tracking-wider uppercase\"> No Signal </span>", 2)])])) : (0, vue.createCommentVNode)("v-if", true),
223
245
  status.value === "connecting" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3, [..._cache[3] || (_cache[3] = [(0, vue.createElementVNode)("div", { class: "flex flex-col items-center gap-3" }, [(0, vue.createElementVNode)("div", { class: "size-8 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" }), (0, vue.createElementVNode)("span", { class: "text-sm text-gray-300" }, "Connecting...")], -1)])])) : (0, vue.createCommentVNode)("v-if", true),
224
246
  status.value === "error" && __props.url ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("div", { class: "flex flex-col items-center gap-2" }, [(0, vue.createElementVNode)("svg", {
package/dist/index.d.cts CHANGED
@@ -13,6 +13,7 @@ interface Props {
13
13
  autoplay?: boolean;
14
14
  isLive?: boolean;
15
15
  muted?: boolean;
16
+ objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
16
17
  type?: string;
17
18
  cors?: boolean;
18
19
  withCredentials?: boolean;
@@ -38,6 +39,7 @@ declare const _default: vue0.DefineComponent<Props, {
38
39
  isLive: boolean;
39
40
  muted: boolean;
40
41
  type: string;
42
+ hasAudio: boolean;
41
43
  hasVideo: boolean;
42
44
  config: Partial<MpegtsConfig>;
43
45
  }, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
package/dist/index.d.ts CHANGED
@@ -13,6 +13,7 @@ interface Props {
13
13
  autoplay?: boolean;
14
14
  isLive?: boolean;
15
15
  muted?: boolean;
16
+ objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
16
17
  type?: string;
17
18
  cors?: boolean;
18
19
  withCredentials?: boolean;
@@ -38,6 +39,7 @@ declare const _default: vue0.DefineComponent<Props, {
38
39
  isLive: boolean;
39
40
  muted: boolean;
40
41
  type: string;
42
+ hasAudio: boolean;
41
43
  hasVideo: boolean;
42
44
  config: Partial<MpegtsConfig>;
43
45
  }, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import { createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, defineComponent, onMounted, onUnmounted, openBlock, ref, watch, withModifiers } from "vue";
1
+ import { computed, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, defineComponent, normalizeStyle, onMounted, onUnmounted, openBlock, ref, watch, withModifiers } from "vue";
2
2
  import Mpegts from "mpegts.js";
3
3
  //#region src/components/MpegtsPlayer.vue
4
- const _hoisted_1 = { class: "relative w-full h-full bg-black rounded-lg overflow-hidden" };
4
+ const _hoisted_1 = { class: "relative w-full h-full bg-black overflow-hidden" };
5
5
  const _hoisted_2 = {
6
6
  key: 0,
7
7
  class: "absolute inset-0 flex flex-col items-center justify-center bg-gray-900/90"
@@ -30,10 +30,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
30
30
  type: Boolean,
31
31
  default: true
32
32
  },
33
+ objectFit: {},
33
34
  type: { default: "mse" },
34
35
  cors: { type: Boolean },
35
36
  withCredentials: { type: Boolean },
36
- hasAudio: { type: Boolean },
37
+ hasAudio: {
38
+ type: Boolean,
39
+ default: true
40
+ },
37
41
  hasVideo: {
38
42
  type: Boolean,
39
43
  default: true
@@ -63,6 +67,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
63
67
  const videoRef = ref();
64
68
  const status = ref("nosignal");
65
69
  let player = null;
70
+ const videoStyle = computed(() => ({ objectFit: props.objectFit ?? "fill" }));
66
71
  function destroyPlayer() {
67
72
  if (!player) return;
68
73
  status.value = "destroying";
@@ -109,7 +114,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
109
114
  };
110
115
  if (props.cors !== void 0) source.cors = props.cors;
111
116
  if (props.withCredentials !== void 0) source.withCredentials = props.withCredentials;
112
- if (props.hasAudio !== void 0) source.hasAudio = props.hasAudio;
117
+ source.hasAudio = props.hasAudio;
113
118
  if (props.hasVideo !== void 0) source.hasVideo = props.hasVideo;
114
119
  if (props.duration !== void 0) source.duration = props.duration;
115
120
  if (props.filesize !== void 0) source.filesize = props.filesize;
@@ -145,8 +150,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
145
150
  status.value = "playing";
146
151
  emit("status", "playing");
147
152
  }).catch(() => {
148
- status.value = "stopped";
149
- emit("status", "stopped");
153
+ if (!props.muted && videoRef.value && player) {
154
+ videoRef.value.muted = true;
155
+ const fallbackResult = player.play();
156
+ if (fallbackResult instanceof Promise) fallbackResult.then(() => {
157
+ status.value = "playing";
158
+ emit("status", "playing");
159
+ }).catch(() => {
160
+ status.value = "stopped";
161
+ emit("status", "stopped");
162
+ });
163
+ else {
164
+ status.value = "playing";
165
+ emit("status", "playing");
166
+ }
167
+ } else {
168
+ status.value = "stopped";
169
+ emit("status", "stopped");
170
+ }
150
171
  });
151
172
  else {
152
173
  status.value = "playing";
@@ -191,10 +212,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
191
212
  createElementVNode("video", {
192
213
  ref_key: "videoRef",
193
214
  ref: videoRef,
194
- class: "absolute inset-0 w-full h-full object-contain",
215
+ class: "absolute inset-0 w-full h-full",
216
+ style: normalizeStyle(videoStyle.value),
195
217
  onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
196
218
  onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
197
- }, null, 544),
219
+ }, null, 36),
198
220
  status.value === "nosignal" || !__props.url ? (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[2] || (_cache[2] = [createStaticVNode("<div class=\"mb-3 flex items-center gap-2 text-gray-400\"><svg class=\"size-10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\"><path d=\"m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M18 12 6 12M18 8 6 8M18 16l-12 0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></div><span class=\"text-sm font-medium text-gray-400 tracking-wider uppercase\"> No Signal </span>", 2)])])) : createCommentVNode("v-if", true),
199
221
  status.value === "connecting" ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[3] || (_cache[3] = [createElementVNode("div", { class: "flex flex-col items-center gap-3" }, [createElementVNode("div", { class: "size-8 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" }), createElementVNode("span", { class: "text-sm text-gray-300" }, "Connecting...")], -1)])])) : createCommentVNode("v-if", true),
200
222
  status.value === "error" && __props.url ? (openBlock(), createElementBlock("div", _hoisted_4, [..._cache[4] || (_cache[4] = [createElementVNode("div", { class: "flex flex-col items-center gap-2" }, [createElementVNode("svg", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mpegts-vue3",
3
- "version": "0.2.0",
3
+ "version": "0.3.2",
4
4
  "type": "module",
5
5
  "description": "Vue 3 component for mpegts.js video streaming player",
6
6
  "keywords": [
@@ -15,7 +15,7 @@
15
15
  "author": "",
16
16
  "repository": {
17
17
  "type": "git",
18
- "url": "https://github.com/huangzida/mpegts-vue3"
18
+ "url": "git+https://github.com/huangzida/mpegts-vue3.git"
19
19
  },
20
20
  "main": "./dist/index.cjs",
21
21
  "module": "./dist/index.js",