@cloudflare/realtimekit-ui 1.0.3-staging.3 → 1.0.3

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 (17) hide show
  1. package/dist/browser.js +1 -1
  2. package/dist/cjs/rtk-grid.cjs.entry.js +1 -1
  3. package/dist/cjs/rtk-livestream-indicator_3.cjs.entry.js +4 -5
  4. package/dist/collection/components/rtk-grid/rtk-grid.js +1 -1
  5. package/dist/collection/components/rtk-livestream-player/rtk-livestream-player.css +36 -12
  6. package/dist/collection/components/rtk-livestream-player/rtk-livestream-player.js +3 -4
  7. package/dist/components/{p-1a6ad05c.js → p-783ab170.js} +4 -5
  8. package/dist/components/rtk-grid.js +2 -2
  9. package/dist/components/rtk-livestream-player.js +1 -1
  10. package/dist/docs/docs-components.json +1 -1
  11. package/dist/esm/loader.js +5 -6
  12. package/dist/esm/rtk-grid.entry.js +1 -1
  13. package/dist/esm/rtk-livestream-indicator_3.entry.js +4 -5
  14. package/dist/realtimekit-ui/{p-19ffa2e9.entry.js → p-2ed8953f.entry.js} +1 -1
  15. package/dist/realtimekit-ui/{p-f4105345.entry.js → p-67a1126f.entry.js} +1 -1
  16. package/dist/realtimekit-ui/realtimekit-ui.esm.js +1 -1
  17. package/package.json +3 -2
package/dist/cjs/rtk-grid.cjs.entry.js CHANGED
@@ -332,7 +332,7 @@ const RtkGrid = class {
332
332
  gap: this.gap,
333
333
  layout: this.layout,
334
334
  gridSize: this.gridSize,
335
- }, onlyChildren: true }), index$1.h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), index$1.h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded" })));
335
+ }, onlyChildren: true }), index$1.h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), index$1.h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded", t: this.t })));
336
336
  }
