@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.10

package/dist/collection/components/rtk-participant-setup/rtk-participant-setup.js

@@ -0,0 +1,338 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Host, h } from "@stencil/core";
+import { defaultIconPack } from "../../lib/icons";
+import { useLanguage } from "../../lib/lang";
+import { defaultConfig } from "../../exports";
+import { SyncWithStore } from "../../utils/sync-with-store";
+export class RtkParticipantSetup {
+    constructor() {
+        this.isPinned = false;
+        /** Position of name tag */
+        this.nameTagPosition = 'bottom-left';
+        /** Whether tile is used for preview */
+        this.isPreview = false;
+        /** Config object */
+        this.config = defaultConfig;
+        /** Variant */
+        this.variant = 'solid';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.onVideoUpdate = (videoState) => {
+            this.videoState = videoState;
+        };
+    }
+    connectedCallback() {
+        // set videoState before initial render and initialize listeners
+        this.participantsChanged(this.participant);
+    }
+    componentDidLoad() {
+        // load videoState into video element after first render
+        this.videoStateChanged(this.videoState);
+    }
+    disconnectedCallback() {
+        if (this.participant == null)
+            return;
+        this.participant.removeListener('videoUpdate', this.onVideoUpdate);
+    }
+    async participantsChanged(participant) {
+        if (participant != null) {
+            this.videoState = {
+                videoEnabled: participant.videoEnabled,
+                videoTrack: participant.videoTrack,
+            };
+            this.isPinned = participant.isPinned;
+            participant.addListener('videoUpdate', this.onVideoUpdate);
+        }
+    }
+    videoStateChanged(videoState) {
+        if (videoState != null && this.videoEl != null) {
+            if (videoState.videoEnabled) {
+                const stream = new MediaStream();
+                stream.addTrack(videoState.videoTrack);
+                this.videoEl.srcObject = stream;
+            }
+            else {
+                this.videoEl.srcObject = undefined;
+            }
+        }
+    }
+    isMirrored() {
+        var _a;
+        if (this.participant != null) {
+            const isSelf = 'preview' in this.participant || this.isPreview;
+            if (isSelf) {
+                const states = this.states;
+                const mirrorVideo = (_a = states === null || states === void 0 ? void 0 : states.prefs) === null || _a === void 0 ? void 0 : _a.mirrorVideo;
+                if (typeof mirrorVideo === 'boolean') {
+                    return mirrorVideo;
+                }
+            }
+        }
+        return false;
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: '69573519e7127835dd9304dcfb507ebbb94e0de8' }, h("video", { key: '75c047e3029721e655016da9a40e2b94770a5234', ref: (el) => (this.videoEl = el), class: {
+                visible: (_a = this.videoState) === null || _a === void 0 ? void 0 : _a.videoEnabled,
+                mirror: this.isMirrored(),
+                [(_d = (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.videoFit) !== null && _d !== void 0 ? _d : 'cover']: true,
+            }, autoPlay: true, playsInline: true, muted: true }), h("slot", { key: '3bdccee7fb4e001425249fe832b4bdcb01751306' })));
+    }
+    static get is() { return "rtk-participant-setup"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rtk-participant-setup.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rtk-participant-setup.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "nameTagPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'bottom-left'\n    | 'bottom-right'\n    | 'bottom-center'\n    | 'top-left'\n    | 'top-right'\n    | 'top-center'",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of name tag"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name-tag-position",
+                "reflect": true,
+                "defaultValue": "'bottom-left'"
+            },
+            "isPreview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether tile is used for preview"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-preview",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "participant": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Peer",
+                    "resolved": "({ readonly id: string; readonly userId: string; readonly name: string; readonly picture: string; readonly isHost: boolean; readonly customParticipantId?: string; readonly clientSpecificId: string; readonly flags: { [key: string]: string | boolean; }; readonly device: DeviceConfig; readonly videoTrack: MediaStreamTrack; readonly audioTrack: MediaStreamTrack; readonly screenShareTracks: { audio: MediaStreamTrack; video: MediaStreamTrack; }; readonly videoEnabled: boolean; readonly audioEnabled: boolean; readonly screenShareEnabled: boolean; readonly producers: ProducerState[]; readonly manualProducerConfig: PeerProducerConfig; readonly supportsRemoteControl: boolean; readonly presetName?: string; readonly stageStatus: StageStatus; readonly setVideoEnabled: (videoEnabled: boolean, emitEvent?: boolean) => void; readonly setAudioEnabled: (audioEnabled: boolean, emitEvent?: boolean) => void; readonly setScreenShareEnabled: (screenShareEnabled: boolean, emitEvent?: boolean) => void; readonly pin: () => Promise<unknown>; readonly unpin: () => Promise<unknown>; readonly setIsPinned: (isPinned: boolean, emitEvent?: boolean) => void; readonly disableAudio: () => Promise<void>; readonly kick: () => Promise<void>; readonly disableVideo: () => Promise<void>; readonly getPermissions: () => Promise<Pick<_dyteinternals_utils.Permissions, \"polls\" | \"plugins\" | \"chat\">>; readonly setStageStatus: (stageStatus: StageStatus) => void; readonly isPinned: boolean; readonly registerVideoElement: (videoElem: HTMLVideoElement) => void; readonly deregisterVideoElement: (videoElem?: HTMLVideoElement) => void; readonly emit: <E extends keyof ParticipantEvents>(event: E, ...args: Parameters<ParticipantEvents[E]>) => boolean; readonly on: <E extends keyof ParticipantEvents>(event: E, callback: ParticipantEvents[E]) => RTKParticipant$1; readonly addListener: <E extends keyof ParticipantEvents>(event: E, callback: ParticipantEvents[E]) => RTKParticipant$1; readonly off: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly once: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly prependListener: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly prependOnceListener: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly removeListener: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly removeAllListeners: <T extends keyof ParticipantEvents>(event?: T) => RTKParticipant$1; readonly listeners: <T extends keyof ParticipantEvents>(event: T) => Function[]; readonly listenerCount: <T extends keyof ParticipantEvents>(event: T) => number; readonly [EventEmitter.captureRejectionSymbol]?: <K>(error: Error, event: string | symbol, ...args: AnyRest) => void; readonly setMaxListeners: (n: number) => RTKParticipant$1; readonly getMaxListeners: () => number; readonly rawListeners: <K>(eventName: string | symbol) => Function[]; readonly eventNames: () => (string | symbol)[]; }) | ({ readonly name: string; readonly picture: string; readonly customParticipantId: string; readonly waitlistStatus: \"rejected\" | \"accepted\" | \"waiting\" | \"none\"; readonly role: any; readonly userId: string; readonly organizationId: string; readonly supportsRemoteControl: boolean; readonly device: DeviceConfig; readonly hidden: boolean; readonly stageStatus: StageStatus; readonly id: string; readonly presetName: string; readonly roomState: leaveRoomState | \"joined\" | \"init\" | \"waitlisted\"; readonly cleanupEvents: () => void; readonly permissions: RTKPermissionsPreset$1; readonly config: RTKThemePreset$1; readonly roomJoined: boolean; readonly setName: (name: string) => void; readonly setupTracks: (options?: { video?: boolean; audio?: boolean; forceReset?: boolean; }) => Promise<void>; readonly destructMediaHandler: () => Promise<void>; readonly removeDocumentEventListeners: () => Promise<void>; readonly enableAudio: () => Promise<void>; readonly enableVideo: () => Promise<void>; readonly updateVideoConstraints: (resolution: VideoQualityConstraints) => Promise<void>; readonly enableScreenShare: () => Promise<void>; readonly updateScreenshareConstraints: (resolution: VideoQualityConstraints) => Promise<void>; readonly disableAudio: () => Promise<void>; readonly disableVideo: () => Promise<void>; readonly disableScreenShare: () => Promise<void>; readonly getAllDevices: () => Promise<InputDeviceInfo[]>; readonly setIsPinned: (isPinned: boolean, emitEvent?: boolean) => void; readonly isPinned: boolean; readonly pin: () => Promise<unknown>; readonly unpin: () => Promise<unknown>; readonly hide: () => Promise<void>; readonly show: () => void; readonly setDevice: (device: MediaDeviceInfo) => Promise<void>; readonly cleanUpTracks: () => void; readonly registerVideoElement: (videoElem: HTMLVideoElement, isPreview?: boolean) => void; readonly deregisterVideoElement: (videoElem?: HTMLVideoElement, isPreview?: boolean) => void; readonly init: (options?: { video?: boolean; audio?: boolean; constraints?: MediaConstraints; }, skipAwaits?: boolean, context?: Context<RTKContextState>) => Promise<void>; readonly audioTrack: MediaStreamTrack; readonly rawAudioTrack: MediaStreamTrack; readonly mediaPermissions: { audio?: MediaPermission$1; video?: MediaPermission$1; screenshare?: MediaPermission$1; }; readonly addAudioMiddleware: (audioMiddleware: AudioMiddleware) => Promise<{ success: boolean; message: string; }>; readonly removeAudioMiddleware: (audioMiddleware: AudioMiddleware) => Promise<{ success: boolean; message: string; }>; readonly removeAllAudioMiddlewares: () => Promise<{ success: boolean; message: string; }>; readonly videoTrack: MediaStreamTrack; readonly rawVideoTrack: MediaStreamTrack; readonly addVideoMiddleware: (videoMiddleware: VideoMiddleware) => Promise<{ success: boolean; message: string; }>; readonly setVideoMiddlewareGlobalConfig: (config?: VideoMiddlewareGlobalConfig) => Promise<void>; readonly removeVideoMiddleware: (videoMiddleware: VideoMiddleware) => Promise<{ success: boolean; message: string; }>; readonly removeAllVideoMiddlewares: () => Promise<{ success: boolean; message: string; }>; readonly screenShareTracks: { audio: MediaStreamTrack; video: MediaStreamTrack; }; readonly audioEnabled: boolean; readonly videoEnabled: boolean; readonly screenShareEnabled: boolean; readonly getCurrentDevices: () => { audio: MediaDeviceInfo; video: MediaDeviceInfo; speaker: MediaDeviceInfo; }; readonly getAudioDevices: () => Promise<MediaDeviceInfo[]>; readonly getVideoDevices: () => Promise<MediaDeviceInfo[]>; readonly getSpeakerDevices: () => Promise<MediaDeviceInfo[]>; readonly getDeviceById: (deviceId: string, kind: \"audio\" | \"video\" | \"speaker\") => Promise<MediaDeviceInfo>; readonly emit: <E extends keyof SelfEvents>(event: E, ...args: Parameters<SelfEvents[E]>) => boolean; readonly on: <E extends keyof SelfEvents>(event: E, callback: SelfEvents[E]) => RTKSelf$1; readonly addListener: <E extends keyof SelfEvents>(event: E, callback: SelfEvents[E]) => RTKSelf$1; readonly off: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly once: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly prependListener: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly prependOnceListener: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly removeListener: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly removeAllListeners: <T extends keyof SelfEvents>(event?: T) => RTKSelf$1; readonly listeners: <T extends keyof SelfEvents>(event: T) => Function[]; readonly listenerCount: <T extends keyof SelfEvents>(event: T) => number; readonly [EventEmitter.captureRejectionSymbol]?: <K>(error: Error, event: string | symbol, ...args: AnyRest) => void; readonly setMaxListeners: (n: number) => RTKSelf$1; readonly getMaxListeners: () => number; readonly rawListeners: <K>(eventName: string | symbol) => Function[]; readonly eventNames: () => (string | symbol)[]; })",
+                    "references": {
+                        "Peer": {
+                            "location": "import",
+                            "path": "../../types/rtk-client",
+                            "id": "src/types/rtk-client.ts::Peer"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Participant object"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "states": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "States",
+                    "resolved": "States",
+                    "references": {
+                        "States": {
+                            "location": "import",
+                            "path": "../../types/props",
+                            "id": "src/types/props.ts::States"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "States object"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UIConfig",
+                    "resolved": "UIConfig",
+                    "references": {
+                        "UIConfig": {
+                            "location": "import",
+                            "path": "../../types/ui-config",
+                            "id": "src/types/ui-config/index.ts::UIConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Config object"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultConfig"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'gradient'",
+                    "resolved": "\"gradient\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'solid'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Size",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "Size": {
+                            "location": "import",
+                            "path": "../../types/props",
+                            "id": "src/types/props.ts::Size"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true
+            },
+            "iconPack": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconPack",
+                    "resolved": "{ people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; create_channel: string; create_channel_illustration: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; minimize: string; maximize: string; }",
+                    "references": {
+                        "IconPack": {
+                            "location": "import",
+                            "path": "../../lib/icons",
+                            "id": "src/lib/icons/index.ts::IconPack"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon pack"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultIconPack"
+            },
+            "t": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RtkI18n",
+                    "resolved": "(key: \"pin\" | \"unpin\" | \"kick\" | \"ended\" | \"disconnected\" | \"failed\" | \"(you)\" | \"everyone\" | (string & {}) | \"about_call\" | \"screen\" | \"camera\" | \"leave\" | \"dismiss\" | \"logo\" | \"page\" | \"more\" | \"page.prev\" | \"page.next\" | \"layout\" | \"layout.auto\" | \"settings\" | \"file\" | \"image\" | \"connection\" | \"leave_confirmation\" | \"cancel\" | \"yes\" | \"you\" | \"to\" | \"mute\" | \"pinned\" | \"accept\" | \"pip_on\" | \"pip_off\" | \"viewers\" | \"join\" | \"joined\" | \"create\" | \"close\" | \"ask\" | \"type\" | \"activate\" | \"requests\" | \"mic_off\" | \"disable_mic\" | \"mic_on\" | \"enable_mic\" | \"audio\" | \"test\" | \"minimize\" | \"maximize\" | \"mute_all\" | \"mute_all.description\" | \"mute_all.header\" | \"mute_all.allow_unmute\" | \"video_off\" | \"disable_video\" | \"video_on\" | \"enable_video\" | \"video\" | \"offline\" | \"offline.description\" | \"failed.description\" | \"disconnected.description\" | \"participants\" | \"participants.errors.empty_results\" | \"participants.empty_list\" | \"participants.no_pending_requests\" | \"participants.turn_off_video\" | \"polls\" | \"polls.by\" | \"polls.question\" | \"polls.question.placeholder\" | \"polls.answers\" | \"polls.option\" | \"polls.option.placeholder\" | \"polls.results.anon\" | \"polls.results.hide\" | \"polls.create\" | \"polls.cancel\" | \"polls.empty\" | \"polls.errors.question_required\" | \"polls.errors.empty_option\" | \"screenshare\" | \"screenshare.min_preview\" | \"screenshare.max_preview\" | \"screenshare.shared\" | \"screenshare.start\" | \"screenshare.stop\" | \"screenshare.error.unknown\" | \"screenshare.error.max_count\" | \"plugins\" | \"perm_denied\" | \"perm_denied.audio\" | \"perm_denied.video\" | \"perm_denied.screenshare\" | \"perm_denied.audio.chrome.message\" | \"perm_denied.video.chrome.message\" | \"perm_denied.screenshare.chrome.message\" | \"perm_denied.audio.safari.message\" | \"perm_denied.video.safari.message\" | \"perm_denied.screenshare.safari.message\" | \"perm_denied.audio.edge.message\" | \"perm_denied.video.edge.message\" | \"perm_denied.screenshare.edge.message\" | \"perm_denied.audio.microsoft edge.message\" | \"perm_denied.video.microsoft edge.message\" | \"perm_denied.screenshare.microsoft edge.message\" | \"perm_denied.audio.firefox.message\" | \"perm_denied.video.firefox.message\" | \"perm_denied.screenshare.firefox.message\" | \"perm_denied.audio.others.message\" | \"perm_denied.video.others.message\" | \"perm_denied.screenshare.others.message\" | \"perm_sys_denied\" | \"perm_sys_denied.audio\" | \"perm_sys_denied.video\" | \"perm_sys_denied.screenshare\" | \"perm_sys_denied.audio.macos.message\" | \"perm_sys_denied.video.macos.message\" | \"perm_sys_denied.screenshare.macos.message\" | \"perm_sys_denied.audio.ios.message\" | \"perm_sys_denied.video.ios.message\" | \"perm_sys_denied.screenshare.ios.message\" | \"perm_sys_denied.audio.windows.message\" | \"perm_sys_denied.video.windows.message\" | \"perm_sys_denied.screenshare.windows.message\" | \"perm_sys_denied.audio.android.message\" | \"perm_sys_denied.video.android.message\" | \"perm_sys_denied.screenshare.android.message\" | \"perm_sys_denied.audio.others.message\" | \"perm_sys_denied.video.others.message\" | \"perm_sys_denied.screenshare.others.message\" | \"perm_could_not_start\" | \"perm_could_not_start.audio\" | \"perm_could_not_start.video\" | \"perm_could_not_start.screenshare\" | \"perm_could_not_start.audio.message\" | \"perm_could_not_start.video.message\" | \"perm_could_not_start.screenshare.message\" | \"full_screen\" | \"full_screen.exit\" | \"waitlist.header_title\" | \"waitlist.body_text\" | \"waitlist.deny_request\" | \"waitlist.accept_request\" | \"waitlist.accept_all\" | \"stage_request.header_title\" | \"stage_request.deny_request\" | \"stage_request.accept_request\" | \"stage_request.accept_all\" | \"stage_request.deny_all\" | \"stage_request.approval_pending\" | \"stage_request.denied\" | \"stage_request.request\" | \"stage_request.requested\" | \"stage_request.cancel_request\" | \"stage_request.leave_stage\" | \"stage_request.request_tip\" | \"stage_request.leave_tip\" | \"stage_request.pending_tip\" | \"stage_request.denied_tip\" | \"stage.empty_host\" | \"stage.empty_host_summary\" | \"stage.empty_viewer\" | \"stage.remove_from_stage\" | \"stage.invited_notification\" | \"stage.add_to_stage\" | \"stage.join_title\" | \"stage.join_summary\" | \"stage.join_cancel\" | \"stage.join_confirm\" | \"setup_screen.join_in_as\" | \"setup_screen.joining_as\" | \"setup_screen.your_name\" | \"stage.reconnecting\" | \"recording.label\" | \"recording.indicator\" | \"recording.started\" | \"recording.stopped\" | \"recording.paused\" | \"recording.error.start\" | \"recording.error.stop\" | \"recording.error.resume\" | \"recording.start\" | \"recording.stop\" | \"recording.resume\" | \"recording.starting\" | \"recording.stopping\" | \"recording.loading\" | \"recording.idle\" | \"audio_playback\" | \"audio_playback.title\" | \"audio_playback.description\" | \"breakout_rooms\" | \"breakout_rooms.room_config_header\" | \"breakout_rooms.join_breakout_header\" | \"breakout_rooms.empty\" | \"breakout_rooms.delete\" | \"breakout_rooms.switch\" | \"breakout_rooms.main_room\" | \"breakout_rooms.shuffle_participants\" | \"breakout_rooms.deselect\" | \"breakout_rooms.selected\" | \"breakout_rooms.num_of_rooms\" | \"breakout_rooms.approx\" | \"breakout_rooms.participants_per_room\" | \"breakout_rooms.division_text\" | \"breakout_rooms.start_breakout\" | \"breakout_rooms.close_breakout\" | \"breakout_rooms.update_breakout\" | \"breakout_rooms.discard_changes\" | \"breakout_rooms.room\" | \"breakout_rooms.rooms\" | \"breakout_rooms.room_name\" | \"breakout_rooms.edit_room_name\" | \"breakout_rooms.save_room_name\" | \"breakout_rooms.add_room\" | \"breakout_rooms.add_room_brief\" | \"breakout_rooms.select_all\" | \"breakout_rooms.unassign_all\" | \"breakout_rooms.assign\" | \"breakout_rooms.assign_participants\" | \"breakout_rooms.none_assigned\" | \"breakout_rooms.drag_drop_participants\" | \"breakout_rooms.click_drop_participants\" | \"breakout_rooms.status.assign_multiple\" | \"breakout_rooms.status.select_room\" | \"breakout_rooms.ephemeral_status.participants_assigned\" | \"breakout_rooms.ephemeral_status.participants_assigned_randomly\" | \"breakout_rooms.ephemeral_status.changes_discarded\" | \"breakout_rooms.confirm_modal.start_breakout.header\" | \"breakout_rooms.confirm_modal.start_breakout.content\" | \"breakout_rooms.confirm_modal.start_breakout.cancelText\" | \"breakout_rooms.confirm_modal.start_breakout.ctaText\" | \"breakout_rooms.confirm_modal.close_breakout.header\" | \"breakout_rooms.confirm_modal.close_breakout.content\" | \"breakout_rooms.confirm_modal.close_breakout.ctaText\" | \"breakout_rooms.move_reason.started_msg\" | \"breakout_rooms.move_reason.started_desc\" | \"breakout_rooms.move_reason.closed_msg\" | \"breakout_rooms.move_reason.closed_desc\" | \"breakout_rooms.move_reason.switch_room\" | \"breakout_rooms.move_reason.switch_main_room\" | \"breakout_rooms.all_assigned\" | \"breakout_rooms.empty_main_room\" | \"breakout_rooms.leave_confirmation\" | \"breakout_rooms.leave_confirmation.main_room_btn\" | \"ai\" | \"ai.meeting_ai\" | \"ai.home\" | \"ai.transcriptions\" | \"ai.personal\" | \"ai.caption_view\" | \"ai.chat.tooltip\" | \"ai.chat.summerise\" | \"ai.chat.agenda\" | \"search\" | \"search.could_not_find\" | \"search.empty\" | \"end\" | \"end.all\" | \"ended.rejected\" | \"ended.left\" | \"ended.kicked\" | \"ended.disconnected\" | \"ended.network\" | \"ended.unauthorized\" | \"network\" | \"network.reconnecting\" | \"network.delay_extended\" | \"network.disconnected\" | \"network.leaving\" | \"network.restored\" | \"network.delay\" | \"network.lost\" | \"network.lost_extended\" | \"livestream\" | \"livestream.indicator\" | \"livestream.skip\" | \"livestream.idle\" | \"livestream.starting\" | \"livestream.stopping\" | \"livestream.waiting_on_manual_ingestion\" | \"livestream.error.not_supported\" | \"livestream.error.not_found\" | \"livestream.error.unknown\" | \"livestream.error.sync\" | \"livestream.error.start\" | \"livestream.error.stop\" | \"livestream.go_live\" | \"livestream.end_live\" | \"livestream.error\" | \"cta.help\" | \"cta.continue\" | \"cta.reload\" | \"cta.confirmation\" | \"cta.system_settings\" | \"remote_access.empty\" | \"remote_access.requests\" | \"remote_access.allow\" | \"remote_access.grant\" | \"remote_access.indicator\" | \"chat\" | \"chat.new\" | \"chat.max_limit_warning\" | \"chat.rate_limit_error\" | \"chat.new_channel\" | \"chat.channel_name\" | \"chat.member_name\" | \"chat.add_members\" | \"chat.delete_msg\" | \"chat.edit_msg\" | \"chat.send_msg\" | \"chat.send_attachment\" | \"chat.send_img\" | \"chat.send_file\" | \"chat.send_emoji\" | \"chat.update_msg\" | \"chat.channel_members\" | \"chat.img.loading\" | \"chat.error.img_not_found\" | \"chat.error.empty_results\" | \"chat.img.shared_by\" | \"chat.reply\" | \"chat.message_placeholder\" | \"chat.click_to_send\" | \"chat.search_msgs\" | \"chat.search_conversations\" | \"chat.start_conversation\" | \"chat.empty_search\" | \"chat.empty_channel\" | \"chat.cancel_upload\" | \"chat.view_chats\" | \"chat.everyone\" | \"chat.pinned_msgs\" | \"chat.toggle_pinned_msgs\" | \"date.today\" | \"date.yesteday\" | \"date.sunday\" | \"date.monday\" | \"date.tuesday\" | \"date.wednesday\" | \"date.thursday\" | \"date.friday\" | \"date.saturday\" | \"list.empty\" | \"grid.listening\" | \"transcript.off\" | \"transcript.on\" | \"settings.notification_sound\" | \"settings.microphone_input\" | \"settings.speaker_output\" | \"settings.mirror_video\" | \"settings.camera_off\" | \"dialog.close\" | \"notifications.joined\" | \"notifications.left\" | \"notifications.requesting_to_join_meeting\" | \"notifications.requested_to_join_stage\" | \"notifications.joined_stage\" | \"notifications.request_to_join_accepted\" | \"notifications.request_to_join_rejected\" | \"notifications.accept\" | \"notifications.new_poll_created_by\" | \"notifications.connected_to\" | \"notifications.plugin_switched_to\" | \"notifications.remote_control_requested\" | \"notifications.remote_control_request_sent\" | \"notifications.remote_control_request_accepted\" | \"notifications.remote_control_granted\" | \"notifications.remote_control_terminated\" | \"debugger.troubleshooting.label\" | \"debugger.quality.good\" | \"debugger.quality.average\" | \"debugger.quality.poor\" | \"debugger.stats.bitrate.label\" | \"debugger.stats.bitrate.description\" | \"debugger.stats.packet_loss.label\" | \"debugger.stats.packet_loss.description\" | \"debugger.stats.jitter.label\" | \"debugger.stats.jitter.description\" | \"debugger.stats.cpu_limitations.label\" | \"debugger.stats.cpu_limitations.description\" | \"debugger.stats.bandwidth_limitations.label\" | \"debugger.stats.bandwidth_limitations.description\" | \"debugger.audio.label\" | \"debugger.audio.troubleshooting.label\" | \"debugger.audio.messages.generating_report\" | \"debugger.audio.messages.enable_media\" | \"debugger.audio.sections.network_media\" | \"debugger.video.label\" | \"debugger.video.troubleshooting.label\" | \"debugger.video.messages.generating_report\" | \"debugger.video.messages.enable_media\" | \"debugger.video.sections.network_media\" | \"debugger.screenshare.label\" | \"debugger.screenshare.troubleshooting.label\" | \"debugger.screenshare.sections.network_media\" | \"debugger.screenshare.messages.generating_report\" | \"debugger.screenshare.messages.enable_media\" | \"debugger.system.label\" | \"debugger.system.troubleshooting.label\" | \"debugger.system.sections.battery\" | \"debugger.system.battery.level.label\" | \"debugger.system.battery.level.description\" | \"debugger.system.battery.charging.label\" | \"debugger.system.battery.charging.description\" | \"debugger.system.battery.charging.is_charging\" | \"debugger.system.battery.charging.is_not_charging\") => string",
+                    "references": {
+                        "RtkI18n": {
+                            "location": "import",
+                            "path": "../../lib/lang",
+                            "id": "src/lib/lang/index.ts::RtkI18n"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "useLanguage()"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "videoState": {},
+            "isPinned": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "participant",
+                "methodName": "participantsChanged"
+            }, {
+                "propName": "videoState",
+                "methodName": "videoStateChanged"
+            }];
+    }
+}
+__decorate([
+    SyncWithStore()
+], RtkParticipantSetup.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantSetup.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantSetup.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantSetup.prototype, "t", void 0);

package/dist/collection/components/rtk-participant-tile/rtk-participant-tile.css

@@ -0,0 +1,283 @@
+: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 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9;
+  height: var(--rtk-space-56, 224px);
+  overflow: hidden;
+  border-radius: var(--rtk-border-radius-lg, 12px);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));
+
+  transition-property: var(--rtk-transition-property, all);
+  transition-duration: 150ms;
+  container-type: inline-size;
+  container-name: participanttile;
+}
+
+@media (prefers-reduced-motion) {
+  /* No transitions when disabled */
+  :host {
+    --rtk-transition-property: none;
+  }
+}
+
+rtk-avatar {
+  z-index: -1;
+}
+
+/**
+  NOTE: provided :slotted(rtk-name-tag) & rtk-name-tag separately
+  because ::slotted isn't applied on default slots.
+*/
+
+::slotted(rtk-name-tag), 
+rtk-name-tag {
+  position: absolute;
+  left: var(--rtk-space-3, 12px);
+  bottom: var(--rtk-space-3, 12px);
+}
+
+:host([size='sm'][variant='solid']) ::slotted(rtk-name-tag), 
+  :host([size='sm'][variant='solid']) rtk-name-tag {
+  left: var(--rtk-space-2, 8px);
+  bottom: var(--rtk-space-2, 8px);
+  height: var(--rtk-space-4, 16px);
+}
+
+::slotted(rtk-network-indicator), 
+rtk-network-indicator {
+  position: absolute;
+  right: var(--rtk-space-3, 12px);
+  bottom: var(--rtk-space-3, 12px);
+}
+
+:host([size='sm']) ::slotted(rtk-network-indicator), 
+  :host([size='sm']) rtk-network-indicator {
+  right: var(--rtk-space-2, 8px);
+  bottom: var(--rtk-space-2, 8px);
+}
+
+video {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--rtk-border-radius-lg, 12px);
+}
+
+video.contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+video.cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+video::-webkit-media-controls {
+  display: none !important;
+}
+
+.pinned-icon {
+  position: absolute;
+  left: var(--rtk-space-3, 12px);
+  top: var(--rtk-space-3, 12px);
+  height: var(--rtk-space-5, 20px);
+  width: var(--rtk-space-5, 20px);
+  padding: var(--rtk-space-1, 4px);
+  border-radius: var(--rtk-border-radius-md, 8px);
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));
+}
+
+.network-container {
+  position: absolute;
+  right: var(--rtk-space-3, 12px);
+  bottom: var(--rtk-space-3, 12px);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--rtk-space-2, 8px);
+  font-size: 12px;
+  border-radius: var(--rtk-border-radius-md, 8px);
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));
+}
+.network-icon {
+  height: var(--rtk-space-5, 20px);
+  width: var(--rtk-space-5, 20px);
+  --tw-text-opacity: 1;
+  color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity));
+}
+
+:host([size='sm']) .pinned-icon {
+  top: var(--rtk-space-2, 8px);
+  left: var(--rtk-space-2, 8px);
+}
+
+:host([variant='gradient']) ::slotted(rtk-audio-visualizer), 
+  :host([variant='gradient']) rtk-audio-visualizer {
+  position: absolute;
+  top: var(--rtk-space-2, 8px);
+  right: var(--rtk-space-2, 8px);
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
+  padding: var(--rtk-space-2, 8px);
+}
+
+:host([variant='gradient']) ::slotted(rtk-name-tag), 
+  :host([variant='gradient']) rtk-name-tag {
+  bottom: var(--rtk-space-0, 0px);
+  left: var(--rtk-space-0, 0px);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: transparent;
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+  --tw-gradient-from: rgb(var(--rtk-colors-background-1000, 8 8 8));
+  --tw-gradient-to: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  --tw-gradient-to: transparent;
+}
+
+video.mirror {
+  transform: scaleX(-1);
+}
+
+/** Name tag positions */
+
+:host([name-tag-position='bottom-right']) ::slotted(rtk-name-tag), 
+  :host([name-tag-position='bottom-right']) rtk-name-tag {
+  left: auto;
+  right: var(--rtk-space-3, 12px);
+}
+
+:host([name-tag-position='bottom-center']) ::slotted(rtk-name-tag), 
+  :host([name-tag-position='bottom-center']) rtk-name-tag {
+  left: auto;
+  right: auto;
+}
+
+:host([name-tag-position='top-left']) ::slotted(rtk-name-tag), 
+  :host([name-tag-position='top-left']) rtk-name-tag {
+  top: var(--rtk-space-3, 12px);
+  bottom: auto;
+}
+
+:host([name-tag-position='top-right']) ::slotted(rtk-name-tag), 
+  :host([name-tag-position='top-right']) rtk-name-tag {
+  top: var(--rtk-space-3, 12px);
+  right: var(--rtk-space-3, 12px);
+  left: auto;
+  bottom: auto;
+}
+
+:host([name-tag-position='top-center']) ::slotted(rtk-name-tag), 
+  :host([name-tag-position='top-center']) rtk-name-tag {
+  left: auto;
+  right: auto;
+  bottom: auto;
+  top: var(--rtk-space-3, 12px);
+}
+
+@media only screen and (max-height: 480px) and (orientation: landscape) {
+  :host([size='sm']) {
+    border-radius: var(--rtk-border-radius-sm, 4px);
+  }
+
+  :host([size='sm']) > video {
+    border-radius: var(--rtk-border-radius-sm, 4px);
+  }
+
+  ::slotted(rtk-avatar), 
+  rtk-avatar {
+    height: var(--rtk-space-12, 48px);
+    width: var(--rtk-space-12, 48px);
+  }
+    :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag),
+    :host([size='sm'][variant='solid']) rtk-name-tag {
+      transform-origin: -2% 100%;
+      transform: scale(0.6);
+      z-index: 10;
+      left: var(--rtk-space-0, 0px);
+      bottom: var(--rtk-space-0, 0px);
+      border-radius: var(--rtk-border-radius-none, 0);
+    }
+}
+
+@media only screen and (max-width: 480px) and (orientation: portrait) {
+  :host([size='sm']) {
+    border-radius: var(--rtk-border-radius-sm, 4px);
+  }
+
+  :host([size='sm']) > video {
+    border-radius: var(--rtk-border-radius-sm, 4px);
+  }
+
+  ::slotted(rtk-avatar), 
+  rtk-avatar {
+    height: var(--rtk-space-12, 48px);
+    width: var(--rtk-space-12, 48px);
+  }
+    :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag),
+    :host([size='sm'][variant='solid']) rtk-name-tag {
+      transform-origin: -5% 110%;
+      transform: scale(0.6);
+      z-index: 10;
+      left: var(--rtk-space-0, 0px);
+      bottom: var(--rtk-space-0, 0px);
+      border-radius: var(--rtk-border-radius-none, 0);
+    }
+}
+
+@container participanttile (max-width: 300px) {
+  ::slotted(rtk-name-tag),
+  rtk-name-tag {
+    transform-origin: 0 100%;
+    transform: scale(0.8);
+  }
+
+  ::slotted(rtk-avatar), 
+  rtk-avatar {
+    height: var(--rtk-space-8, 32px) !important;
+    width: var(--rtk-space-8, 32px) !important;
+  }
+}
+
+@container participanttile (max-width: 150px) {
+  ::slotted(rtk-name-tag),
+  rtk-name-tag[variant='solid'] {
+    transform-origin: -10% 130%;
+    transform: scale(0.6);
+    z-index: 10;
+    border-radius: 9999px;
+  }
+
+  ::slotted(rtk-avatar), 
+  rtk-avatar {
+    height: 6 !important;
+    width: 6 !important;
+  }
+}