mpegts-vue3 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -25,7 +25,7 @@ let vue = require("vue");
 let mpegts_js = require("mpegts.js");
 mpegts_js = __toESM(mpegts_js);
 //#region src/components/MpegtsPlayer.vue
-const _hoisted_1 = { class: "relative w-full h-full bg-black rounded-lg overflow-hidden" };
+const _hoisted_1 = { class: "relative w-full h-full bg-black overflow-hidden" };
 const _hoisted_2 = {
 	key: 0,
 	class: "absolute inset-0 flex flex-col items-center justify-center bg-gray-900/90"
@@ -54,6 +54,7 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: true
 		},
+		objectFit: {},
 		type: { default: "mse" },
 		cors: { type: Boolean },
 		withCredentials: { type: Boolean },
@@ -87,6 +88,7 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
 		const videoRef = (0, vue.ref)();
 		const status = (0, vue.ref)("nosignal");
 		let player = null;
+		const videoStyle = (0, vue.computed)(() => ({ objectFit: props.objectFit ?? "fill" }));
 		function destroyPlayer() {
 			if (!player) return;
 			status.value = "destroying";
@@ -215,10 +217,11 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
 				(0, vue.createElementVNode)("video", {
 					ref_key: "videoRef",
 					ref: videoRef,
-					class: "absolute inset-0 w-full h-full object-contain",
+					class: "absolute inset-0 w-full h-full",
+					style: (0, vue.normalizeStyle)(videoStyle.value),
 					onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"])),
 					onContextmenu: _cache[1] || (_cache[1] = (0, vue.withModifiers)(() => {}, ["prevent"]))
-				}, null, 544),
+				}, null, 36),
 				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),
 				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),
 				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

@@ -13,6 +13,7 @@ interface Props {
   autoplay?: boolean;
   isLive?: boolean;
   muted?: boolean;
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   type?: string;
   cors?: boolean;
   withCredentials?: boolean;

package/dist/index.d.ts

@@ -13,6 +13,7 @@ interface Props {
   autoplay?: boolean;
   isLive?: boolean;
   muted?: boolean;
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   type?: string;
   cors?: boolean;
   withCredentials?: boolean;

package/dist/index.js

@@ -1,7 +1,7 @@
-import { createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, defineComponent, onMounted, onUnmounted, openBlock, ref, watch, withModifiers } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, defineComponent, normalizeStyle, onMounted, onUnmounted, openBlock, ref, watch, withModifiers } from "vue";
 import Mpegts from "mpegts.js";
 //#region src/components/MpegtsPlayer.vue
-const _hoisted_1 = { class: "relative w-full h-full bg-black rounded-lg overflow-hidden" };
+const _hoisted_1 = { class: "relative w-full h-full bg-black overflow-hidden" };
 const _hoisted_2 = {
 	key: 0,
 	class: "absolute inset-0 flex flex-col items-center justify-center bg-gray-900/90"
@@ -30,6 +30,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: true
 		},
+		objectFit: {},
 		type: { default: "mse" },
 		cors: { type: Boolean },
 		withCredentials: { type: Boolean },
@@ -63,6 +64,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		const videoRef = ref();
 		const status = ref("nosignal");
 		let player = null;
+		const videoStyle = computed(() => ({ objectFit: props.objectFit ?? "fill" }));
 		function destroyPlayer() {
 			if (!player) return;
 			status.value = "destroying";
@@ -191,10 +193,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 				createElementVNode("video", {
 					ref_key: "videoRef",
 					ref: videoRef,
-					class: "absolute inset-0 w-full h-full object-contain",
+					class: "absolute inset-0 w-full h-full",
+					style: normalizeStyle(videoStyle.value),
 					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
 					onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
-				}, null, 544),
+				}, null, 36),
 				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),
 				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),
 				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

@@ -1,6 +1,6 @@
 {
   "name": "mpegts-vue3",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Vue 3 component for mpegts.js video streaming player",
   "keywords": [