vue-streaming 0.1.3 → 0.1.5

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.
package/dist/index.cjs CHANGED
@@ -14,14 +14,10 @@ var StreamPlayer_default = vue.defineComponent({
14
14
  controls: { type: Boolean, default: true },
15
15
  playsInline: { type: Boolean, default: true },
16
16
  muted: { type: Boolean, default: false },
17
- logLimit: { type: Number, default: 500 },
18
- videoAttrs: {
19
- type: Object,
20
- default: () => ({})
21
- }
17
+ logLimit: { type: Number, default: 500 }
22
18
  },
23
19
  emits: ["open", "close", "status", "error", "message"],
24
- setup(props, { emit, slots, expose }) {
20
+ setup(props, { emit, expose }) {
25
21
  const status = vue.ref("idle");
26
22
  const isOpen = vue.ref(false);
27
23
  const error = vue.ref(null);
@@ -59,8 +55,7 @@ var StreamPlayer_default = vue.defineComponent({
59
55
  const onMessage = (m) => {
60
56
  const next = messages.value.slice();
61
57
  next.push(m);
62
- const limit = props.logLimit ?? 500;
63
- messages.value = next.length > limit ? next.slice(next.length - limit) : next;
58
+ messages.value = next.slice(-props.logLimit);
64
59
  emit("message", m);
65
60
  };
66
61
  unsubs.push(a.on("open", onOpen));
@@ -78,121 +73,37 @@ var StreamPlayer_default = vue.defineComponent({
78
73
  });
79
74
  }
80
75
  }
81
- function buildOptions() {
82
- const base = { ...props.config };
83
- if (props.type === "hls") {
84
- const cfg = base;
85
- if (videoRef.value) {
86
- videoRef.value.autoplay = props.autoplay;
87
- videoRef.value.controls = props.controls;
88
- videoRef.value.playsInline = props.playsInline;
89
- videoRef.value.muted = props.muted;
90
- }
91
- return { type: "hls", ...cfg, video: videoRef.value };
92
- }
93
- if (props.type === "webrtc") {
94
- const cfg = base;
95
- const attachVideo = cfg.attachVideo !== false;
96
- const onTrack = (ms) => {
97
- if (attachVideo && videoRef.value) {
98
- videoRef.value.srcObject = ms;
99
- videoRef.value.autoplay = props.autoplay;
100
- videoRef.value.controls = props.controls;
101
- videoRef.value.playsInline = props.playsInline;
102
- videoRef.value.muted = props.muted;
103
- }
104
- };
105
- return { type: "webrtc", ...cfg, onTrack };
106
- }
107
- return { type: props.type, ...base };
108
- }
109
- async function instantiate() {
76
+ async function instantiate(openNow = false) {
110
77
  destroyAPI();
111
- const opts = buildOptions();
112
- const newApi = jsStreaming.createStream(opts);
113
- api = newApi;
114
- bindAPI(newApi);
115
- if (props.autoOpen) await newApi.open();
116
- }
117
- function open() {
118
- api?.open();
119
- }
120
- function close() {
121
- api?.close();
78
+ const opts = { type: props.type, ...props.config, video: videoRef.value };
79
+ api = jsStreaming.createStream(opts);
80
+ bindAPI(api);
81
+ if (openNow) await api.open();
122
82
  }
123
- function send(d) {
124
- api?.send?.(d);
125
- }
126
- expose({ open, close, send, status, isOpen, error, messages });
127
- vue.onMounted(() => {
128
- void instantiate();
129
- });
130
- vue.onBeforeUnmount(() => {
131
- destroyAPI();
83
+ expose({
84
+ open: instantiate,
85
+ close: () => api?.close(),
86
+ send: (d) => api?.send?.(d)
132
87
  });
88
+ vue.onMounted(() => props.autoOpen && instantiate(true));
89
+ vue.onBeforeUnmount(destroyAPI);
133
90
  vue.watch(
134
91
  () => [props.type, props.config],
135
92
  () => {
136
- void instantiate();
137
- },
138
- { deep: true }
139
- );
140
- return () => {
141
- const children = [];
142
- if (props.type === "hls" || props.type === "webrtc") {
143
- children.push(
144
- vue.h("video", {
145
- ref: videoRef,
146
- playsinline: props.playsInline,
147
- controls: props.controls,
148
- autoplay: props.autoplay,
149
- muted: props.muted,
150
- ...props.videoAttrs,
151
- style: "width:100%;border-radius:12px;"
152
- })
153
- );
154
- } else {
155
- const lines = (messages.value || []).map(
156
- (m, i) => vue.h(
157
- "div",
158
- { key: i, style: "white-space:pre-wrap;word-break:break-word;" },
159
- typeof m === "string" ? m : JSON.stringify(m)
160
- )
161
- );
162
- const logBox = vue.h(
163
- "div",
164
- {
165
- style: "background:#0b1322;color:#e5e7eb;border:1px solid #1f2937;border-radius:10px;padding:8px;max-height:260px;overflow:auto;font:12px/1.5 ui-monospace,monospace;"
166
- },
167
- lines
168
- );
169
- children.push(
170
- slots.log ? slots.log({
171
- messages: messages.value,
172
- status: status.value,
173
- error: error.value
174
- }) : logBox
175
- );
93
+ props.autoOpen ? instantiate(true) : destroyAPI();
176
94
  }
177
- children.push(
178
- vue.h(
179
- "div",
180
- { style: "display:flex;gap:8px;flex-wrap:wrap;" },
181
- slots.actions ? slots.actions({
182
- open,
183
- close,
184
- send,
185
- isOpen: isOpen.value,
186
- status: status.value
187
- }) : []
188
- )
189
- );
190
- return vue.h(
191
- "div",
192
- { class: "usp", style: "display:grid;gap:8px;" },
193
- children
194
- );
195
- };
95
+ );
96
+ return () => props.type === "hls" || props.type === "webrtc" ? vue.h("video", {
97
+ ref: videoRef,
98
+ autoplay: props.autoplay,
99
+ controls: props.controls
100
+ }) : vue.h(
101
+ "div",
102
+ {},
103
+ messages.value.map(
104
+ (m, i) => vue.h("div", { key: i }, JSON.stringify(m))
105
+ )
106
+ );
196
107
  }
197
108
  });
198
109
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/StreamPlayer.ts"],"names":["defineComponent","ref","shallowRef","createStream","onMounted","onBeforeUnmount","watch","h"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\r\n defineComponent,\r\n h,\r\n ref,\r\n shallowRef,\r\n watch,\r\n onMounted,\r\n onBeforeUnmount,\r\n type PropType,\r\n} from \"vue\";\r\n\r\n// Import the core streaming functionality without its types\r\nimport { createStream } from \"js-streaming\";\r\n\r\n// Import local type definitions\r\nimport type {\r\n StreamAPI,\r\n StreamStatus,\r\n StreamType,\r\n AnyConfig,\r\n HLSConfig,\r\n WebRTCConfig,\r\n} from \"../types\";\r\n\r\nexport default defineComponent({\r\n name: \"StreamPlayer\",\r\n props: {\r\n type: { type: String as PropType<StreamType>, required: true },\r\n config: { type: Object as PropType<AnyConfig>, required: true },\r\n autoOpen: { type: Boolean, default: false },\r\n autoplay: { type: Boolean, default: false },\r\n controls: { type: Boolean, default: true },\r\n playsInline: { type: Boolean, default: true },\r\n muted: { type: Boolean, default: false },\r\n logLimit: { type: Number, default: 500 },\r\n videoAttrs: {\r\n type: Object as PropType<Partial<HTMLVideoElement>>,\r\n default: () => ({}),\r\n },\r\n },\r\n emits: [\"open\", \"close\", \"status\", \"error\", \"message\"],\r\n setup(props, { emit, slots, expose }) {\r\n const status = ref<StreamStatus>(\"idle\");\r\n const isOpen = ref(false);\r\n const error = ref<Error | null>(null);\r\n const messages = shallowRef<unknown[]>([]);\r\n const videoRef = ref<HTMLVideoElement | null>(null);\r\n\r\n let api: StreamAPI | null = null;\r\n let unsubs: Array<() => void> = [];\r\n\r\n function destroyAPI() {\r\n try {\r\n api?.close();\r\n } catch {}\r\n for (const off of unsubs) off();\r\n unsubs = [];\r\n api = null;\r\n isOpen.value = false;\r\n }\r\n\r\n function bindAPI(a: StreamAPI & { off?: StreamAPI[\"off\"] }) {\r\n const onOpen = () => {\r\n isOpen.value = true;\r\n emit(\"open\");\r\n };\r\n const onClose = () => {\r\n isOpen.value = false;\r\n emit(\"close\");\r\n };\r\n const onStatus = (s: StreamStatus) => {\r\n status.value = s;\r\n emit(\"status\", s);\r\n };\r\n const onError = (e: Error) => {\r\n error.value = e;\r\n emit(\"error\", e);\r\n };\r\n const onMessage = (m: unknown) => {\r\n const next = messages.value.slice();\r\n next.push(m);\r\n const limit = props.logLimit ?? 500;\r\n messages.value =\r\n next.length > limit ? next.slice(next.length - limit) : next;\r\n emit(\"message\", m);\r\n };\r\n\r\n unsubs.push(a.on(\"open\", onOpen));\r\n unsubs.push(a.on(\"close\", onClose));\r\n unsubs.push(a.on(\"status\", onStatus));\r\n unsubs.push(a.on(\"error\", onError));\r\n unsubs.push(a.on(\"message\", onMessage));\r\n\r\n if (a.off) {\r\n unsubs.push(() => {\r\n a.off!(\"open\", onOpen);\r\n a.off!(\"close\", onClose);\r\n a.off!(\"status\", onStatus);\r\n a.off!(\"error\", onError);\r\n a.off!(\"message\", onMessage);\r\n });\r\n }\r\n }\r\n\r\n function buildOptions(): any {\r\n const base = { ...(props.config as any) };\r\n\r\n if (props.type === \"hls\") {\r\n const cfg = base as HLSConfig;\r\n if (videoRef.value) {\r\n videoRef.value.autoplay = props.autoplay;\r\n videoRef.value.controls = props.controls;\r\n videoRef.value.playsInline = props.playsInline;\r\n videoRef.value.muted = props.muted;\r\n }\r\n return { type: \"hls\", ...cfg, video: videoRef.value! };\r\n }\r\n\r\n if (props.type === \"webrtc\") {\r\n const cfg = base as WebRTCConfig;\r\n const attachVideo = cfg.attachVideo !== false;\r\n const onTrack = (ms: MediaStream) => {\r\n if (attachVideo && videoRef.value) {\r\n videoRef.value.srcObject = ms;\r\n videoRef.value.autoplay = props.autoplay;\r\n videoRef.value.controls = props.controls;\r\n videoRef.value.playsInline = props.playsInline;\r\n videoRef.value.muted = props.muted;\r\n }\r\n };\r\n return { type: \"webrtc\", ...cfg, onTrack };\r\n }\r\n\r\n return { type: props.type, ...base };\r\n }\r\n\r\n async function instantiate() {\r\n destroyAPI();\r\n const opts = buildOptions();\r\n const newApi = createStream(opts) as StreamAPI & {\r\n off?: StreamAPI[\"off\"];\r\n };\r\n api = newApi;\r\n bindAPI(newApi);\r\n if (props.autoOpen) await newApi.open();\r\n }\r\n\r\n function open() {\r\n api?.open();\r\n }\r\n function close() {\r\n api?.close();\r\n }\r\n function send(d: unknown) {\r\n api?.send?.(d);\r\n }\r\n\r\n expose({ open, close, send, status, isOpen, error, messages });\r\n\r\n onMounted(() => {\r\n void instantiate();\r\n });\r\n onBeforeUnmount(() => {\r\n destroyAPI();\r\n });\r\n\r\n watch(\r\n () => [props.type, props.config],\r\n () => {\r\n void instantiate();\r\n },\r\n { deep: true }\r\n );\r\n\r\n // render (بدون SFC)\r\n return () => {\r\n const children: any[] = [];\r\n\r\n if (props.type === \"hls\" || props.type === \"webrtc\") {\r\n children.push(\r\n h(\"video\", {\r\n ref: videoRef,\r\n playsinline: props.playsInline,\r\n controls: props.controls,\r\n autoplay: props.autoplay,\r\n muted: props.muted,\r\n ...props.videoAttrs,\r\n style: \"width:100%;border-radius:12px;\",\r\n })\r\n );\r\n } else {\r\n const lines = (messages.value || []).map((m, i) =>\r\n h(\r\n \"div\",\r\n { key: i, style: \"white-space:pre-wrap;word-break:break-word;\" },\r\n typeof m === \"string\" ? m : JSON.stringify(m)\r\n )\r\n );\r\n const logBox = h(\r\n \"div\",\r\n {\r\n style:\r\n \"background:#0b1322;color:#e5e7eb;border:1px solid #1f2937;border-radius:10px;padding:8px;max-height:260px;overflow:auto;font:12px/1.5 ui-monospace,monospace;\",\r\n },\r\n lines\r\n );\r\n children.push(\r\n slots.log\r\n ? slots.log({\r\n messages: messages.value,\r\n status: status.value,\r\n error: error.value,\r\n })\r\n : logBox\r\n );\r\n }\r\n\r\n children.push(\r\n h(\r\n \"div\",\r\n { style: \"display:flex;gap:8px;flex-wrap:wrap;\" },\r\n slots.actions\r\n ? slots.actions({\r\n open,\r\n close,\r\n send,\r\n isOpen: isOpen.value,\r\n status: status.value,\r\n })\r\n : []\r\n )\r\n );\r\n\r\n return h(\r\n \"div\",\r\n { class: \"usp\", style: \"display:grid;gap:8px;\" },\r\n children\r\n );\r\n };\r\n },\r\n});\r\n"]}
1
+ {"version":3,"sources":["../src/components/StreamPlayer.ts"],"names":["defineComponent","ref","shallowRef","createStream","onMounted","onBeforeUnmount","watch","h"],"mappings":";;;;;;AAcA,IAAO,uBAAQA,mBAAA,CAAgB;AAAA,EAC7B,IAAA,EAAM,cAAA;AAAA,EACN,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAM,MAAA,EAAgC,UAAU,IAAA,EAAK;AAAA,IAC7D,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAyC,UAAU,IAAA,EAAK;AAAA,IACxE,QAAA,EAAU,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,KAAA,EAAM;AAAA,IAC1C,QAAA,EAAU,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,KAAA,EAAM;AAAA,IAC1C,QAAA,EAAU,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,IAAA,EAAK;AAAA,IACzC,WAAA,EAAa,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,IAAA,EAAK;AAAA,IAC5C,KAAA,EAAO,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,KAAA,EAAM;AAAA,IACvC,QAAA,EAAU,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,GAAA;AAAI,GACzC;AAAA,EACA,OAAO,CAAC,MAAA,EAAQ,OAAA,EAAS,QAAA,EAAU,SAAS,SAAS,CAAA;AAAA,EACrD,KAAA,CAAM,KAAA,EAAO,EAAE,IAAA,EAAM,QAAO,EAAG;AAC7B,IAAA,MAAM,MAAA,GAASC,QAAkB,MAAM,CAAA;AACvC,IAAA,MAAM,MAAA,GAASA,QAAI,KAAK,CAAA;AACxB,IAAA,MAAM,KAAA,GAAQA,QAAkB,IAAI,CAAA;AACpC,IAAA,MAAM,QAAA,GAAWC,cAAA,CAAsB,EAAE,CAAA;AACzC,IAAA,MAAM,QAAA,GAAWD,QAA6B,IAAI,CAAA;AAElD,IAAA,IAAI,GAAA,GAAwB,IAAA;AAC5B,IAAA,IAAI,SAA4B,EAAC;AAEjC,IAAA,SAAS,UAAA,GAAa;AACpB,MAAA,IAAI;AACF,QAAA,GAAA,EAAK,KAAA,EAAM;AAAA,MACb,CAAA,CAAA,MAAQ;AAAA,MAAC;AACT,MAAA,KAAA,MAAW,GAAA,IAAO,QAAQ,GAAA,EAAI;AAC9B,MAAA,MAAA,GAAS,EAAC;AACV,MAAA,GAAA,GAAM,IAAA;AACN,MAAA,MAAA,CAAO,KAAA,GAAQ,KAAA;AAAA,IACjB;AAEA,IAAA,SAAS,QAAQ,CAAA,EAAc;AAC7B,MAAA,MAAM,SAAS,MAAM;AACnB,QAAA,MAAA,CAAO,KAAA,GAAQ,IAAA;AACf,QAAA,IAAA,CAAK,MAAM,CAAA;AAAA,MACb,CAAA;AACA,MAAA,MAAM,UAAU,MAAM;AACpB,QAAA,MAAA,CAAO,KAAA,GAAQ,KAAA;AACf,QAAA,IAAA,CAAK,OAAO,CAAA;AAAA,MACd,CAAA;AACA,MAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAoB;AACpC,QAAA,MAAA,CAAO,KAAA,GAAQ,CAAA;AACf,QAAA,IAAA,CAAK,UAAU,CAAC,CAAA;AAAA,MAClB,CAAA;AACA,MAAA,MAAM,OAAA,GAAU,CAAC,CAAA,KAAa;AAC5B,QAAA,KAAA,CAAM,KAAA,GAAQ,CAAA;AACd,QAAA,IAAA,CAAK,SAAS,CAAC,CAAA;AAAA,MACjB,CAAA;AACA,MAAA,MAAM,SAAA,GAAY,CAAC,CAAA,KAAe;AAChC,QAAA,MAAM,IAAA,GAAO,QAAA,CAAS,KAAA,CAAM,KAAA,EAAM;AAClC,QAAA,IAAA,CAAK,KAAK,CAAC,CAAA;AACX,QAAA,QAAA,CAAS,KAAA,GAAQ,IAAA,CAAK,KAAA,CAAM,CAAC,MAAM,QAAQ,CAAA;AAC3C,QAAA,IAAA,CAAK,WAAW,CAAC,CAAA;AAAA,MACnB,CAAA;AAEA,MAAA,MAAA,CAAO,IAAA,CAAK,CAAA,CAAE,EAAA,CAAG,MAAA,EAAQ,MAAM,CAAC,CAAA;AAChC,MAAA,MAAA,CAAO,IAAA,CAAK,CAAA,CAAE,EAAA,CAAG,OAAA,EAAS,OAAO,CAAC,CAAA;AAClC,MAAA,MAAA,CAAO,IAAA,CAAK,CAAA,CAAE,EAAA,CAAG,QAAA,EAAU,QAAQ,CAAC,CAAA;AACpC,MAAA,MAAA,CAAO,IAAA,CAAK,CAAA,CAAE,EAAA,CAAG,OAAA,EAAS,OAAO,CAAC,CAAA;AAClC,MAAA,MAAA,CAAO,IAAA,CAAK,CAAA,CAAE,EAAA,CAAG,SAAA,EAAW,SAAS,CAAC,CAAA;AAEtC,MAAA,IAAK,EAAU,GAAA,EAAK;AAClB,QAAA,MAAA,CAAO,KAAK,MAAM;AAChB,UAAC,CAAA,CAAU,GAAA,CAAI,MAAA,EAAQ,MAAM,CAAA;AAC7B,UAAC,CAAA,CAAU,GAAA,CAAI,OAAA,EAAS,OAAO,CAAA;AAC/B,UAAC,CAAA,CAAU,GAAA,CAAI,QAAA,EAAU,QAAQ,CAAA;AACjC,UAAC,CAAA,CAAU,GAAA,CAAI,OAAA,EAAS,OAAO,CAAA;AAC/B,UAAC,CAAA,CAAU,GAAA,CAAI,SAAA,EAAW,SAAS,CAAA;AAAA,QACrC,CAAC,CAAA;AAAA,MACH;AAAA,IACF;AAEA,IAAA,eAAe,WAAA,CAAY,UAAU,KAAA,EAAO;AAC1C,MAAA,UAAA,EAAW;AACX,MAAA,MAAM,IAAA,GAAO,EAAE,IAAA,EAAM,KAAA,CAAM,IAAA,EAAM,GAAG,KAAA,CAAM,MAAA,EAAQ,KAAA,EAAO,QAAA,CAAS,KAAA,EAAM;AACxE,MAAA,GAAA,GAAME,yBAAa,IAAI,CAAA;AACvB,MAAA,OAAA,CAAQ,GAAG,CAAA;AACX,MAAA,IAAI,OAAA,EAAS,MAAM,GAAA,CAAI,IAAA,EAAK;AAAA,IAC9B;AAEA,IAAA,MAAA,CAAO;AAAA,MACL,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO,MAAM,GAAA,EAAK,KAAA,EAAM;AAAA,MACxB,IAAA,EAAM,CAAC,CAAA,KAAW,GAAA,EAAK,OAAO,CAAC;AAAA,KAChC,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM,KAAA,CAAM,QAAA,IAAY,WAAA,CAAY,IAAI,CAAC,CAAA;AACnD,IAAAC,mBAAA,CAAgB,UAAU,CAAA;AAE1B,IAAAC,SAAA;AAAA,MACE,MAAM,CAAC,KAAA,CAAM,IAAA,EAAM,MAAM,MAAM,CAAA;AAAA,MAC/B,MAAM;AACJ,QAAA,KAAA,CAAM,QAAA,GAAW,WAAA,CAAY,IAAI,CAAA,GAAI,UAAA,EAAW;AAAA,MAClD;AAAA,KACF;AAEA,IAAA,OAAO,MACL,MAAM,IAAA,KAAS,KAAA,IAAS,MAAM,IAAA,KAAS,QAAA,GACnCC,MAAE,OAAA,EAAS;AAAA,MACT,GAAA,EAAK,QAAA;AAAA,MACL,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,UAAU,KAAA,CAAM;AAAA,KACjB,CAAA,GACDA,KAAA;AAAA,MACE,KAAA;AAAA,MACA,EAAC;AAAA,MACD,SAAS,KAAA,CAAM,GAAA;AAAA,QAAI,CAAC,CAAA,EAAG,CAAA,KACrBA,KAAA,CAAE,KAAA,EAAO,EAAE,GAAA,EAAK,CAAA,EAAE,EAAG,IAAA,CAAK,SAAA,CAAU,CAAC,CAAC;AAAA;AACxC,KACF;AAAA,EACR;AACF,CAAC","file":"index.cjs","sourcesContent":["import {\r\n defineComponent,\r\n h,\r\n ref,\r\n shallowRef,\r\n watch,\r\n onMounted,\r\n onBeforeUnmount,\r\n type PropType,\r\n} from \"vue\";\r\n\r\nimport { createStream, type StreamAPI } from \"js-streaming\";\r\nimport type { StreamStatus, StreamType } from \"../types\";\r\n\r\nexport default defineComponent({\r\n name: \"StreamPlayer\",\r\n props: {\r\n type: { type: String as PropType<StreamType>, required: true },\r\n config: { type: Object as PropType<Record<string, any>>, required: true },\r\n autoOpen: { type: Boolean, default: false },\r\n autoplay: { type: Boolean, default: false },\r\n controls: { type: Boolean, default: true },\r\n playsInline: { type: Boolean, default: true },\r\n muted: { type: Boolean, default: false },\r\n logLimit: { type: Number, default: 500 },\r\n },\r\n emits: [\"open\", \"close\", \"status\", \"error\", \"message\"],\r\n setup(props, { emit, expose }) {\r\n const status = ref<StreamStatus>(\"idle\");\r\n const isOpen = ref(false);\r\n const error = ref<Error | null>(null);\r\n const messages = shallowRef<unknown[]>([]);\r\n const videoRef = ref<HTMLVideoElement | null>(null);\r\n\r\n let api: StreamAPI | null = null;\r\n let unsubs: Array<() => void> = [];\r\n\r\n function destroyAPI() {\r\n try {\r\n api?.close();\r\n } catch {}\r\n for (const off of unsubs) off();\r\n unsubs = [];\r\n api = null;\r\n isOpen.value = false;\r\n }\r\n\r\n function bindAPI(a: StreamAPI) {\r\n const onOpen = () => {\r\n isOpen.value = true;\r\n emit(\"open\");\r\n };\r\n const onClose = () => {\r\n isOpen.value = false;\r\n emit(\"close\");\r\n };\r\n const onStatus = (s: StreamStatus) => {\r\n status.value = s;\r\n emit(\"status\", s);\r\n };\r\n const onError = (e: Error) => {\r\n error.value = e;\r\n emit(\"error\", e);\r\n };\r\n const onMessage = (m: unknown) => {\r\n const next = messages.value.slice();\r\n next.push(m);\r\n messages.value = next.slice(-props.logLimit);\r\n emit(\"message\", m);\r\n };\r\n\r\n unsubs.push(a.on(\"open\", onOpen));\r\n unsubs.push(a.on(\"close\", onClose));\r\n unsubs.push(a.on(\"status\", onStatus));\r\n unsubs.push(a.on(\"error\", onError));\r\n unsubs.push(a.on(\"message\", onMessage));\r\n\r\n if ((a as any).off) {\r\n unsubs.push(() => {\r\n (a as any).off(\"open\", onOpen);\r\n (a as any).off(\"close\", onClose);\r\n (a as any).off(\"status\", onStatus);\r\n (a as any).off(\"error\", onError);\r\n (a as any).off(\"message\", onMessage);\r\n });\r\n }\r\n }\r\n\r\n async function instantiate(openNow = false) {\r\n destroyAPI();\r\n const opts = { type: props.type, ...props.config, video: videoRef.value };\r\n api = createStream(opts) as StreamAPI;\r\n bindAPI(api);\r\n if (openNow) await api.open();\r\n }\r\n\r\n expose({\r\n open: instantiate,\r\n close: () => api?.close(),\r\n send: (d: any) => api?.send?.(d),\r\n });\r\n\r\n onMounted(() => props.autoOpen && instantiate(true));\r\n onBeforeUnmount(destroyAPI);\r\n\r\n watch(\r\n () => [props.type, props.config],\r\n () => {\r\n props.autoOpen ? instantiate(true) : destroyAPI();\r\n }\r\n );\r\n\r\n return () =>\r\n props.type === \"hls\" || props.type === \"webrtc\"\r\n ? h(\"video\", {\r\n ref: videoRef,\r\n autoplay: props.autoplay,\r\n controls: props.controls,\r\n })\r\n : h(\r\n \"div\",\r\n {},\r\n messages.value.map((m, i) =>\r\n h(\"div\", { key: i }, JSON.stringify(m))\r\n )\r\n );\r\n },\r\n});\r\n"]}
package/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as vue from 'vue';
2
2
  import { PropType } from 'vue';
