mpegts-vue3 0.1.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 (5) hide show
  1. package/dist/index.cjs +10 -4
  2. package/dist/index.d.cts +2 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +11 -5
  5. package/package.json +1 -1
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,11 +54,15 @@ 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
61
  hasAudio: { type: Boolean },
61
- hasVideo: { type: Boolean },
62
+ hasVideo: {
63
+ type: Boolean,
64
+ default: true
65
+ },
62
66
  duration: {},
63
67
  filesize: {},
64
68
  config: { default: () => ({}) }
@@ -84,6 +88,7 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
84
88
  const videoRef = (0, vue.ref)();
85
89
  const status = (0, vue.ref)("nosignal");
86
90
  let player = null;
91
+ const videoStyle = (0, vue.computed)(() => ({ objectFit: props.objectFit ?? "fill" }));
87
92
  function destroyPlayer() {
88
93
  if (!player) return;
89
94
  status.value = "destroying";
@@ -212,10 +217,11 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
212
217
  (0, vue.createElementVNode)("video", {
213
218
  ref_key: "videoRef",
214
219
  ref: videoRef,
215
- class: "absolute inset-0 w-full h-full object-contain",
220
+ class: "absolute inset-0 w-full h-full",
221
+ style: (0, vue.normalizeStyle)(videoStyle.value),
216
222
  onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"])),
217
223
  onContextmenu: _cache[1] || (_cache[1] = (0, vue.withModifiers)(() => {}, ["prevent"]))
218
- }, null, 544),
224
+ }, null, 36),
219
225
  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),
220
226
  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),
221
227
  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
+ hasVideo: boolean;
41
43
  config: Partial<MpegtsConfig>;
42
44
  }, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
43
45
  //#endregion
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
+ hasVideo: boolean;
41
43
  config: Partial<MpegtsConfig>;
42
44
  }, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
43
45
  //#endregion
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,11 +30,15 @@ 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
37
  hasAudio: { type: Boolean },
37
- hasVideo: { type: Boolean },
38
+ hasVideo: {
39
+ type: Boolean,
40
+ default: true
41
+ },
38
42
  duration: {},
39
43
  filesize: {},
40
44
  config: { default: () => ({}) }
@@ -60,6 +64,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
60
64
  const videoRef = ref();
61
65
  const status = ref("nosignal");
62
66
  let player = null;
67
+ const videoStyle = computed(() => ({ objectFit: props.objectFit ?? "fill" }));
63
68
  function destroyPlayer() {
64
69
  if (!player) return;
65
70
  status.value = "destroying";
@@ -188,10 +193,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
188
193
  createElementVNode("video", {
189
194
  ref_key: "videoRef",
190
195
  ref: videoRef,
191
- class: "absolute inset-0 w-full h-full object-contain",
196
+ class: "absolute inset-0 w-full h-full",
197
+ style: normalizeStyle(videoStyle.value),
192
198
  onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
193
199
  onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
194
- }, null, 544),
200
+ }, null, 36),
195
201
  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),
196
202
  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),
197
203
  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.1.0",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "description": "Vue 3 component for mpegts.js video streaming player",
6
6
  "keywords": [