337
337
  static get watchers() { return {
338
338
  "meeting": ["meetingChanged"],
package/dist/cjs/rtk-livestream-indicator_3.cjs.entry.js CHANGED
@@ -35675,7 +35675,7 @@ function formatSecondsToHHMMSS(seconds) {
35675
35675
  : `${mins}:${secs.toString().padStart(2, '0')}`;
35676
35676
  }
35677
35677
 
35678
- const rtkLivestreamPlayerCss = ":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:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin:var(--rtk-space-4, 16px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;display:flex;height:auto;justify-content:space-between;align-items:center;padding:10px 10px 0px 10px;z-index:10;}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer;font-size:24px;height:30px;width:30px}.fullscreen-btn{margin-right:20px;height:30px}.control-btn:hover{opacity:0.8}.control-btn:focus{outline:none}.control-groups{display:flex;align-items:center;justify-content:space-around}#livestream-video{aspect-ratio:16/9;max-width:100%;min-width:100%;left:var(--rtk-space-0, 0px);z-index:20;aspect-ratio:16 / 9;width:auto;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border:none;padding:5px 10px;font-size:14px;height:30px;cursor:pointer;border-radius:5px;margin-right:10px}.level-select:focus{outline:none}.level-select option{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}";
35678
+ const rtkLivestreamPlayerCss = ":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:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin-left:var(--rtk-space-4, 16px);margin-right:var(--rtk-space-4, 16px);margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-0, 0px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;left:16px;right:16px;display:flex;height:auto;justify-content:space-between;align-items:center;padding:12px 16px;z-index:30;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:6px;border-radius:var(--rtk-border-radius-md, 8px);background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / 0.8)}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer;font-size:24px;height:30px;width:30px}.fullscreen-btn{margin-right:20px;height:30px}.control-btn:hover{opacity:0.8}.control-btn:focus{outline:none}.control-groups{display:flex;align-items:center;justify-content:space-around}#livestream-video,.livestream-video{position:absolute;top:0;left:0;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;min-width:100% !important;min-height:100% !important;-o-object-fit:fill !important;object-fit:fill !important;z-index:10;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}:host:not(:fullscreen) .video-container{padding:16px 16px 0 16px}:host(:fullscreen) .video-container,:host(:-webkit-full-screen) .video-container,:host(:-moz-full-screen) .video-container{padding:0}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border:none;padding:5px 10px;font-size:14px;height:30px;cursor:pointer;border-radius:5px;margin-right:10px}.level-select:focus{outline:none}.level-select option{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}";
35679
35679
  const RtkLivestreamPlayerStyle0 = rtkLivestreamPlayerCss;
35680
35680
 
35681
35681
  var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -35948,23 +35948,22 @@ const RtkLivestreamPlayer = class {
35948
35948
  this.meeting.livestream.on('livestreamUpdate', this.livestreamUpdateListener);
35949
35949
  }
35950
35950
  render() {
35951
- var _a, _b;
35952
35951
  if (!uiStore.showLivestream(this.meeting))
35953
35952
  return;
35954
35953
  const { isError, errorMessage } = this.getErrorState();
35955
35954
  const { isLoading, loadingMessage, showIcon } = this.getLoadingState();
35956
35955
  return (index$1.h(index$1.Host, null, index$1.h("div", { class: "player-container h-full max-h-full min-h-full w-full min-w-full max-w-full" }, index$1.h("div", { ref: async (el) => {
35957
35956
  this.videoContainerRef = el;
35958
- }, class: "video-container relative flex h-full w-full flex-col items-center justify-center pb-20" }, index$1.h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
35957
+ }, class: "video-container relative flex h-full w-full flex-col items-center justify-center" }, index$1.h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
35959
35958
  this.videoRef = el;
35960
35959
  await this.conditionallyStartLivestreamViewer();
35961
- }, id: "livestream-video", style: { height: `${(_a = this.el) === null || _a === void 0 ? void 0 : _a.clientHeight}px` }, controls: false, onPlay: () => {
35960
+ }, id: "livestream-video", class: "livestream-video", controls: false, onPlay: () => {
35962
35961
  if (this.playerState === uiStore.PlayerState.PAUSED) {
35963
35962
  this.playerState = uiStore.PlayerState.PLAYING;
35964
35963
  }
35965
35964
  }, onPause: () => (this.playerState = uiStore.PlayerState.PAUSED) }), this.playerState !== uiStore.PlayerState.IDLE && !this.hideControls && (
35966
35965
  // <!-- Control Bar -->
35967
- index$1.h("div", { class: "control-bar", style: { width: `${(_b = this.videoRef) === null || _b === void 0 ? void 0 : _b.clientWidth}px` } }, index$1.h("div", { class: "control-groups" }, index$1.h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === uiStore.PlayerState.PLAYING
35966
+ index$1.h("div", { class: "control-bar" }, index$1.h("div", { class: "control-groups" }, index$1.h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === uiStore.PlayerState.PLAYING
35968
35967
  ? this.iconPack.pause
35969
35968
  : this.iconPack.play }), index$1.h("rtk-icon", { size: "lg", class: "control-btn", icon: this.iconPack.fastForward, onClick: this.fastForwardToLatest }), index$1.h("span", { class: "timings" }, formatSecondsToHHMMSS(this.currentTime), " /", ' ', formatSecondsToHHMMSS(this.duration))), index$1.h("div", { class: "control-groups" }, index$1.h("select", { class: "level-select", onChange: (e) => this.changeQuality(parseInt(e.target.value)) }, this.qualityLevels.map((level) => (index$1.h("option", { value: level.level, selected: this.selectedQuality === level.level }, level.resolution)))), index$1.h("rtk-fullscreen-toggle", { id: "fullscreen", class: "control-btn fullscreen-btn", targetElement: this.videoContainerRef, size: "sm", iconPack: this.iconPack, t: this.t, ref: (fullScreenToggle) => {
35970
35969
  var _a;
package/dist/collection/components/rtk-grid/rtk-grid.js CHANGED
@@ -329,7 +329,7 @@ export class RtkGrid {
329
329
  gap: this.gap,
330
330
  layout: this.layout,
331
331
  gridSize: this.gridSize,
332
- }, onlyChildren: true }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded" })));
332
+ }, onlyChildren: true }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded", t: this.t })));
333
333
  }
334
334
  static get is() { return "rtk-grid"; }
335
335
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/rtk-livestream-player/rtk-livestream-player.css CHANGED
@@ -27,7 +27,10 @@ p {
27
27
 
28
28
  .player-container {
29
29
  position: relative;
30
- margin: var(--rtk-space-4, 16px);
30
+ margin-left: var(--rtk-space-4, 16px);
31
+ margin-right: var(--rtk-space-4, 16px);
32
+ margin-top: var(--rtk-space-4, 16px);
33
+ margin-bottom: var(--rtk-space-0, 0px);
31
34
  display: flex;
32
35
  flex-grow: 1;
33
36
  align-items: center;
@@ -87,12 +90,15 @@ p {
87
90
  .control-bar {
88
91
  position: absolute;
89
92
  bottom: 0;
93
+ left: 16px;
94
+ right: 16px;
90
95
  display: flex;
91
96
  height: auto;
92
97
  justify-content: space-between;
93
98
  align-items: center;
94
- padding: 10px 10px 0px 10px;
95
- z-index: 10; /* Ensures the control bar is above the video */
99
+ padding: 12px 16px;
100
+ z-index: 30; /* Higher z-index to ensure it's above the video */ --tw-bg-opacity: 1; background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));
101
+ border-radius: 6px; /* rounded-md fallback */ border-radius: var(--rtk-border-radius-md, 8px); background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / 0.8);
96
102
  }
97
103
 
98
104
  .timings {
@@ -132,16 +138,34 @@ p {
132
138
  justify-content: space-around;
133
139
  }
134
140
 
135
- #livestream-video {
136
- aspect-ratio: 16/9;
137
- max-width: 100%;
138
- min-width: 100%;
139
- left: var(--rtk-space-0, 0px);
140
- z-index: 20;
141
- aspect-ratio: 16 / 9;
142
- width: auto;
141
+ #livestream-video,
142
+ .livestream-video {
143
+ position: absolute;
144
+ top: 0;
145
+ left: 0;
146
+ width: 100% !important;
147
+ height: 100% !important;
148
+ max-width: none !important;
149
+ max-height: none !important;
150
+ min-width: 100% !important;
151
+ min-height: 100% !important;
152
+ -o-object-fit: fill !important;
153
+ object-fit: fill !important;
154
+ z-index: 10;
143
155
  border-radius: var(--rtk-border-radius-md, 8px);
144
- border-width: 0px;;
156
+ border-width: 0px;
157
+ }
158
+
159
+ /* Non-fullscreen: add padding to container for spacing (no bottom padding) */
160
+ :host:not(:fullscreen) .video-container {
161
+ padding: 16px 16px 0 16px;
162
+ }
163
+
164
+ /* Fullscreen: remove padding and ensure full coverage */
165
+ :host(:fullscreen) .video-container,
166
+ :host(:-webkit-full-screen) .video-container,
167
+ :host(:-moz-full-screen) .video-container {
168
+ padding: 0;
145
169
  }
146
170
 
147
171
 
package/dist/collection/components/rtk-livestream-player/rtk-livestream-player.js CHANGED
@@ -273,23 +273,22 @@ export class RtkLivestreamPlayer {
273
273
  this.meeting.livestream.on('livestreamUpdate', this.livestreamUpdateListener);
274
274
  }
275
275
  render() {
276
- var _a, _b;
277
276
  if (!showLivestream(this.meeting))
278
277
  return;
279
278
  const { isError, errorMessage } = this.getErrorState();
280
279
  const { isLoading, loadingMessage, showIcon } = this.getLoadingState();
281
280
  return (h(Host, null, h("div", { class: "player-container h-full max-h-full min-h-full w-full min-w-full max-w-full" }, h("div", { ref: async (el) => {
282
281
  this.videoContainerRef = el;
283
- }, class: "video-container relative flex h-full w-full flex-col items-center justify-center pb-20" }, h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
282
+ }, class: "video-container relative flex h-full w-full flex-col items-center justify-center" }, h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
284
283
  this.videoRef = el;
285
284
  await this.conditionallyStartLivestreamViewer();
286
- }, id: "livestream-video", style: { height: `${(_a = this.el) === null || _a === void 0 ? void 0 : _a.clientHeight}px` }, controls: false, onPlay: () => {
285
+ }, id: "livestream-video", class: "livestream-video", controls: false, onPlay: () => {
287
286
  if (this.playerState === PlayerState.PAUSED) {
288
287
  this.playerState = PlayerState.PLAYING;
289
288
  }
290
289
  }, onPause: () => (this.playerState = PlayerState.PAUSED) }), this.playerState !== PlayerState.IDLE && !this.hideControls && (
291
290
  // <!-- Control Bar -->
292
- h("div", { class: "control-bar", style: { width: `${(_b = this.videoRef) === null || _b === void 0 ? void 0 : _b.clientWidth}px` } }, h("div", { class: "control-groups" }, h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === PlayerState.PLAYING
291
+ h("div", { class: "control-bar" }, h("div", { class: "control-groups" }, h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === PlayerState.PLAYING
293
292
  ? this.iconPack.pause
294
293
  : this.iconPack.play }), h("rtk-icon", { size: "lg", class: "control-btn", icon: this.iconPack.fastForward, onClick: this.fastForwardToLatest }), h("span", { class: "timings" }, formatSecondsToHHMMSS(this.currentTime), " /", ' ', formatSecondsToHHMMSS(this.duration))), h("div", { class: "control-groups" }, h("select", { class: "level-select", onChange: (e) => this.changeQuality(parseInt(e.target.value)) }, this.qualityLevels.map((level) => (h("option", { value: level.level, selected: this.selectedQuality === level.level }, level.resolution)))), h("rtk-fullscreen-toggle", { id: "fullscreen", class: "control-btn fullscreen-btn", targetElement: this.videoContainerRef, size: "sm", iconPack: this.iconPack, t: this.t, ref: (fullScreenToggle) => {
295
294
  var _a;
package/dist/components/{p-1a6ad05c.js → p-783ab170.js} RENAMED
@@ -35616,7 +35616,7 @@ function formatSecondsToHHMMSS(seconds) {
35616
35616
  : `${mins}:${secs.toString().padStart(2, '0')}`;
35617
35617
  }
35618
35618
 
35619
- const rtkLivestreamPlayerCss = ":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:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin:var(--rtk-space-4, 16px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;display:flex;height:auto;justify-content:space-between;align-items:center;padding:10px 10px 0px 10px;z-index:10;}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer;font-size:24px;height:30px;width:30px}.fullscreen-btn{margin-right:20px;height:30px}.control-btn:hover{opacity:0.8}.control-btn:focus{outline:none}.control-groups{display:flex;align-items:center;justify-content:space-around}#livestream-video{aspect-ratio:16/9;max-width:100%;min-width:100%;left:var(--rtk-space-0, 0px);z-index:20;aspect-ratio:16 / 9;width:auto;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border:none;padding:5px 10px;font-size:14px;height:30px;cursor:pointer;border-radius:5px;margin-right:10px}.level-select:focus{outline:none}.level-select option{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}";
35619
+ const rtkLivestreamPlayerCss = ":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:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin-left:var(--rtk-space-4, 16px);margin-right:var(--rtk-space-4, 16px);margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-0, 0px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;left:16px;right:16px;display:flex;height:auto;justify-content:space-between;align-items:center;padding:12px 16px;z-index:30;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:6px;border-radius:var(--rtk-border-radius-md, 8px);background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / 0.8)}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer;font-size:24px;height:30px;width:30px}.fullscreen-btn{margin-right:20px;height:30px}.control-btn:hover{opacity:0.8}.control-btn:focus{outline:none}.control-groups{display:flex;align-items:center;justify-content:space-around}#livestream-video,.livestream-video{position:absolute;top:0;left:0;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;min-width:100% !important;min-height:100% !important;-o-object-fit:fill !important;object-fit:fill !important;z-index:10;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}:host:not(:fullscreen) .video-container{padding:16px 16px 0 16px}:host(:fullscreen) .video-container,:host(:-webkit-full-screen) .video-container,:host(:-moz-full-screen) .video-container{padding:0}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border:none;padding:5px 10px;font-size:14px;height:30px;cursor:pointer;border-radius:5px;margin-right:10px}.level-select:focus{outline:none}.level-select option{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}";
35620
35620
  const RtkLivestreamPlayerStyle0 = rtkLivestreamPlayerCss;
35621
35621
 
35622
35622
  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -35891,23 +35891,22 @@ const RtkLivestreamPlayer = /*@__PURE__*/ proxyCustomElement(class RtkLivestream
35891
35891
  this.meeting.livestream.on('livestreamUpdate', this.livestreamUpdateListener);
35892
35892
  }
35893
35893
  render() {
35894
- var _a, _b;
35895
35894
  if (!showLivestream(this.meeting))
35896
35895
  return;
35897
35896
  const { isError, errorMessage } = this.getErrorState();
35898
35897
  const { isLoading, loadingMessage, showIcon } = this.getLoadingState();
35899
35898
  return (h(Host, null, h("div", { class: "player-container h-full max-h-full min-h-full w-full min-w-full max-w-full" }, h("div", { ref: async (el) => {
35900
35899
  this.videoContainerRef = el;
35901
- }, class: "video-container relative flex h-full w-full flex-col items-center justify-center pb-20" }, h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
35900
+ }, class: "video-container relative flex h-full w-full flex-col items-center justify-center" }, h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
35902
35901
  this.videoRef = el;
35903
35902
  await this.conditionallyStartLivestreamViewer();
35904
- }, id: "livestream-video", style: { height: `${(_a = this.el) === null || _a === void 0 ? void 0 : _a.clientHeight}px` }, controls: false, onPlay: () => {
35903
+ }, id: "livestream-video", class: "livestream-video", controls: false, onPlay: () => {
35905
35904
  if (this.playerState === PlayerState.PAUSED) {
35906
35905
  this.playerState = PlayerState.PLAYING;
35907
35906
  }
35908
35907
  }, onPause: () => (this.playerState = PlayerState.PAUSED) }), this.playerState !== PlayerState.IDLE && !this.hideControls && (
35909
35908
  // <!-- Control Bar -->
35910
- h("div", { class: "control-bar", style: { width: `${(_b = this.videoRef) === null || _b === void 0 ? void 0 : _b.clientWidth}px` } }, h("div", { class: "control-groups" }, h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === PlayerState.PLAYING
35909
+ h("div", { class: "control-bar" }, h("div", { class: "control-groups" }, h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === PlayerState.PLAYING
35911
35910
  ? this.iconPack.pause
35912
35911
  : this.iconPack.play }), h("rtk-icon", { size: "lg", class: "control-btn", icon: this.iconPack.fastForward, onClick: this.fastForwardToLatest }), h("span", { class: "timings" }, formatSecondsToHHMMSS(this.currentTime), " /", ' ', formatSecondsToHHMMSS(this.duration))), h("div", { class: "control-groups" }, h("select", { class: "level-select", onChange: (e) => this.changeQuality(parseInt(e.target.value)) }, this.qualityLevels.map((level) => (h("option", { value: level.level, selected: this.selectedQuality === level.level }, level.resolution)))), h("rtk-fullscreen-toggle", { id: "fullscreen", class: "control-btn fullscreen-btn", targetElement: this.videoContainerRef, size: "sm", iconPack: this.iconPack, t: this.t, ref: (fullScreenToggle) => {
35913
35912
  var _a;
package/dist/components/rtk-grid.js CHANGED
@@ -9,7 +9,7 @@ import { d as defineCustomElement$8 } from './p-65da3d17.js';
9
9
  import { d as defineCustomElement$7 } from './p-1590eea9.js';
10
10
  import { d as defineCustomElement$6 } from './p-a73161da.js';
11
11
  import { d as defineCustomElement$5 } from './p-7dcce90b.js';
12
- import { d as defineCustomElement$4 } from './p-1a6ad05c.js';
12
+ import { d as defineCustomElement$4 } from './p-783ab170.js';
13
13
  import { d as defineCustomElement$3 } from './p-23d64784.js';
14
14
  import { d as defineCustomElement$2 } from './p-afc2ce7b.js';
15
15
 
@@ -338,7 +338,7 @@ const RtkGrid$1 = /*@__PURE__*/ proxyCustomElement(class RtkGrid extends H {
338
338
  gap: this.gap,
339
339
  layout: this.layout,
340
340
  gridSize: this.gridSize,
341
- }, onlyChildren: true }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded" })));
341
+ }, onlyChildren: true }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded", t: this.t })));
342
342
  }
343
343
  static get watchers() { return {
344
344
  "meeting": ["meetingChanged"],
package/dist/components/rtk-livestream-player.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as RtkLivestreamPlayer$1, d as defineCustomElement$1 } from './p-1a6ad05c.js';
1
+ import { R as RtkLivestreamPlayer$1, d as defineCustomElement$1 } from './p-783ab170.js';
2
2
 
3
3
  const RtkLivestreamPlayer = RtkLivestreamPlayer$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/docs/docs-components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-07-07T11:29:54",
2
+ "timestamp": "2025-07-17T04:26:43",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.27.2",
package/dist/esm/loader.js CHANGED
@@ -19263,7 +19263,7 @@ const RtkGrid = class {
19263
19263
  gap: this.gap,
19264
19264
  layout: this.layout,
19265
19265
  gridSize: this.gridSize,
19266
- }, onlyChildren: true }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded" })));
19266
+ }, onlyChildren: true }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded", t: this.t })));
19267
19267
  }
19268
19268
  static get watchers() { return {
19269
19269
  "meeting": ["meetingChanged"],
@@ -60122,7 +60122,7 @@ function formatSecondsToHHMMSS(seconds) {
60122
60122
  : `${mins}:${secs.toString().padStart(2, '0')}`;
60123
60123
  }
60124
60124
 
60125
- const rtkLivestreamPlayerCss = ":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:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin:var(--rtk-space-4, 16px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;display:flex;height:auto;justify-content:space-between;align-items:center;padding:10px 10px 0px 10px;z-index:10;}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer;font-size:24px;height:30px;width:30px}.fullscreen-btn{margin-right:20px;height:30px}.control-btn:hover{opacity:0.8}.control-btn:focus{outline:none}.control-groups{display:flex;align-items:center;justify-content:space-around}#livestream-video{aspect-ratio:16/9;max-width:100%;min-width:100%;left:var(--rtk-space-0, 0px);z-index:20;aspect-ratio:16 / 9;width:auto;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border:none;padding:5px 10px;font-size:14px;height:30px;cursor:pointer;border-radius:5px;margin-right:10px}.level-select:focus{outline:none}.level-select option{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}";
60125
+ const rtkLivestreamPlayerCss = ":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:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin-left:var(--rtk-space-4, 16px);margin-right:var(--rtk-space-4, 16px);margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-0, 0px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;left:16px;right:16px;display:flex;height:auto;justify-content:space-between;align-items:center;padding:12px 16px;z-index:30;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:6px;border-radius:var(--rtk-border-radius-md, 8px);background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / 0.8)}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer;font-size:24px;height:30px;width:30px}.fullscreen-btn{margin-right:20px;height:30px}.control-btn:hover{opacity:0.8}.control-btn:focus{outline:none}.control-groups{display:flex;align-items:center;justify-content:space-around}#livestream-video,.livestream-video{position:absolute;top:0;left:0;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;min-width:100% !important;min-height:100% !important;-o-object-fit:fill !important;object-fit:fill !important;z-index:10;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}:host:not(:fullscreen) .video-container{padding:16px 16px 0 16px}:host(:fullscreen) .video-container,:host(:-webkit-full-screen) .video-container,:host(:-moz-full-screen) .video-container{padding:0}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border:none;padding:5px 10px;font-size:14px;height:30px;cursor:pointer;border-radius:5px;margin-right:10px}.level-select:focus{outline:none}.level-select option{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}";
60126
60126
  const RtkLivestreamPlayerStyle0 = rtkLivestreamPlayerCss;
60127
60127
 
60128
60128
  var __decorate$1$8 = function (decorators, target, key, desc) {
@@ -60395,23 +60395,22 @@ const RtkLivestreamPlayer = class {
60395
60395
  this.meeting.livestream.on('livestreamUpdate', this.livestreamUpdateListener);
60396
60396
  }
60397
60397
  render() {
60398
- var _a, _b;
60399
60398
  if (!showLivestream(this.meeting))
60400
60399
  return;
60401
60400
  const { isError, errorMessage } = this.getErrorState();
60402
60401
  const { isLoading, loadingMessage, showIcon } = this.getLoadingState();
60403
60402
  return (h(Host, null, h("div", { class: "player-container h-full max-h-full min-h-full w-full min-w-full max-w-full" }, h("div", { ref: async (el) => {
60404
60403
  this.videoContainerRef = el;
60405
- }, class: "video-container relative flex h-full w-full flex-col items-center justify-center pb-20" }, h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
60404
+ }, class: "video-container relative flex h-full w-full flex-col items-center justify-center" }, h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
60406
60405
  this.videoRef = el;
60407
60406
  await this.conditionallyStartLivestreamViewer();
60408
- }, id: "livestream-video", style: { height: `${(_a = this.el) === null || _a === void 0 ? void 0 : _a.clientHeight}px` }, controls: false, onPlay: () => {
60407
+ }, id: "livestream-video", class: "livestream-video", controls: false, onPlay: () => {
60409
60408
  if (this.playerState === PlayerState.PAUSED) {
60410
60409
  this.playerState = PlayerState.PLAYING;
60411
60410
  }
60412
60411
  }, onPause: () => (this.playerState = PlayerState.PAUSED) }), this.playerState !== PlayerState.IDLE && !this.hideControls && (
60413
60412
  // <!-- Control Bar -->
60414
- h("div", { class: "control-bar", style: { width: `${(_b = this.videoRef) === null || _b === void 0 ? void 0 : _b.clientWidth}px` } }, h("div", { class: "control-groups" }, h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === PlayerState.PLAYING
60413
+ h("div", { class: "control-bar" }, h("div", { class: "control-groups" }, h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === PlayerState.PLAYING
60415
60414
  ? this.iconPack.pause
60416
60415
  : this.iconPack.play }), h("rtk-icon", { size: "lg", class: "control-btn", icon: this.iconPack.fastForward, onClick: this.fastForwardToLatest }), h("span", { class: "timings" }, formatSecondsToHHMMSS(this.currentTime), " /", ' ', formatSecondsToHHMMSS(this.duration))), h("div", { class: "control-groups" }, h("select", { class: "level-select", onChange: (e) => this.changeQuality(parseInt(e.target.value)) }, this.qualityLevels.map((level) => (h("option", { value: level.level, selected: this.selectedQuality === level.level }, level.resolution)))), h("rtk-fullscreen-toggle", { id: "fullscreen", class: "control-btn fullscreen-btn", targetElement: this.videoContainerRef, size: "sm", iconPack: this.iconPack, t: this.t, ref: (fullScreenToggle) => {
60417
60416
  var _a;
package/dist/esm/rtk-grid.entry.js CHANGED
@@ -328,7 +328,7 @@ const RtkGrid = class {
328
328
  gap: this.gap,
329
329
  layout: this.layout,
330
330
  gridSize: this.gridSize,
331
- }, onlyChildren: true }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded" })));
331
+ }, onlyChildren: true }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded", t: this.t })));
332
332
  }
333
333
  static get watchers() { return {
334
334
  "meeting": ["meetingChanged"],
package/dist/esm/rtk-livestream-indicator_3.entry.js CHANGED
@@ -35671,7 +35671,7 @@ function formatSecondsToHHMMSS(seconds) {
35671
35671
  : `${mins}:${secs.toString().padStart(2, '0')}`;
35672
35672
  }
35673
35673
 
35674
- const rtkLivestreamPlayerCss = ":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:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin:var(--rtk-space-4, 16px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;display:flex;height:auto;justify-content:space-between;align-items:center;padding:10px 10px 0px 10px;z-index:10;}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer;font-size:24px;height:30px;width:30px}.fullscreen-btn{margin-right:20px;height:30px}.control-btn:hover{opacity:0.8}.control-btn:focus{outline:none}.control-groups{display:flex;align-items:center;justify-content:space-around}#livestream-video{aspect-ratio:16/9;max-width:100%;min-width:100%;left:var(--rtk-space-0, 0px);z-index:20;aspect-ratio:16 / 9;width:auto;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border:none;padding:5px 10px;font-size:14px;height:30px;cursor:pointer;border-radius:5px;margin-right:10px}.level-select:focus{outline:none}.level-select option{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}";
35674
+ const rtkLivestreamPlayerCss = ":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:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin-left:var(--rtk-space-4, 16px);margin-right:var(--rtk-space-4, 16px);margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-0, 0px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;left:16px;right:16px;display:flex;height:auto;justify-content:space-between;align-items:center;padding:12px 16px;z-index:30;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:6px;border-radius:var(--rtk-border-radius-md, 8px);background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / 0.8)}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer;font-size:24px;height:30px;width:30px}.fullscreen-btn{margin-right:20px;height:30px}.control-btn:hover{opacity:0.8}.control-btn:focus{outline:none}.control-groups{display:flex;align-items:center;justify-content:space-around}#livestream-video,.livestream-video{position:absolute;top:0;left:0;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;min-width:100% !important;min-height:100% !important;-o-object-fit:fill !important;object-fit:fill !important;z-index:10;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}:host:not(:fullscreen) .video-container{padding:16px 16px 0 16px}:host(:fullscreen) .video-container,:host(:-webkit-full-screen) .video-container,:host(:-moz-full-screen) .video-container{padding:0}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border:none;padding:5px 10px;font-size:14px;height:30px;cursor:pointer;border-radius:5px;margin-right:10px}.level-select:focus{outline:none}.level-select option{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}";
35675
35675
  const RtkLivestreamPlayerStyle0 = rtkLivestreamPlayerCss;
35676
35676
 
35677
35677
  var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -35944,23 +35944,22 @@ const RtkLivestreamPlayer = class {
35944
35944
  this.meeting.livestream.on('livestreamUpdate', this.livestreamUpdateListener);
35945
35945
  }
35946
35946
  render() {
35947
- var _a, _b;
35948
35947
  if (!showLivestream(this.meeting))
35949
35948
  return;
35950
35949
  const { isError, errorMessage } = this.getErrorState();
35951
35950
  const { isLoading, loadingMessage, showIcon } = this.getLoadingState();
35952
35951
  return (h(Host, null, h("div", { class: "player-container h-full max-h-full min-h-full w-full min-w-full max-w-full" }, h("div", { ref: async (el) => {
35953
35952
  this.videoContainerRef = el;
35954
- }, class: "video-container relative flex h-full w-full flex-col items-center justify-center pb-20" }, h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
35953
+ }, class: "video-container relative flex h-full w-full flex-col items-center justify-center" }, h("video", { onMouseMove: this.onMouseMovePlayer, ref: async (el) => {
35955
35954
  this.videoRef = el;
35956
35955
  await this.conditionallyStartLivestreamViewer();
35957
- }, id: "livestream-video", style: { height: `${(_a = this.el) === null || _a === void 0 ? void 0 : _a.clientHeight}px` }, controls: false, onPlay: () => {
35956
+ }, id: "livestream-video", class: "livestream-video", controls: false, onPlay: () => {
35958
35957
  if (this.playerState === PlayerState.PAUSED) {
35959
35958
  this.playerState = PlayerState.PLAYING;
35960
35959
  }
35961
35960
  }, onPause: () => (this.playerState = PlayerState.PAUSED) }), this.playerState !== PlayerState.IDLE && !this.hideControls && (
35962
35961
  // <!-- Control Bar -->
35963
- h("div", { class: "control-bar", style: { width: `${(_b = this.videoRef) === null || _b === void 0 ? void 0 : _b.clientWidth}px` } }, h("div", { class: "control-groups" }, h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === PlayerState.PLAYING
35962
+ h("div", { class: "control-bar" }, h("div", { class: "control-groups" }, h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === PlayerState.PLAYING
35964
35963
  ? this.iconPack.pause
35965
35964
  : this.iconPack.play }), h("rtk-icon", { size: "lg", class: "control-btn", icon: this.iconPack.fastForward, onClick: this.fastForwardToLatest }), h("span", { class: "timings" }, formatSecondsToHHMMSS(this.currentTime), " /", ' ', formatSecondsToHHMMSS(this.duration))), h("div", { class: "control-groups" }, h("select", { class: "level-select", onChange: (e) => this.changeQuality(parseInt(e.target.value)) }, this.qualityLevels.map((level) => (h("option", { value: level.level, selected: this.selectedQuality === level.level }, level.resolution)))), h("rtk-fullscreen-toggle", { id: "fullscreen", class: "control-btn fullscreen-btn", targetElement: this.videoContainerRef, size: "sm", iconPack: this.iconPack, t: this.t, ref: (fullScreenToggle) => {
35966
35965
  var _a;
package/dist/realtimekit-ui/{p-19ffa2e9.entry.js → p-2ed8953f.entry.js} RENAMED
@@ -1 +1 @@
1
- import{r as t,c as i,h as s,H as e}from"./p-0ee570cd.js";import{d as a,a as n,c as r,q as h,l as o}from"./p-d3bf4348.js";import{d as p}from"./p-cbdd7a99.js";import{R as c}from"./p-c8eaa707.js";import{S as l}from"./p-dac97779.js";import{d}from"./p-b13ddb7d.js";var g=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 h=t.length-1;h>=0;h--)(a=t[h])&&(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 v=class{constructor(s){t(this,s),this.stateUpdate=i(this,"rtkStateUpdate",7),this.hideSelf=!1,this.participants=[],this.pinnedParticipants=[],this.screenShareParticipants=[],this.plugins=[],this.emptyStage=!1,this.showLiveStreamPlayer=!1,this.canCurrentPeerHost=!1,this.pipSupported=!1,this.pipEnabled=!1,this.hidden=!1,this.layout="row",this.aspectRatio="16:9",this.gap=8,this.config=a,this.iconPack=n,this.t=r(),this.gridSize=d,this.overrides={},this.invalidRoomStates=["init","waitlisted","ended","kicked","rejected"],this.filterParticipants=t=>{var i;if(this.overrides&&(null===(i=this.overrides)||void 0===i?void 0:i.videoUnsubscribed)){const i=this.overrides.videoUnsubscribed.preset;i.length>0&&(t=t.filter((t=>!i.some((i=>void 0!==t.presetName&&t.presetName.match(i))))))}return t},this.onViewModeChanged=()=>{null!=this.meeting&&this.updateActiveParticipants()},this.onParticipantJoined=p((()=>{this.updateActiveParticipants()}),50),this.onParticipantLeft=p((()=>{this.updateActiveParticipants()}),50),this.stageStatusListener=()=>{this.updateActiveParticipants(),this.showLiveStreamPlayer=h(this.meeting),"ON_STAGE"!==this.meeting.stage.status&&this.removeScreenShare(this.meeting.self)},this.peerStageStatusListener=t=>{this.updateActiveParticipants(),"ON_STAGE"!==this.meeting.stage.status&&(this.removePinned(t),this.removeScreenShare(t))},this.onScreenShareUpdate=t=>{t.screenShareEnabled?this.addScreenShare(t):this.removeScreenShare(t)},this.onSelfScreenShareUpdate=({screenShareEnabled:t})=>{t?this.addScreenShare(this.meeting.self):this.removeScreenShare(this.meeting.self)},this.toggleTileListener=({hidden:t})=>{this.hidden=t,this.updateActiveParticipants()},this.onPluginStateUpdate=(t,{active:i})=>{i?this.plugins.some((i=>i.id===t.id))||(this.plugins=[...this.plugins,t]):this.plugins=this.plugins.filter((i=>i.id!==t.id))},this.onParticipantPinned=()=>{this.updateActiveParticipants()},this.onParticipantUnpinned=()=>{this.updateActiveParticipants()},this.updateRoomStateListener=()=>{this.roomState=this.meeting.self.roomState}}connectedCallback(){this.meetingChanged(this.meeting)}disconnectedCallback(){this.disconnectMeeting(this.meeting)}disconnectMeeting(t){var i;if(null==t)return;this.participants=[],this.plugins=[];const{self:s,participants:e,plugins:a}=t;s.removeListener("pinned",this.onParticipantPinned),s.removeListener("unpinned",this.onParticipantUnpinned),s.removeListener("roomLeft",this.updateRoomStateListener),s.removeListener("roomJoined",this.updateRoomStateListener),s.removeListener("screenShareUpdate",this.onSelfScreenShareUpdate),s.removeListener("toggleTile",this.toggleTileListener),null==a||a.all.removeListener("stateUpdate",this.onPluginStateUpdate),null===(i=t.stage)||void 0===i||i.removeListener("stageStatusUpdate",this.stageStatusListener),e.removeListener("viewModeChanged",this.onViewModeChanged),e.active.removeListener("participantLeft",this.onParticipantLeft),e.active.removeListener("participantJoined",this.onParticipantJoined),e.pinned.removeListener("participantJoined",this.onParticipantPinned),e.pinned.removeListener("participantLeft",this.onParticipantUnpinned),e.joined.removeListener("screenShareUpdate",this.onScreenShareUpdate),e.joined.removeListener("stageStatusUpdate",this.peerStageStatusListener)}meetingChanged(t,i){var s,e,a,n;if(null!==i&&this.disconnectMeeting(i),null!=t){const{self:i,participants:r,plugins:h,stage:o}=t;this.pipSupported=(null===(s=this.meeting.participants.pip)||void 0===s?void 0:s.isSupported())&&(null===(e=t.self.config)||void 0===e?void 0:e.pipMode),this.pipSupported&&this.meeting.participants.pip.init();const{permissions:p}=i;this.roomState=i.roomState,this.hideSelf="ON_STAGE"!==this.meeting.stage.status||(null==p?void 0:p.isRecorder)||p.hiddenParticipant,this.participants=this.filterParticipants([...r.active.toArray(),...i.isPinned||this.hideSelf?[]:[i]]),this.pinnedParticipants=[...r.pinned.toArray(),...i.isPinned&&!this.hideSelf?[i]:[]],this.screenShareParticipants=r.joined.toArray().filter((t=>t.screenShareEnabled)),this.plugins=(null==h?void 0:h.active.toArray())||[],(null==p?void 0:p.stageEnabled)&&(this.canCurrentPeerHost=p.acceptStageRequests||p.canPresent,this.updateStage()),this.hidden=t.self.hidden,i.addListener("roomLeft",this.updateRoomStateListener),i.addListener("roomJoined",this.updateRoomStateListener),i.addListener("screenShareUpdate",this.onSelfScreenShareUpdate),i.addListener("pinned",this.onParticipantPinned),i.addListener("unpinned",this.onParticipantUnpinned),i.addListener("toggleTile",this.toggleTileListener),null==o||o.addListener("stageStatusUpdate",this.stageStatusListener),null==h||h.all.addListener("stateUpdate",this.onPluginStateUpdate),r.addListener("viewModeChanged",this.onViewModeChanged),r.active.addListener("participantLeft",this.onParticipantLeft),null===(a=null==r?void 0:r.joined)||void 0===a||a.on("stageStatusUpdate",this.peerStageStatusListener),r.joined.addListener("screenShareUpdate",this.onScreenShareUpdate),r.active.addListener("participantJoined",this.onParticipantJoined),r.pinned.addListener("participantJoined",this.onParticipantPinned),r.pinned.addListener("participantLeft",this.onParticipantUnpinned),(null===(n=t.stage)||void 0===n?void 0:n.status)&&this.stageStatusListener()}}overridesChanged(t){this.updateActiveParticipants()}screenShareParticipantsChanged(t){const i=t.length>0;!!o.states.activeScreenShare!==i&&(this.stateUpdate.emit({activeScreenShare:i}),o.states.activeScreenShare=i)}pluginsChanged(t){const i=t.length>0;!!o.states.activePlugin!==i&&(this.stateUpdate.emit({activePlugin:i}),o.states.activePlugin=i)}pinnedParticipantsChanged(t){const i=t.length>0;!!o.states.activeSpotlight!==i&&(this.stateUpdate.emit({activeSpotlight:i}),o.states.activeSpotlight=i)}updateActiveParticipants(){var t;const{self:i,participants:s,stage:e}=this.meeting;this.hideSelf=this.hidden||"ON_STAGE"!==e.status||(null===(t=i.permissions)||void 0===t?void 0:t.isRecorder)||i.permissions.hiddenParticipant,this.participants=this.filterParticipants([...s.active.toArray().filter((t=>t.id!==i.id)),..."ACTIVE_GRID"!==s.viewMode||i.isPinned||this.hideSelf?[]:[i]]),this.pinnedParticipants=[...s.pinned.toArray().filter((t=>t.id!==i.id)),...i.isPinned&&!this.hideSelf?[i]:[]],this.screenShareParticipants=s.joined.toArray().filter((t=>t.screenShareEnabled)),i.screenShareEnabled&&(this.screenShareParticipants=this.screenShareParticipants.concat([i])),this.updateStage()}updateStage(){var t;const{self:i}=this.meeting;this.meeting&&(this.emptyStage=!!(null===(t=null==i?void 0:i.permissions)||void 0===t?void 0:t.stageEnabled)&&0===this.participants.length&&0===this.pinnedParticipants.length)}addScreenShare(t){this.screenShareParticipants.some((i=>i.id===t.id))||(this.screenShareParticipants=[...this.screenShareParticipants,t])}removeScreenShare(t){this.screenShareParticipants=this.screenShareParticipants.filter((i=>i.id!==t.id))}removePinned(t){this.pinnedParticipants=this.pinnedParticipants.filter((i=>i.id!==t.id))}render(){const t={meeting:this.meeting,size:this.size,states:this.states,config:this.config,iconPack:this.iconPack,t:this.t};return this.invalidRoomStates.includes(this.roomState)?s(e,null,s("div",{class:"offline-grid"},s("rtk-icon",{icon:this.iconPack.join_stage,size:"xl"}),s("h3",null,this.t("disconnected")),s("p",null,this.t("disconnected.description")))):"disconnected"===this.roomState?s(e,null,s("div",{class:"offline-grid"},s("rtk-icon",{icon:this.iconPack.disconnected,size:"xl"}),s("h3",null,this.t("offline")),s("p",null,this.t("offline.description")))):"failed"===this.roomState?s(e,null,s("div",{class:"offline-grid"},s("rtk-icon",{icon:this.iconPack.disconnected,size:"xl"}),s("h3",null,this.t("failed")),s("p",null,this.t("failed.description")))):this.showLiveStreamPlayer?s(e,null,s("rtk-livestream-player",{meeting:this.meeting,size:this.size}),s("rtk-livestream-indicator",{meeting:this.meeting,size:"sm",t:this.t}),s("rtk-viewer-count",{meeting:this.meeting,variant:"embedded",t:this.t})):this.emptyStage?s(e,null,s("div",{class:"webinar-stage"},s("div",{class:"center"},this.canCurrentPeerHost&&s("div",{class:"ctr",part:"container"},s("p",{class:"message",part:"message"},this.t("stage.empty_host")),s("span",{class:"description",part:"description"},this.t("stage.empty_host_summary"))),!this.canCurrentPeerHost&&s("div",{class:"ctr",part:"container"},s("p",{class:"message",part:"message"},this.t("stage.empty_viewer")))))):s(e,null,s(c,{element:"rtk-grid",defaults:t,childProps:{participants:this.participants,screenShareParticipants:this.screenShareParticipants,plugins:this.plugins,pinnedParticipants:this.pinnedParticipants,aspectRatio:this.aspectRatio,gap:this.gap,layout:this.layout,gridSize:this.gridSize},onlyChildren:!0}),s("rtk-livestream-indicator",{meeting:this.meeting,size:"sm",t:this.t}),s("rtk-viewer-count",{meeting:this.meeting,variant:"embedded"}))}static get watchers(){return{meeting:["meetingChanged"],overrides:["overridesChanged"],screenShareParticipants:["screenShareParticipantsChanged"],plugins:["pluginsChanged"],pinnedParticipants:["pinnedParticipantsChanged"]}}};g([l()],v.prototype,"meeting",void 0),g([l()],v.prototype,"size",void 0),g([l()],v.prototype,"states",void 0),g([l()],v.prototype,"iconPack",void 0),g([l()],v.prototype,"t",void 0),v.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;height:100%;width:100%}.offline-grid{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}.offline-grid h3{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);font-size:20px;font-weight:500;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.offline-grid p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);text-align:center;font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.offline-grid rtk-icon{margin-bottom:var(--rtk-space-2, 8px)}.webinar-stage{box-sizing:border-box;height:100%;display:flex;align-content:center;align-items:center;justify-content:center;text-align:center}.webinar-stage h2{margin:var(--rtk-space-0, 0px);font-weight:normal}rtk-viewer-count{display:none}.ctr{display:flex;flex-direction:column;align-items:center}.message{font-size:16px;border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.description{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);font-size:14px}rtk-livestream-indicator{display:none}@media only screen and (max-device-height: 480px) and (orientation: landscape){rtk-viewer-count[variant='embedded']{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}rtk-livestream-indicator{position:absolute;top:var(--rtk-space-0, 0px);left:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}}";export{v as rtk_grid}
1
+ import{r as t,c as i,h as s,H as e}from"./p-0ee570cd.js";import{d as a,a as n,c as r,q as h,l as o}from"./p-d3bf4348.js";import{d as p}from"./p-cbdd7a99.js";import{R as c}from"./p-c8eaa707.js";import{S as l}from"./p-dac97779.js";import{d}from"./p-b13ddb7d.js";var g=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 h=t.length-1;h>=0;h--)(a=t[h])&&(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 v=class{constructor(s){t(this,s),this.stateUpdate=i(this,"rtkStateUpdate",7),this.hideSelf=!1,this.participants=[],this.pinnedParticipants=[],this.screenShareParticipants=[],this.plugins=[],this.emptyStage=!1,this.showLiveStreamPlayer=!1,this.canCurrentPeerHost=!1,this.pipSupported=!1,this.pipEnabled=!1,this.hidden=!1,this.layout="row",this.aspectRatio="16:9",this.gap=8,this.config=a,this.iconPack=n,this.t=r(),this.gridSize=d,this.overrides={},this.invalidRoomStates=["init","waitlisted","ended","kicked","rejected"],this.filterParticipants=t=>{var i;if(this.overrides&&(null===(i=this.overrides)||void 0===i?void 0:i.videoUnsubscribed)){const i=this.overrides.videoUnsubscribed.preset;i.length>0&&(t=t.filter((t=>!i.some((i=>void 0!==t.presetName&&t.presetName.match(i))))))}return t},this.onViewModeChanged=()=>{null!=this.meeting&&this.updateActiveParticipants()},this.onParticipantJoined=p((()=>{this.updateActiveParticipants()}),50),this.onParticipantLeft=p((()=>{this.updateActiveParticipants()}),50),this.stageStatusListener=()=>{this.updateActiveParticipants(),this.showLiveStreamPlayer=h(this.meeting),"ON_STAGE"!==this.meeting.stage.status&&this.removeScreenShare(this.meeting.self)},this.peerStageStatusListener=t=>{this.updateActiveParticipants(),"ON_STAGE"!==this.meeting.stage.status&&(this.removePinned(t),this.removeScreenShare(t))},this.onScreenShareUpdate=t=>{t.screenShareEnabled?this.addScreenShare(t):this.removeScreenShare(t)},this.onSelfScreenShareUpdate=({screenShareEnabled:t})=>{t?this.addScreenShare(this.meeting.self):this.removeScreenShare(this.meeting.self)},this.toggleTileListener=({hidden:t})=>{this.hidden=t,this.updateActiveParticipants()},this.onPluginStateUpdate=(t,{active:i})=>{i?this.plugins.some((i=>i.id===t.id))||(this.plugins=[...this.plugins,t]):this.plugins=this.plugins.filter((i=>i.id!==t.id))},this.onParticipantPinned=()=>{this.updateActiveParticipants()},this.onParticipantUnpinned=()=>{this.updateActiveParticipants()},this.updateRoomStateListener=()=>{this.roomState=this.meeting.self.roomState}}connectedCallback(){this.meetingChanged(this.meeting)}disconnectedCallback(){this.disconnectMeeting(this.meeting)}disconnectMeeting(t){var i;if(null==t)return;this.participants=[],this.plugins=[];const{self:s,participants:e,plugins:a}=t;s.removeListener("pinned",this.onParticipantPinned),s.removeListener("unpinned",this.onParticipantUnpinned),s.removeListener("roomLeft",this.updateRoomStateListener),s.removeListener("roomJoined",this.updateRoomStateListener),s.removeListener("screenShareUpdate",this.onSelfScreenShareUpdate),s.removeListener("toggleTile",this.toggleTileListener),null==a||a.all.removeListener("stateUpdate",this.onPluginStateUpdate),null===(i=t.stage)||void 0===i||i.removeListener("stageStatusUpdate",this.stageStatusListener),e.removeListener("viewModeChanged",this.onViewModeChanged),e.active.removeListener("participantLeft",this.onParticipantLeft),e.active.removeListener("participantJoined",this.onParticipantJoined),e.pinned.removeListener("participantJoined",this.onParticipantPinned),e.pinned.removeListener("participantLeft",this.onParticipantUnpinned),e.joined.removeListener("screenShareUpdate",this.onScreenShareUpdate),e.joined.removeListener("stageStatusUpdate",this.peerStageStatusListener)}meetingChanged(t,i){var s,e,a,n;if(null!==i&&this.disconnectMeeting(i),null!=t){const{self:i,participants:r,plugins:h,stage:o}=t;this.pipSupported=(null===(s=this.meeting.participants.pip)||void 0===s?void 0:s.isSupported())&&(null===(e=t.self.config)||void 0===e?void 0:e.pipMode),this.pipSupported&&this.meeting.participants.pip.init();const{permissions:p}=i;this.roomState=i.roomState,this.hideSelf="ON_STAGE"!==this.meeting.stage.status||(null==p?void 0:p.isRecorder)||p.hiddenParticipant,this.participants=this.filterParticipants([...r.active.toArray(),...i.isPinned||this.hideSelf?[]:[i]]),this.pinnedParticipants=[...r.pinned.toArray(),...i.isPinned&&!this.hideSelf?[i]:[]],this.screenShareParticipants=r.joined.toArray().filter((t=>t.screenShareEnabled)),this.plugins=(null==h?void 0:h.active.toArray())||[],(null==p?void 0:p.stageEnabled)&&(this.canCurrentPeerHost=p.acceptStageRequests||p.canPresent,this.updateStage()),this.hidden=t.self.hidden,i.addListener("roomLeft",this.updateRoomStateListener),i.addListener("roomJoined",this.updateRoomStateListener),i.addListener("screenShareUpdate",this.onSelfScreenShareUpdate),i.addListener("pinned",this.onParticipantPinned),i.addListener("unpinned",this.onParticipantUnpinned),i.addListener("toggleTile",this.toggleTileListener),null==o||o.addListener("stageStatusUpdate",this.stageStatusListener),null==h||h.all.addListener("stateUpdate",this.onPluginStateUpdate),r.addListener("viewModeChanged",this.onViewModeChanged),r.active.addListener("participantLeft",this.onParticipantLeft),null===(a=null==r?void 0:r.joined)||void 0===a||a.on("stageStatusUpdate",this.peerStageStatusListener),r.joined.addListener("screenShareUpdate",this.onScreenShareUpdate),r.active.addListener("participantJoined",this.onParticipantJoined),r.pinned.addListener("participantJoined",this.onParticipantPinned),r.pinned.addListener("participantLeft",this.onParticipantUnpinned),(null===(n=t.stage)||void 0===n?void 0:n.status)&&this.stageStatusListener()}}overridesChanged(t){this.updateActiveParticipants()}screenShareParticipantsChanged(t){const i=t.length>0;!!o.states.activeScreenShare!==i&&(this.stateUpdate.emit({activeScreenShare:i}),o.states.activeScreenShare=i)}pluginsChanged(t){const i=t.length>0;!!o.states.activePlugin!==i&&(this.stateUpdate.emit({activePlugin:i}),o.states.activePlugin=i)}pinnedParticipantsChanged(t){const i=t.length>0;!!o.states.activeSpotlight!==i&&(this.stateUpdate.emit({activeSpotlight:i}),o.states.activeSpotlight=i)}updateActiveParticipants(){var t;const{self:i,participants:s,stage:e}=this.meeting;this.hideSelf=this.hidden||"ON_STAGE"!==e.status||(null===(t=i.permissions)||void 0===t?void 0:t.isRecorder)||i.permissions.hiddenParticipant,this.participants=this.filterParticipants([...s.active.toArray().filter((t=>t.id!==i.id)),..."ACTIVE_GRID"!==s.viewMode||i.isPinned||this.hideSelf?[]:[i]]),this.pinnedParticipants=[...s.pinned.toArray().filter((t=>t.id!==i.id)),...i.isPinned&&!this.hideSelf?[i]:[]],this.screenShareParticipants=s.joined.toArray().filter((t=>t.screenShareEnabled)),i.screenShareEnabled&&(this.screenShareParticipants=this.screenShareParticipants.concat([i])),this.updateStage()}updateStage(){var t;const{self:i}=this.meeting;this.meeting&&(this.emptyStage=!!(null===(t=null==i?void 0:i.permissions)||void 0===t?void 0:t.stageEnabled)&&0===this.participants.length&&0===this.pinnedParticipants.length)}addScreenShare(t){this.screenShareParticipants.some((i=>i.id===t.id))||(this.screenShareParticipants=[...this.screenShareParticipants,t])}removeScreenShare(t){this.screenShareParticipants=this.screenShareParticipants.filter((i=>i.id!==t.id))}removePinned(t){this.pinnedParticipants=this.pinnedParticipants.filter((i=>i.id!==t.id))}render(){const t={meeting:this.meeting,size:this.size,states:this.states,config:this.config,iconPack:this.iconPack,t:this.t};return this.invalidRoomStates.includes(this.roomState)?s(e,null,s("div",{class:"offline-grid"},s("rtk-icon",{icon:this.iconPack.join_stage,size:"xl"}),s("h3",null,this.t("disconnected")),s("p",null,this.t("disconnected.description")))):"disconnected"===this.roomState?s(e,null,s("div",{class:"offline-grid"},s("rtk-icon",{icon:this.iconPack.disconnected,size:"xl"}),s("h3",null,this.t("offline")),s("p",null,this.t("offline.description")))):"failed"===this.roomState?s(e,null,s("div",{class:"offline-grid"},s("rtk-icon",{icon:this.iconPack.disconnected,size:"xl"}),s("h3",null,this.t("failed")),s("p",null,this.t("failed.description")))):this.showLiveStreamPlayer?s(e,null,s("rtk-livestream-player",{meeting:this.meeting,size:this.size}),s("rtk-livestream-indicator",{meeting:this.meeting,size:"sm",t:this.t}),s("rtk-viewer-count",{meeting:this.meeting,variant:"embedded",t:this.t})):this.emptyStage?s(e,null,s("div",{class:"webinar-stage"},s("div",{class:"center"},this.canCurrentPeerHost&&s("div",{class:"ctr",part:"container"},s("p",{class:"message",part:"message"},this.t("stage.empty_host")),s("span",{class:"description",part:"description"},this.t("stage.empty_host_summary"))),!this.canCurrentPeerHost&&s("div",{class:"ctr",part:"container"},s("p",{class:"message",part:"message"},this.t("stage.empty_viewer")))))):s(e,null,s(c,{element:"rtk-grid",defaults:t,childProps:{participants:this.participants,screenShareParticipants:this.screenShareParticipants,plugins:this.plugins,pinnedParticipants:this.pinnedParticipants,aspectRatio:this.aspectRatio,gap:this.gap,layout:this.layout,gridSize:this.gridSize},onlyChildren:!0}),s("rtk-livestream-indicator",{meeting:this.meeting,size:"sm",t:this.t}),s("rtk-viewer-count",{meeting:this.meeting,variant:"embedded",t:this.t}))}static get watchers(){return{meeting:["meetingChanged"],overrides:["overridesChanged"],screenShareParticipants:["screenShareParticipantsChanged"],plugins:["pluginsChanged"],pinnedParticipants:["pinnedParticipantsChanged"]}}};g([l()],v.prototype,"meeting",void 0),g([l()],v.prototype,"size",void 0),g([l()],v.prototype,"states",void 0),g([l()],v.prototype,"iconPack",void 0),g([l()],v.prototype,"t",void 0),v.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;height:100%;width:100%}.offline-grid{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}.offline-grid h3{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);font-size:20px;font-weight:500;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.offline-grid p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);text-align:center;font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.offline-grid rtk-icon{margin-bottom:var(--rtk-space-2, 8px)}.webinar-stage{box-sizing:border-box;height:100%;display:flex;align-content:center;align-items:center;justify-content:center;text-align:center}.webinar-stage h2{margin:var(--rtk-space-0, 0px);font-weight:normal}rtk-viewer-count{display:none}.ctr{display:flex;flex-direction:column;align-items:center}.message{font-size:16px;border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.description{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);font-size:14px}rtk-livestream-indicator{display:none}@media only screen and (max-device-height: 480px) and (orientation: landscape){rtk-viewer-count[variant='embedded']{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}rtk-livestream-indicator{position:absolute;top:var(--rtk-space-0, 0px);left:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}}";export{v as rtk_grid}