3
3
 
4
- type StreamType = "websocket" | "sse" | "http" | "long-polling" | "hls" | "webrtc";
4
+ type StreamType = "websocket" | "sse" | "http" | "long-polling" | "hls" | "webrtc" | "socketio";
5
5
  type StreamStatus = "idle" | "connecting" | "open" | "closing" | "closed" | "error";
6
6
  type AnyConfig = Record<string, unknown>;
7
7
  type HLSConfig = Omit<AnyConfig, "type" | "video">;
@@ -55,7 +55,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
55
55
  required: true;
56
56
  };
57
57
  config: {
58
- type: PropType<AnyConfig>;
58
+ type: PropType<Record<string, any>>;
59
59
  required: true;
60
60
  };
61
61
  autoOpen: {
@@ -82,10 +82,6 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
82
82
  type: NumberConstructor;
83
83
  default: number;
84
84
  };
85
- videoAttrs: {
86
- type: PropType<Partial<HTMLVideoElement>>;
87
- default: () => {};
88
- };
89
85
  }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
90
86
  [key: string]: any;
91
87
  }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("open" | "error" | "close" | "message" | "status")[], "open" | "error" | "close" | "message" | "status", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -94,7 +90,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
94
90
  required: true;
95
91
  };
96
92
  config: {
97
- type: PropType<AnyConfig>;
93
+ type: PropType<Record<string, any>>;
98
94
  required: true;
99
95
  };
