@pie-element/hotspot 11.2.0-beta.0 → 11.2.0-next.17

package/src/index.js

@@ -1,227 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { renderMath } from '@pie-lib/math-rendering';
-import { EnableAudioAutoplayImage } from '@pie-lib/render-ui';
-import { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';
-
-import HotspotComponent from './hotspot';
-import { updateSessionValue, updateSessionMetadata } from './session-updater';
-
-export default class Hotspot extends HTMLElement {
-  constructor() {
-    super();
-    this._model = null;
-    this._session = null;
-    this._audioInitialized = false;
-    this.audioComplete = false;
-    this._root = null;
-  }
-
-  set model(m) {
-    this._model = m;
-
-    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
-    this._audioInitialized = false;
-    this._render();
-  }
-
-  isComplete() {
-    if (!this._session || !this._session.answers) {
-      return false;
-    }
-
-    const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};
-    const elementContext = this;
-
-    // check audio completion if audio settings are enabled and audio actually exists
-    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
-      if (elementContext) {
-        const audio = elementContext.querySelector('audio');
-        const isInsidePrompt = audio && audio.closest('#preview-prompt');
-
-        // only require audio completion if audio exists and is inside the prompt
-        if (audio && isInsidePrompt) {
-          return false;
-        }
-      }
-    }
-
-    if (!Array.isArray(this._session.answers)) {
-      return false;
-    }
-
-    return this._session.answers.length > 0;
-  }
-
-  set session(s) {
-    if (s && !s.answers) {
-      s.answers = [];
-    }
-
-    this._session = s;
-    this._render();
-  }
-
-  get session() {
-    return this._session;
-  }
-
-  onSelectChoice(data) {
-    updateSessionValue(this._session, this._model, data);
-
-    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-
-    this._render();
-  }
-
-  _createAudioInfoToast() {
-    const info = document.createElement('div');
-    info.id = 'play-audio-info';
-
-    Object.assign(info.style, {
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      background: 'white',
-      zIndex: '1000',
-      cursor: 'pointer',
-    });
-
-    const img = document.createElement('img');
-    img.src = EnableAudioAutoplayImage;
-    img.alt = 'Click anywhere to enable audio autoplay';
-    img.width = 500;
-    img.height = 300;
-
-    info.appendChild(img);
-    return info;
-  }
-
-  connectedCallback() {
-    this._render();
-
-    // Observation:  audio in Chrome will have the autoplay attribute,
-    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
-    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
-    const observer = new MutationObserver((mutationsList, observer) => {
-      mutationsList.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          if (this._audioInitialized) return;
-          const audio = this.querySelector('audio');
-          const isInsidePrompt = audio && audio.closest('#preview-prompt');
-
-          if (!this._model) return;
-          if (!this._model.autoplayAudioEnabled) return;
-          if (audio && !isInsidePrompt) return;
-          if (!audio) return;
-
-          const info = this._createAudioInfoToast();
-          const container = this.querySelector('#main-container');
-          const enableAudio = () => {
-            if (this.querySelector('#play-audio-info')) {
-              audio.play();
-              container.removeChild(info);
-            }
-
-            document.removeEventListener('click', enableAudio);
-          };
-
-          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
-          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
-          setTimeout(() => {
-            if (audio.paused && !this.querySelector('#play-audio-info')) {
-              // add info message as a toast to enable audio playback
-              container.appendChild(info);
-              document.addEventListener('click', enableAudio);
-            } else {
-              document.removeEventListener('click', enableAudio);
-            }
-          }, 500);
-
-          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
-          const handlePlaying = () => {
-            //timestamp when auto-played audio started playing
-            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });
-
-            const info = this.querySelector('#play-audio-info');
-            if (info) {
-              container.removeChild(info);
-            }
-
-            audio.removeEventListener('playing', handlePlaying);
-          };
-
-          audio.addEventListener('playing', handlePlaying);
-
-          // we need to listen for the ended event to update the isComplete state
-          const handleEnded = () => {
-            //timestamp when auto-played audio completed playing
-            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });
-
-            let { audioStartTime, audioEndTime, waitTime } = this._session;
-            if (!waitTime && audioStartTime && audioEndTime) {
-              // waitTime is elapsed time the user waited for auto-played audio to finish
-              this._session.waitTime = audioEndTime - audioStartTime;
-            }
-
-            this.audioComplete = true;
-            this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-
-            audio.removeEventListener('ended', handleEnded);
-          };
-
-          audio.addEventListener('ended', handleEnded);
-
-          // store references to remove later
-          this._audio = audio;
-          this._handlePlaying = handlePlaying;
-          this._handleEnded = handleEnded;
-          this._enableAudio = enableAudio;
-          // set to true to prevent multiple initializations
-          this._audioInitialized = true;
-
-          observer.disconnect();
-        }
-      });
-    });
-
-    observer.observe(this, { childList: true, subtree: true });
-  }
-
-  _render() {
-    if (this._model && this._session) {
-      const el = React.createElement(HotspotComponent, {
-        model: this._model,
-        session: this._session,
-        onSelectChoice: this.onSelectChoice.bind(this),
-      });
-
-      if (!this._root) {
-        this._root = createRoot(this);
-      }
-      this._root.render(el);
-      queueMicrotask(() => {
-        renderMath(this);
-      });
-    }
-  }
-
-  disconnectedCallback() {
-    document.removeEventListener('click', this._enableAudio);
-
-    if (this._audio) {
-      this._audio.removeEventListener('playing', this._handlePlaying);
-      this._audio.removeEventListener('ended', this._handleEnded);
-      this._audio = null;
-    }
-
-    if (this._root) {
-      this._root.unmount();
-      this._root = null;
-    }
-  }
-}

package/src/session-updater.js

@@ -1,29 +0,0 @@
-export function updateSessionValue(session, model, data) {
-  const { id, selected } = data;
-  const { multipleCorrect } = model || {};
-  session.answers = session.answers || [];
-
-  if (!selected) {
-    session.answers = session.answers.filter((answer) => answer.id !== id);
-  } else {
-    const item = { id };
-    if (multipleCorrect) {
-      session.answers.push(item);
-    } else {
-      session.answers = [item];
-    }
-
-    //update session metadata
-    session.selector = data.selector;
-  }
-}
-
-export function updateSessionMetadata(session, metadata) {
-  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
-  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
-
-  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {
-    // waitTime is elapsed time the user waited for auto-played audio to finish
-    session.waitTime = session.audioEndTime - session.audioStartTime;
-  }
-}