@cloudflare/realtimekit-ui 1.1.1-staging.1 → 1.1.1-staging.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/browser.js +1 -1
  2. package/dist/cjs/{full-screen-de3e9caf.js → full-screen-b02d13dd.js} +2 -2
  3. package/dist/cjs/rtk-fullscreen-toggle.cjs.entry.js +2 -2
  4. package/dist/cjs/rtk-screenshare-view.cjs.entry.js +7 -7
  5. package/dist/collection/components/rtk-fullscreen-toggle/rtk-fullscreen-toggle.js +2 -2
  6. package/dist/collection/components/rtk-screenshare-view/rtk-screenshare-view.js +7 -7
  7. package/dist/collection/utils/full-screen.js +1 -1
  8. package/dist/components/{p-02f19345.js → p-3974d97a.js} +2 -2
  9. package/dist/components/{p-d0b9b4a1.js → p-ad194cf2.js} +2 -2
  10. package/dist/components/{p-a6c17b0d.js → p-fad88ee4.js} +1 -1
  11. package/dist/components/rtk-fullscreen-toggle.js +1 -1
  12. package/dist/components/rtk-grid.js +2 -2
  13. package/dist/components/rtk-livestream-player.js +1 -1
  14. package/dist/components/rtk-screenshare-view.js +7 -7
  15. package/dist/docs/docs-components.json +1 -1
  16. package/dist/esm/{full-screen-1f58c594.js → full-screen-d36ffc68.js} +2 -2
  17. package/dist/esm/loader.js +8 -8
  18. package/dist/esm/rtk-fullscreen-toggle.entry.js +2 -2
  19. package/dist/esm/rtk-screenshare-view.entry.js +7 -7
  20. package/dist/realtimekit-ui/{p-0511529f.entry.js → p-319034e1.entry.js} +1 -1
  21. package/dist/realtimekit-ui/{p-d3d4e6de.entry.js → p-e62baf7c.entry.js} +1 -1
  22. package/dist/realtimekit-ui/realtimekit-ui.esm.js +1 -1
  23. package/dist/types/utils/full-screen.d.ts +1 -1
  24. package/package.json +1 -1
  25. /package/dist/realtimekit-ui/{p-02f19345.js → p-3974d97a.js} +0 -0
package/dist/cjs/{full-screen-de3e9caf.js → full-screen-b02d13dd.js} RENAMED
@@ -19,7 +19,7 @@ const requestFullScreen = (el) => {
19
19
  el.msRequestFullscreen();
20
20
  }
21
21
  };
22
- const exitFullSreen = () => {
22
+ const exitFullScreen = () => {
23
23
  if (document.exitFullscreen != null) {
24
24
  document.exitFullscreen();
25
25
  }
@@ -49,7 +49,7 @@ const isFullScreenSupported = () => {
49
49
  return false;
50
50
  };
51
51
 
52
- exports.exitFullSreen = exitFullSreen;
52
+ exports.exitFullScreen = exitFullScreen;
53
53
  exports.isFullScreenEnabled = isFullScreenEnabled;
54
54
  exports.isFullScreenSupported = isFullScreenSupported;
55
55
  exports.requestFullScreen = requestFullScreen;
package/dist/cjs/rtk-fullscreen-toggle.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index$1 = require('./index-2e5758b6.js');
6
6
  const uiStore = require('./ui-store-d0e80f30.js');
7
- const fullScreen = require('./full-screen-de3e9caf.js');
7
+ const fullScreen = require('./full-screen-b02d13dd.js');
8
8
  const index = require('./index-92947ea7.js');
9
9
 
10
10
  const rtkFullscreenToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}:host([data-hidden]){display:none}";
@@ -44,7 +44,7 @@ const RtkFullscreenToggle = class {
44
44
  this.fullScreenActive = true;
45
45
  }
46
46
  else {
47
- fullScreen.exitFullSreen();
47
+ fullScreen.exitFullScreen();
48
48
  this.fullScreenActive = false;
49
49
  }
50
50
  this.stateUpdate.emit({ activeMoreMenu: false });
package/dist/cjs/rtk-screenshare-view.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index$1 = require('./index-2e5758b6.js');
6
6
  const uiStore = require('./ui-store-d0e80f30.js');
7
- const fullScreen = require('./full-screen-de3e9caf.js');
7
+ const fullScreen = require('./full-screen-b02d13dd.js');
8
8
  const index = require('./index-92947ea7.js');
9
9
 
10
10
  const rtkScreenshareViewCss = ":host {\n line-height: initial;\n font-family: var(--rtk-font-family, sans-serif);\n\n font-feature-settings: normal;\n font-variation-settings: normal;\n}\n\np {\n margin: var(--rtk-space-0, 0px);\n padding: var(--rtk-space-0, 0px);\n}\n\n\n:host {\n height: 100%;\n width: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: var(--rtk-border-radius-lg, 12px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));\n container-type: inline-size;\n container-name: screentile;\n}\n\n::slotted(rtk-name-tag) {\n position: absolute;\n left: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n opacity: 0.8;\n}\n\n#video-container {\n position: absolute;\n display: block;\n height: 100%;\n width: 100%;\n}\n\n#video-container .fit-in-container {\n -o-object-fit: fill;\n object-fit: fill;\n}\n\nvideo {\n height: 100%;\n width: 100%;\n -o-object-fit: contain;\n object-fit: contain;\n}\n\n:host([variant='gradient']) ::slotted(rtk-audio-visualizer) {\n position: absolute;\n top: var(--rtk-space-2, 8px);\n right: var(--rtk-space-2, 8px);\n border-radius: 9999px;\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n padding: var(--rtk-space-2, 8px);\n}\n\n:host([variant='gradient']) ::slotted(rtk-name-tag) {\n bottom: var(--rtk-space-0, 0px);\n left: var(--rtk-space-0, 0px);\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n text-align: center;\n background-color: transparent;\n background-image: linear-gradient(to top, var(--tw-gradient-stops));\n --tw-gradient-from: rgb(var(--rtk-colors-background-1000, 8 8 8));\n --tw-gradient-to: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n --tw-gradient-to: transparent;\n}\n\n:host([size='sm'][variant='gradient']) ::slotted(rtk-audio-visualizer) {\n height: var(--rtk-space-5, 20px);\n width: var(--rtk-space-5, 20px);\n}\n\nvideo.visible {\n animation: video-fadein 0.4s ease;\n}\n\n#controls {\n display: none;\n position: absolute;\n top: var(--rtk-space-3, 12px);\n right: var(--rtk-space-3, 12px);\n align-items: center;\n justify-content: flex-end;\n gap: var(--rtk-space-2, 8px);\n}\n\n:host(:hover) #controls, \n:host(:active) #controls, \n:host(:focus-visible) #controls {\n display: flex;\n}\n\n#full-screen-btn {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n\n/** For self view */\n\nh3 {\n margin-top: var(--rtk-space-10, 40px);\n margin-bottom: var(--rtk-space-6, 24px);\n text-align: center;\n font-size: 20px;\n font-weight: 500;\n}\n\n:host([size='sm']) h3 {\n font-size: 16px;\n}\n\n#self-message {\n padding-left: var(--rtk-space-4, 16px);\n padding-right: var(--rtk-space-4, 16px);\n}\n\n:host(.isSelf) #self-view {\n flex: 1 1 0%;\n}\n\n:host(.isSelf) #video-container {\n position: static;\n aspect-ratio: auto;\n height: auto;\n width: 50%;\n max-width: var(--rtk-space-96, 384px);\n border-radius: var(--rtk-border-radius-md, 8px);\n transition: 0.6s ease;\n}\n\n:host(.isSelf) #video-container.expand {\n width: 60%;\n max-width: 100%;\n}\n\n.actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--rtk-space-2, 8px);\n}\n\n:host([size='sm'].isSelf) #video-container,\n:host([size='md'].isSelf) #video-container,\n:host([size='sm'].isSelf) #expand-btn,\n:host([size='md'].isSelf) #expand-btn {\n /** Hide video, fullscreen buttons in sm and md breakpoints */\n display: none;\n}\n\n/** Remote control */\n\np {\n margin: var(--rtk-space-0, 0px);\n padding: var(--rtk-space-0, 0px);\n}\n\n.remote-control {\n z-index: 10;\n height: 100%;\n max-height: 100%;\n flex: 0 1 auto;\n}\n\n#remote-control-self {\n position: absolute;\n top: var(--rtk-space-0, 0px);\n left: 50%;\n z-index: 10;\n width: -moz-max-content;\n width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n display: flex;\n height: var(--rtk-space-8, 32px);\n align-items: center;\n overflow: hidden;\n border-radius: var(--rtk-border-radius-sm, 4px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-bg-opacity));\n font-size: 12px;\n color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n transform: translateX(-50%);\n}\n\n#remote-control-self p {\n padding-left: var(--rtk-space-3, 12px);\n padding-right: var(--rtk-space-3, 12px);\n padding-top: var(--rtk-space-2, 8px);\n padding-bottom: var(--rtk-space-2, 8px);\n}\n\n#remote-control-self rtk-button {\n height: 100%;\n border-radius: var(--rtk-border-radius-none, 0);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity));\n font-size: 12px;\n}\n\n:host([size='sm']) #remote-control-self {\n height: auto;\n flex-direction: column;\n}\n\n:host([size='sm']) #remote-control-self rtk-button {\n width: 100%;\n padding-top: var(--rtk-space-1, 4px);\n padding-bottom: var(--rtk-space-1, 4px);\n}\n\n/** Name tag positions */\n\n:host([name-tag-position='bottom-right']) ::slotted(rtk-name-tag) {\n left: auto;\n right: var(--rtk-space-3, 12px);\n}\n\n:host([name-tag-position='bottom-center']) ::slotted(rtk-name-tag) {\n left: auto;\n right: auto;\n}\n\n:host([name-tag-position='top-left']) ::slotted(rtk-name-tag) {\n top: var(--rtk-space-3, 12px);\n bottom: auto;\n}\n\n:host([name-tag-position='top-right']) ::slotted(rtk-name-tag) {\n top: var(--rtk-space-3, 12px);\n right: var(--rtk-space-3, 12px);\n left: auto;\n bottom: auto;\n}\n\n:host([name-tag-position='top-center']) ::slotted(rtk-name-tag) {\n left: auto;\n right: auto;\n bottom: auto;\n top: var(--rtk-space-3, 12px);\n}\n\n/** Keyframes */\n\n@keyframes video-fadein {\n 0% {\n opacity: 0;\n transform: scale(1.4) translateY(20px);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n::slotted(rtk-network-indicator) {\n position: absolute;\n right: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n}\n\n@media only screen and (max-height: 480px) and (orientation: landscape) {\n :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag), \n :host([size='sm'][variant='solid']) rtk-name-tag {\n left: var(--rtk-space-0, 0px);\n bottom: var(--rtk-space-0, 0px);\n border-radius: var(--rtk-border-radius-none, 0);\n transform-origin: 0% 110%;\n transform: scale(0.6);\n }\n}\n\n@container screentile (max-width: 400px) {\n ::slotted(rtk-name-tag) {\n transform-origin: 0 130%;\n transform: scale(0.7);\n }\n}\n";
@@ -52,7 +52,7 @@ const RtkScreenshareView = class {
52
52
  this.isFullScreen = true;
53
53
  }
54
54
  else {
55
- fullScreen.exitFullSreen();
55
+ fullScreen.exitFullScreen();
56
56
  this.isFullScreen = false;
57
57
  }
58
58
  };
