@webitel/ui-sdk 25.12.40 → 25.12.41

package/dist/{vidstack-Bq6c3Bam-D5KBuWRZ.js → vidstack-Bq6c3Bam-wTVq5dCD.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 N = (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 { A as Yt, z as ut, B as j, C as Zt, b as ti, E as nt, e as lt, F as _, G as ii, H as ei, f as si, J as ai, l as rt, K as dt, D as ni, L as Y, M as Z } from "./install-DGNb9nVr.js";
-import { R as ri } from "./vidstack-DqAw8m9J-BPmv6sOh.js";
+import { A as Yt, z as ut, B as j, C as Zt, b as ti, E as nt, e as lt, F as _, G as ii, H as ei, f as si, J as ai, l as rt, K as dt, D as ni, L as Y, M as Z } from "./install-B4Nk3OEz.js";
+import { R as ri } from "./vidstack-DqAw8m9J-CF8Kjm2j.js";
 let q = null, K = [], z = [];
 function ht() {
   return q ?? (q = new AudioContext());

package/dist/{vidstack-D2pY00kU-Ws1Jvjkb.js → vidstack-D2pY00kU-BDY1tl0N.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, k as A, V as O, G as D, f as R, o as G } from "./install-DGNb9nVr.js";
+import { l as b, k as A, V as O, G as D, f as R, o as G } from "./install-B4Nk3OEz.js";
 function M() {
   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-Be_1pOC-.js")).GoogleCastProvider(c(this, n), e);
+    return new (await import("./vidstack-google-cast-Buijkdak.js")).GoogleCastProvider(c(this, n), e);
   }
 }
 n = new WeakMap(), r = new WeakSet(), S = async function(e) {

package/dist/{vidstack-DDXt6fpN-CMGNnPQV.js → vidstack-DDXt6fpN-DFzqLOOW.js}

@@ -5,7 +5,7 @@ var g = (s) => {
 var M = (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) => M(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 { M as w, l as f, e as A, f as P, U as O, b as S } from "./install-DGNb9nVr.js";
+import { M as w, l as f, e as A, f as P, U as O, b as S } from "./install-B4Nk3OEz.js";
 var r, o, b, m;
 class J {
   constructor(t) {

package/dist/{vidstack-D_-9AA6_-DLAWXBQ4.js → vidstack-D_-9AA6_-Doy3hgnN.js}

@@ -1,4 +1,4 @@
-import { c as d, a as i, I as l, e as m } from "./install-DGNb9nVr.js";
+import { c as d, a as i, I as l, e as m } from "./install-B4Nk3OEz.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-BPmv6sOh.js → vidstack-DqAw8m9J-CF8Kjm2j.js}

@@ -3,7 +3,7 @@ var l = (i) => {
 };
 var m = (i, t, s) => t.has(i) || l("Cannot " + s);
 var r = (i, t, s) => (m(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) => (m(i, t, "write to private field"), f ? f.call(i, s) : t.set(i, s), s), c = (i, t, s) => (m(i, t, "access private method"), s);
-import { m as p, v as u } from "./install-DGNb9nVr.js";
+import { m as p, v as u } from "./install-B4Nk3OEz.js";
 var o, a, n, d;
 class F {
   constructor(t) {

package/dist/{vidstack-audio-BIY4ys0T.js → vidstack-audio-CP2NCp0l.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-DGNb9nVr.js";
-import { H as d, a as u } from "./vidstack-Bq6c3Bam-D5KBuWRZ.js";
+import { s as p } from "./install-B4Nk3OEz.js";
+import { H as d, a as u } from "./vidstack-Bq6c3Bam-wTVq5dCD.js";
 class n extends d {
   constructor(t, s) {
     super(t, s);

package/dist/{vidstack-dash-HCChLXEY.js → vidstack-dash-D2mGrqE7.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 { r as Et, b as _, d as Lt, f as At, Q as z, l as J, e as Dt, D as N, h as xt, j as O, T as Mt, L as q, t as Ct, u as Nt, v as Rt, k as Ft, m as Z, n as Pt, o as qt, q as _t } from "./install-DGNb9nVr.js";
-import { VideoProvider as $t } from "./vidstack-video-Dxw2U6Fe.js";
-import { R as jt } from "./vidstack-DqAw8m9J-BPmv6sOh.js";
+import { r as Et, b as _, d as Lt, f as At, Q as z, l as J, e as Dt, D as N, h as xt, j as O, T as Mt, L as q, t as Ct, u as Nt, v as Rt, k as Ft, m as Z, n as Pt, o as qt, q as _t } from "./install-B4Nk3OEz.js";
+import { VideoProvider as $t } from "./vidstack-video-1yX47WpZ.js";
+import { R as jt } from "./vidstack-DqAw8m9J-CF8Kjm2j.js";
 function W(n) {
   try {
     return new Intl.DisplayNames(navigator.languages, { type: "language" }).of(n) ?? null;

package/dist/{vidstack-google-cast-Be_1pOC-.js → vidstack-google-cast-Buijkdak.js}

@@ -5,9 +5,9 @@ var Q = (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) || Q("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) ? Q("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 { A as St, N as L, W as Z, z as At, D as tt, f as V, l as et, e as It, X as bt, L as Rt } from "./install-DGNb9nVr.js";
-import { R as wt } from "./vidstack-DqAw8m9J-BPmv6sOh.js";
-import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-Ws1Jvjkb.js";
+import { A as St, N as L, W as Z, z as At, D as tt, f as V, l as et, e as It, X as bt, L as Rt } from "./install-B4Nk3OEz.js";
+import { R as wt } from "./vidstack-DqAw8m9J-CF8Kjm2j.js";
+import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-BDY1tl0N.js";
 var g, _, at;
 class _t {
   constructor(t) {

package/dist/{vidstack-hls-BbnSLJID.js → vidstack-hls-CmjSG0jl.js}

@@ -5,9 +5,9 @@ var q = (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) || q("Cannot " + i);
 var e = (n, t, i) => (R(n, t, "read from private field"), i ? i.call(n) : t.get(n)), f = (n, t, i) => t.has(n) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, i), p = (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, d as at, f as O, Q as N, l as V, e as dt, D as x, h as ut, T as ct, j, L as $, k as lt, m as k, n as ft, o as pt, q as vt } from "./install-DGNb9nVr.js";
-import { VideoProvider as yt } from "./vidstack-video-Dxw2U6Fe.js";
-import { R as gt } from "./vidstack-DqAw8m9J-BPmv6sOh.js";
+import { i as ht, b as C, d as at, f as O, Q as N, l as V, e as dt, D as x, h as ut, T as ct, j, L as $, k as lt, m as k, n as ft, o as pt, q as vt } from "./install-B4Nk3OEz.js";
+import { VideoProvider as yt } from "./vidstack-video-1yX47WpZ.js";
+import { R as gt } from "./vidstack-DqAw8m9J-CF8Kjm2j.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-Dxw2U6Fe.js → vidstack-video-1yX47WpZ.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 y = (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, w as V, x as A, y as j, z as C, l as q, D as z, E as F, T as Y, j as v } from "./install-DGNb9nVr.js";
-import { H as _, a as B } from "./vidstack-Bq6c3Bam-D5KBuWRZ.js";
+import { s as U, w as V, x as A, y as j, z as C, l as q, D as z, E as F, T as Y, j as v } from "./install-B4Nk3OEz.js";
+import { H as _, a as B } from "./vidstack-Bq6c3Bam-wTVq5dCD.js";
 var P, f, k, D, H;
 class G {
   constructor(t, e) {

package/dist/{vidstack-vimeo-G_rdpj4P.js → vidstack-vimeo-CHLHywMZ.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 { A as fe, M as U, N as C, d as pe, e as q, f as Q, b as ye, O as _, L as R, l as be, P as ke, T as ve, Q as W } from "./install-DGNb9nVr.js";
-import { R as me } from "./vidstack-DqAw8m9J-BPmv6sOh.js";
-import { E as we } from "./vidstack-DDXt6fpN-CMGNnPQV.js";
+import { A as fe, M as U, N as C, d as pe, e as q, f as Q, b as ye, O as _, L as R, l as be, P as ke, T as ve, Q as W } from "./install-B4Nk3OEz.js";
+import { R as me } from "./vidstack-DqAw8m9J-CF8Kjm2j.js";
+import { E as we } from "./vidstack-DDXt6fpN-DFzqLOOW.js";
 import { resolveVimeoVideoId as Pe, getVimeoVideoInfo as Te } from "./vidstack-krOAtKMi-B4IZWKdc.js";
 const Ce = [
   "bufferend",

package/dist/{vidstack-youtube-Csh5czsD.js → vidstack-youtube-DT3G83C6.js}

@@ -5,8 +5,8 @@ var B = (r) => {
 var q = (r, n, e) => n in r ? A(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
 var T = (r, n, e) => q(r, typeof n != "symbol" ? n + "" : n, e), M = (r, n, e) => n.has(r) || B("Cannot " + e);
 var s = (r, n, e) => (M(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) => (M(r, n, "write to private field"), t ? t.call(r, e) : n.set(r, e), e), o = (r, n, e) => (M(r, n, "access private method"), e);
-import { A as z, M as G, d as H, e as J, b as K, O as Q, N as C, R as W, v as $, S as X } from "./install-DGNb9nVr.js";
-import { E as Z } from "./vidstack-DDXt6fpN-CMGNnPQV.js";
+import { A as z, M as G, d as H, e as J, b as K, O as Q, N as C, R as W, v as $, S as X } from "./install-B4Nk3OEz.js";
+import { E as Z } from "./vidstack-DDXt6fpN-DFzqLOOW.js";
 import { resolveYouTubeVideoId as ee } from "./vidstack-Dm1xEU9Q-qSXq3AI-.js";
 const b = {
   Ended: 0,

package/dist/{vuex.esm-bundler-VVqVSpHV.js → vuex.esm-bundler-GW6Qg-nV.js}

@@ -1,4 +1,4 @@
-import { p as d } from "./install-DGNb9nVr.js";
+import { p as d } from "./install-B4Nk3OEz.js";
 import { inject as lt, effectScope as dt, reactive as vt, watch as J, computed as pt } from "vue";
 function ht() {
   return W().__VUE_DEVTOOLS_GLOBAL_HOOK__;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.12.40",
+  "version": "25.12.41",
   "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",
@@ -56,7 +56,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.89",
-    "@webitel/styleguide": "^24.12.87",
+    "@webitel/styleguide": "^24.12.89",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

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

@@ -4,7 +4,7 @@
     :class="`video-layout--${size}`"
   >
     <video-display-panel
-      :class="{'video-display-panel--hidden': props.hideDisplayPanel}"
+      :class="{'video-display-panel--hidden': props.hideHeader}"
       :title="props.title"
       :username="props.username"
       :closable="props.closable"
@@ -15,7 +15,7 @@
       <slot name="content" />
     </media-controls-group>
 
-    <slot name="controls-panel">
+    <slot v-if="!props.hideControlsPanel" name="controls-panel">
       <media-controls-panel />
     </slot>
   </media-controls>
@@ -33,7 +33,8 @@ const props = defineProps<{
   title?: string;
   username?: string;
   closable?: boolean;
-  hideDisplayPanel?: boolean
+  hideHeader?: boolean
+  hideControlsPanel?: boolean
 }>();
 
 const emit = defineEmits<{

package/src/components/wt-vidstack-player/components/panels/media-controls-panel/media-controls-panel.vue

@@ -17,4 +17,8 @@ import TimeGroup from "./components/time-group.vue";
 </script>
 
 <style scoped lang="scss">
+.media-control-panel {
+  width: 100%;
+  max-width: 100%;
+}
 </style>

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

@@ -45,7 +45,7 @@ import WtIconBtn from "../../../../wt-icon-btn/wt-icon-btn.vue";
 import FullscreenButton from "../../buttons/fullscreen-button.vue";
 import ToggleButton from "../../toggle-button.vue";
 
-const { size, changeSize } = inject('size');
+const { size, fullscreen, changeSize } = inject('size');
 
 const props = defineProps<{
   title?: string;
@@ -69,10 +69,12 @@ const emit = defineEmits<{
 const handleFullscreen = (value: boolean) => {
   if (value) {
     if (size.value !== ComponentSize.LG) {
+      fullscreen.value = true
       changeSize(ComponentSize.LG)
     }
   } else if (size.value === ComponentSize.LG) {
     exitFullscreen()
+    fullscreen.value = false
     changeSize(ComponentSize.SM)
   }
 }
@@ -84,6 +86,7 @@ const handlePlayerSize = () => {
     changeSize(ComponentSize.SM)
   } else if (size.value === ComponentSize.LG) {
     exitFullscreen()
+    fullscreen.value = false
     changeSize(ComponentSize.MD)
   }
 }

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

@@ -2,7 +2,8 @@
   <div
     class="wt-vidstack-player"
     :class="[
-      props.resizable && `wt-vidstack-player--${size}`,
+      `wt-vidstack-player--${size}`,
+      fullscreen && `wt-vidstack-player--fullscreen`,
       props.static && 'wt-vidstack-player--static',
       props.hideBackground && 'wt-vidstack-player--hide-background'
     ]"
@@ -23,15 +24,15 @@
       ></media-provider>
 
       <video-layout
-        v-if="props.resizable"
-        :hide-display-panel="props.hideDisplayPanel"
+        :hide-header="props.hideHeader"
+        :hide-controls-panel="props.hideControlsPanel"
         :closable="props.closable"
         :autoplay="props.autoplay"
         :title="props.title"
         :username="props.username"
         @close-player="emit('close')"
       >
-        <template #controls-panel>
+        <template  #controls-panel>
           <slot name="controls-panel" :size="size" />
         </template>
 
@@ -66,7 +67,8 @@ interface Props {
   static?: boolean;
   stream?: MediaStream
   size?: ComponentSize
-  hideDisplayPanel?: boolean
+  hideHeader?: boolean
+  hideControlsPanel?: boolean
   hideBackground?: boolean
 }
 
@@ -88,6 +90,7 @@ const emit = defineEmits<{
 
 const player = useTemplateRef<MediaPlayerElement>('player');
 const size = ref(props.size || ComponentSize.SM);
+const fullscreen = ref(false)
 
 const changeSize = (value) => {
   size.value = value;
@@ -95,9 +98,8 @@ const changeSize = (value) => {
 
 /** @author liza-pohranichna
  * options: [sm, md, lg]
- * lg-size is fullscreen
  */
-provide('size', {size, changeSize});
+provide('size', {size, fullscreen, changeSize});
 
 const normalizedType = computed(() => { // https://vidstack.io/docs/wc/player/core-concepts/loading/?styling=css#source-types
   if (props.mime) return props.mime;
@@ -134,6 +136,8 @@ const normalizedSrc = computed(() => {
 .wt-vidstack-player {
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   transition: var(--transition);
 
   &__player {
@@ -161,8 +165,17 @@ const normalizedSrc = computed(() => {
   }
 
   &--md {
+    border-radius: var(--p-player-wrapper-md-border-radius);
+    overflow: hidden;
+    max-width: var(--p-player-wrapper-md-width);
+    max-height: var(--p-player-wrapper-md-height);
+    flex: 0 0 auto;
+
     &:not(.wt-vidstack-player--static) {
       @include popup-wrapper;
+      border-radius: 0;
+      max-width: 100%;
+      max-height: 100%;
 
       /** @author liza-pohranichna
       * need to use wt-popup styles for md size https://webitel.atlassian.net/browse/WTEL-7723 */
@@ -188,6 +201,9 @@ const normalizedSrc = computed(() => {
   }
 
   &--lg {
+    border-radius: var(--p-player-wrapper-lg-border-radius);
+    overflow: hidden;
+
     .wt-vidstack-player {
       &__player {
         display: flex;
@@ -201,6 +217,10 @@ const normalizedSrc = computed(() => {
     }
   }
 
+  &--fullscreen {
+    border-radius: 0;
+  }
+
   &--static {
     position: relative;
     right: unset;

package/src/modules/CallSession/modules/VideoCall/video-call.vue

@@ -3,8 +3,10 @@
     :stream="mainStream"
     :static="props.static"
     :size="props.size"
-    :class="`video-call-position--${props.position}`"
+    :class="[!props.static && `video-call-position--${props.position}`]"
     :username="props.username"
+    :resizable="props.resizable"
+    :hide-header="props.hideHeader"
     class="video-call"
     hide-background
     autoplay
@@ -12,59 +14,55 @@
     @change-size="(payload) => emit('change-size', payload)"
   >
     <template #content="{ size: innerSize }">
+      <slot name="content" :size="innerSize" />
+
+      <slot name="overlay" :size="innerSize">
+        <div class="video-call-overlay"></div>
+      </slot>
+
       <div
-        :class="`video-call-content--${innerSize}`"
-        class="video-call-content"
+        :class="`video-call-content-wrapper--${innerSize}`"
+        class="video-call-content-wrapper"
       >
-        <template v-if="props['receiver:stream'] && !props['sender:video:enabled']">
+        <screenshot-box
+          :src="props['screenshot:src']"
+          :size="innerSize"
+          @zoom="emit(`action:${VideoCallAction.ZoomScreenshot}`)"
+          @close="emit(`action:${VideoCallAction.CloseScreenshot}`)"
+        />
+
+        <template v-if="props['receiver:stream'] && !props['receiver:video:enabled']">
           <div
-            :class="`video-call-sender--${innerSize}`"
-            class="video-call-sender video-call-sender--muted"
+            :class="`video-call-receiver--${innerSize}`"
+            class="video-call-receiver video-call-receiver--muted"
           >
-            <wt-icon :size="receiverVideoMutedIconSizes[innerSize]" icon="video-cam-off--filled" />
+            <wt-icon :size="senderVideoMutedIconSizes[innerSize]" icon="video-cam-off--filled" />
           </div>
         </template>
 
-        <div class="video-call-content-wrapper">
-          <screenshot-box
-            :src="props['screenshot:src']"
-            :size="innerSize"
-            @zoom="emit(`action:${VideoCallAction.ZoomScreenshot}`)"
-            @close="emit(`action:${VideoCallAction.CloseScreenshot}`)"
+        <template v-else-if="props['receiver:stream']">
+          <wt-vidstack-player
+            :stream="props['receiver:stream']"
+            :resizable="false"
+            :class="`video-call-receiver--${innerSize}`"
+            hide-header
+            hide-controls-panel
+            static
+            autoplay
+            muted
+            class="video-call-receiver"
           />
+        </template>
+      </div>
 
-          <template v-if="props['receiver:stream'] && !props['receiver:video:enabled']">
-            <div
-              :class="`video-call-receiver--${innerSize}`"
-              class="video-call-receiver video-call-receiver--muted"
-            >
-              <wt-icon :size="senderVideoMutedIconSizes[innerSize]" icon="video-cam-off--filled" />
-            </div>
-          </template>
-
-          <template v-else-if="props['receiver:stream']">
-            <wt-vidstack-player
-              :stream="props['receiver:stream']"
-              :resizable="false"
-              :class="`video-call-receiver--${innerSize}`"
-              hide-display-panel
-              static
-              autoplay
-              muted
-              class="video-call-receiver"
-            />
-          </template>
-        </div>
-
-        <div
-          :class="`video-call__indicator--${innerSize}`"
-          class="video-call__indicator"
-        >
-          <recording-indicator
-            v-if="props.recordings"
-            :recording="props.recordings"
-          />
-        </div>
+      <div
+        :class="`video-call__indicator--${innerSize}`"
+        class="video-call__indicator"
+      >
+        <recording-indicator
+          v-if="props.recordings"
+          :recording="props.recordings"
+        />
       </div>
     </template>
 
@@ -127,6 +125,8 @@ const props = withDefaults(defineProps<{
   static?: boolean;
   position?: 'left-bottom' | 'right-bottom';
   size?: ComponentSize
+  hideHeader?: boolean
+  resizable?: boolean;
 
   actions: VideoCallAction[];
   username: string;
@@ -153,12 +153,6 @@ const mainStream = computed(() => {
   return props['receiver:stream'] || props['sender:stream'];
 })
 
-const receiverVideoMutedIconSizes = {
-  [ComponentSize.SM]: ComponentSize.MD,
-  [ComponentSize.MD]: ComponentSize.LG,
-  [ComponentSize.LG]: ComponentSize.XXL,
-}
-
 const senderVideoMutedIconSizes = {
   [ComponentSize.SM]: ComponentSize.MD,
   [ComponentSize.MD]: ComponentSize['4XL'],
@@ -168,6 +162,8 @@ const senderVideoMutedIconSizes = {
 
 <style lang="scss" scoped>
 .video-call {
+  flex: 0 0 auto;
+
   &-position {
     &--left-bottom {
       &.wt-vidstack-player {
@@ -204,6 +200,17 @@ const senderVideoMutedIconSizes = {
     }
   }
 
+  &-overlay {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    background: var(--p-player-wrapper-background);
+  }
+
   &-content {
     height: 100%;
     padding: var(--p-player-counter-position-padding-sm);
@@ -220,27 +227,24 @@ const senderVideoMutedIconSizes = {
     }
 
     &-wrapper {
+      position: absolute;
       display: flex;
       flex-direction: column;
       gap: var(--p-player-control-bar-sm-gap);
-    }
-  }
 
-  &-sender {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: -1;
-    background: var(--p-player-wrapper-background);
+      &--sm {
+        left: var(--p-player-counter-position-padding-sm);
+        bottom: calc(var(--p-player-counter-position-padding-sm) + var(--p-player-control-bar-sm-height));
+      }
 
-    &--sm {
-      &.video-call-sender--muted {
-        padding-bottom: var(--p-player-control-bar-sm-height);
+      &--md {
+        left: var(--p-player-counter-position-padding-md);
+        bottom: var(--p-player-counter-position-padding-md);
+      }
+
+      &--lg {
+        left: var(--p-player-counter-position-padding-lg);
+        bottom: var(--p-player-counter-position-padding-lg);
       }
     }
   }
@@ -318,7 +322,8 @@ const senderVideoMutedIconSizes = {
     justify-content: flex-end;
 
     &--sm {
-      position: relative;
+      right: var(--p-player-counter-position-padding-sm);
+      bottom: calc(var(--p-player-counter-position-padding-sm) + var(--p-player-control-bar-sm-height));
     }
 
     &--md {

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

@@ -2,7 +2,8 @@ type __VLS_Props = {
     title?: string;
     username?: string;
     closable?: boolean;
-    hideDisplayPanel?: boolean;
+    hideHeader?: boolean;
+    hideControlsPanel?: boolean;
 };
 declare var __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {

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

@@ -16,7 +16,8 @@ interface Props {
     static?: boolean;
     stream?: MediaStream;
     size?: ComponentSize;
-    hideDisplayPanel?: boolean;
+    hideHeader?: boolean;
+    hideControlsPanel?: boolean;
     hideBackground?: boolean;
 }
 declare var __VLS_24: {

package/types/modules/CallSession/modules/VideoCall/video-call.vue.d.ts

@@ -17,10 +17,22 @@ type __VLS_Props = {
     static?: boolean;
     position?: 'left-bottom' | 'right-bottom';
     size?: ComponentSize;
+    hideHeader?: boolean;
+    resizable?: boolean;
     actions: VideoCallAction[];
     username: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_10: {
+    size: ComponentSize;
+}, __VLS_12: {
+    size: ComponentSize;
+};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_10) => any;
+} & {
+    overlay?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     [x: string]: any;
 } & {
     [x: string]: any;
@@ -29,4 +41,10 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     position: "left-bottom" | "right-bottom";
 }, {}, {}, {}, 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 & {
+    new (): {
+        $slots: S;
+    };
+};