100
96
  autoOpen: {
@@ -121,10 +117,6 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
121
117
  type: NumberConstructor;
122
118
  default: number;
123
119
  };
124
- videoAttrs: {
125
- type: PropType<Partial<HTMLVideoElement>>;
126
- default: () => {};
127
- };
128
120
  }>> & Readonly<{
129
121
  onOpen?: ((...args: any[]) => any) | undefined;
130
122
  onError?: ((...args: any[]) => any) | undefined;
@@ -132,13 +124,12 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
132
124
  onMessage?: ((...args: any[]) => any) | undefined;
133
125
  onStatus?: ((...args: any[]) => any) | undefined;
134
126
  }>, {
135
- playsInline: boolean;
127
+ autoOpen: boolean;
136
128
  autoplay: boolean;
137
129
  controls: boolean;
130
+ playsInline: boolean;
138
131
  muted: boolean;
139
- autoOpen: boolean;
140
132
  logLimit: number;
141
- videoAttrs: Partial<HTMLVideoElement>;
142
133
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
143
134
 
144
135
  export { type AnyConfig, type BaseOptions, type HLSConfig, type ListenerMap, type Message, type StreamAPI, type StreamAdapter, _default as StreamPlayer, type StreamState, type StreamStatus, type StreamType, _default as StreamingPlayer, type WebRTCConfig };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as vue from 'vue';
2
2
  import { PropType } from 'vue';
3
3
 
4
- type StreamType = "websocket" | "sse" | "http" | "long-polling" | "hls" | "webrtc";
4
+ type StreamType = "websocket" | "sse" | "http" | "long-polling" | "hls" | "webrtc" | "socketio";
5
5
  type StreamStatus = "idle" | "connecting" | "open" | "closing" | "closed" | "error";
6
6
  type AnyConfig = Record<string, unknown>;
7
7
  type HLSConfig = Omit<AnyConfig, "type" | "video">;
@@ -55,7 +55,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
55
55
  required: true;
56
56
  };
