@webitel/ui-sdk 25.10.57 → 25.10.58

package/dist/{vidstack-Bq6c3Bam-BYiLfDL7.js → vidstack-Bq6c3Bam-B986laoT.js}

@@ -5,8 +5,8 @@ var ot = (n) => {
 var Xt = (n, t, s) => t in n ? Qt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[t] = s;
 var M = (n, t, s) => Xt(n, typeof t != "symbol" ? t + "" : t, s), X = (n, t, s) => t.has(n) || ot("Cannot " + s);
 var i = (n, t, s) => (X(n, t, "read from private field"), s ? s.call(n) : t.get(n)), d = (n, t, s) => t.has(n) ? ot("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, s), c = (n, t, s, r) => (X(n, t, "write to private field"), r ? r.call(n, s) : t.set(n, s), s), a = (n, t, s) => (X(n, t, "access private method"), s);
-import { y as Yt, x as ut, z as j, A as Zt, b as ti, E as nt, e as lt, B as _, C as ii, F as ei, d as si, G as ai, l as rt, H as dt, D as ni, L as Y, J as Z } from "./install-BA-wW2x7.js";
-import { R as ri } from "./vidstack-DqAw8m9J-D4-vRGk-.js";
+import { y as Yt, x as ut, z as j, A as Zt, b as ti, E as nt, e as lt, B as _, C as ii, F as ei, d as si, G as ai, l as rt, H as dt, D as ni, L as Y, J as Z } from "./install-CSFHmKMg.js";
+import { R as ri } from "./vidstack-DqAw8m9J-He_m3NxW.js";
 let q = null, z = [], J = [];
 function ht() {
   return q ?? (q = new AudioContext());

package/dist/{vidstack-D2pY00kU-CVWx-yHP.js → vidstack-D2pY00kU-CanI4lQe.js}

@@ -5,7 +5,7 @@ var w = (t) => {
 var P = (t, e, a) => e in t ? _(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
 var u = (t, e, a) => P(t, typeof e != "symbol" ? e + "" : e, a), C = (t, e, a) => e.has(t) || w("Cannot " + a);
 var c = (t, e, a) => (C(t, e, "read from private field"), a ? a.call(t) : e.get(t)), m = (t, e, a) => e.has(t) ? w("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), y = (t, e, a, o) => (C(t, e, "write to private field"), o ? o.call(t, a) : e.set(t, a), a), s = (t, e, a) => (C(t, e, "access private method"), a);
-import { l as b, h as A, S as O, C as D, d as R, m as M } from "./install-BA-wW2x7.js";
+import { l as b, h as A, S as O, C as D, d as R, m as M } from "./install-CSFHmKMg.js";
 function G() {
   return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
 }
@@ -94,7 +94,7 @@ class F {
   async load(e) {
     if (!c(this, n))
       throw Error("[vidstack] google cast player was not initialized");
-    return new (await import("./vidstack-google-cast-CT40gY6Z.js")).GoogleCastProvider(c(this, n), e);
+    return new (await import("./vidstack-google-cast-CQk0kX_z.js")).GoogleCastProvider(c(this, n), e);
   }
 }
 n = new WeakMap(), r = new WeakSet(), S = async function(e) {

package/dist/{vidstack-DDXt6fpN-BagNaE5J.js → vidstack-DDXt6fpN-Dqmm7fj6.js}

@@ -5,7 +5,7 @@ var g = (s) => {
 var w = (s, t, i) => t in s ? y(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
 var c = (s, t, i) => w(s, typeof t != "symbol" ? t + "" : t, i), h = (s, t, i) => t.has(s) || g("Cannot " + i);
 var e = (s, t, i) => (h(s, t, "read from private field"), i ? i.call(s) : t.get(s)), l = (s, t, i) => t.has(s) ? g("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, i), p = (s, t, i, a) => (h(s, t, "write to private field"), a ? a.call(s, i) : t.set(s, i), i), u = (s, t, i) => (h(s, t, "access private method"), i);
-import { J as M, l as f, e as A, d as P, R as O, b as S } from "./install-BA-wW2x7.js";
+import { J as M, l as f, e as A, d as P, R as O, b as S } from "./install-CSFHmKMg.js";
 var r, o, b, m;
 class W {
   constructor(t) {

package/dist/{vidstack-D_-9AA6_-DrRiBDDV.js → vidstack-D_-9AA6_-BN_hFKDq.js}

@@ -1,4 +1,4 @@
-import { c as d, a as i, I as l, e as m } from "./install-BA-wW2x7.js";
+import { c as d, a as i, I as l, e as m } from "./install-CSFHmKMg.js";
 const p = /* @__PURE__ */ i(
   '<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"></svg>'
 );

package/dist/{vidstack-DqAw8m9J-D4-vRGk-.js → vidstack-DqAw8m9J-He_m3NxW.js}

@@ -3,7 +3,7 @@ var l = (i) => {
 };
 var c = (i, t, s) => t.has(i) || l("Cannot " + s);
 var r = (i, t, s) => (c(i, t, "read from private field"), s ? s.call(i) : t.get(i)), e = (i, t, s) => t.has(i) ? l("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), h = (i, t, s, f) => (c(i, t, "write to private field"), f ? f.call(i, s) : t.set(i, s), s), m = (i, t, s) => (c(i, t, "access private method"), s);
-import { j as p, t as u } from "./install-BA-wW2x7.js";
+import { j as p, t as u } from "./install-CSFHmKMg.js";
 var o, a, n, d;
 class F {
   constructor(t) {

package/dist/{vidstack-audio-BfGSVaa3.js → vidstack-audio-C8PKjqvV.js}

@@ -1,8 +1,8 @@
 var a = Object.defineProperty;
 var o = (i, e, t) => e in i ? a(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
 var r = (i, e, t) => o(i, typeof e != "symbol" ? e + "" : e, t);
-import { s as p } from "./install-BA-wW2x7.js";
-import { H as d, a as u } from "./vidstack-Bq6c3Bam-BYiLfDL7.js";
+import { s as p } from "./install-CSFHmKMg.js";
+import { H as d, a as u } from "./vidstack-Bq6c3Bam-B986laoT.js";
 class n extends d {
   constructor(t, s) {
     super(t, s);

package/dist/{vidstack-dash-V4qbr09v.js → vidstack-dash-B7oepLjG.js}

@@ -5,9 +5,9 @@ var Y = (n) => {
 var wt = (n, t, e) => t in n ? vt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var I = (n, t, e) => wt(n, typeof t != "symbol" ? t + "" : t, e), b = (n, t, e) => t.has(n) || Y("Cannot " + e);
 var i = (n, t, e) => (b(n, t, "read from private field"), e ? e.call(n) : t.get(n)), f = (n, t, e) => t.has(n) ? Y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, e), p = (n, t, e, r) => (b(n, t, "write to private field"), r ? r.call(n, e) : t.set(n, e), e), h = (n, t, e) => (b(n, t, "access private method"), e);
-import { o as Et, b as _, p as Lt, d as At, Q as z, l as J, e as Dt, D as N, f as xt, g as O, T as Mt, L as q, q as Ct, r as Nt, t as Rt, h as Ft, j as Z, k as Pt, m as qt, n as _t } from "./install-BA-wW2x7.js";
-import { VideoProvider as $t } from "./vidstack-video-HjNlMLft.js";
-import { R as jt } from "./vidstack-DqAw8m9J-D4-vRGk-.js";
+import { o as Et, b as _, p as Lt, d as At, Q as z, l as J, e as Dt, D as N, f as xt, g as O, T as Mt, L as q, q as Ct, r as Nt, t as Rt, h as Ft, j as Z, k as Pt, m as qt, n as _t } from "./install-CSFHmKMg.js";
+import { VideoProvider as $t } from "./vidstack-video-hLjkIjzA.js";
+import { R as jt } from "./vidstack-DqAw8m9J-He_m3NxW.js";
 function W(n) {
   try {
     return new Intl.DisplayNames(navigator.languages, { type: "language" }).of(n) ?? null;

package/dist/{vidstack-google-cast-CT40gY6Z.js → vidstack-google-cast-CQk0kX_z.js}

@@ -5,9 +5,9 @@ var W = (d) => {
 var vt = (d, t, s) => t in d ? Lt(d, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : d[t] = s;
 var G = (d, t, s) => vt(d, typeof t != "symbol" ? t + "" : t, s), O = (d, t, s) => t.has(d) || W("Cannot " + s);
 var e = (d, t, s) => (O(d, t, "read from private field"), s ? s.call(d) : t.get(d)), T = (d, t, s) => t.has(d) ? W("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(d) : t.set(d, s), l = (d, t, s, i) => (O(d, t, "write to private field"), i ? i.call(d, s) : t.set(d, s), s), r = (d, t, s) => (O(d, t, "access private method"), s);
-import { y as St, K as L, U as Z, x as At, D as tt, d as V, l as et, e as It, V as bt, L as Rt } from "./install-BA-wW2x7.js";
-import { R as wt } from "./vidstack-DqAw8m9J-D4-vRGk-.js";
-import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-CVWx-yHP.js";
+import { y as St, K as L, U as Z, x as At, D as tt, d as V, l as et, e as It, V as bt, L as Rt } from "./install-CSFHmKMg.js";
+import { R as wt } from "./vidstack-DqAw8m9J-He_m3NxW.js";
+import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-CanI4lQe.js";
 var g, _, at;
 class _t {
   constructor(t) {

package/dist/{vidstack-hls-D62WkG1T.js → vidstack-hls-h9DeHhUl.js}

@@ -5,9 +5,9 @@ var N = (n) => {
 var ot = (n, t, i) => t in n ? rt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
 var _ = (n, t, i) => ot(n, typeof t != "symbol" ? t + "" : t, i), R = (n, t, i) => t.has(n) || N("Cannot " + i);
 var e = (n, t, i) => (R(n, t, "read from private field"), i ? i.call(n) : t.get(n)), p = (n, t, i) => t.has(n) ? N("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, i), f = (n, t, i, s) => (R(n, t, "write to private field"), s ? s.call(n, i) : t.set(n, i), i), a = (n, t, i) => (R(n, t, "access private method"), i);
-import { i as ht, b as C, p as at, d as O, Q as V, l as j, e as dt, D as x, f as ut, T as ct, g as k, L as $, h as lt, j as q, k as pt, m as ft, n as vt } from "./install-BA-wW2x7.js";
-import { VideoProvider as yt } from "./vidstack-video-HjNlMLft.js";
-import { R as gt } from "./vidstack-DqAw8m9J-D4-vRGk-.js";
+import { i as ht, b as C, p as at, d as O, Q as V, l as j, e as dt, D as x, f as ut, T as ct, g as k, L as $, h as lt, j as q, k as pt, m as ft, n as vt } from "./install-CSFHmKMg.js";
+import { VideoProvider as yt } from "./vidstack-video-hLjkIjzA.js";
+import { R as gt } from "./vidstack-DqAw8m9J-He_m3NxW.js";
 const Lt = (n) => ut(n);
 var T, h, o, D, b, r, E, M, U, F, Q, K, W, B, J, X, Y, z, G, Z, tt;
 class St {

package/dist/{vidstack-video-HjNlMLft.js → vidstack-video-hLjkIjzA.js}

@@ -5,8 +5,8 @@ var b = (i) => {
 var N = (i, t, e) => t in i ? $(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
 var m = (i, t, e) => N(i, typeof t != "symbol" ? t + "" : t, e), E = (i, t, e) => t.has(i) || b("Cannot " + e);
 var s = (i, t, e) => (E(i, t, "read from private field"), e ? e.call(i) : t.get(i)), r = (i, t, e) => t.has(i) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e), c = (i, t, e, n) => (E(i, t, "write to private field"), n ? n.call(i, e) : t.set(i, e), e), p = (i, t, e) => (E(i, t, "access private method"), e);
-import { s as U, u as V, v as A, w as q, x as C, l as F, D as Y, E as _, T as j, g as v } from "./install-BA-wW2x7.js";
-import { H as z, a as B } from "./vidstack-Bq6c3Bam-BYiLfDL7.js";
+import { s as U, u as V, v as A, w as q, x as C, l as F, D as Y, E as _, T as j, g as v } from "./install-CSFHmKMg.js";
+import { H as z, a as B } from "./vidstack-Bq6c3Bam-B986laoT.js";
 var P, f, k, D, H;
 class G {
   constructor(t, e) {

package/dist/{vidstack-vimeo-CHeghuZO.js → vidstack-vimeo-CeAFeHi1.js}

@@ -5,9 +5,9 @@ var N = (r) => {
 var de = (r, c, e) => c in r ? ue(r, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[c] = e;
 var b = (r, c, e) => de(r, typeof c != "symbol" ? c + "" : c, e), S = (r, c, e) => c.has(r) || N("Cannot " + e);
 var t = (r, c, e) => (S(r, c, "read from private field"), e ? e.call(r) : c.get(r)), f = (r, c, e) => c.has(r) ? N("Cannot add the same private member more than once") : c instanceof WeakSet ? c.add(r) : c.set(r, e), u = (r, c, e, i) => (S(r, c, "write to private field"), i ? i.call(r, e) : c.set(r, e), e), o = (r, c, e) => (S(r, c, "access private method"), e);
-import { y as fe, J as U, K as C, p as pe, e as q, d as Q, b as ye, M as _, L as R, l as be, N as ke, T as ve, Q as J } from "./install-BA-wW2x7.js";
-import { R as me } from "./vidstack-DqAw8m9J-D4-vRGk-.js";
-import { E as we } from "./vidstack-DDXt6fpN-BagNaE5J.js";
+import { y as fe, J as U, K as C, p as pe, e as q, d as Q, b as ye, M as _, L as R, l as be, N as ke, T as ve, Q as J } from "./install-CSFHmKMg.js";
+import { R as me } from "./vidstack-DqAw8m9J-He_m3NxW.js";
+import { E as we } from "./vidstack-DDXt6fpN-Dqmm7fj6.js";
 import { resolveVimeoVideoId as Pe, getVimeoVideoInfo as Te } from "./vidstack-krOAtKMi-B4IZWKdc.js";
 const Ce = [
   "bufferend",

package/dist/{vidstack-youtube-BwookFna.js → vidstack-youtube-ubCCIUAI.js}

@@ -5,8 +5,8 @@ var B = (r) => {
 var N = (r, n, e) => n in r ? K(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
 var T = (r, n, e) => N(r, typeof n != "symbol" ? n + "" : n, e), R = (r, n, e) => n.has(r) || B("Cannot " + e);
 var s = (r, n, e) => (R(r, n, "read from private field"), e ? e.call(r) : n.get(r)), p = (r, n, e) => n.has(r) ? B("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, e), l = (r, n, e, t) => (R(r, n, "write to private field"), t ? t.call(r, e) : n.set(r, e), e), o = (r, n, e) => (R(r, n, "access private method"), e);
-import { y as q, J as z, p as A, e as G, b as H, M as Q, K as C, O as W, t as $, P as X } from "./install-BA-wW2x7.js";
-import { E as Z } from "./vidstack-DDXt6fpN-BagNaE5J.js";
+import { y as q, J as z, p as A, e as G, b as H, M as Q, K as C, O as W, t as $, P as X } from "./install-CSFHmKMg.js";
+import { E as Z } from "./vidstack-DDXt6fpN-Dqmm7fj6.js";
 import { resolveYouTubeVideoId as ee } from "./vidstack-Dm1xEU9Q-qSXq3AI-.js";
 const b = {
   Ended: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.57",
+  "version": "25.10.58",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",

package/src/components/wt-vidstack-player/components/layouts/video-layout.vue

@@ -17,7 +17,7 @@
     </template>
 
     <template v-if="props.mode === 'stream'">
-      <screen-sharing-control-panel :session="props.session" />
+      <screen-sharing-control-panel :session="props.session" @close-session="emit('close-session')" />
     </template>
   </media-controls>
 </template>
@@ -44,6 +44,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   'close-player': [],
+  'close-session': [],
 }>();
 </script>
 
@@ -51,8 +52,6 @@ const emit = defineEmits<{
 .video-layout {
 
   .video-display-panel {
-    opacity: 1;
-
     :deep(.video-display-panel__controls) { // hide panel buttons
       opacity: 0;
       transition: all var(--transition) ease-out;

package/src/components/wt-vidstack-player/components/panels/screen-sharing-control-panel/screen-sharing-control-panel.vue

@@ -50,7 +50,7 @@
 
 <script setup lang="ts">
 import convertDuration from '@webitel/ui-sdk/src/scripts/convertDuration';
-import {computed, inject, onUnmounted, ref, watch} from 'vue';
+import {computed, defineEmits, inject, onUnmounted, ref, watch} from 'vue';
 
 import {WtVidstackPlayerSession} from "../../../types/WtVidstackPlayerSession";
 
@@ -61,6 +61,10 @@ interface Props {
 }
 const props = defineProps<Props>();
 
+const emit = defineEmits<{
+  'close-session': [],
+}>()
+
 const {size} = inject('size');
 const screenshotStatus = ref<ScreenshotStatus | null>(null)
 
@@ -105,9 +109,9 @@ const toggleRecordAction = () => {
   }
 };
 
-const makeScreenshot = () => {
+const makeScreenshot = async () => {
   try {
-    props.session.screenshot()
+    await props.session.screenshot()
     changeScreenshotStatus('done')
   } catch {
     changeScreenshotStatus('error')
@@ -123,6 +127,7 @@ const changeScreenshotStatus = (status: ScreenshotStatus) => {
 
 const closeSession = () => {
   props.session.close()
+  emit('close-session')
 };
 
 onUnmounted(() => {

package/src/components/wt-vidstack-player/components/panels/video-display-panel/video-display-panel.vue

@@ -7,8 +7,12 @@
       <wt-avatar
         v-if="props.username"
         :username="props.username"
+        size="sm"
       />
-      {{ props.title || props.username }}
+
+      <span>
+        {{ props.title || props.username }}
+      </span>
     </div>
     <div class="video-display-panel__controls">
       <toggle-button
@@ -72,9 +76,14 @@ const handlePlayerSize = (value: boolean) => {
   background: var(--p-player-head-line-background);
   color: var(--p-player-head-line-color);
   transition: all var(--transition) ease-in-out;
+  backdrop-filter: blur(var(--p-player-head-line-blur));
+  opacity: 0;
 
   &__title {
     @extend %typo-body-1-bold;
+    display: flex;
+    align-items: center;
+    gap: var(--p-player-headline-sm-gap);
   }
 
   &__controls {
@@ -83,13 +92,22 @@ const handlePlayerSize = (value: boolean) => {
     gap: var(--p-player-headline-sm-gap);
   }
 
+  &--sm {
+    gap: var(--p-player-headline-sm-gap);
+  }
+
   &--md {
     padding: var(--p-player-headline-md-padding);
+    gap: var(--p-player-headline-md-gap);
 
     .video-display-panel__controls {
       gap: var(--p-player-headline-md-gap);
     }
   }
+
+  &--lg {
+    gap: var(--p-player-headline-lg-gap);
+  }
 }
 
 </style>

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

@@ -7,13 +7,16 @@
       ref="player"
       :src="playerSrc"
       :autoplay="props.autoplay"
+      :muted="props.muted"
       class="wt-vidstack-player__player"
       cross-origin
       plays-inline
       @close="emit('close')"
       @change-size="changeSize"
     >
-      <media-provider></media-provider>
+      <media-provider
+        class="wt-vidstack-player__provider"
+      ></media-provider>
       <video-layout
         :closable="props.closable"
         :autoplay="props.autoplay"
@@ -22,6 +25,7 @@
         :session="props.session"
         :mode="mode"
         @close-player="emit('close')"
+        @close-session="emit('close-session')"
       />
 
     </media-player>
@@ -33,7 +37,18 @@ import 'vidstack/player';
 import 'vidstack/player/ui';
 
 import type { MediaPlayerElement } from 'vidstack/elements';
-import {computed, defineEmits, defineProps, onMounted,provide, ref, useTemplateRef} from 'vue';
+import {
+  computed,
+  defineEmits,
+  defineProps,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  useTemplateRef,
+  watch
+} from 'vue';
 
 import {ComponentSize} from '../../enums';
 import VideoLayout from './components/layouts/video-layout.vue';
@@ -44,6 +59,7 @@ interface Props {
   src: string | { src: string; type?: string };
   mime?: string;
   autoplay?: boolean;
+  muted?: boolean;
   title?: string;
   username?: string;
   closable?: boolean;
@@ -55,6 +71,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   mime: 'video/mp4',
   autoplay: false,
+  muted: false,
   title: '',
   username: '',
   closable: false,
@@ -63,6 +80,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   'close': [],
+  'close-session': [],
 }>()
 
 const player = useTemplateRef<MediaPlayerElement>('player');
@@ -100,16 +118,30 @@ const playerSrc = computed(() => {
 });
 
 /** @author @Oleksandr Palonnyi
- * Attach MediaStream to Vidstack player after mount.
- * A short delay ensures the internal <video> is ready before playback.
+ * Binds the incoming MediaStream to the Vidstack player after mount.
+ * A brief delay ensures the internal <video> element is ready before playback starts.
  */
-onMounted(async () => {
-  if (player.value && props.mode === 'stream') {
-    setTimeout(async () => {
-      const videoEl = player.value.querySelector('video')
-      videoEl.srcObject = props.stream
+onMounted(() => {
+  if (player.value && props.mode === 'stream' && props.stream) {
+    const videoEl = player.value.querySelector('video')
+
+    videoEl.addEventListener("loadedmetadata", async () => {
       await videoEl.play().catch((err) => console.error('play error:', err))
-    }, 100)
+    })
+
+    if (videoEl.srcObject !== props.stream) {
+      setTimeout(() => {
+        videoEl.srcObject = props.stream ?? null
+      }, 100)
+    }
+  }
+})
+
+onBeforeUnmount(() => {
+  const videoEl = player.value.querySelector('video')
+  if (videoEl && videoEl.srcObject) {
+    videoEl.srcObject.getTracks().forEach(t => t.stop())
+    videoEl.srcObject = null
   }
 })
 </script>
@@ -120,7 +152,7 @@ onMounted(async () => {
 .wt-vidstack-player {
   transition: var(--transition);
 
-  .wt-vidstack-player__player {
+  &__player {
     padding: 0;
     margin: 0;
   }
@@ -134,6 +166,15 @@ onMounted(async () => {
     z-index: 100;
     border-radius: var(--p-player-wrapper-sm-border-radius);
     overflow: hidden;
+    box-shadow: var(--elevation-10);
+    height: var(--p-player-wrapper-sm-height);
+
+    .wt-vidstack-player__provider {
+      display: block;
+      height: 100%;
+      // Control bar sm height
+      padding-bottom: 48px;
+    }
   }
 
   &--md {
@@ -167,11 +208,18 @@ media-player[data-hocus] { // hover or focus within https://vidstack.io/docs/wc/
   .video-display-panel {
     background: var(--p-player-head-line-hover-background);
 
-    :deep(.video-display-panel__controls) { // show panel buttons on hover
+    :deep(.video-display-panel) { // show panel buttons on hover
       opacity: 1;
     }
   }
 }
+</style>
 
-
+<style lang="scss">
+.wt-vidstack-player {
+  video {
+    height: 100%;
+    object-fit: fill;
+  }
+}
 </style>

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

@@ -8,8 +8,10 @@ type __VLS_Props = {
     session: WtVidstackPlayerSession;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "close-session": () => any;
     "close-player": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onClose-session"?: () => any;
     "onClose-player"?: () => 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

@@ -2,5 +2,9 @@ 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>;
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "close-session": () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onClose-session"?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -9,6 +9,7 @@ interface Props {
     };
     mime?: string;
     autoplay?: boolean;
+    muted?: boolean;
     title?: string;
     username?: string;
     closable?: boolean;
@@ -18,8 +19,10 @@ interface Props {
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
+    "close-session": () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClose?: () => any;
+    "onClose-session"?: () => any;
 }>, {
     title: string;
     mode: WtVidstakPlayerControlsMode;
@@ -27,5 +30,6 @@ declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, imp
     autoplay: boolean;
     mime: string;
     closable: boolean;
+    muted: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;