@webitel/ui-sdk 25.10.52 → 25.10.54

package/src/components/wt-vidstack-player/wt-vidstack-player.vue

@@ -6,6 +6,7 @@
     <media-player
       ref="player"
       :src="playerSrc"
+      :autoplay="props.autoplay"
       class="wt-vidstack-player__player"
       cross-origin
       plays-inline
@@ -18,6 +19,8 @@
         :autoplay="props.autoplay"
         :title="props.title"
         :username="props.username"
+        :session="props.session"
+        :mode="mode"
         @close-player="emit('close')"
       />
 
@@ -30,10 +33,12 @@ import 'vidstack/player';
 import 'vidstack/player/ui';
 
 import type { MediaPlayerElement } from 'vidstack/elements';
-import {computed, defineEmits, defineProps, provide, ref, useTemplateRef, watch} from 'vue';
+import {computed, defineEmits, defineProps, onMounted,provide, ref, useTemplateRef} from 'vue';
 
-import { ComponentSize } from '../../enums';
+import {ComponentSize} from '../../enums';
 import VideoLayout from './components/layouts/video-layout.vue';
+import {WtVidstakPlayerControlsMode} from "./types/WtVidstackPlayerControlsMode";
+import {WtVidstackPlayerSession} from "./types/WtVidstackPlayerSession";
 
 interface Props {
   src: string | { src: string; type?: string };
@@ -42,6 +47,9 @@ interface Props {
   title?: string;
   username?: string;
   closable?: boolean;
+  stream?: MediaStream
+  mode: WtVidstakPlayerControlsMode;
+  session?: WtVidstackPlayerSession
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -50,6 +58,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: '',
   username: '',
   closable: false,
+  mode: 'media',
 });
 
 const emit = defineEmits<{
@@ -90,7 +99,19 @@ const playerSrc = computed(() => {
   };
 });
 
-
+/** @author @Oleksandr Palonnyi
+ * Attach MediaStream to Vidstack player after mount.
+ * A short delay ensures the internal <video> is ready before playback.
+ */
+onMounted(async () => {
+  if (player.value && props.mode === 'stream') {
+    setTimeout(async () => {
+      const videoEl = player.value.querySelector('video')
+      videoEl.srcObject = props.stream
+      await videoEl.play().catch((err) => console.error('play error:', err))
+    }, 100)
+  }
+})
 </script>
 
 <style scoped lang="scss">

package/src/plugins/primevue/theme/components/components.js

@@ -9,7 +9,7 @@ import image from './image/image.js';
 import menubar from './menubar/menubar.js';
 import popover from './popover/popover.js';
 import radio from './radio/radio.js';
-import slider from './slider/slider.js'
+import slider from './slider/slider.js';
 import switcher from './switcher/switcher.js';
 import table from './table/table.js';
 import toolbar from './toolbar/toolbar.js';
@@ -30,7 +30,6 @@ const components = {
   radiobutton: radio,
   slider,
   tooltip,
-  checkbox,
   datatable: table,
   toolbar,
 };

package/src/plugins/primevue/theme/extend/player/player.js

@@ -0,0 +1,15 @@
+const generateCustomSharingPanelSizeCss = ({ size, dt }) => `
+        .screen-sharing-control-panel--${size} .screen-sharing-control-panel__actions {
+            gap: ${dt(`player-control-bar-${size}-gap`)};
+            border-radius: ${dt(`player-control-bar-${size}-border-radius`)};
+            padding: ${dt(`player-control-bar-${size}-padding`)};
+        }
+`;
+
+const playerCss = ({ dt }) => `
+    ${generateCustomSharingPanelSizeCss({ size: 'sm', dt })}
+    ${generateCustomSharingPanelSizeCss({ size: 'md', dt })}
+    ${generateCustomSharingPanelSizeCss({ size: 'lg', dt })}
+`;
+
+export { playerCss };

package/src/plugins/primevue/theme/webitel-theme.js

@@ -1,10 +1,11 @@
 import { definePreset } from '@primeuix/themes';
 import Aura from '@primeuix/themes/aura';
+import extend from '@webitel/styleguide/extend';
 import primitive from '@webitel/styleguide/primitive';
 import semantic from '@webitel/styleguide/semantic';
 
 import components from './components/components';