57
57
  config: {
58
- type: PropType<AnyConfig>;
58
+ type: PropType<Record<string, any>>;
59
59
  required: true;
60
60
  };
61
61
  autoOpen: {
@@ -82,10 +82,6 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
82
82
  type: NumberConstructor;
83
83
  default: number;
84
84
  };
85
- videoAttrs: {
86
- type: PropType<Partial<HTMLVideoElement>>;
87
- default: () => {};
88
- };
89
85
  }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
90
86
  [key: string]: any;
91
87
  }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("open" | "error" | "close" | "message" | "status")[], "open" | "error" | "close" | "message" | "status", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -94,7 +90,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
94
90
  required: true;
95
91
  };
96
92
  config: {
97
- type: PropType<AnyConfig>;
93
+ type: PropType<Record<string, any>>;
98
94
  required: true;
99
95
  };
100
96
  autoOpen: {
@@ -121,10 +117,6 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
121
117
  type: NumberConstructor;
122
118
  default: number;
123
119
  };
124
- videoAttrs: {
125
- type: PropType<Partial<HTMLVideoElement>>;
126
- default: () => {};
127
- };
128
120
  }>> & Readonly<{
129
121
  onOpen?: ((...args: any[]) => any) | undefined;
130
122
  onError?: ((...args: any[]) => any) | undefined;
@@ -132,13 +124,12 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
132
124
  onMessage?: ((...args: any[]) => any) | undefined;
133
125
  onStatus?: ((...args: any[]) => any) | undefined;
134
126
  }>, {
135
- playsInline: boolean;
127
+ autoOpen: boolean;
136
128
  autoplay: boolean;
137
129
  controls: boolean;
130
+ playsInline: boolean;
138
131
  muted: boolean;
139
- autoOpen: boolean;
140
132
  logLimit: number;
141
- videoAttrs: Partial<HTMLVideoElement>;
142
133
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
143
134
 
144
135
  export { type AnyConfig, type BaseOptions, type HLSConfig, type ListenerMap, type Message, type StreamAPI, type StreamAdapter, _default as StreamPlayer, type StreamState, type StreamStatus, type StreamType, _default as StreamingPlayer, type WebRTCConfig };