code-workshop-kit/dist/components/ParticipantFrontendCapsule.js

The future of remote code workshops & training

import { css, html, TemplateResult } from 'lit-element';
import { render } from 'lit-html';
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
import { ParticipantCapsule } from './ParticipantCapsule';
import { getParticipantCookie } from './getParticipantCookie';
export class ParticipantFrontendCapsule extends ParticipantCapsule {
    constructor() {
        super(...arguments);
        this.loading = true;
        this.mode = 'iframe';
        this.participantModuleImport = '';
        this.participantTemplate = '';
        this.loadingComplete = new Promise(() => {
            //
        });
    }
    static get properties() {
        return {
            mode: {
                type: String,
                reflect: true,
            },
            participantTemplate: {
                attribute: false,
            },
            loading: {
                attribute: false,
            },
        };
    }
    static get styles() {
        return [super.styles, css ``];
    }
    async _fetchParticipantModule(timestamp) {
        var _a;
        this.loadingComplete = new Promise((resolve) => {
            this.__loadingResolve = resolve;
        });
        if (this.mode === 'module') {
            try {
                const participantModule = await import(this.participantModuleImport ||
                    `%dir%/participants/${this.name}/index.js${timestamp ? `?mtime=${timestamp}` : ''}`);
                this.participantTemplate = participantModule.default;
            }
            catch (e) {
                console.error(e);
            }
            if (!this.participantTemplate) {
                this.participantTemplate = `
          <h3 style="font-family: Dank Mono, sans-serif; font-weight: lighter">
            🚧 No default export with template or DOM node found in your index.js 🚧
          </h3>
        `;
            }
        }
        this.loading = false;
        if (this.__loadingResolve) {
            this.__loadingResolve();
        }
        const container = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.participant-content-container');
        if (timestamp && container) {
            render(html ``, container);
            render(html `${this.__participantContent}`, container);
        }
    }
    get __participantContent() {
        if (this.participantTemplate instanceof HTMLElement ||
            this.participantTemplate instanceof TemplateResult) {
            return this.participantTemplate;
        }
        return unsafeHTML(this.participantTemplate);
    }
    setupWs() {
        // %websocketport% gets replaced by CWK server
        this.ws = new WebSocket(`ws://localhost:${this.websocketPort || '%websocketport%'}/wds`);
        this.ws.addEventListener('open', () => {
            if (this.ws) {
                this.ws.send(JSON.stringify({
                    type: 'authenticate',
                    participant: getParticipantCookie(),
                    username: this.name,
                    feature: 'reload-module',
                }));
            }
        });
        this.ws.addEventListener('message', (e) => {
            const { type, name, timestamp } = JSON.parse(e.data);
            if (type === 'reload-module' && name === this.name) {
                this._fetchParticipantModule(timestamp);
            }
        });
    }
    connectedCallback() {
        super.connectedCallback();
        this._fetchParticipantModule();
        this.loadingComplete.then(() => {
            if (this.participantTemplate) {
                this.setupWs();
            }
        });
    }
    get _capsuleTemplate() {
        return html `
      ${super._capsuleTemplate}
      ${this.loading
            ? html `<span>Loading....</span>`
            : html `${this.participantTemplate
                ? html `<div class="participant-content-container">${this.__participantContent}</div>`
                : html `
                <iframe
                  class="participant-content-container"
                  id="${this.name}"
                  title="${this.name}-iframe"
                  allow="fullscreen"
                  src="%dir%/participants/${this.name}/index.html"
                ></iframe>
              `}`}
    `;
    }
}
//# sourceMappingURL=ParticipantFrontendCapsule.js.map