@webwriter/quiz 1.0.0

package/dist/widgets/webwriter-speech.js

@@ -0,0 +1,320 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/widgets/webwriter-speech.ts
+import { html, css } from "lit";
+import { LitElementWw } from "@webwriter/lit";
+import { customElement, property, query } from "lit/decorators.js";
+
+// ../../node_modules/bootstrap-icons/icons/mic.svg
+var mic_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">%0A  <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5"/>%0A  <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/mic-fill.svg
+var mic_fill_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic-fill" viewBox="0 0 16 16">%0A  <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0z"/>%0A  <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/stop-fill.svg
+var stop_fill_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stop-fill" viewBox="0 0 16 16">%0A  <path d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/trash.svg
+var trash_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">%0A  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>%0A  <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/play.svg
+var play_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play" viewBox="0 0 16 16">%0A  <path d="M10.804 8 5 4.633v6.734zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696z"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/pause.svg
+var pause_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause" viewBox="0 0 16 16">%0A  <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/volume-down.svg
+var volume_down_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-volume-down" viewBox="0 0 16 16">%0A  <path d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12zM6.312 6.39 8 5.04v5.92L6.312 9.61A.5.5 0 0 0 6 9.5H4v-3h2a.5.5 0 0 0 .312-.11M12.025 8a4.5 4.5 0 0 1-1.318 3.182L10 10.475A3.5 3.5 0 0 0 11.025 8 3.5 3.5 0 0 0 10 5.525l.707-.707A4.5 4.5 0 0 1 12.025 8"/>%0A</svg>';
+
+// src/widgets/webwriter-speech.ts
+import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js";
+import SlRange from "@shoelace-style/shoelace/dist/components/range/range.component.js";
+import SlButtonGroup from "@shoelace-style/shoelace/dist/components/button-group/button-group.component.js";
+import SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js";
+import SlFormatDate from "@shoelace-style/shoelace/dist/components/format-date/format-date.component.js";
+import SlPopup from "@shoelace-style/shoelace/dist/components/popup/popup.component.js";
+var _volumeOpen_dec, _recording_dec, _audioEl_dec, _src_dec, _loading_dec, _a, _WebwriterSpeech_decorators, _init, _loading, _src, _audioEl, _volumeOpen;
+_WebwriterSpeech_decorators = [customElement("webwriter-speech")];
+var WebwriterSpeech = class extends (_a = LitElementWw, _loading_dec = [property({ type: Boolean, attribute: true })], _src_dec = [property({ type: String, attribute: true, reflect: true })], _audioEl_dec = [query("audio")], _recording_dec = [property({ type: Boolean, attribute: true, reflect: true })], _volumeOpen_dec = [property({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __publicField(this, "mediaRecorder");
+    __publicField(this, "chunks", []);
+    __privateAdd(this, _loading, __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _src, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "toggleRecording", async () => {
+      if (this.mediaRecorder?.state === "recording") {
+        this.mediaRecorder.stop();
+      } else {
+        await this.initializeRecorder();
+        this.mediaRecorder.start();
+      }
+    });
+    __privateAdd(this, _audioEl, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "togglePlay", () => {
+      !this.playing ? this.audioEl.play() : this.audioEl.pause();
+    });
+    __privateAdd(this, _volumeOpen, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+  }
+  firstUpdated() {
+    const evs = ["abort", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "resize", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting"];
+    evs.forEach((k) => this.audioEl.addEventListener(k, () => this.requestUpdate()));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.initializeRecorder();
+  }
+  async initializeRecorder() {
+    if (!this.mediaRecorder) {
+      this.loading = true;
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        this.mediaRecorder = new MediaRecorder(stream);
+        this.mediaRecorder.addEventListener("start", (e) => {
+          this.requestUpdate("recording");
+        });
+        this.mediaRecorder.addEventListener("dataavailable", (e) => {
+          this.chunks.push(e.data);
+        });
+        this.mediaRecorder.addEventListener("stop", async (e) => {
+          const blob = new Blob(this.chunks, { type: "audio/ogg; codecs=opus" });
+          this.chunks = [];
+          this.src = URL.createObjectURL(blob);
+          const reader = new FileReader();
+          reader.readAsDataURL(blob);
+          reader.addEventListener("load", (e2) => {
+            this.src = reader.result;
+            this.requestUpdate("recording");
+          });
+        });
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+  get duration() {
+    const d = this.audioEl?.duration;
+    return !Number.isNaN(d) && Number.isFinite(d) ? d : 0;
+  }
+  get currentTime() {
+    return this.audioEl?.currentTime;
+  }
+  get playing() {
+    return !this.audioEl?.paused && !this.audioEl?.ended;
+  }
+  get recording() {
+    return this.mediaRecorder?.state === "recording";
+  }
+  set recording(value) {
+    return;
+  }
+  get volume() {
+    return Math.round(this.audioEl?.volume * 100);
+  }
+  set volume(value) {
+    this.audioEl.volume = value / 100;
+  }
+  render() {
+    return html`<sl-button-group>
+      <sl-button id="record" @click=${this.toggleRecording} ?loading=${this.loading} ?disabled=${this.loading}>
+        <sl-icon class="idle" src=${mic_default}></sl-icon>
+        <sl-icon class="torecord" src=${mic_fill_default}></sl-icon>
+        <sl-icon class="tostop" src=${stop_fill_default}></sl-icon>
+        <div id="recording-indicator"></div>
+      </sl-button>
+      <sl-button id="playpause" ?disabled=${this.loading || !this.src} @click=${this.togglePlay}>
+        <sl-icon src=${!this.playing ? play_default : pause_default}></sl-icon>
+      </sl-button>
+      <div id="playback">
+        <audio src=${this.src} preload="metadata"></audio>
+        <div>
+          <sl-format-date .date=${new Date(this.currentTime * 1e3)} minute="numeric" second="numeric"></sl-format-date>
+          /
+          <sl-format-date .date=${new Date(this.duration * 1e3)} minute="numeric" second="numeric"></sl-format-date>
+        </div>
+        <sl-range ?disabled=${this.loading || !this.src}></sl-range>
+      </div>
+      <sl-popup id="volume" ?active=${this.volumeOpen} hoist strategy="fixed" arrow distance="6">
+        <sl-button ?disabled=${this.loading || !this.src} slot="anchor" @click=${() => this.volumeOpen = !this.volumeOpen}>
+          <sl-icon src=${volume_down_default}></sl-icon>
+        </sl-button>
+        <sl-range ?disabled=${this.loading || !this.src} id="volume-range" value=${this.volume} @sl-change=${(e) => this.volume = e.target.value}>
+
+        </sl-range>
+      </sl-popup>
+      <sl-button ?disabled=${this.loading || !this.src} id="delete" @click=${() => this.src = void 0}>
+        <sl-icon src=${trash_default}></sl-icon>
+      </sl-button>
+    </sl-button-group>`;
+  }
+};
+_init = __decoratorStart(_a);
+_loading = new WeakMap();
+_src = new WeakMap();
+_audioEl = new WeakMap();
+_volumeOpen = new WeakMap();
+__decorateElement(_init, 4, "loading", _loading_dec, WebwriterSpeech, _loading);
+__decorateElement(_init, 4, "src", _src_dec, WebwriterSpeech, _src);
+__decorateElement(_init, 4, "audioEl", _audioEl_dec, WebwriterSpeech, _audioEl);
+__decorateElement(_init, 3, "recording", _recording_dec, WebwriterSpeech);
+__decorateElement(_init, 4, "volumeOpen", _volumeOpen_dec, WebwriterSpeech, _volumeOpen);
+WebwriterSpeech = __decorateElement(_init, 0, "WebwriterSpeech", _WebwriterSpeech_decorators, WebwriterSpeech);
+__publicField(WebwriterSpeech, "scopedElements", {
+  "sl-button": SlButton,
+  "sl-icon": SlIcon,
+  "sl-button-group": SlButtonGroup,
+  "sl-range": SlRange,
+  "sl-format-date": SlFormatDate,
+  "sl-popup": SlPopup
+});
+__publicField(WebwriterSpeech, "styles", css`
+
+    @keyframes blinker {
+      50% {
+        opacity: 0;
+      }
+    }
+
+    sl-icon {
+      height: 20px;
+      width: 20px;
+    }
+
+    sl-button-group {
+      width: 100%;
+    }
+
+    #record {
+      position: relative;
+      #recording-indicator {
+        background: darkred;
+        border-radius: 100%;
+        height: 10px;
+        width: 10px;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        animation: blinker 1.25s linear infinite;
+      }
+    }
+
+    #record:hover .idle {
+      display: none;
+    }
+
+    :host([recording]) #record .torecord, :host(:not([recording])) #record:not(:hover) .torecord {
+      display: none;
+    }
+
+    :host(:not([recording])) #record .tostop, :host([recording]) #record:not(:hover) .tostop {
+      display: none;
+    }
+
+    :host(:not([recording])) #recording-indicator {
+      display: none;
+    }
+
+    #playback {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border-top: 1px solid var(--sl-color-gray-300);
+      border-bottom: 1px solid var(--sl-color-gray-300);
+      padding: 0 1ch;
+      gap: 1ch;
+      color: var(--sl-color-gray-800);
+      font-size: var(--sl-font-size-small);
+      user-select: none;
+
+      sl-range {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;   
+        
+        &::part(form-control) {
+          width: 100%;
+        }
+      }
+    }
+
+    :host(:not([src])) #playback {
+      opacity: 0.5;
+    }
+
+    sl-button {
+      &::part(label) {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1ch;
+      }
+    }
+
+    sl-tooltip {
+      z-index: 1;
+    }
+
+    #volume {
+      --arrow-color: var(--sl-color-gray-600);
+      &::part(popup) {
+        background: var(--arrow-color);
+        height: 30px;
+        padding: 1ch;
+      }
+    }
+  `);
+__runInitializers(_init, 1, WebwriterSpeech);
+export {
+  WebwriterSpeech
+};