-import extend from './extend/extend';
+import { playerCss } from './extend/player/player.js';
 
 const WebitelTheme = definePreset(Aura, {
   semantic,
@@ -13,6 +14,10 @@ const WebitelTheme = definePreset(Aura, {
 
   extend,
 
+  css: ({ dt }) => `
+    ${playerCss({ dt })}
+  `,
+
   primitive,
 });
 

package/types/components/wt-image/wt-image.vue.d.ts

@@ -23,6 +23,7 @@ type __VLS_Props = {
     overlayIcon?: string;
     overlayIconPrefix?: string;
 };
+declare const emit: (event: "click", ...args: any[]) => void;
 declare const width: import("vue").ComputedRef<string | number>;
 declare const height: import("vue").ComputedRef<string | number>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
@@ -35,10 +36,19 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     IconColor: typeof IconColor;
+    emit: typeof emit;
     width: typeof width;
     height: typeof height;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (...args: any[]) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (...args: any[]) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/types/components/wt-vidstack-player/components/layouts/video-layout.vue.d.ts

@@ -1,11 +1,15 @@
+import { WtVidstakPlayerControlsMode } from "../../types/WtVidstackPlayerControlsMode";
+import { WtVidstackPlayerSession } from "../../types/WtVidstackPlayerSession";
 type __VLS_Props = {
     title?: string;
     username?: string;
     closable?: boolean;
+    mode: WtVidstakPlayerControlsMode;
+    session: WtVidstackPlayerSession;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "close-player": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onClose-player"?: () => any;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/types/components/wt-vidstack-player/components/panels/screen-sharing-control-panel/screen-sharing-control-panel.vue.d.ts

@@ -0,0 +1,6 @@
+import { WtVidstackPlayerSession } from "../../../types/WtVidstackPlayerSession";
+interface Props {
+    session: WtVidstackPlayerSession;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/types/components/wt-vidstack-player/types/WtVidstackPlayerControlsMode.d.ts

@@ -0,0 +1,5 @@
+export declare const WtVidstakPlayerControlsMode: {
+    readonly STREAM: "stream";
+    readonly MEDIA: "media";
+};
+export type WtVidstakPlayerControlsMode = (typeof WtVidstakPlayerControlsMode)[keyof typeof WtVidstakPlayerControlsMode];

package/types/components/wt-vidstack-player/types/WtVidstackPlayerSession.d.ts

@@ -0,0 +1,7 @@
+export interface WtVidstackPlayerSession {
+    close: () => void;
+    screenshot: () => void;
+    stopRecord: () => void;
+    startRecord: () => void;
+    recordings: boolean;
+}

package/types/components/wt-vidstack-player/wt-vidstack-player.vue.d.ts

@@ -1,5 +1,7 @@
 import 'vidstack/player';
 import 'vidstack/player/ui';
+import { WtVidstakPlayerControlsMode } from "./types/WtVidstackPlayerControlsMode";
+import { WtVidstackPlayerSession } from "./types/WtVidstackPlayerSession";
 interface Props {
     src: string | {
         src: string;
@@ -10,6 +12,9 @@ interface Props {
     title?: string;
     username?: string;
     closable?: boolean;
+    stream?: MediaStream;
+    mode: WtVidstakPlayerControlsMode;
+    session?: WtVidstackPlayerSession;
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
@@ -17,6 +22,7 @@ declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, imp
     onClose?: () => any;
 }>, {
     title: string;
+    mode: WtVidstakPlayerControlsMode;
     username: string;
     autoplay: boolean;
     mime: string;

package/types/plugins/primevue/theme/extend/player/player.d.ts

@@ -0,0 +1,3 @@
+export function playerCss({ dt }: {
+    dt: any;
+}): string;

package/dist/vidstack-54Jpr2Lq-B-3uagaf.js

@@ -1,142 +0,0 @@
-import { R as g, I as p, S as u, B as C, d as f, o as h } from "./install-hlMLq0U3.js";
-function m() {
-  return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
-}
-function w() {
-  var a;
-  return !!((a = window.cast) != null && a.framework);
-}
-function E() {
-  var a, e;
-  return !!((e = (a = window.chrome) == null ? void 0 : a.cast) != null && e.isAvailable);
-}
-function l() {
-  return s().getCastState() === cast.framework.CastState.CONNECTED;
-}
-function s() {
-  return window.cast.framework.CastContext.getInstance();
-}
-function d() {
-  return s().getCurrentSession();
-}
-function v() {
-  var a;
-  return (a = d()) == null ? void 0 : a.getSessionObj().media[0];
-}
-function k(a) {
-  var t;
-  return ((t = v()) == null ? void 0 : t.media.contentId) === (a == null ? void 0 : a.src);
-}
-function y() {
-  return {
-    language: "en-US",
-    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
-    receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
-    resumeSavedSession: !0,
-    androidReceiverCompatible: !0
-  };
-}
-function S(a) {
-  return `Google Cast Error Code: ${a}`;
-}
-function b(a, e) {
-  return g(s(), a, e);
-}
-class I {
-  constructor() {
-    this.name = "google-cast";
-  }
-  /**
-   * @see {@link https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastContext}
-   */
-  get cast() {
-    return s();
-  }
-  mediaType() {
-    return "video";
-  }
-  canPlay(e) {
-    return p && !C && u(e);
-  }
-  async prompt(e) {
-    var i;
-    let t, o, r;
-    try {
-      t = await this.Ej(e), this.f || (this.f = new cast.framework.RemotePlayer(), new cast.framework.RemotePlayerController(this.f)), o = e.player.createEvent("google-cast-prompt-open", {
-        trigger: t
-      }), e.player.dispatchEvent(o), this.Ce(e, "connecting", o), await this.Fj(f(e.$props.googleCast)), e.$state.remotePlaybackInfo.set({
-        deviceName: (i = d()) == null ? void 0 : i.getCastDevice().friendlyName
-      }), l() && this.Ce(e, "connected", o);
-    } catch (n) {
-      const c = n instanceof Error ? n : this.De(
-        (n + "").toUpperCase(),
-        "Prompt failed."
-      );
-      throw r = e.player.createEvent("google-cast-prompt-error", {
-        detail: c,
-        trigger: o ?? t,
-        cancelable: !0
-      }), e.player.dispatch(r), this.Ce(
-        e,
-        l() ? "connected" : "disconnected",
-        r
-      ), c;
-    } finally {
-      e.player.dispatch("google-cast-prompt-close", {
-        trigger: r ?? o ?? t
-      });
-    }
-  }
-  async load(e) {
-    if (!this.f)
-      throw Error("[vidstack] google cast player was not initialized");
-    return new (await import("./vidstack-google-cast-hKSzmdiF.js")).GoogleCastProvider(this.f, e);
-  }
-  async Ej(e) {
-    if (w())
-      return;
-    const t = e.player.createEvent("google-cast-load-start");
-    e.player.dispatch(t), await h(m()), await customElements.whenDefined("google-cast-launcher");
-    const o = e.player.createEvent("google-cast-loaded", { trigger: t });
-    if (e.player.dispatch(o), !E())
-      throw this.De("CAST_NOT_AVAILABLE", "Google Cast not available on this platform.");
-    return o;
-  }
-  async Fj(e) {
-    this.Gj(e);
-    const t = await this.cast.requestSession();
-    if (t)
-      throw this.De(
-        t.toUpperCase(),
-        S(t)
-      );
-  }
-  Gj(e) {
-    var t;
-    (t = this.cast) == null || t.setOptions({
-      ...y(),
-      ...e
-    });
-  }
-  Ce(e, t, o) {
-    const r = { type: "google-cast", state: t };
-    e.delegate.c("remote-playback-change", r, o);
-  }
-  De(e, t) {
-    const o = Error(t);
-    return o.code = e, o;
-  }
-}
-const A = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  GoogleCastLoader: I
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  d as a,
-  v as b,
-  S as c,
-  s as g,
-  k as h,
-  b as l,
-  A as v
-};

package/dist/vidstack-BP-l85ST-cd089zs4.js

@@ -1,21 +0,0 @@
-import { c, a as s, e as r } from "./install-hlMLq0U3.js";
-var d = '<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7C5.63181 7 5.33333 7.29848 5.33333 7.66667V14.8667C5.33333 14.9403 5.39361 14.9999 5.46724 15.0009C10.8844 15.0719 15.2614 19.449 15.3325 24.8661C15.3334 24.9397 15.393 25 15.4667 25H26C26.3682 25 26.6667 24.7015 26.6667 24.3333V7.66667C26.6667 7.29848 26.3682 7 26 7H6ZM17.0119 22.2294C17.0263 22.29 17.0802 22.3333 17.1425 22.3333H23.3333C23.7015 22.3333 24 22.0349 24 21.6667V10.3333C24 9.96514 23.7015 9.66667 23.3333 9.66667H8.66667C8.29848 9.66667 8 9.96514 8 10.3333V13.1909C8 13.2531 8.04332 13.3071 8.10392 13.3214C12.5063 14.3618 15.9715 17.827 17.0119 22.2294Z" fill="currentColor"/> <path d="M13.2 25C13.2736 25 13.3334 24.9398 13.3322 24.8661C13.2615 20.5544 9.77889 17.0718 5.46718 17.0011C5.39356 16.9999 5.33333 17.0597 5.33333 17.1333V18.8667C5.33333 18.9403 5.39348 18.9999 5.4671 19.0015C8.67465 19.0716 11.2617 21.6587 11.3319 24.8662C11.3335 24.9399 11.393 25 11.4667 25H13.2Z" fill="currentColor"/> <path d="M5.33333 21.1333C5.33333 21.0597 5.39332 20.9998 5.46692 21.0022C7.57033 21.0712 9.26217 22.763 9.33114 24.8664C9.33356 24.94 9.27364 25 9.2 25H6C5.63181 25 5.33333 24.7015 5.33333 24.3333V21.1333Z" fill="currentColor"/>';
-const i = /* @__PURE__ */ s(
-  '<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"></svg>'
-);
-function m(o, C) {
-  const a = c(i);
-  a.innerHTML = d, o.append(a);
-  const e = document.createElement("span");
-  e.classList.add("vds-google-cast-info"), o.append(e);
-  const n = document.createElement("span");
-  n.classList.add("vds-google-cast-device-name"), r(() => {
-    const { remotePlaybackInfo: l } = C, t = l();
-    return t != null && t.deviceName && (n.textContent = t.deviceName, e.append("Google Cast on ", n)), () => {
-      e.textContent = "";
-    };
-  });
-}
-export {
-  m as insertContent
-};

package/dist/vidstack-BTBUzdbF-BuhaE3ef.js

@@ -1,29 +0,0 @@
-const f = /(?:https:\/\/)?(?:player\.)?vimeo(?:\.com)?\/(?:video\/)?(\d+)(?:\?hash=(.*))?/, t = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
-function g(n) {
-  const o = n.match(f);
-  return { videoId: o == null ? void 0 : o[1], hash: o == null ? void 0 : o[2] };
-}
-async function b(n, o) {
-  if (t.has(n))
-    return t.get(n);
-  if (i.has(n))
-    return i.get(n);
-  const p = `https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/${n}`, c = window.fetch(p, {
-    mode: "cors",
-    signal: o.signal
-  }).then((e) => e.json()).then((e) => {
-    var m, h;
-    const l = /vimeocdn.com\/video\/(.*)?_/, s = (h = (m = e == null ? void 0 : e.thumbnail_url) == null ? void 0 : m.match(l)) == null ? void 0 : h[1], u = s ? `https://i.vimeocdn.com/video/${s}_1920x1080.webp` : "", r = {
-      title: (e == null ? void 0 : e.title) ?? "",
-      duration: (e == null ? void 0 : e.duration) ?? 0,
-      poster: u,
-      pro: e.account_type !== "basic"
-    };
-    return t.set(n, r), r;
-  }).finally(() => i.delete(n));
-  return i.set(n, c), c;
-}
-export {
-  b as getVimeoVideoInfo,
-  g as resolveVimeoVideoId
-};

package/dist/vidstack-Ccp8mxka-Cyoe3N05.js

@@ -1,20 +0,0 @@
-import { m as i, k as t } from "./install-hlMLq0U3.js";
-class n {
-  constructor(s) {
-    this.La = s;
-  }
-  Xa() {
-    i(this.ya) && this.fg();
-  }
-  $() {
-    t(this.ya) && window.cancelAnimationFrame(this.ya), this.ya = void 0;
-  }
-  fg() {
-    this.ya = window.requestAnimationFrame(() => {
-      i(this.ya) || (this.La(), this.fg());
-    });
-  }
-}
-export {
-  n as R
-};