@webitel/ui-sdk 25.10.52 → 25.10.54

package/dist/vidstack-youtube-FNzWU8v0.js

@@ -0,0 +1,236 @@
+var K = Object.defineProperty;
+var B = (r) => {
+  throw TypeError(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-Cvn-xDmg.js";
+import { E as Z } from "./vidstack-DDXt6fpN-D1Nzo26r.js";
+import { resolveYouTubeVideoId as ee } from "./vidstack-Dm1xEU9Q-qSXq3AI-.js";
+const b = {
+  Ended: 0,
+  Playing: 1,
+  Paused: 2,
+  Buffering: 3,
+  Cued: 5
+};
+var a, k, v, S, P, m, y, i, te, se, D, f, j, Y, F, I, M, x, L, O, V, U;
+class ne extends Z {
+  constructor(e, t) {
+    super(e);
+    p(this, i);
+    T(this, "$$PROVIDER_TYPE", "YOUTUBE");
+    T(this, "scope", q());
+    p(this, a);
+    p(this, k, z(""));
+    p(this, v, -1);
+    p(this, S, null);
+    p(this, P, -1);
+    p(this, m, !1);
+    p(this, y, /* @__PURE__ */ new Map());
+    /**
+     * Sets the player's interface language. The parameter value is an ISO 639-1 two-letter
+     * language code or a fully specified locale. For example, fr and fr-ca are both valid values.
+     * Other language input codes, such as IETF language tags (BCP 47) might also be handled properly.
+     *
+     * The interface language is used for tooltips in the player and also affects the default caption
+     * track. Note that YouTube might select a different caption track language for a particular
+     * user based on the user's individual language preferences and the availability of caption tracks.
+     *
+     * @defaultValue 'en'
+     */
+    T(this, "language", "en");
+    T(this, "color", "red");
+    /**
+     * Whether cookies should be enabled on the embed. This is turned off by default to be
+     * GDPR-compliant.
+     *
+     * @defaultValue `false`
+     */
+    T(this, "cookies", !1);
+    l(this, a, t);
+  }
+  get currentSrc() {
+    return s(this, S);
+  }
+  get type() {
+    return "youtube";
+  }
+  get videoId() {
+    return s(this, k).call(this);
+  }
+  preconnect() {
+    A(this.getOrigin());
+  }
+  setup() {
+    super.setup(), G(o(this, i, D).bind(this)), s(this, a).notify("provider-setup", this);
+  }
+  destroy() {
+    o(this, i, O).call(this);
+    const e = "provider destroyed";
+    for (const t of s(this, y).values())
+      for (const { reject: d } of t) d(e);
+    s(this, y).clear();
+  }
+  async play() {
+    return o(this, i, f).call(this, "playVideo");
+  }
+  async pause() {
+    return o(this, i, f).call(this, "pauseVideo");
+  }
+  setMuted(e) {
+    e ? o(this, i, f).call(this, "mute") : o(this, i, f).call(this, "unMute");
+  }
+  setCurrentTime(e) {
+    o(this, i, f).call(this, "seekTo", e), s(this, a).notify("seeking", e);
+  }
+  setVolume(e) {
+    o(this, i, f).call(this, "setVolume", e * 100);
+  }
+  setPlaybackRate(e) {
+    o(this, i, f).call(this, "setPlaybackRate", e);
+  }
+  async loadSource(e) {
+    if (!H(e.src)) {
+      l(this, S, null), s(this, k).set("");
+      return;
+    }
+    const t = ee(e.src);
+    s(this, k).set(t ?? ""), l(this, S, e);
+  }
+  getOrigin() {
+    return this.cookies ? "https://www.youtube.com" : "https://www.youtube-nocookie.com";
+  }
+  buildParams() {
+    const { keyDisabled: e } = s(this, a).$props, { muted: t, playsInline: d, nativeControls: u } = s(this, a).$state, h = u();
+    return {
+      rel: 0,
+      autoplay: 0,
+      cc_lang_pref: this.language,
+      cc_load_policy: h ? 1 : void 0,
+      color: this.color,
+      controls: h ? 1 : 0,
+      disablekb: !h || e() ? 1 : 0,
+      enablejsapi: 1,
+      fs: 1,
+      hl: this.language,
+      iv_load_policy: h ? 1 : 3,
+      mute: t() ? 1 : 0,
+      playsinline: d() ? 1 : 0
+    };
+  }
+  onLoad() {
+    window.setTimeout(() => this.postMessage({ event: "listening" }), 100);
+  }
+  onMessage({ info: e }, t) {
+    var c;
+    if (!e) return;
+    const { title: d, intrinsicDuration: u, playbackRate: h } = s(this, a).$state;
+    if (W(e.videoData) && e.videoData.title !== d() && s(this, a).notify("title-change", e.videoData.title, t), $(e.duration) && e.duration !== u()) {
+      if ($(e.videoLoadedFraction)) {
+        const g = ((c = e.progressState) == null ? void 0 : c.loaded) ?? e.videoLoadedFraction * e.duration, w = new C(0, e.duration);
+        o(this, i, I).call(this, g, w, t);
+      }
+      s(this, a).notify("duration-change", e.duration, t);
+    }
+    if ($(e.playbackRate) && e.playbackRate !== h() && s(this, a).notify("rate-change", e.playbackRate, t), e.progressState) {
+      const { current: g, seekableStart: w, seekableEnd: E, loaded: J, duration: _ } = e.progressState;
+      o(this, i, F).call(this, g, t), o(this, i, I).call(this, J, new C(w, E), t), _ !== u() && s(this, a).notify("duration-change", _, t);
+    }
+    if ($(e.volume) && X(e.muted) && !s(this, m)) {
+      const g = {
+        muted: e.muted,
+        volume: e.volume / 100
+      };
+      s(this, a).notify("volume-change", g, t);
+    }
+    $(e.playerState) && e.playerState !== s(this, v) && o(this, i, L).call(this, e.playerState, t);
+  }
+}
+a = new WeakMap(), k = new WeakMap(), v = new WeakMap(), S = new WeakMap(), P = new WeakMap(), m = new WeakMap(), y = new WeakMap(), i = new WeakSet(), te = function(e) {
+  var t;
+  (t = o(this, i, V).call(this, "playVideo")) == null || t.reject(e);
+}, se = function(e) {
+  var t;
+  (t = o(this, i, V).call(this, "pauseVideo")) == null || t.reject(e);
+}, D = function() {
+  o(this, i, O).call(this);
+  const e = s(this, k).call(this);
+  if (!e) {
+    this.src.set("");
+    return;
+  }
+  this.src.set(`${this.getOrigin()}/embed/${e}`), s(this, a).notify("load-start");
+}, f = function(e, t) {
+  let d = Q(), u = s(this, y).get(e);
+  return u || s(this, y).set(e, u = []), u.push(d), this.postMessage({
+    event: "command",
+    func: e,
+    args: t ? [t] : void 0
+  }), d.promise;
+}, j = function(e) {
+  s(this, a).notify("loaded-metadata"), s(this, a).notify("loaded-data"), s(this, a).delegate.ready(void 0, e);
+}, Y = function(e) {
+  var t;
+  (t = o(this, i, V).call(this, "pauseVideo")) == null || t.resolve(), s(this, a).notify("pause", void 0, e);
+}, F = function(e, t) {
+  const { duration: d, realCurrentTime: u } = s(this, a).$state, h = s(this, v) === b.Ended, c = h ? d() : e;
+  s(this, a).notify("time-change", c, t), !h && Math.abs(c - u()) > 1 && s(this, a).notify("seeking", c, t);
+}, I = function(e, t, d) {
+  const u = {
+    buffered: new C(0, e),
+    seekable: t
+  };
+  s(this, a).notify("progress", u, d);
+  const { seeking: h, realCurrentTime: c } = s(this, a).$state;
+  h() && e > c() && o(this, i, M).call(this, d);
+}, M = function(e) {
+  const { paused: t, realCurrentTime: d } = s(this, a).$state;
+  window.clearTimeout(s(this, P)), l(this, P, window.setTimeout(
+    () => {
+      s(this, a).notify("seeked", d(), e), l(this, P, -1);
+    },
+    t() ? 100 : 0
+  ));
+}, x = function(e) {
+  const { seeking: t } = s(this, a).$state;
+  t() && o(this, i, M).call(this, e), s(this, a).notify("pause", void 0, e), s(this, a).notify("end", void 0, e);
+}, L = function(e, t) {
+  var E;
+  const { paused: d, seeking: u } = s(this, a).$state, h = e === b.Playing, c = e === b.Buffering, g = o(this, i, U).call(this, "playVideo"), w = d() && (c || h);
+  if (c && s(this, a).notify("waiting", void 0, t), u() && h && o(this, i, M).call(this, t), s(this, m) && h) {
+    this.pause(), l(this, m, !1), this.setMuted(s(this, a).$state.muted());
+    return;
+  }
+  if (!g && w) {
+    l(this, m, !0), this.setMuted(!0);
+    return;
+  }
+  switch (w && ((E = o(this, i, V).call(this, "playVideo")) == null || E.resolve(), s(this, a).notify("play", void 0, t)), e) {
+    case b.Cued:
+      o(this, i, j).call(this, t);
+      break;
+    case b.Playing:
+      s(this, a).notify("playing", void 0, t);
+      break;
+    case b.Paused:
+      o(this, i, Y).call(this, t);
+      break;
+    case b.Ended:
+      o(this, i, x).call(this, t);
+      break;
+  }
+  l(this, v, e);
+}, O = function() {
+  l(this, v, -1), l(this, P, -1), l(this, m, !1);
+}, V = function(e) {
+  var t;
+  return (t = s(this, y).get(e)) == null ? void 0 : t.shift();
+}, U = function(e) {
+  var t;
+  return !!((t = s(this, y).get(e)) != null && t.length);
+};
+export {
+  ne as YouTubeProvider
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.52",
+  "version": "25.10.54",
   "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.56",
-    "@webitel/styleguide": "^24.12.78",
+    "@webitel/styleguide": "^24.12.79",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",
@@ -73,12 +73,12 @@
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "path-browserify": "^1.0.1",
+    "vidstack": "^1.12.13",
     "plyr": "^3.7.8",
     "primevue": "^4.3.4",
     "qs-esm": "^7.0.2",
     "sortablejs": "^1.15.3",
     "tailwindcss": "^4.1.7",
-    "vidstack": "^1.11.21",
     "vue-i18n": "^11.1.2",
     "vue-multiselect": "^3.1.0",
     "vue-observe-visibility": "^2.0.0-alpha.1",

package/src/assets/icons/sprite/index.js

@@ -168,6 +168,8 @@ import radio from './radio.svg';
 import radioChecked from './radio--checked.svg';
 import rec from './rec.svg';
 import recOff from './rec-off.svg';
+import recordStart from './record-start.svg';
+import recordStop from './record-stop.svg';
 import redo from './redo.svg';
 import refresh from './refresh.svg';
 import reporter from './reporter.svg';
@@ -176,10 +178,14 @@ import roundedInfo from './rounded-info.svg';
 import save from './save.svg';
 import saveAs from './save-as.svg';
 import scorecard from './scorecard.svg';
+import screenshot from './screenshot.svg';
+import screenshotDone from './screenshot-done.svg';
+import screenshotFalse from './screenshot-false.svg';
 import search from './search.svg';
 import selectCustomValueEnter from './select-custom-value-enter.svg';
 import sendArrow from './send-arrow.svg';
 import settings from './settings.svg';
+import sharingEnd from './sharing-end.svg';
 import socialMedia from './social-media.svg';
 import sortArrowDown from './sort-arrow-down.svg';
 import sortArrowUp from './sort-arrow-up.svg';
@@ -439,5 +445,12 @@ export default objCamelToKebab({
   quickReplies,
   checkboxTick,
   log,
-  downloadPdf
+  downloadPdf,
+
+  recordStart,
+  recordStop,
+  screenshot,
+  screenshotDone,
+  screenshotFalse,
+  sharingEnd,
 });

package/src/assets/icons/sprite/record-start.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 16C3.55228 16 4 16.4477 4 17V19C4 19.5523 4.44772 20 5 20H7C7.55228 20 8 20.4477 8 21C8 21.5523 7.55228 22 7 22H5C3.34315 22 2 20.6569 2 19V17C2 16.4477 2.44772 16 3 16Z" />
+<path d="M21 16C21.5523 16 22 16.4477 22 17V19C22 20.6569 20.6569 22 19 22H17C16.4477 22 16 21.5523 16 21C16 20.4477 16.4477 20 17 20H19C19.5523 20 20 19.5523 20 19V17C20 16.4477 20.4477 16 21 16Z" />
+<path d="M7 2C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H5C4.44772 4 4 4.44772 4 5V7C4 7.55228 3.55228 8 3 8C2.44772 8 2 7.55228 2 7V5C2 3.34315 3.34315 2 5 2H7Z" />
+<path d="M19 2C20.6569 2 22 3.34315 22 5V7C22 7.55228 21.5523 8 21 8C20.4477 8 20 7.55228 20 7V5C20 4.44772 19.5523 4 19 4H17C16.4477 4 16 3.55228 16 3C16 2.44772 16.4477 2 17 2H19Z" />
+<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" />
+</svg>

package/src/assets/icons/sprite/record-stop.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 16C3.55228 16 4 16.4477 4 17V19C4 19.5523 4.44772 20 5 20H7C7.55228 20 8 20.4477 8 21C8 21.5523 7.55228 22 7 22H5C3.34315 22 2 20.6569 2 19V17C2 16.4477 2.44772 16 3 16Z" fill="#454E68"/>
+<path d="M21 16C21.5523 16 22 16.4477 22 17V19C22 20.6569 20.6569 22 19 22H17C16.4477 22 16 21.5523 16 21C16 20.4477 16.4477 20 17 20H19C19.5523 20 20 19.5523 20 19V17C20 16.4477 20.4477 16 21 16Z" fill="#454E68"/>
+<path d="M7 2C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H5C4.44772 4 4 4.44772 4 5V7C4 7.55228 3.55228 8 3 8C2.44772 8 2 7.55228 2 7V5C2 3.34315 3.34315 2 5 2H7Z" fill="#454E68"/>
+<path d="M19 2C20.6569 2 22 3.34315 22 5V7C22 7.55228 21.5523 8 21 8C20.4477 8 20 7.55228 20 7V5C20 4.44772 19.5523 4 19 4H17C16.4477 4 16 3.55228 16 3C16 2.44772 16.4477 2 17 2H19Z" fill="#454E68"/>
+<path d="M15 14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14L9 10C9 9.44772 9.44772 9 10 9H14C14.5523 9 15 9.44772 15 10V14Z" fill="#E64F4D"/>
+</svg>

package/src/assets/icons/sprite/screenshot-done.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 16C3.55228 16 4 16.4477 4 17V19C4 19.5523 4.44772 20 5 20H7C7.55228 20 8 20.4477 8 21C8 21.5523 7.55228 22 7 22H5C3.34315 22 2 20.6569 2 19V17C2 16.4477 2.44772 16 3 16Z" fill="#454E68"/>
+<path d="M21 16C21.5523 16 22 16.4477 22 17V19C22 20.6569 20.6569 22 19 22H17C16.4477 22 16 21.5523 16 21C16 20.4477 16.4477 20 17 20H19C19.5523 20 20 19.5523 20 19V17C20 16.4477 20.4477 16 21 16Z" fill="#454E68"/>
+<path d="M7 2C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H5C4.44772 4 4 4.44772 4 5V7C4 7.55228 3.55228 8 3 8C2.44772 8 2 7.55228 2 7V5C2 3.34315 3.34315 2 5 2H7Z" fill="#454E68"/>
+<path d="M19 2C20.6569 2 22 3.34315 22 5V7C22 7.55228 21.5523 8 21 8C20.4477 8 20 7.55228 20 7V5C20 4.44772 19.5523 4 19 4H17C16.4477 4 16 3.55228 16 3C16 2.44772 16.4477 2 17 2H19Z" fill="#454E68"/>
+<path d="M13.7001 9.40041C14.0314 8.95864 14.6577 8.86899 15.0995 9.20022C15.5413 9.53155 15.6309 10.1578 15.2997 10.5996L13.0585 13.5889C12.2839 14.6213 10.7481 14.6606 9.92178 13.669L8.23135 11.6406L8.16982 11.5586C7.88636 11.1385 7.9616 10.5629 8.35928 10.2315C8.75704 9.9 9.33696 9.92959 9.69912 10.2842L9.76845 10.3594L11.4589 12.3887L13.7001 9.40041Z" fill="#24A850"/>
+</svg>

package/src/assets/icons/sprite/screenshot-false.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 16C3.55228 16 4 16.4477 4 17V19C4 19.5523 4.44772 20 5 20H7C7.55228 20 8 20.4477 8 21C8 21.5523 7.55228 22 7 22H5C3.34315 22 2 20.6569 2 19V17C2 16.4477 2.44772 16 3 16Z" fill="#454E68"/>
+<path d="M21 16C21.5523 16 22 16.4477 22 17V19C22 20.6569 20.6569 22 19 22H17C16.4477 22 16 21.5523 16 21C16 20.4477 16.4477 20 17 20H19C19.5523 20 20 19.5523 20 19V17C20 16.4477 20.4477 16 21 16Z" fill="#454E68"/>
+<path d="M7 2C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H5C4.44772 4 4 4.44772 4 5V7C4 7.55228 3.55228 8 3 8C2.44772 8 2 7.55228 2 7V5C2 3.34315 3.34315 2 5 2H7Z" fill="#454E68"/>
+<path d="M19 2C20.6569 2 22 3.34315 22 5V7C22 7.55228 21.5523 8 21 8C20.4477 8 20 7.55228 20 7V5C20 4.44772 19.5523 4 19 4H17C16.4477 4 16 3.55228 16 3C16 2.44772 16.4477 2 17 2H19Z" fill="#454E68"/>
+<path d="M13.2929 9.29305C13.6834 8.90257 14.3164 8.90254 14.707 9.29305C15.0974 9.68357 15.0974 10.3166 14.707 10.7071L13.414 12.0001L14.707 13.2931C15.0973 13.6836 15.0974 14.3166 14.707 14.7071C14.3165 15.0976 13.6834 15.0975 13.2929 14.7071L11.9999 13.4141L10.707 14.7071C10.3165 15.0976 9.68343 15.0975 9.29289 14.7071C8.90237 14.3166 8.90237 13.6836 9.29289 13.2931L10.5859 12.0001L9.29289 10.7071C8.90237 10.3166 8.90237 9.68358 9.29289 9.29305C9.68342 8.90257 10.3164 8.90254 10.707 9.29305L11.9999 10.586L13.2929 9.29305Z" fill="#E54F4C"/>
+</svg>

package/src/assets/icons/sprite/screenshot.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 16C3.55228 16 4 16.4477 4 17V19C4 19.5523 4.44772 20 5 20H7C7.55228 20 8 20.4477 8 21C8 21.5523 7.55228 22 7 22H5C3.34315 22 2 20.6569 2 19V17C2 16.4477 2.44772 16 3 16Z" />
+    <path d="M21 16C21.5523 16 22 16.4477 22 17V19C22 20.6569 20.6569 22 19 22H17C16.4477 22 16 21.5523 16 21C16 20.4477 16.4477 20 17 20H19C19.5523 20 20 19.5523 20 19V17C20 16.4477 20.4477 16 21 16Z" />
+    <path d="M12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0801 5.00684C15.0655 5.07629 15.9484 5.66049 16.3945 6.55273L16.5527 6.86914C16.5927 6.94904 16.6744 6.9999 16.7637 7C17.9986 7 19 8.00138 19 9.23633V15C19 16.6569 17.6569 18 16 18H8C6.34315 18 5 16.6569 5 15V9.23633C5 8.00138 6.00138 7 7.23633 7C7.32564 6.9999 7.40732 6.94904 7.44727 6.86914L7.60547 6.55273C8.08129 5.60108 9.05419 5 10.1182 5H13.8818L14.0801 5.00684ZM10.1182 7C9.81173 7 9.53157 7.17318 9.39453 7.44727L9.23633 7.76367C8.85759 8.52114 8.08319 8.9999 7.23633 9C7.10595 9 7 9.10595 7 9.23633V15C7 15.5523 7.44772 16 8 16H16C16.5523 16 17 15.5523 17 15V9.23633C17 9.10595 16.894 9 16.7637 9C15.9168 8.9999 15.1424 8.52114 14.7637 7.76367L14.6055 7.44727C14.4855 7.20735 14.256 7.04461 13.9951 7.00781L13.8818 7H10.1182Z" />
+    <path d="M7 2C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H5C4.44772 4 4 4.44772 4 5V7C4 7.55228 3.55228 8 3 8C2.44772 8 2 7.55228 2 7V5C2 3.34315 3.34315 2 5 2H7Z" />
+    <path d="M19 2C20.6569 2 22 3.34315 22 5V7C22 7.55228 21.5523 8 21 8C20.4477 8 20 7.55228 20 7V5C20 4.44772 19.5523 4 19 4H17C16.4477 4 16 3.55228 16 3C16 2.44772 16.4477 2 17 2H19Z" />
+</svg>

package/src/assets/icons/sprite/sharing-end.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 19.5C15.5523 19.5 16 19.9477 16 20.5C16 21.0523 15.5523 21.5 15 21.5H9C8.44772 21.5 8 21.0523 8 20.5C8 19.9477 8.44772 19.5 9 19.5H15Z" />
+<path d="M13.5352 7.79297C13.9257 7.40257 14.5587 7.40257 14.9492 7.79297C15.3397 8.18346 15.3397 8.8165 14.9492 9.20703L13.5352 10.6211L14.9492 12.0352C15.3397 12.4256 15.3396 13.0587 14.9492 13.4492C14.5587 13.8397 13.9257 13.8397 13.5352 13.4492L12.1211 12.0352L10.707 13.4492C10.3165 13.8397 9.68349 13.8397 9.29297 13.4492C8.90254 13.0587 8.90248 12.4256 9.29297 12.0352L10.707 10.6211L9.29297 9.20703C8.90246 8.81651 8.90245 8.18349 9.29297 7.79297C9.6835 7.40255 10.3165 7.40249 10.707 7.79297L12.1211 9.20703L13.5352 7.79297Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 2.5C20.6569 2.5 22 3.84315 22 5.5V15.5C22 17.1569 20.6569 18.5 19 18.5H5C3.34315 18.5 2 17.1569 2 15.5V5.5C2 3.84315 3.34315 2.5 5 2.5H19ZM5 4.5C4.44772 4.5 4 4.94772 4 5.5V15.5C4 16.0523 4.44772 16.5 5 16.5H19C19.5523 16.5 20 16.0523 20 15.5V5.5C20 4.94772 19.5523 4.5 19 4.5H5Z" />
+</svg>

package/src/components/wt-image/wt-image.vue

@@ -10,6 +10,7 @@
       maxHeight,
       cursor: overlayIcon ? 'pointer' : 'auto'
     }"
+    @click="emit('click', $event)"
   >
     <!--    @slot Replaces `<img>` tag
             @scope `{ alt, src }`
@@ -32,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps } from 'vue';
+import { computed, defineEmits, defineProps } from 'vue';
 
 import { IconColor } from '../../enums';
 
@@ -62,6 +63,8 @@ const props = defineProps<{
   overlayIconPrefix?: string;
 }>();
 
+const emit = defineEmits(['click']);
+
 const width = computed(() => {
   const width = props.size ? sizeToUnits[props.size] : props.width;
 

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

@@ -12,7 +12,13 @@
 
     <wt-loader size="sm" color="on-dark"/>
 
-    <media-control-panel />
+    <template v-if="props.mode === 'media'">
+      <media-control-panel />
+    </template>
+
+    <template v-if="props.mode === 'stream'">
+      <screen-sharing-control-panel :session="props.session" />
+    </template>
   </media-controls>
 </template>
 
@@ -20,7 +26,10 @@
 import {defineEmits, inject} from "vue";
 
 import WtLoader from "../../../wt-loader/wt-loader.vue";
+import {WtVidstakPlayerControlsMode} from "../../types/WtVidstackPlayerControlsMode";
+import {WtVidstackPlayerSession} from "../../types/WtVidstackPlayerSession";
 import MediaControlPanel from "../panels/media-control-panel/media-control-panel.vue";
+import ScreenSharingControlPanel from "../panels/screen-sharing-control-panel/screen-sharing-control-panel.vue";
 import VideoDisplayPanel from "../panels/video-display-panel/video-display-panel.vue";
 
 const { size } = inject('size');
@@ -29,12 +38,13 @@ const props = defineProps<{
   title?: string;
   username?: string;
   closable?: boolean;
+  mode: WtVidstakPlayerControlsMode;
+  session: WtVidstackPlayerSession
 }>();
 
 const emit = defineEmits<{
   'close-player': [],
 }>();
-
 </script>
 
 <style scoped lang="scss">

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

@@ -0,0 +1,211 @@
+<template>
+  <media-controls-group class="screen-sharing-control-panel" :class="`screen-sharing-control-panel--${size}`">
+    <div
+      class="screen-sharing-control-panel__actions"
+    >
+      <wt-button
+        rounded
+        contains-icon
+        variant="outlined"
+        color="secondary"
+        :size="size"
+        :icon="screenShotIcon"
+        @click="makeScreenshot"
+      />
+
+      <wt-button
+        rounded
+        contains-icon
+        variant="outlined"
+        color="secondary"
+        :size="size"
+        :icon="recordIcon"
+        @click="toggleRecordAction"
+      />
+
+      <wt-button
+        icon="sharing-end"
+        class="screen-sharing-control-panel__sharing-end"
+        color="error"
+        variant="outlined"
+        :size="size"
+        rounded
+        contains-icon
+        @click="closeSession"
+      />
+    </div>
+
+    <div
+      v-if="isRecording" class="screen-sharing-control-panel__indicator"
+    >
+      <wt-indicator
+        color="error"
+        size="md"
+      />
+
+      <span class="screen-sharing-control-panel__time">{{ convertDuration(secondsElapsed) }}</span>
+    </div>
+  </media-controls-group>
+</template>
+
+<script setup lang="ts">
+import convertDuration from '@webitel/ui-sdk/src/scripts/convertDuration';
+import {computed, inject, onUnmounted, ref, watch} from 'vue';
+
+import {WtVidstackPlayerSession} from "../../../types/WtVidstackPlayerSession";
+
+type ScreenshotStatus = 'done' | 'error'
+
+interface Props {
+  session: WtVidstackPlayerSession
+}
+const props = defineProps<Props>();
+
+const {size} = inject('size');
+const screenshotStatus = ref<ScreenshotStatus | null>(null)
+
+const recordIcon = computed(() => (props.session.recordings ? 'record-stop' : 'record-start'));
+const getScreenshotIcon = (status?: ScreenshotStatus) => {
+  switch (status) {
+    case 'done':
+      return 'screenshot-done';
+    case 'error':
+      return 'screenshot-false';
+    default:
+      return 'screenshot';
+  }
+}
+
+const screenShotIcon = computed(() => getScreenshotIcon(screenshotStatus.value));
+const isRecording = computed(() => props.session.recordings);
+
+const secondsElapsed = ref(0);
+const timerId = ref<number | null>(null);
+
+function startTimer() {
+  secondsElapsed.value = 0;
+  stopTimer();
+  timerId.value = window.setInterval(() => {
+    secondsElapsed.value++;
+  }, 1000);
+}
+
+function stopTimer() {
+  if (timerId.value !== null) {
+    clearInterval(timerId.value);
+    timerId.value = null;
+  }
+}
+
+const toggleRecordAction = () => {
+  if (isRecording.value) {
+    props.session.stopRecord();
+  } else {
+    props.session.startRecord();
+  }
+};
+
+const makeScreenshot = () => {
+  try {
+    props.session.screenshot()
+    changeScreenshotStatus('done')
+  } catch {
+    changeScreenshotStatus('error')
+  }
+};
+
+const changeScreenshotStatus = (status: ScreenshotStatus) => {
+  screenshotStatus.value = status;
+  setTimeout(() => {
+    screenshotStatus.value = null;
+  }, 2000);
+}
+
+const closeSession = () => {
+  props.session.close()
+};
+
+onUnmounted(() => {
+  stopTimer();
+});
+
+watch(isRecording, (newVal) => {
+  if (newVal) {
+    startTimer();
+  } else {
+    stopTimer();
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@use '@webitel/styleguide/typography' as *;
+
+.screen-sharing-control-panel {
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  &--sm {
+    padding: var(--p-player-control-bar-position-padding-sm);
+
+    .screen-sharing-control-panel__actions {
+      width: 100%;
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+
+    .screen-sharing-control-panel__indicator {
+      right: var(--p-player-counter-position-padding-sm);
+      bottom: calc(100% + var(--p-player-counter-position-padding-sm));
+    }
+  }
+
+  &--md {
+    padding: var(--p-player-control-bar-position-padding-md);
+
+    .screen-sharing-control-panel__indicator {
+      right: var(--p-player-counter-position-padding-md);
+      bottom: var(--p-player-counter-position-padding-md);
+    }
+  }
+
+  &--lg {
+    padding: var(--p-player-control-bar-position-padding-lg);
+
+    .screen-sharing-control-panel__indicator {
+      right: var(--p-player-counter-position-padding-lg);
+      bottom: var(--p-player-counter-position-padding-lg);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--p-player-control-bar-background);
+    box-shadow: var(--elevation-10);
+  }
+
+  &__indicator {
+    background: var(--content-wrapper-color);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--p-player-counter-gap);
+    padding: var(--p-player-counter-padding);
+    border-radius: var(--p-player-counter-border-radius);
+    box-shadow: var(--elevation-10);
+    position: absolute;
+
+    // Agreed with @Evgeniy Trahtenberg
+    width: 100px;
+  }
+
+  &__time {
+    @extend %typo-body-1;
+  }
+}
+</style>
+
+

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

@@ -0,0 +1,7 @@
+export const WtVidstakPlayerControlsMode = {
+  STREAM: 'stream',
+  MEDIA: 'media',
+} as const;
+
+export type WtVidstakPlayerControlsMode =
+  (typeof WtVidstakPlayerControlsMode)[keyof typeof WtVidstakPlayerControlsMode];

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

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