vue-streaming 0.1.0

package/dist/index.cjs

@@ -0,0 +1,202 @@
+'use strict';
+
+var vue = require('vue');
+var jsStreaming = require('js-streaming');
+
+// src/components/StreamPlayer.ts
+var StreamPlayer_default = vue.defineComponent({
+  name: "StreamPlayer",
+  props: {
+    type: { type: String, required: true },
+    config: { type: Object, required: true },
+    autoOpen: { type: Boolean, default: false },
+    autoplay: { type: Boolean, default: false },
+    controls: { type: Boolean, default: true },
+    playsInline: { type: Boolean, default: true },
+    muted: { type: Boolean, default: false },
+    logLimit: { type: Number, default: 500 },
+    videoAttrs: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["open", "close", "status", "error", "message"],
+  setup(props, { emit, slots, expose }) {
+    const status = vue.ref("idle");
+    const isOpen = vue.ref(false);
+    const error = vue.ref(null);
+    const messages = vue.shallowRef([]);
+    const videoRef = vue.ref(null);
+    let api = null;
+    let unsubs = [];
+    function destroyAPI() {
+      try {
+        api?.close();
+      } catch {
+      }
+      for (const off of unsubs) off();
+      unsubs = [];
+      api = null;
+      isOpen.value = false;
+    }
+    function bindAPI(a) {
+      const onOpen = () => {
+        isOpen.value = true;
+        emit("open");
+      };
+      const onClose = () => {
+        isOpen.value = false;
+        emit("close");
+      };
+      const onStatus = (s) => {
+        status.value = s;
+        emit("status", s);
+      };
+      const onError = (e) => {
+        error.value = e;
+        emit("error", e);
+      };
+      const onMessage = (m) => {
+        const next = messages.value.slice();
+        next.push(m);
+        const limit = props.logLimit ?? 500;
+        messages.value = next.length > limit ? next.slice(next.length - limit) : next;
+        emit("message", m);
+      };
+      unsubs.push(a.on("open", onOpen));
+      unsubs.push(a.on("close", onClose));
+      unsubs.push(a.on("status", onStatus));
+      unsubs.push(a.on("error", onError));
+      unsubs.push(a.on("message", onMessage));
+      if (a.off) {
+        unsubs.push(() => {
+          a.off("open", onOpen);
+          a.off("close", onClose);
+          a.off("status", onStatus);
+          a.off("error", onError);
+          a.off("message", onMessage);
+        });
+      }
+    }
+    function buildOptions() {
+      const base = { ...props.config };
+      if (props.type === "hls") {
+        const cfg = base;
+        if (videoRef.value) {
+          videoRef.value.autoplay = props.autoplay;
+          videoRef.value.controls = props.controls;
+          videoRef.value.playsInline = props.playsInline;
+          videoRef.value.muted = props.muted;
+        }
+        return { type: "hls", ...cfg, video: videoRef.value };
+      }
+      if (props.type === "webrtc") {
+        const cfg = base;
+        const attachVideo = cfg.attachVideo !== false;
+        const onTrack = (ms) => {
+          if (attachVideo && videoRef.value) {
+            videoRef.value.srcObject = ms;
+            videoRef.value.autoplay = props.autoplay;
+            videoRef.value.controls = props.controls;
+            videoRef.value.playsInline = props.playsInline;
+            videoRef.value.muted = props.muted;
+          }
+        };
+        return { type: "webrtc", ...cfg, onTrack };
+      }
+      return { type: props.type, ...base };
+    }
+    async function instantiate() {
+      destroyAPI();
+      const opts = buildOptions();
+      const newApi = jsStreaming.createStream(opts);
+      api = newApi;
+      bindAPI(newApi);
+      if (props.autoOpen) await newApi.open();
+    }
+    function open() {
+      api?.open();
+    }
+    function close() {
+      api?.close();
+    }
+    function send(d) {
+      api?.send?.(d);
+    }
+    expose({ open, close, send, status, isOpen, error, messages });
+    vue.onMounted(() => {
+      void instantiate();
+    });
+    vue.onBeforeUnmount(() => {
+      destroyAPI();
+    });
+    vue.watch(
+      () => [props.type, props.config],
+      () => {
+        void instantiate();
+      },
+      { deep: true }
+    );
+    return () => {
+      const children = [];
+      if (props.type === "hls" || props.type === "webrtc") {
+        children.push(
+          vue.h("video", {
+            ref: videoRef,
+            playsinline: props.playsInline,
+            controls: props.controls,
+            autoplay: props.autoplay,
+            muted: props.muted,
+            ...props.videoAttrs,
+            style: "width:100%;border-radius:12px;"
+          })
+        );
+      } else {
+        const lines = (messages.value || []).map(
+          (m, i) => vue.h(
+            "div",
+            { key: i, style: "white-space:pre-wrap;word-break:break-word;" },
+            typeof m === "string" ? m : JSON.stringify(m)
+          )
+        );
+        const logBox = vue.h(
+          "div",
+          {
+            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;"
+          },
+          lines
+        );
+        children.push(
+          slots.log ? slots.log({
+            messages: messages.value,
+            status: status.value,
+            error: error.value
+          }) : logBox
+        );
+      }
+      children.push(
+        vue.h(
+          "div",
+          { style: "display:flex;gap:8px;flex-wrap:wrap;" },
+          slots.actions ? slots.actions({
+            open,
+            close,
+            send,
+            isOpen: isOpen.value,
+            status: status.value
+          }) : []
+        )
+      );
+      return vue.h(
+        "div",
+        { class: "usp", style: "display:grid;gap:8px;" },
+        children
+      );
+    };
+  }
+});
+
+exports.StreamPlayer = StreamPlayer_default;
+exports.StreamingPlayer = StreamPlayer_default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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"]}

package/dist/index.d.cts

@@ -0,0 +1,144 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+type StreamType = "websocket" | "sse" | "http" | "long-polling" | "hls" | "webrtc";
+type StreamStatus = "idle" | "connecting" | "open" | "closing" | "closed" | "error";
+type AnyConfig = Record<string, unknown>;
+type HLSConfig = Omit<AnyConfig, "type" | "video">;
+type WebRTCConfig = Omit<AnyConfig, "type" | "onTrack"> & {
+    attachVideo?: boolean;
+};
+interface BaseOptions {
+    type: StreamType;
+    bufferLimit?: number;
+    autoReconnect?: boolean;
+    maxRetries?: number;
+    heartbeatMs?: number;
+    backoff?: {
+        baseMs?: number;
+        maxMs?: number;
+        factor?: number;
+        jitter?: boolean;
+    };
+}
+type Message = unknown;
+interface StreamState {
+    status: StreamStatus;
+    error: Error | null;
+    messages: Message[];
+    isOpen: boolean;
+}
+interface StreamAdapter {
+    open(): Promise<void> | void;
+    close(): Promise<void> | void;
+    send?(data: unknown): void;
+}
+type ListenerMap = {
+    open: (() => void)[];
+    close: (() => void)[];
+    error: ((err: Error) => void)[];
+    message: ((msg: Message) => void)[];
+    status: ((s: StreamStatus) => void)[];
+};
+interface StreamAPI {
+    open(): Promise<void>;
+    close(): Promise<void>;
+    send?(data: unknown): void;
+    on<T extends keyof ListenerMap>(evt: T, cb: ListenerMap[T][number]): () => void;
+    off<T extends keyof ListenerMap>(evt: T, cb: ListenerMap[T][number]): void;
+    readonly state: Readonly<StreamState>;
+}
+
+declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
+    type: {
+        type: PropType<StreamType>;
+        required: true;
+    };
+    config: {
+        type: PropType<AnyConfig>;
+        required: true;
+    };
+    autoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    playsInline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    muted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    logLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    videoAttrs: {
+        type: PropType<Partial<HTMLVideoElement>>;
+        default: () => {};
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("open" | "error" | "close" | "message" | "status")[], "open" | "error" | "close" | "message" | "status", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    type: {
+        type: PropType<StreamType>;
+        required: true;
+    };
+    config: {
+        type: PropType<AnyConfig>;
+        required: true;
+    };
+    autoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    playsInline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    muted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    logLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    videoAttrs: {
+        type: PropType<Partial<HTMLVideoElement>>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onMessage?: ((...args: any[]) => any) | undefined;
+    onStatus?: ((...args: any[]) => any) | undefined;
+}>, {
+    playsInline: boolean;
+    autoplay: boolean;
+    controls: boolean;
+    muted: boolean;
+    autoOpen: boolean;
+    logLimit: number;
+    videoAttrs: Partial<HTMLVideoElement>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+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

@@ -0,0 +1,144 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+type StreamType = "websocket" | "sse" | "http" | "long-polling" | "hls" | "webrtc";
+type StreamStatus = "idle" | "connecting" | "open" | "closing" | "closed" | "error";
+type AnyConfig = Record<string, unknown>;
+type HLSConfig = Omit<AnyConfig, "type" | "video">;
+type WebRTCConfig = Omit<AnyConfig, "type" | "onTrack"> & {
+    attachVideo?: boolean;
+};
+interface BaseOptions {
+    type: StreamType;
+    bufferLimit?: number;
+    autoReconnect?: boolean;
+    maxRetries?: number;
+    heartbeatMs?: number;
+    backoff?: {
+        baseMs?: number;
+        maxMs?: number;
+        factor?: number;
+        jitter?: boolean;
+    };
+}
+type Message = unknown;
+interface StreamState {
+    status: StreamStatus;
+    error: Error | null;
+    messages: Message[];
+    isOpen: boolean;
+}
+interface StreamAdapter {
+    open(): Promise<void> | void;
+    close(): Promise<void> | void;
+    send?(data: unknown): void;
+}
+type ListenerMap = {
+    open: (() => void)[];
+    close: (() => void)[];
+    error: ((err: Error) => void)[];
+    message: ((msg: Message) => void)[];
+    status: ((s: StreamStatus) => void)[];
+};
+interface StreamAPI {
+    open(): Promise<void>;
+    close(): Promise<void>;
+    send?(data: unknown): void;
+    on<T extends keyof ListenerMap>(evt: T, cb: ListenerMap[T][number]): () => void;
+    off<T extends keyof ListenerMap>(evt: T, cb: ListenerMap[T][number]): void;
+    readonly state: Readonly<StreamState>;
+}
+
+declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
+    type: {
+        type: PropType<StreamType>;
+        required: true;
+    };
+    config: {
+        type: PropType<AnyConfig>;
+        required: true;
+    };
+    autoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    playsInline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    muted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    logLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    videoAttrs: {
+        type: PropType<Partial<HTMLVideoElement>>;
+        default: () => {};
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("open" | "error" | "close" | "message" | "status")[], "open" | "error" | "close" | "message" | "status", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    type: {
+        type: PropType<StreamType>;
+        required: true;
+    };
+    config: {
+        type: PropType<AnyConfig>;
+        required: true;
+    };
+    autoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    playsInline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    muted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    logLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    videoAttrs: {
+        type: PropType<Partial<HTMLVideoElement>>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onMessage?: ((...args: any[]) => any) | undefined;
+    onStatus?: ((...args: any[]) => any) | undefined;
+}>, {
+    playsInline: boolean;
+    autoplay: boolean;
+    controls: boolean;
+    muted: boolean;
+    autoOpen: boolean;
+    logLimit: number;
+    videoAttrs: Partial<HTMLVideoElement>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+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 };