@@ -109,7 +109,7 @@ const RtkScreenshareView = class {
109
109
  const icon = this.isFullScreen
110
110
  ? this.iconPack.full_screen_minimize
111
111
  : this.iconPack.full_screen_maximize;
112
- return (index$1.h(index$1.Host, { key: '9ee4407d83a5b437f91813eedec6fd0836620a8c', class: { isSelf } }, index$1.h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, index$1.h("video", { key: 'bfbee68ee2700aba43d1aae85a8456c40dc55244', ref: (el) => (this.videoEl = el), class: {
112
+ return (index$1.h(index$1.Host, { key: '10646f5ea7b7b9bc162c2a98af07928a0f68f605', class: { isSelf } }, index$1.h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, index$1.h("video", { key: '13e87cfee55fdd6d45a72ec55792fbbfefdc5206', ref: (el) => (this.videoEl = el), class: {
113
113
  visible: this.screenShareEnabled,
114
114
  'fit-in-container': this.participant.supportsRemoteControl,
115
115
  }, playsInline: true, onPlay: () => {
@@ -117,15 +117,15 @@ const RtkScreenshareView = class {
117
117
  screenshareParticipant: this.participant,
118
118
  participant: this.meeting.self,
119
119
  });
120
- }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), index$1.h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && fullScreen.isFullScreenSupported() && (index$1.h("rtk-tooltip", { key: '25d8a59dae9afe875761f4ecaaae6d8f0c12792c', label: text }, index$1.h("rtk-button", { key: '9b294b9b0a987c8e54f6bca1ab3edc3e1a5238f9', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, index$1.h("rtk-icon", { key: 'd768caec415a0b75f42d39cfb15f3821264046da', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (index$1.h("div", { id: "self-message", key: "self-message" }, index$1.h("h3", { key: '7f4802409d87bb07dedac257e75f3e1d23ca4757' }, this.t('screenshare.shared')), index$1.h("div", { key: 'acd80c0b62e14b88c1a0c717814dcdc49c1c5a40', class: "actions" }, this.meeting != null && (index$1.h("rtk-button", { key: '721fc83372b3a9752b06fbffa61072f88aa9e1b0', variant: "danger", onClick: () => {
120
+ }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), index$1.h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && fullScreen.isFullScreenSupported() && (index$1.h("rtk-tooltip", { key: '97ba6869139126f0114aee3239999bfe1172a798', label: text }, index$1.h("rtk-button", { key: '0769449ffcba69117d10a7346e4881c207e7ac6f', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, index$1.h("rtk-icon", { key: '508cf201f0b2e6da061e35dff4d3899f1da0749a', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (index$1.h("div", { id: "self-message", key: "self-message" }, index$1.h("h3", { key: '6f055da4722c11893e3f8640bddad7f6844838da' }, this.t('screenshare.shared')), index$1.h("div", { key: '96fa5f8b47cef2a2a58352e4275c3c325f22a465', class: "actions" }, this.meeting != null && (index$1.h("rtk-button", { key: '144c3908476ac18d1ffcc1282a46a4d7fad698c2', variant: "danger", onClick: () => {
121
121
  this.meeting.self.disableScreenShare();
122
- } }, index$1.h("rtk-icon", { key: '7aa2e4a597a1411e000209c6db95babf9c7f0366', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), index$1.h("rtk-button", { key: '4243b29230fc663db287f7db50dd4b5a8345a9bd', variant: "secondary", id: "expand-btn", onClick: () => {
122
+ } }, index$1.h("rtk-icon", { key: '7a6f710ccb916ca78edbb5daa9b6bcf3547ed54e', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), index$1.h("rtk-button", { key: '1667e04e5a22c3edfdab9300ffca06df7eba4948', variant: "secondary", id: "expand-btn", onClick: () => {
123
123
  this.videoExpanded = !this.videoExpanded;
124
- } }, index$1.h("rtk-icon", { key: '09c4a34f83662e5d1749e1dfd449d25da92c9976', icon: this.videoExpanded
124
+ } }, index$1.h("rtk-icon", { key: '6140671792e626d5de181861ee4c7aef1dd11e3e', icon: this.videoExpanded
125
125
  ? this.iconPack.full_screen_minimize
126
126
  : this.iconPack.full_screen_maximize, slot: "start" }), this.videoExpanded
127
127
  ? this.t('screenshare.min_preview')
128
- : this.t('screenshare.max_preview'))))), index$1.h("slot", { key: 'a2046aecd50bc6fc0b8fb94a781bdd25c1d491ea' })));
128
+ : this.t('screenshare.max_preview'))))), index$1.h("slot", { key: 'beeecb6fe5a1f46d259a86e698c31fb477949bf3' })));
129
129
  }
130
130
  get host() { return index$1.getElement(this); }
131
131
  static get watchers() { return {
package/dist/collection/components/rtk-fullscreen-toggle/rtk-fullscreen-toggle.js CHANGED
@@ -11,7 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
11
11
  import { Host, h } from "@stencil/core";
12
12
  import { defaultIconPack } from "../../lib/icons";
13
13
  import { useLanguage } from "../../lib/lang";
14
- import { exitFullSreen, isFullScreenEnabled, isFullScreenSupported, requestFullScreen, } from "../../utils/full-screen";
14
+ import { exitFullScreen, isFullScreenEnabled, isFullScreenSupported, requestFullScreen, } from "../../utils/full-screen";
15
15
  import { SyncWithStore } from "../../utils/sync-with-store";
16
16
  /**
17
17
  * A button which toggles full screen mode for any
@@ -39,7 +39,7 @@ export class RtkFullscreenToggle {
39
39
  this.fullScreenActive = true;
40
40
  }
41
41
  else {
42
- exitFullSreen();
42
+ exitFullScreen();
43
43
  this.fullScreenActive = false;
44
44
  }
45
45
  this.stateUpdate.emit({ activeMoreMenu: false });
package/dist/collection/components/rtk-screenshare-view/rtk-screenshare-view.js CHANGED
@@ -11,7 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
11
11
  import { Host, h, writeTask, } from "@stencil/core";
12
12
  import { defaultIconPack } from "../../lib/icons";
13
13
  import { useLanguage } from "../../lib/lang";
14
- import { exitFullSreen, isFullScreenEnabled, isFullScreenSupported, requestFullScreen, } from "../../utils/full-screen";
14
+ import { exitFullScreen, isFullScreenEnabled, isFullScreenSupported, requestFullScreen, } from "../../utils/full-screen";
15
15
  import { SyncWithStore } from "../../utils/sync-with-store";
16
16
  /**
17
17
  * A component which plays a participant's screenshared video.
@@ -49,7 +49,7 @@ export class RtkScreenshareView {
49
49
  this.isFullScreen = true;
50
50
  }
51
51
  else {
52
- exitFullSreen();
52
+ exitFullScreen();
53
53
  this.isFullScreen = false;
54
54
  }
55
55
  };
@@ -106,7 +106,7 @@ export class RtkScreenshareView {
106
106
  const icon = this.isFullScreen
107
107
  ? this.iconPack.full_screen_minimize
108
108
  : this.iconPack.full_screen_maximize;
109
- return (h(Host, { key: '9ee4407d83a5b437f91813eedec6fd0836620a8c', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: 'bfbee68ee2700aba43d1aae85a8456c40dc55244', ref: (el) => (this.videoEl = el), class: {
109
+ return (h(Host, { key: '10646f5ea7b7b9bc162c2a98af07928a0f68f605', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: '13e87cfee55fdd6d45a72ec55792fbbfefdc5206', ref: (el) => (this.videoEl = el), class: {
110
110
  visible: this.screenShareEnabled,
111
111
  'fit-in-container': this.participant.supportsRemoteControl,
112
112
  }, playsInline: true, onPlay: () => {
@@ -114,15 +114,15 @@ export class RtkScreenshareView {
114
114
  screenshareParticipant: this.participant,
115
115
  participant: this.meeting.self,
116
116
  });
117
- }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '25d8a59dae9afe875761f4ecaaae6d8f0c12792c', label: text }, h("rtk-button", { key: '9b294b9b0a987c8e54f6bca1ab3edc3e1a5238f9', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: 'd768caec415a0b75f42d39cfb15f3821264046da', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '7f4802409d87bb07dedac257e75f3e1d23ca4757' }, this.t('screenshare.shared')), h("div", { key: 'acd80c0b62e14b88c1a0c717814dcdc49c1c5a40', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '721fc83372b3a9752b06fbffa61072f88aa9e1b0', variant: "danger", onClick: () => {
117
+ }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '97ba6869139126f0114aee3239999bfe1172a798', label: text }, h("rtk-button", { key: '0769449ffcba69117d10a7346e4881c207e7ac6f', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: '508cf201f0b2e6da061e35dff4d3899f1da0749a', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '6f055da4722c11893e3f8640bddad7f6844838da' }, this.t('screenshare.shared')), h("div", { key: '96fa5f8b47cef2a2a58352e4275c3c325f22a465', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '144c3908476ac18d1ffcc1282a46a4d7fad698c2', variant: "danger", onClick: () => {
118
118
  this.meeting.self.disableScreenShare();
119
- } }, h("rtk-icon", { key: '7aa2e4a597a1411e000209c6db95babf9c7f0366', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '4243b29230fc663db287f7db50dd4b5a8345a9bd', variant: "secondary", id: "expand-btn", onClick: () => {
119
+ } }, h("rtk-icon", { key: '7a6f710ccb916ca78edbb5daa9b6bcf3547ed54e', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '1667e04e5a22c3edfdab9300ffca06df7eba4948', variant: "secondary", id: "expand-btn", onClick: () => {
120
120
  this.videoExpanded = !this.videoExpanded;
121
- } }, h("rtk-icon", { key: '09c4a34f83662e5d1749e1dfd449d25da92c9976', icon: this.videoExpanded
121
+ } }, h("rtk-icon", { key: '6140671792e626d5de181861ee4c7aef1dd11e3e', icon: this.videoExpanded
122
122
  ? this.iconPack.full_screen_minimize
123
123
  : this.iconPack.full_screen_maximize, slot: "start" }), this.videoExpanded
124
124
  ? this.t('screenshare.min_preview')
125
- : this.t('screenshare.max_preview'))))), h("slot", { key: 'a2046aecd50bc6fc0b8fb94a781bdd25c1d491ea' })));
125
+ : this.t('screenshare.max_preview'))))), h("slot", { key: 'beeecb6fe5a1f46d259a86e698c31fb477949bf3' })));
126
126
  }
127
127
  static get is() { return "rtk-screenshare-view"; }
128
128
  static get encapsulation() { return "shadow"; }
package/dist/collection/utils/full-screen.js CHANGED
@@ -17,7 +17,7 @@ export const requestFullScreen = (el) => {
17
17
  el.msRequestFullscreen();
18
18
  }
19
19
  };
20
- export const exitFullSreen = () => {
20
+ export const exitFullScreen = () => {
21
21
  if (document.exitFullscreen != null) {
22
22
  document.exitFullscreen();
23
23
  }
package/dist/components/{p-02f19345.js → p-3974d97a.js} RENAMED
@@ -17,7 +17,7 @@ const requestFullScreen = (el) => {
17
17
  el.msRequestFullscreen();
18
18
  }
19
19
  };
20
- const exitFullSreen = () => {
20
+ const exitFullScreen = () => {
21
21
  if (document.exitFullscreen != null) {
22
22
  document.exitFullscreen();
23
23
  }
@@ -47,4 +47,4 @@ const isFullScreenSupported = () => {
47
47
  return false;
48
48
  };
49
49
 
50
- export { isFullScreenSupported as a, exitFullSreen as e, isFullScreenEnabled as i, requestFullScreen as r };
50
+ export { isFullScreenSupported as a, exitFullScreen as e, isFullScreenEnabled as i, requestFullScreen as r };
package/dist/components/{p-d0b9b4a1.js → p-ad194cf2.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fdad14c9.js';
2
2
  import { e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
3
- import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullSreen, a as isFullScreenSupported } from './p-02f19345.js';
3
+ import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullScreen, a as isFullScreenSupported } from './p-3974d97a.js';
4
4
  import { S as SyncWithStore } from './p-e334e15c.js';
5
5
  import { d as defineCustomElement$3 } from './p-da13b457.js';
6
6
  import { d as defineCustomElement$2 } from './p-a3cc7425.js';
@@ -45,7 +45,7 @@ const RtkFullscreenToggle = /*@__PURE__*/ proxyCustomElement(class RtkFullscreen
45
45
  this.fullScreenActive = true;
46
46
  }
47
47
  else {
48
- exitFullSreen();
48
+ exitFullScreen();
49
49
  this.fullScreenActive = false;
50
50
  }
51
51
  this.stateUpdate.emit({ activeMoreMenu: false });
package/dist/components/{p-a6c17b0d.js → p-fad88ee4.js} RENAMED
@@ -4,7 +4,7 @@ import './p-a83ccdbd.js';
4
4
  import { S as SyncWithStore } from './p-e334e15c.js';
5
5
  import { d as defineCustomElement$5 } from './p-e229128b.js';
6
6
  import { d as defineCustomElement$4 } from './p-da13b457.js';
7
- import { d as defineCustomElement$3 } from './p-d0b9b4a1.js';
7
+ import { d as defineCustomElement$3 } from './p-ad194cf2.js';
8
8
  import { d as defineCustomElement$2 } from './p-a3cc7425.js';
9
9
  import { d as defineCustomElement$1 } from './p-9cf41ab1.js';
10
10
 
package/dist/components/rtk-fullscreen-toggle.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as RtkFullscreenToggle$1, d as defineCustomElement$1 } from './p-d0b9b4a1.js';
1
+ import { R as RtkFullscreenToggle$1, d as defineCustomElement$1 } from './p-ad194cf2.js';
2
2
 
3
3
  const RtkFullscreenToggle = RtkFullscreenToggle$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/rtk-grid.js CHANGED
@@ -6,10 +6,10 @@ import { S as SyncWithStore } from './p-e334e15c.js';
6
6
  import { d as defaultGridSize } from './p-b13ddb7d.js';
7
7
  import { d as defineCustomElement$9 } from './p-e229128b.js';
8
8
  import { d as defineCustomElement$8 } from './p-da13b457.js';
9
- import { d as defineCustomElement$7 } from './p-d0b9b4a1.js';
9
+ import { d as defineCustomElement$7 } from './p-ad194cf2.js';
10
10
  import { d as defineCustomElement$6 } from './p-a3cc7425.js';
11
11
  import { d as defineCustomElement$5 } from './p-6e373d96.js';
12
- import { d as defineCustomElement$4 } from './p-a6c17b0d.js';
12
+ import { d as defineCustomElement$4 } from './p-fad88ee4.js';
13
13
  import { d as defineCustomElement$3 } from './p-9cf41ab1.js';
14
14
  import { d as defineCustomElement$2 } from './p-c6c4c24e.js';
15
15
 
package/dist/components/rtk-livestream-player.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as RtkLivestreamPlayer$1, d as defineCustomElement$1 } from './p-a6c17b0d.js';
1
+ import { R as RtkLivestreamPlayer$1, d as defineCustomElement$1 } from './p-fad88ee4.js';
2
2
 
3
3
  const RtkLivestreamPlayer = RtkLivestreamPlayer$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/rtk-screenshare-view.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, w as writeTask, h, d as Host } from './p-fdad14c9.js';
2
2
  import { e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
3
- import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullSreen, a as isFullScreenSupported } from './p-02f19345.js';
3
+ import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullScreen, a as isFullScreenSupported } from './p-3974d97a.js';
4
4
  import { S as SyncWithStore } from './p-e334e15c.js';
5
5
  import { d as defineCustomElement$4 } from './p-e229128b.js';
6
6
  import { d as defineCustomElement$3 } from './p-a3cc7425.js';
@@ -53,7 +53,7 @@ const RtkScreenshareView$1 = /*@__PURE__*/ proxyCustomElement(class RtkScreensha
53
53
  this.isFullScreen = true;
54
54
  }
55
55
  else {
56
- exitFullSreen();
56
+ exitFullScreen();
57
57
  this.isFullScreen = false;
58
58
  }
59
59
  };
@@ -110,7 +110,7 @@ const RtkScreenshareView$1 = /*@__PURE__*/ proxyCustomElement(class RtkScreensha
110
110
  const icon = this.isFullScreen
111
111
  ? this.iconPack.full_screen_minimize
112
112
  : this.iconPack.full_screen_maximize;
113
- return (h(Host, { key: '9ee4407d83a5b437f91813eedec6fd0836620a8c', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: 'bfbee68ee2700aba43d1aae85a8456c40dc55244', ref: (el) => (this.videoEl = el), class: {
113
+ return (h(Host, { key: '10646f5ea7b7b9bc162c2a98af07928a0f68f605', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: '13e87cfee55fdd6d45a72ec55792fbbfefdc5206', ref: (el) => (this.videoEl = el), class: {
114
114
  visible: this.screenShareEnabled,
115
115
  'fit-in-container': this.participant.supportsRemoteControl,
116
116
  }, playsInline: true, onPlay: () => {
@@ -118,15 +118,15 @@ const RtkScreenshareView$1 = /*@__PURE__*/ proxyCustomElement(class RtkScreensha
118
118
  screenshareParticipant: this.participant,
119
119
  participant: this.meeting.self,
120
120
  });
121
- }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '25d8a59dae9afe875761f4ecaaae6d8f0c12792c', label: text }, h("rtk-button", { key: '9b294b9b0a987c8e54f6bca1ab3edc3e1a5238f9', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: 'd768caec415a0b75f42d39cfb15f3821264046da', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '7f4802409d87bb07dedac257e75f3e1d23ca4757' }, this.t('screenshare.shared')), h("div", { key: 'acd80c0b62e14b88c1a0c717814dcdc49c1c5a40', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '721fc83372b3a9752b06fbffa61072f88aa9e1b0', variant: "danger", onClick: () => {
121
+ }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '97ba6869139126f0114aee3239999bfe1172a798', label: text }, h("rtk-button", { key: '0769449ffcba69117d10a7346e4881c207e7ac6f', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: '508cf201f0b2e6da061e35dff4d3899f1da0749a', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '6f055da4722c11893e3f8640bddad7f6844838da' }, this.t('screenshare.shared')), h("div", { key: '96fa5f8b47cef2a2a58352e4275c3c325f22a465', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '144c3908476ac18d1ffcc1282a46a4d7fad698c2', variant: "danger", onClick: () => {
122
122
  this.meeting.self.disableScreenShare();
123
- } }, h("rtk-icon", { key: '7aa2e4a597a1411e000209c6db95babf9c7f0366', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '4243b29230fc663db287f7db50dd4b5a8345a9bd', variant: "secondary", id: "expand-btn", onClick: () => {
123
+ } }, h("rtk-icon", { key: '7a6f710ccb916ca78edbb5daa9b6bcf3547ed54e', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '1667e04e5a22c3edfdab9300ffca06df7eba4948', variant: "secondary", id: "expand-btn", onClick: () => {
124
124
  this.videoExpanded = !this.videoExpanded;
125
- } }, h("rtk-icon", { key: '09c4a34f83662e5d1749e1dfd449d25da92c9976', icon: this.videoExpanded
125
+ } }, h("rtk-icon", { key: '6140671792e626d5de181861ee4c7aef1dd11e3e', icon: this.videoExpanded
126
126
  ? this.iconPack.full_screen_minimize
127
127
  : this.iconPack.full_screen_maximize, slot: "start" }), this.videoExpanded
128
128
  ? this.t('screenshare.min_preview')
129
- : this.t('screenshare.max_preview'))))), h("slot", { key: 'a2046aecd50bc6fc0b8fb94a781bdd25c1d491ea' })));
129
+ : this.t('screenshare.max_preview'))))), h("slot", { key: 'beeecb6fe5a1f46d259a86e698c31fb477949bf3' })));
130
130
  }
131
131
  get host() { return this; }
132
132
  static get watchers() { return {
package/dist/docs/docs-components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2026-03-05T07:01:33",
2
+ "timestamp": "2026-03-06T08:57:51",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.27.2",
package/dist/esm/{full-screen-1f58c594.js → full-screen-d36ffc68.js} RENAMED
@@ -17,7 +17,7 @@ const requestFullScreen = (el) => {
17
17
  el.msRequestFullscreen();
18
18
  }
19
19
  };
20
- const exitFullSreen = () => {
20
+ const exitFullScreen = () => {
21
21
  if (document.exitFullscreen != null) {
22
22
  document.exitFullscreen();
23
23
  }
@@ -47,4 +47,4 @@ const isFullScreenSupported = () => {
47
47
  return false;
48
48
  };
49
49
 
50
- export { isFullScreenSupported as a, exitFullSreen as e, isFullScreenEnabled as i, requestFullScreen as r };
50
+ export { isFullScreenSupported as a, exitFullScreen as e, isFullScreenEnabled as i, requestFullScreen as r };
package/dist/esm/loader.js CHANGED
@@ -22503,7 +22503,7 @@ const requestFullScreen = (el) => {
22503
22503
  el.msRequestFullscreen();
22504
22504
  }
22505
22505
  };
22506
- const exitFullSreen = () => {
22506
+ const exitFullScreen = () => {
22507
22507
  if (document.exitFullscreen != null) {
22508
22508
  document.exitFullscreen();
22509
22509
  }
@@ -22578,7 +22578,7 @@ const RtkScreenshareView = class {
22578
22578
  this.isFullScreen = true;
22579
22579
  }
22580
22580
  else {
22581
- exitFullSreen();
22581
+ exitFullScreen();
22582
22582
  this.isFullScreen = false;
22583
22583
  }
22584
22584
  };
@@ -22635,7 +22635,7 @@ const RtkScreenshareView = class {
22635
22635
  const icon = this.isFullScreen
22636
22636
  ? this.iconPack.full_screen_minimize
22637
22637
  : this.iconPack.full_screen_maximize;
22638
- return (h(Host, { key: '9ee4407d83a5b437f91813eedec6fd0836620a8c', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: 'bfbee68ee2700aba43d1aae85a8456c40dc55244', ref: (el) => (this.videoEl = el), class: {
22638
+ return (h(Host, { key: '10646f5ea7b7b9bc162c2a98af07928a0f68f605', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: '13e87cfee55fdd6d45a72ec55792fbbfefdc5206', ref: (el) => (this.videoEl = el), class: {
22639
22639
  visible: this.screenShareEnabled,
22640
22640
  'fit-in-container': this.participant.supportsRemoteControl,
22641
22641
  }, playsInline: true, onPlay: () => {
@@ -22643,15 +22643,15 @@ const RtkScreenshareView = class {
22643
22643
  screenshareParticipant: this.participant,
22644
22644
  participant: this.meeting.self,
22645
22645
  });
22646
- }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '25d8a59dae9afe875761f4ecaaae6d8f0c12792c', label: text }, h("rtk-button", { key: '9b294b9b0a987c8e54f6bca1ab3edc3e1a5238f9', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: 'd768caec415a0b75f42d39cfb15f3821264046da', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '7f4802409d87bb07dedac257e75f3e1d23ca4757' }, this.t('screenshare.shared')), h("div", { key: 'acd80c0b62e14b88c1a0c717814dcdc49c1c5a40', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '721fc83372b3a9752b06fbffa61072f88aa9e1b0', variant: "danger", onClick: () => {
22646
+ }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '97ba6869139126f0114aee3239999bfe1172a798', label: text }, h("rtk-button", { key: '0769449ffcba69117d10a7346e4881c207e7ac6f', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: '508cf201f0b2e6da061e35dff4d3899f1da0749a', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '6f055da4722c11893e3f8640bddad7f6844838da' }, this.t('screenshare.shared')), h("div", { key: '96fa5f8b47cef2a2a58352e4275c3c325f22a465', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '144c3908476ac18d1ffcc1282a46a4d7fad698c2', variant: "danger", onClick: () => {
22647
22647
  this.meeting.self.disableScreenShare();
22648
- } }, h("rtk-icon", { key: '7aa2e4a597a1411e000209c6db95babf9c7f0366', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '4243b29230fc663db287f7db50dd4b5a8345a9bd', variant: "secondary", id: "expand-btn", onClick: () => {
22648
+ } }, h("rtk-icon", { key: '7a6f710ccb916ca78edbb5daa9b6bcf3547ed54e', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '1667e04e5a22c3edfdab9300ffca06df7eba4948', variant: "secondary", id: "expand-btn", onClick: () => {
22649
22649
  this.videoExpanded = !this.videoExpanded;
22650
- } }, h("rtk-icon", { key: '09c4a34f83662e5d1749e1dfd449d25da92c9976', icon: this.videoExpanded
22650
+ } }, h("rtk-icon", { key: '6140671792e626d5de181861ee4c7aef1dd11e3e', icon: this.videoExpanded
22651
22651
  ? this.iconPack.full_screen_minimize
22652
22652
  : this.iconPack.full_screen_maximize, slot: "start" }), this.videoExpanded
22653
22653
  ? this.t('screenshare.min_preview')
22654
- : this.t('screenshare.max_preview'))))), h("slot", { key: 'a2046aecd50bc6fc0b8fb94a781bdd25c1d491ea' })));
22654
+ : this.t('screenshare.max_preview'))))), h("slot", { key: 'beeecb6fe5a1f46d259a86e698c31fb477949bf3' })));
22655
22655
  }
22656
22656
  get host() { return getElement(this); }
22657
22657
  static get watchers() { return {
@@ -65409,7 +65409,7 @@ const RtkFullscreenToggle = class {
65409
65409
  this.fullScreenActive = true;
65410
65410
  }
65411
65411
  else {
65412
- exitFullSreen();
65412
+ exitFullScreen();
65413
65413
  this.fullScreenActive = false;
65414
65414
  }
65415
65415
  this.stateUpdate.emit({ activeMoreMenu: false });
package/dist/esm/rtk-fullscreen-toggle.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, d as createEvent, h, a as Host } from './index-55463a54.js';
2
2
  import { e as defaultIconPack, i as useLanguage } from './ui-store-644e4cb0.js';
3
- import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullSreen, a as isFullScreenSupported } from './full-screen-1f58c594.js';
3
+ import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullScreen, a as isFullScreenSupported } from './full-screen-d36ffc68.js';
4
4
  import { S as SyncWithStore } from './index-e677f28b.js';
5
5
 
6
6
  const rtkFullscreenToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}:host([data-hidden]){display:none}";
@@ -40,7 +40,7 @@ const RtkFullscreenToggle = class {
40
40
  this.fullScreenActive = true;
41
41
  }
42
42
  else {
43
- exitFullSreen();
43
+ exitFullScreen();
44
44
  this.fullScreenActive = false;
45
45
  }
46
46
  this.stateUpdate.emit({ activeMoreMenu: false });
package/dist/esm/rtk-screenshare-view.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, d as createEvent, e as writeTask, h, a as Host, g as getElement } from './index-55463a54.js';
2
2
  import { e as defaultIconPack, i as useLanguage } from './ui-store-644e4cb0.js';
3
- import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullSreen, a as isFullScreenSupported } from './full-screen-1f58c594.js';
3
+ import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullScreen, a as isFullScreenSupported } from './full-screen-d36ffc68.js';
4
4
  import { S as SyncWithStore } from './index-e677f28b.js';
5
5
 
6
6
  const rtkScreenshareViewCss = ":host {\n line-height: initial;\n font-family: var(--rtk-font-family, sans-serif);\n\n font-feature-settings: normal;\n font-variation-settings: normal;\n}\n\np {\n margin: var(--rtk-space-0, 0px);\n padding: var(--rtk-space-0, 0px);\n}\n\n\n:host {\n height: 100%;\n width: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: var(--rtk-border-radius-lg, 12px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));\n container-type: inline-size;\n container-name: screentile;\n}\n\n::slotted(rtk-name-tag) {\n position: absolute;\n left: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n opacity: 0.8;\n}\n\n#video-container {\n position: absolute;\n display: block;\n height: 100%;\n width: 100%;\n}\n\n#video-container .fit-in-container {\n -o-object-fit: fill;\n object-fit: fill;\n}\n\nvideo {\n height: 100%;\n width: 100%;\n -o-object-fit: contain;\n object-fit: contain;\n}\n\n:host([variant='gradient']) ::slotted(rtk-audio-visualizer) {\n position: absolute;\n top: var(--rtk-space-2, 8px);\n right: var(--rtk-space-2, 8px);\n border-radius: 9999px;\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n padding: var(--rtk-space-2, 8px);\n}\n\n:host([variant='gradient']) ::slotted(rtk-name-tag) {\n bottom: var(--rtk-space-0, 0px);\n left: var(--rtk-space-0, 0px);\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n text-align: center;\n background-color: transparent;\n background-image: linear-gradient(to top, var(--tw-gradient-stops));\n --tw-gradient-from: rgb(var(--rtk-colors-background-1000, 8 8 8));\n --tw-gradient-to: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n --tw-gradient-to: transparent;\n}\n\n:host([size='sm'][variant='gradient']) ::slotted(rtk-audio-visualizer) {\n height: var(--rtk-space-5, 20px);\n width: var(--rtk-space-5, 20px);\n}\n\nvideo.visible {\n animation: video-fadein 0.4s ease;\n}\n\n#controls {\n display: none;\n position: absolute;\n top: var(--rtk-space-3, 12px);\n right: var(--rtk-space-3, 12px);\n align-items: center;\n justify-content: flex-end;\n gap: var(--rtk-space-2, 8px);\n}\n\n:host(:hover) #controls, \n:host(:active) #controls, \n:host(:focus-visible) #controls {\n display: flex;\n}\n\n#full-screen-btn {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n\n/** For self view */\n\nh3 {\n margin-top: var(--rtk-space-10, 40px);\n margin-bottom: var(--rtk-space-6, 24px);\n text-align: center;\n font-size: 20px;\n font-weight: 500;\n}\n\n:host([size='sm']) h3 {\n font-size: 16px;\n}\n\n#self-message {\n padding-left: var(--rtk-space-4, 16px);\n padding-right: var(--rtk-space-4, 16px);\n}\n\n:host(.isSelf) #self-view {\n flex: 1 1 0%;\n}\n\n:host(.isSelf) #video-container {\n position: static;\n aspect-ratio: auto;\n height: auto;\n width: 50%;\n max-width: var(--rtk-space-96, 384px);\n border-radius: var(--rtk-border-radius-md, 8px);\n transition: 0.6s ease;\n}\n\n:host(.isSelf) #video-container.expand {\n width: 60%;\n max-width: 100%;\n}\n\n.actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--rtk-space-2, 8px);\n}\n\n:host([size='sm'].isSelf) #video-container,\n:host([size='md'].isSelf) #video-container,\n:host([size='sm'].isSelf) #expand-btn,\n:host([size='md'].isSelf) #expand-btn {\n /** Hide video, fullscreen buttons in sm and md breakpoints */\n display: none;\n}\n\n/** Remote control */\n\np {\n margin: var(--rtk-space-0, 0px);\n padding: var(--rtk-space-0, 0px);\n}\n\n.remote-control {\n z-index: 10;\n height: 100%;\n max-height: 100%;\n flex: 0 1 auto;\n}\n\n#remote-control-self {\n position: absolute;\n top: var(--rtk-space-0, 0px);\n left: 50%;\n z-index: 10;\n width: -moz-max-content;\n width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n display: flex;\n height: var(--rtk-space-8, 32px);\n align-items: center;\n overflow: hidden;\n border-radius: var(--rtk-border-radius-sm, 4px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-bg-opacity));\n font-size: 12px;\n color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n transform: translateX(-50%);\n}\n\n#remote-control-self p {\n padding-left: var(--rtk-space-3, 12px);\n padding-right: var(--rtk-space-3, 12px);\n padding-top: var(--rtk-space-2, 8px);\n padding-bottom: var(--rtk-space-2, 8px);\n}\n\n#remote-control-self rtk-button {\n height: 100%;\n border-radius: var(--rtk-border-radius-none, 0);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity));\n font-size: 12px;\n}\n\n:host([size='sm']) #remote-control-self {\n height: auto;\n flex-direction: column;\n}\n\n:host([size='sm']) #remote-control-self rtk-button {\n width: 100%;\n padding-top: var(--rtk-space-1, 4px);\n padding-bottom: var(--rtk-space-1, 4px);\n}\n\n/** Name tag positions */\n\n:host([name-tag-position='bottom-right']) ::slotted(rtk-name-tag) {\n left: auto;\n right: var(--rtk-space-3, 12px);\n}\n\n:host([name-tag-position='bottom-center']) ::slotted(rtk-name-tag) {\n left: auto;\n right: auto;\n}\n\n:host([name-tag-position='top-left']) ::slotted(rtk-name-tag) {\n top: var(--rtk-space-3, 12px);\n bottom: auto;\n}\n\n:host([name-tag-position='top-right']) ::slotted(rtk-name-tag) {\n top: var(--rtk-space-3, 12px);\n right: var(--rtk-space-3, 12px);\n left: auto;\n bottom: auto;\n}\n\n:host([name-tag-position='top-center']) ::slotted(rtk-name-tag) {\n left: auto;\n right: auto;\n bottom: auto;\n top: var(--rtk-space-3, 12px);\n}\n\n/** Keyframes */\n\n@keyframes video-fadein {\n 0% {\n opacity: 0;\n transform: scale(1.4) translateY(20px);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n::slotted(rtk-network-indicator) {\n position: absolute;\n right: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n}\n\n@media only screen and (max-height: 480px) and (orientation: landscape) {\n :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag), \n :host([size='sm'][variant='solid']) rtk-name-tag {\n left: var(--rtk-space-0, 0px);\n bottom: var(--rtk-space-0, 0px);\n border-radius: var(--rtk-border-radius-none, 0);\n transform-origin: 0% 110%;\n transform: scale(0.6);\n }\n}\n\n@container screentile (max-width: 400px) {\n ::slotted(rtk-name-tag) {\n transform-origin: 0 130%;\n transform: scale(0.7);\n }\n}\n";
@@ -48,7 +48,7 @@ const RtkScreenshareView = class {
48
48
  this.isFullScreen = true;
49
49
  }
50
50
  else {
51
- exitFullSreen();
51
+ exitFullScreen();
52
52
  this.isFullScreen = false;
53
53
  }
54
54
  };
@@ -105,7 +105,7 @@ const RtkScreenshareView = class {
105
105
  const icon = this.isFullScreen
106
106
  ? this.iconPack.full_screen_minimize
107
107
  : this.iconPack.full_screen_maximize;
108
- return (h(Host, { key: '9ee4407d83a5b437f91813eedec6fd0836620a8c', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: 'bfbee68ee2700aba43d1aae85a8456c40dc55244', ref: (el) => (this.videoEl = el), class: {
108
+ return (h(Host, { key: '10646f5ea7b7b9bc162c2a98af07928a0f68f605', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: '13e87cfee55fdd6d45a72ec55792fbbfefdc5206', ref: (el) => (this.videoEl = el), class: {
109
109
  visible: this.screenShareEnabled,
110
110
  'fit-in-container': this.participant.supportsRemoteControl,
111
111
  }, playsInline: true, onPlay: () => {
@@ -113,15 +113,15 @@ const RtkScreenshareView = class {
113
113
  screenshareParticipant: this.participant,
114
114
  participant: this.meeting.self,
115
115
  });
116
- }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '25d8a59dae9afe875761f4ecaaae6d8f0c12792c', label: text }, h("rtk-button", { key: '9b294b9b0a987c8e54f6bca1ab3edc3e1a5238f9', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: 'd768caec415a0b75f42d39cfb15f3821264046da', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '7f4802409d87bb07dedac257e75f3e1d23ca4757' }, this.t('screenshare.shared')), h("div", { key: 'acd80c0b62e14b88c1a0c717814dcdc49c1c5a40', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '721fc83372b3a9752b06fbffa61072f88aa9e1b0', variant: "danger", onClick: () => {
116
+ }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '97ba6869139126f0114aee3239999bfe1172a798', label: text }, h("rtk-button", { key: '0769449ffcba69117d10a7346e4881c207e7ac6f', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: '508cf201f0b2e6da061e35dff4d3899f1da0749a', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '6f055da4722c11893e3f8640bddad7f6844838da' }, this.t('screenshare.shared')), h("div", { key: '96fa5f8b47cef2a2a58352e4275c3c325f22a465', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '144c3908476ac18d1ffcc1282a46a4d7fad698c2', variant: "danger", onClick: () => {
117
117
  this.meeting.self.disableScreenShare();
118
- } }, h("rtk-icon", { key: '7aa2e4a597a1411e000209c6db95babf9c7f0366', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '4243b29230fc663db287f7db50dd4b5a8345a9bd', variant: "secondary", id: "expand-btn", onClick: () => {
118
+ } }, h("rtk-icon", { key: '7a6f710ccb916ca78edbb5daa9b6bcf3547ed54e', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '1667e04e5a22c3edfdab9300ffca06df7eba4948', variant: "secondary", id: "expand-btn", onClick: () => {
119
119
  this.videoExpanded = !this.videoExpanded;
120
- } }, h("rtk-icon", { key: '09c4a34f83662e5d1749e1dfd449d25da92c9976', icon: this.videoExpanded
120
+ } }, h("rtk-icon", { key: '6140671792e626d5de181861ee4c7aef1dd11e3e', icon: this.videoExpanded
121
121
  ? this.iconPack.full_screen_minimize
122
122
  : this.iconPack.full_screen_maximize, slot: "start" }), this.videoExpanded
123
123
  ? this.t('screenshare.min_preview')
124
- : this.t('screenshare.max_preview'))))), h("slot", { key: 'a2046aecd50bc6fc0b8fb94a781bdd25c1d491ea' })));
124
+ : this.t('screenshare.max_preview'))))), h("slot", { key: 'beeecb6fe5a1f46d259a86e698c31fb477949bf3' })));
125
125
  }
126
126
  get host() { return getElement(this); }
127
127
  static get watchers() { return {
package/dist/realtimekit-ui/{p-0511529f.entry.js → p-319034e1.entry.js} RENAMED
@@ -1 +1 @@
1
- import{r as n,d as t,e,h as a,a as i,g as r}from"./p-a599f720.js";import{e as o,i as s}from"./p-8fc79c56.js";import{i as c,r as d,e as l,a as p}from"./p-02f19345.js";import{S as h}from"./p-315cd380.js";var f=function(n,t,e,a){var i,r=arguments.length,o=r<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,e):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,t,e,a);else for(var s=n.length-1;s>=0;s--)(i=n[s])&&(o=(r<3?i(o):r>3?i(t,e,o):i(t,e))||o);return r>3&&o&&Object.defineProperty(t,e,o),o};const g=class{constructor(e){n(this,e),this.stateUpdate=t(this,"rtkStateUpdate",7),this.play=t(this,"screensharePlay",7),this.fullScreenListener=()=>{this.isFullScreen=c()},this.participantScreenshareUpdate=n=>{n.id===this.participant.id&&this.screenShareListener(n)},this.hideFullScreenButton=!1,this.nameTagPosition="bottom-left",this.variant="solid",this.iconPack=o,this.t=s(),this.videoExpanded=!1,this.screenShareEnabled=!1,this.isFullScreen=!1,this.toggleFullScreen=()=>{this.isFullScreen?(l(),this.isFullScreen=!1):(d(this.host),this.isFullScreen=!0)}}connectedCallback(){null===window||void 0===window||window.addEventListener("fullscreenchange",this.fullScreenListener),null===window||void 0===window||window.addEventListener("webkitfullscreenchange",this.fullScreenListener)}componentDidLoad(){this.participantChanged(this.participant)}disconnectedCallback(){if(!this.meeting)return;const{self:n}=this.meeting;this.participant.id===n.id&&this.screenShareListener?this.participant.removeListener("screenShareUpdate",this.screenShareListener):this.meeting.participants.joined.removeListener("screenShareUpdate",this.participantScreenshareUpdate),null===window||void 0===window||window.removeEventListener("fullscreenchange",this.fullScreenListener),null===window||void 0===window||window.removeEventListener("webkitfullscreenchange",this.fullScreenListener)}participantChanged(n){if(null!=n&&this.meeting){const{self:t}=this.meeting;this.screenShareListener=({screenShareEnabled:n,screenShareTracks:t})=>{const a=n&&null!=t.video;if(e((()=>{this.screenShareEnabled=a})),a){const n=new MediaStream;n.addTrack(t.video),null!=this.videoEl&&(this.videoEl.srcObject=n,this.videoEl.play())}else null!=this.videoEl&&(this.videoEl.srcObject=void 0)},this.screenShareListener(n),n.id===t.id?n.addListener("screenShareUpdate",this.screenShareListener):this.meeting.participants.joined.addListener("screenShareUpdate",this.participantScreenshareUpdate)}}render(){var n,t;const e=(null===(n=this.participant)||void 0===n?void 0:n.id)===(null===(t=this.meeting)||void 0===t?void 0:t.self.id),r=this.t(this.isFullScreen?"full_screen.exit":"full_screen"),o=this.isFullScreen?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize;return a(i,{key:"9ee4407d83a5b437f91813eedec6fd0836620a8c",class:{isSelf:e}},a("div",{key:"video-container",id:"video-container",class:{expand:this.videoExpanded}},a("video",{key:"bfbee68ee2700aba43d1aae85a8456c40dc55244",ref:n=>this.videoEl=n,class:{visible:this.screenShareEnabled,"fit-in-container":this.participant.supportsRemoteControl},playsInline:!0,onPlay:()=>{this.play.emit({screenshareParticipant:this.participant,participant:this.meeting.self})},autoPlay:!0,muted:!0,id:`screen-share-video-${this.participant.id}`})),a("div",{id:"controls",key:"controls"},!this.hideFullScreenButton&&!e&&p()&&a("rtk-tooltip",{key:"25d8a59dae9afe875761f4ecaaae6d8f0c12792c",label:r},a("rtk-button",{key:"9b294b9b0a987c8e54f6bca1ab3edc3e1a5238f9",id:"full-screen-btn",kind:"icon",onClick:this.toggleFullScreen,title:r},a("rtk-icon",{key:"d768caec415a0b75f42d39cfb15f3821264046da",icon:o,"aria-hidden":!0,tabIndex:-1})))),e&&a("div",{id:"self-message",key:"self-message"},a("h3",{key:"7f4802409d87bb07dedac257e75f3e1d23ca4757"},this.t("screenshare.shared")),a("div",{key:"acd80c0b62e14b88c1a0c717814dcdc49c1c5a40",class:"actions"},null!=this.meeting&&a("rtk-button",{key:"721fc83372b3a9752b06fbffa61072f88aa9e1b0",variant:"danger",onClick:()=>{this.meeting.self.disableScreenShare()}},a("rtk-icon",{key:"7aa2e4a597a1411e000209c6db95babf9c7f0366",icon:this.iconPack.share_screen_stop,slot:"start"}),this.t("screenshare.stop")),a("rtk-button",{key:"4243b29230fc663db287f7db50dd4b5a8345a9bd",variant:"secondary",id:"expand-btn",onClick:()=>{this.videoExpanded=!this.videoExpanded}},a("rtk-icon",{key:"09c4a34f83662e5d1749e1dfd449d25da92c9976",icon:this.videoExpanded?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize,slot:"start"}),this.t(this.videoExpanded?"screenshare.min_preview":"screenshare.max_preview")))),a("slot",{key:"a2046aecd50bc6fc0b8fb94a781bdd25c1d491ea"}))}get host(){return r(this)}static get watchers(){return{participant:["participantChanged"]}}};f([h()],g.prototype,"meeting",void 0),f([h()],g.prototype,"iconPack",void 0),f([h()],g.prototype,"t",void 0),g.style=":host {\n line-height: initial;\n font-family: var(--rtk-font-family, sans-serif);\n\n font-feature-settings: normal;\n font-variation-settings: normal;\n}\n\np {\n margin: var(--rtk-space-0, 0px);\n padding: var(--rtk-space-0, 0px);\n}\n\n\n:host {\n height: 100%;\n width: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: var(--rtk-border-radius-lg, 12px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));\n container-type: inline-size;\n container-name: screentile;\n}\n\n::slotted(rtk-name-tag) {\n position: absolute;\n left: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n opacity: 0.8;\n}\n\n#video-container {\n position: absolute;\n display: block;\n height: 100%;\n width: 100%;\n}\n\n#video-container .fit-in-container {\n -o-object-fit: fill;\n object-fit: fill;\n}\n\nvideo {\n height: 100%;\n width: 100%;\n -o-object-fit: contain;\n object-fit: contain;\n}\n\n:host([variant='gradient']) ::slotted(rtk-audio-visualizer) {\n position: absolute;\n top: var(--rtk-space-2, 8px);\n right: var(--rtk-space-2, 8px);\n border-radius: 9999px;\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n padding: var(--rtk-space-2, 8px);\n}\n\n:host([variant='gradient']) ::slotted(rtk-name-tag) {\n bottom: var(--rtk-space-0, 0px);\n left: var(--rtk-space-0, 0px);\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n text-align: center;\n background-color: transparent;\n background-image: linear-gradient(to top, var(--tw-gradient-stops));\n --tw-gradient-from: rgb(var(--rtk-colors-background-1000, 8 8 8));\n --tw-gradient-to: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n --tw-gradient-to: transparent;\n}\n\n:host([size='sm'][variant='gradient']) ::slotted(rtk-audio-visualizer) {\n height: var(--rtk-space-5, 20px);\n width: var(--rtk-space-5, 20px);\n}\n\nvideo.visible {\n animation: video-fadein 0.4s ease;\n}\n\n#controls {\n display: none;\n position: absolute;\n top: var(--rtk-space-3, 12px);\n right: var(--rtk-space-3, 12px);\n align-items: center;\n justify-content: flex-end;\n gap: var(--rtk-space-2, 8px);\n}\n\n:host(:hover) #controls, \n:host(:active) #controls, \n:host(:focus-visible) #controls {\n display: flex;\n}\n\n#full-screen-btn {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n\n/** For self view */\n\nh3 {\n margin-top: var(--rtk-space-10, 40px);\n margin-bottom: var(--rtk-space-6, 24px);\n text-align: center;\n font-size: 20px;\n font-weight: 500;\n}\n\n:host([size='sm']) h3 {\n font-size: 16px;\n}\n\n#self-message {\n padding-left: var(--rtk-space-4, 16px);\n padding-right: var(--rtk-space-4, 16px);\n}\n\n:host(.isSelf) #self-view {\n flex: 1 1 0%;\n}\n\n:host(.isSelf) #video-container {\n position: static;\n aspect-ratio: auto;\n height: auto;\n width: 50%;\n max-width: var(--rtk-space-96, 384px);\n border-radius: var(--rtk-border-radius-md, 8px);\n transition: 0.6s ease;\n}\n\n:host(.isSelf) #video-container.expand {\n width: 60%;\n max-width: 100%;\n}\n\n.actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--rtk-space-2, 8px);\n}\n\n:host([size='sm'].isSelf) #video-container,\n:host([size='md'].isSelf) #video-container,\n:host([size='sm'].isSelf) #expand-btn,\n:host([size='md'].isSelf) #expand-btn {\n /** Hide video, fullscreen buttons in sm and md breakpoints */\n display: none;\n}\n\n/** Remote control */\n\np {\n margin: var(--rtk-space-0, 0px);\n padding: var(--rtk-space-0, 0px);\n}\n\n.remote-control {\n z-index: 10;\n height: 100%;\n max-height: 100%;\n flex: 0 1 auto;\n}\n\n#remote-control-self {\n position: absolute;\n top: var(--rtk-space-0, 0px);\n left: 50%;\n z-index: 10;\n width: -moz-max-content;\n width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n display: flex;\n height: var(--rtk-space-8, 32px);\n align-items: center;\n overflow: hidden;\n border-radius: var(--rtk-border-radius-sm, 4px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-bg-opacity));\n font-size: 12px;\n color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n transform: translateX(-50%);\n}\n\n#remote-control-self p {\n padding-left: var(--rtk-space-3, 12px);\n padding-right: var(--rtk-space-3, 12px);\n padding-top: var(--rtk-space-2, 8px);\n padding-bottom: var(--rtk-space-2, 8px);\n}\n\n#remote-control-self rtk-button {\n height: 100%;\n border-radius: var(--rtk-border-radius-none, 0);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity));\n font-size: 12px;\n}\n\n:host([size='sm']) #remote-control-self {\n height: auto;\n flex-direction: column;\n}\n\n:host([size='sm']) #remote-control-self rtk-button {\n width: 100%;\n padding-top: var(--rtk-space-1, 4px);\n padding-bottom: var(--rtk-space-1, 4px);\n}\n\n/** Name tag positions */\n\n:host([name-tag-position='bottom-right']) ::slotted(rtk-name-tag) {\n left: auto;\n right: var(--rtk-space-3, 12px);\n}\n\n:host([name-tag-position='bottom-center']) ::slotted(rtk-name-tag) {\n left: auto;\n right: auto;\n}\n\n:host([name-tag-position='top-left']) ::slotted(rtk-name-tag) {\n top: var(--rtk-space-3, 12px);\n bottom: auto;\n}\n\n:host([name-tag-position='top-right']) ::slotted(rtk-name-tag) {\n top: var(--rtk-space-3, 12px);\n right: var(--rtk-space-3, 12px);\n left: auto;\n bottom: auto;\n}\n\n:host([name-tag-position='top-center']) ::slotted(rtk-name-tag) {\n left: auto;\n right: auto;\n bottom: auto;\n top: var(--rtk-space-3, 12px);\n}\n\n/** Keyframes */\n\n@keyframes video-fadein {\n 0% {\n opacity: 0;\n transform: scale(1.4) translateY(20px);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n::slotted(rtk-network-indicator) {\n position: absolute;\n right: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n}\n\n@media only screen and (max-height: 480px) and (orientation: landscape) {\n :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag), \n :host([size='sm'][variant='solid']) rtk-name-tag {\n left: var(--rtk-space-0, 0px);\n bottom: var(--rtk-space-0, 0px);\n border-radius: var(--rtk-border-radius-none, 0);\n transform-origin: 0% 110%;\n transform: scale(0.6);\n }\n}\n\n@container screentile (max-width: 400px) {\n ::slotted(rtk-name-tag) {\n transform-origin: 0 130%;\n transform: scale(0.7);\n }\n}\n";export{g as rtk_screenshare_view}
1
+ import{r as n,d as t,e,h as a,a as i,g as r}from"./p-a599f720.js";import{e as o,i as s}from"./p-8fc79c56.js";import{i as c,r as d,e as l,a as p}from"./p-3974d97a.js";import{S as h}from"./p-315cd380.js";var f=function(n,t,e,a){var i,r=arguments.length,o=r<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,e):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,t,e,a);else for(var s=n.length-1;s>=0;s--)(i=n[s])&&(o=(r<3?i(o):r>3?i(t,e,o):i(t,e))||o);return r>3&&o&&Object.defineProperty(t,e,o),o};const g=class{constructor(e){n(this,e),this.stateUpdate=t(this,"rtkStateUpdate",7),this.play=t(this,"screensharePlay",7),this.fullScreenListener=()=>{this.isFullScreen=c()},this.participantScreenshareUpdate=n=>{n.id===this.participant.id&&this.screenShareListener(n)},this.hideFullScreenButton=!1,this.nameTagPosition="bottom-left",this.variant="solid",this.iconPack=o,this.t=s(),this.videoExpanded=!1,this.screenShareEnabled=!1,this.isFullScreen=!1,this.toggleFullScreen=()=>{this.isFullScreen?(l(),this.isFullScreen=!1):(d(this.host),this.isFullScreen=!0)}}connectedCallback(){null===window||void 0===window||window.addEventListener("fullscreenchange",this.fullScreenListener),null===window||void 0===window||window.addEventListener("webkitfullscreenchange",this.fullScreenListener)}componentDidLoad(){this.participantChanged(this.participant)}disconnectedCallback(){if(!this.meeting)return;const{self:n}=this.meeting;this.participant.id===n.id&&this.screenShareListener?this.participant.removeListener("screenShareUpdate",this.screenShareListener):this.meeting.participants.joined.removeListener("screenShareUpdate",this.participantScreenshareUpdate),null===window||void 0===window||window.removeEventListener("fullscreenchange",this.fullScreenListener),null===window||void 0===window||window.removeEventListener("webkitfullscreenchange",this.fullScreenListener)}participantChanged(n){if(null!=n&&this.meeting){const{self:t}=this.meeting;this.screenShareListener=({screenShareEnabled:n,screenShareTracks:t})=>{const a=n&&null!=t.video;if(e((()=>{this.screenShareEnabled=a})),a){const n=new MediaStream;n.addTrack(t.video),null!=this.videoEl&&(this.videoEl.srcObject=n,this.videoEl.play())}else null!=this.videoEl&&(this.videoEl.srcObject=void 0)},this.screenShareListener(n),n.id===t.id?n.addListener("screenShareUpdate",this.screenShareListener):this.meeting.participants.joined.addListener("screenShareUpdate",this.participantScreenshareUpdate)}}render(){var n,t;const e=(null===(n=this.participant)||void 0===n?void 0:n.id)===(null===(t=this.meeting)||void 0===t?void 0:t.self.id),r=this.t(this.isFullScreen?"full_screen.exit":"full_screen"),o=this.isFullScreen?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize;return a(i,{key:"10646f5ea7b7b9bc162c2a98af07928a0f68f605",class:{isSelf:e}},a("div",{key:"video-container",id:"video-container",class:{expand:this.videoExpanded}},a("video",{key:"13e87cfee55fdd6d45a72ec55792fbbfefdc5206",ref:n=>this.videoEl=n,class:{visible:this.screenShareEnabled,"fit-in-container":this.participant.supportsRemoteControl},playsInline:!0,onPlay:()=>{this.play.emit({screenshareParticipant:this.participant,participant:this.meeting.self})},autoPlay:!0,muted:!0,id:`screen-share-video-${this.participant.id}`})),a("div",{id:"controls",key:"controls"},!this.hideFullScreenButton&&!e&&p()&&a("rtk-tooltip",{key:"97ba6869139126f0114aee3239999bfe1172a798",label:r},a("rtk-button",{key:"0769449ffcba69117d10a7346e4881c207e7ac6f",id:"full-screen-btn",kind:"icon",onClick:this.toggleFullScreen,title:r},a("rtk-icon",{key:"508cf201f0b2e6da061e35dff4d3899f1da0749a",icon:o,"aria-hidden":!0,tabIndex:-1})))),e&&a("div",{id:"self-message",key:"self-message"},a("h3",{key:"6f055da4722c11893e3f8640bddad7f6844838da"},this.t("screenshare.shared")),a("div",{key:"96fa5f8b47cef2a2a58352e4275c3c325f22a465",class:"actions"},null!=this.meeting&&a("rtk-button",{key:"144c3908476ac18d1ffcc1282a46a4d7fad698c2",variant:"danger",onClick:()=>{this.meeting.self.disableScreenShare()}},a("rtk-icon",{key:"7a6f710ccb916ca78edbb5daa9b6bcf3547ed54e",icon:this.iconPack.share_screen_stop,slot:"start"}),this.t("screenshare.stop")),a("rtk-button",{key:"1667e04e5a22c3edfdab9300ffca06df7eba4948",variant:"secondary",id:"expand-btn",onClick:()=>{this.videoExpanded=!this.videoExpanded}},a("rtk-icon",{key:"6140671792e626d5de181861ee4c7aef1dd11e3e",icon:this.videoExpanded?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize,slot:"start"}),this.t(this.videoExpanded?"screenshare.min_preview":"screenshare.max_preview")))),a("slot",{key:"beeecb6fe5a1f46d259a86e698c31fb477949bf3"}))}get host(){return r(this)}static get watchers(){return{participant:["participantChanged"]}}};f([h()],g.prototype,"meeting",void 0),f([h()],g.prototype,"iconPack",void 0),f([h()],g.prototype,"t",void 0),g.style=":host {\n line-height: initial;\n font-family: var(--rtk-font-family, sans-serif);\n\n font-feature-settings: normal;\n font-variation-settings: normal;\n}\n\np {\n margin: var(--rtk-space-0, 0px);\n padding: var(--rtk-space-0, 0px);\n}\n\n\n:host {\n height: 100%;\n width: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: var(--rtk-border-radius-lg, 12px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));\n container-type: inline-size;\n container-name: screentile;\n}\n\n::slotted(rtk-name-tag) {\n position: absolute;\n left: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n opacity: 0.8;\n}\n\n#video-container {\n position: absolute;\n display: block;\n height: 100%;\n width: 100%;\n}\n\n#video-container .fit-in-container {\n -o-object-fit: fill;\n object-fit: fill;\n}\n\nvideo {\n height: 100%;\n width: 100%;\n -o-object-fit: contain;\n object-fit: contain;\n}\n\n:host([variant='gradient']) ::slotted(rtk-audio-visualizer) {\n position: absolute;\n top: var(--rtk-space-2, 8px);\n right: var(--rtk-space-2, 8px);\n border-radius: 9999px;\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n padding: var(--rtk-space-2, 8px);\n}\n\n:host([variant='gradient']) ::slotted(rtk-name-tag) {\n bottom: var(--rtk-space-0, 0px);\n left: var(--rtk-space-0, 0px);\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n text-align: center;\n background-color: transparent;\n background-image: linear-gradient(to top, var(--tw-gradient-stops));\n --tw-gradient-from: rgb(var(--rtk-colors-background-1000, 8 8 8));\n --tw-gradient-to: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n --tw-gradient-to: transparent;\n}\n\n:host([size='sm'][variant='gradient']) ::slotted(rtk-audio-visualizer) {\n height: var(--rtk-space-5, 20px);\n width: var(--rtk-space-5, 20px);\n}\n\nvideo.visible {\n animation: video-fadein 0.4s ease;\n}\n\n#controls {\n display: none;\n position: absolute;\n top: var(--rtk-space-3, 12px);\n right: var(--rtk-space-3, 12px);\n align-items: center;\n justify-content: flex-end;\n gap: var(--rtk-space-2, 8px);\n}\n\n:host(:hover) #controls, \n:host(:active) #controls, \n:host(:focus-visible) #controls {\n display: flex;\n}\n\n#full-screen-btn {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n\n/** For self view */\n\nh3 {\n margin-top: var(--rtk-space-10, 40px);\n margin-bottom: var(--rtk-space-6, 24px);\n text-align: center;\n font-size: 20px;\n font-weight: 500;\n}\n\n:host([size='sm']) h3 {\n font-size: 16px;\n}\n\n#self-message {\n padding-left: var(--rtk-space-4, 16px);\n padding-right: var(--rtk-space-4, 16px);\n}\n\n:host(.isSelf) #self-view {\n flex: 1 1 0%;\n}\n\n:host(.isSelf) #video-container {\n position: static;\n aspect-ratio: auto;\n height: auto;\n width: 50%;\n max-width: var(--rtk-space-96, 384px);\n border-radius: var(--rtk-border-radius-md, 8px);\n transition: 0.6s ease;\n}\n\n:host(.isSelf) #video-container.expand {\n width: 60%;\n max-width: 100%;\n}\n\n.actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--rtk-space-2, 8px);\n}\n\n:host([size='sm'].isSelf) #video-container,\n:host([size='md'].isSelf) #video-container,\n:host([size='sm'].isSelf) #expand-btn,\n:host([size='md'].isSelf) #expand-btn {\n /** Hide video, fullscreen buttons in sm and md breakpoints */\n display: none;\n}\n\n/** Remote control */\n\np {\n margin: var(--rtk-space-0, 0px);\n padding: var(--rtk-space-0, 0px);\n}\n\n.remote-control {\n z-index: 10;\n height: 100%;\n max-height: 100%;\n flex: 0 1 auto;\n}\n\n#remote-control-self {\n position: absolute;\n top: var(--rtk-space-0, 0px);\n left: 50%;\n z-index: 10;\n width: -moz-max-content;\n width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n display: flex;\n height: var(--rtk-space-8, 32px);\n align-items: center;\n overflow: hidden;\n border-radius: var(--rtk-border-radius-sm, 4px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-bg-opacity));\n font-size: 12px;\n color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n transform: translateX(-50%);\n}\n\n#remote-control-self p {\n padding-left: var(--rtk-space-3, 12px);\n padding-right: var(--rtk-space-3, 12px);\n padding-top: var(--rtk-space-2, 8px);\n padding-bottom: var(--rtk-space-2, 8px);\n}\n\n#remote-control-self rtk-button {\n height: 100%;\n border-radius: var(--rtk-border-radius-none, 0);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity));\n font-size: 12px;\n}\n\n:host([size='sm']) #remote-control-self {\n height: auto;\n flex-direction: column;\n}\n\n:host([size='sm']) #remote-control-self rtk-button {\n width: 100%;\n padding-top: var(--rtk-space-1, 4px);\n padding-bottom: var(--rtk-space-1, 4px);\n}\n\n/** Name tag positions */\n\n:host([name-tag-position='bottom-right']) ::slotted(rtk-name-tag) {\n left: auto;\n right: var(--rtk-space-3, 12px);\n}\n\n:host([name-tag-position='bottom-center']) ::slotted(rtk-name-tag) {\n left: auto;\n right: auto;\n}\n\n:host([name-tag-position='top-left']) ::slotted(rtk-name-tag) {\n top: var(--rtk-space-3, 12px);\n bottom: auto;\n}\n\n:host([name-tag-position='top-right']) ::slotted(rtk-name-tag) {\n top: var(--rtk-space-3, 12px);\n right: var(--rtk-space-3, 12px);\n left: auto;\n bottom: auto;\n}\n\n:host([name-tag-position='top-center']) ::slotted(rtk-name-tag) {\n left: auto;\n right: auto;\n bottom: auto;\n top: var(--rtk-space-3, 12px);\n}\n\n/** Keyframes */\n\n@keyframes video-fadein {\n 0% {\n opacity: 0;\n transform: scale(1.4) translateY(20px);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n::slotted(rtk-network-indicator) {\n position: absolute;\n right: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n}\n\n@media only screen and (max-height: 480px) and (orientation: landscape) {\n :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag), \n :host([size='sm'][variant='solid']) rtk-name-tag {\n left: var(--rtk-space-0, 0px);\n bottom: var(--rtk-space-0, 0px);\n border-radius: var(--rtk-border-radius-none, 0);\n transform-origin: 0% 110%;\n transform: scale(0.6);\n }\n}\n\n@container screentile (max-width: 400px) {\n ::slotted(rtk-name-tag) {\n transform-origin: 0 130%;\n transform: scale(0.7);\n }\n}\n";export{g as rtk_screenshare_view}
package/dist/realtimekit-ui/{p-d3d4e6de.entry.js → p-e62baf7c.entry.js} RENAMED
@@ -1 +1 @@
1
- import{r as t,d as i,h as s,a as e}from"./p-a599f720.js";import{e as n,i as a}from"./p-8fc79c56.js";import{i as r,r as o,e as c,a as h}from"./p-02f19345.js";import{S as l}from"./p-315cd380.js";var f=function(t,i,s,e){var n,a=arguments.length,r=a<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,i,s,e);else for(var o=t.length-1;o>=0;o--)(n=t[o])&&(r=(a<3?n(r):a>3?n(i,s,r):n(i,s))||r);return a>3&&r&&Object.defineProperty(i,s,r),r};const d=class{constructor(s){t(this,s),this.stateUpdate=i(this,"rtkStateUpdate",7),this.variant="button",this.iconPack=n,this.t=a(),this.fullScreenActive=!1,this.isFullScreenSupported=!0,this.onFullScreenchange=()=>{this.fullScreenActive=r()},this.toggleFullScreen=()=>{let t=this.targetElement||document.querySelector("rtk-meeting");t&&(this.fullScreenActive?(c(),this.fullScreenActive=!1):(o(t),this.fullScreenActive=!0),this.stateUpdate.emit({activeMoreMenu:!1}))}}connectedCallback(){this.isFullScreenSupported=h(),this.onFullScreenchange(),window.addEventListener("webkitfullscreenchange",this.onFullScreenchange),window.addEventListener("fullscreenchange",this.onFullScreenchange)}disconnectedCallback(){window.removeEventListener("webkitfullscreenchange",this.onFullScreenchange),window.removeEventListener("fullscreenchange",this.onFullScreenchange)}render(){return this.isFullScreenSupported?s(e,{title:this.t("full_screen")},s("rtk-controlbar-button",{size:this.size,iconPack:this.iconPack,onClick:this.toggleFullScreen,icon:this.fullScreenActive?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize,label:this.t(this.fullScreenActive?"full_screen.exit":"full_screen"),variant:this.variant})):s(e,{"data-hidden":!0})}};f([l()],d.prototype,"states",void 0),f([l()],d.prototype,"iconPack",void 0),f([l()],d.prototype,"t",void 0),d.style=":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}:host([data-hidden]){display:none}";export{d as rtk_fullscreen_toggle}
1
+ import{r as t,d as i,h as s,a as e}from"./p-a599f720.js";import{e as a,i as n}from"./p-8fc79c56.js";import{i as r,r as o,e as c,a as h}from"./p-3974d97a.js";import{S as l}from"./p-315cd380.js";var f=function(t,i,s,e){var a,n=arguments.length,r=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,i,s,e);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(r=(n<3?a(r):n>3?a(i,s,r):a(i,s))||r);return n>3&&r&&Object.defineProperty(i,s,r),r};const d=class{constructor(s){t(this,s),this.stateUpdate=i(this,"rtkStateUpdate",7),this.variant="button",this.iconPack=a,this.t=n(),this.fullScreenActive=!1,this.isFullScreenSupported=!0,this.onFullScreenchange=()=>{this.fullScreenActive=r()},this.toggleFullScreen=()=>{let t=this.targetElement||document.querySelector("rtk-meeting");t&&(this.fullScreenActive?(c(),this.fullScreenActive=!1):(o(t),this.fullScreenActive=!0),this.stateUpdate.emit({activeMoreMenu:!1}))}}connectedCallback(){this.isFullScreenSupported=h(),this.onFullScreenchange(),window.addEventListener("webkitfullscreenchange",this.onFullScreenchange),window.addEventListener("fullscreenchange",this.onFullScreenchange)}disconnectedCallback(){window.removeEventListener("webkitfullscreenchange",this.onFullScreenchange),window.removeEventListener("fullscreenchange",this.onFullScreenchange)}render(){return this.isFullScreenSupported?s(e,{title:this.t("full_screen")},s("rtk-controlbar-button",{size:this.size,iconPack:this.iconPack,onClick:this.toggleFullScreen,icon:this.fullScreenActive?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize,label:this.t(this.fullScreenActive?"full_screen.exit":"full_screen"),variant:this.variant})):s(e,{"data-hidden":!0})}};f([l()],d.prototype,"states",void 0),f([l()],d.prototype,"iconPack",void 0),f([l()],d.prototype,"t",void 0),d.style=":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}:host([data-hidden]){display:none}";export{d as rtk_fullscreen_toggle}