@vue-skuilder/common-ui 0.1.1

package/src/components/cardRendering/AudioAutoPlayer.vue

@@ -0,0 +1,131 @@
+<template>
+  <v-btn size="large" icon :color="playing ? 'primary lighten-3' : 'primary'" :class="{ playing }" @click="play">
+    <v-icon>mdi-volume-high</v-icon>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue';
+import { SkldrMouseTrap } from '../../utils/SkldrMouseTrap';
+
+const props = defineProps<{
+  src: string | string[];
+}>();
+
+const audioElems = ref<HTMLAudioElement[]>([]);
+const playTimeouts = ref<NodeJS.Timer[]>([]);
+const playing = ref(false);
+
+let staticLOCK: any = null;
+const playbackGap = 500;
+
+const stop = () => {
+  playing.value = false;
+  setTimeout(() => {
+    staticLOCK = null;
+  }, playbackGap);
+
+  playTimeouts.value.forEach(clearTimeout);
+
+  console.log(`Audio stopping...`);
+  audioElems.value.forEach((audio) => {
+    if (!audio.paused) {
+      audio.pause();
+      audio.currentTime = 0;
+    }
+  });
+};
+
+const downloadFinished = (i: number): boolean => {
+  try {
+    return !isNaN(audioElems.value[i].duration);
+  } catch (e) {
+    throw new Error('AudioPlayer does not have an element at this index:', e);
+  }
+};
+
+const playByIndex = (n: number) => {
+  if (downloadFinished(n)) {
+    audioElems.value[n].play();
+
+    if (n + 1 < audioElems.value.length) {
+      const delay = (audioElems.value[n].duration + 0.7) * 1000;
+      playTimeouts.value.push(
+        setTimeout(() => {
+          if (playing.value) {
+            playByIndex(n + 1);
+          }
+        }, delay)
+      );
+    } else {
+      setTimeout(() => {
+        playing.value = false;
+      }, audioElems.value[n].duration * 1000);
+      setTimeout(() => {
+        staticLOCK = null;
+      }, audioElems.value[n].duration * 1000 + playbackGap);
+    }
+  } else {
+    setTimeout(playByIndex, 100, n);
+  }
+};
+
+const play = () => {
+  if (staticLOCK === null || staticLOCK === getCurrentInstance()) {
+    staticLOCK = getCurrentInstance();
+    playing.value = true;
+    playByIndex(0);
+  } else {
+    setTimeout(play, 100);
+  }
+};
+
+onMounted(() => {
+  staticLOCK = null;
+
+  if (typeof props.src === 'string') {
+    audioElems.value.push(new Audio(props.src));
+  } else {
+    props.src.forEach((url) => {
+      audioElems.value.push(new Audio(url));
+    });
+  }
+
+  // Define hotkeys
+  const hotkeys = [
+    {
+      hotkey: 'up',
+      callback: play,
+      command: 'Replay Audio',
+    },
+  ];
+  
+  // Add bindings
+  SkldrMouseTrap.addBinding(hotkeys);
+
+  play();
+});
+
+onBeforeUnmount(() => {
+  // Clean up hotkey bindings
+  SkldrMouseTrap.removeBinding('up');
+  stop();
+});
+</script>
+
+<style scoped>
+.playing {
+  /* transform: rotate(3deg) scale(1.15); */
+  animation: 0.85s ease-in-out infinite alternate pulse;
+  z-index: 1;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.15);
+  }
+}
+</style>

package/src/components/cardRendering/CardLoader.vue

@@ -0,0 +1,123 @@
+<template>
+  <card-viewer
+    v-if="!loading"
+    class="ma-2"
+    :class="loading ? 'muted' : ''"
+    :view="view"
+    :data="data"
+    :card_id="cardID"
+    :course_id="courseID"
+    :session-order="sessionOrder"
+    @emit-response="processResponse($event)"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { getDataLayer, CardData, CardRecord, DisplayableData } from '@vue-skuilder/db';
+import { log, displayableDataToViewData, ViewData, ViewDescriptor } from '@vue-skuilder/common';
+import { ViewComponent } from '../../composables';
+import CardViewer from './CardViewer.vue';
+
+export default defineComponent({
+  name: 'CardLoader',
+
+  components: {
+    CardViewer,
+  },
+
+  props: {
+    sessionOrder: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    qualified_id: {
+      type: String,
+      required: true,
+    },
+    viewLookup: {
+      type: Function as PropType<(viewDescription: ViewDescriptor | string) => ViewComponent>,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      loading: true,
+      view: null as ViewComponent | null,
+      data: [] as ViewData[],
+      courseID: '',
+      cardID: '',
+    };
+  },
+
+  created() {
+    this.loadCard();
+  },
+
+  methods: {
+    processResponse(r: CardRecord) {
+      log(`
+        Card was displayed at ${r.timeStamp}
+        User spent ${r.timeSpent} milliseconds with the card.
+      `);
+      this.$emit('emitResponse', r);
+    },
+
+    async loadCard() {
+      const qualified_id = this.qualified_id;
+      console.log(`Card Loader displaying: ${qualified_id}`);
+
+      this.loading = true;
+      const _courseID = qualified_id.split('-')[0];
+      const _cardID = qualified_id.split('-')[1];
+      const courseDB = getDataLayer().getCourseDB(_courseID);
+
+      try {
+        const tmpCardData = await courseDB.getCourseDoc<CardData>(_cardID);
+        const tmpView = this.viewLookup(tmpCardData.id_view);
+        const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {
+          return courseDB.getCourseDoc<DisplayableData>(id, {
+            attachments: true,
+            binary: true,
+          });
+        });
+
+        const tmpData = [];
+
+        for (const docPromise of tmpDataDocs) {
+          const doc = await docPromise;
+          tmpData.unshift(displayableDataToViewData(doc));
+        }
+
+        this.data = tmpData;
+        this.view = tmpView as ViewComponent;
+        this.cardID = _cardID;
+        this.courseID = _courseID;
+      } catch (e) {
+        throw new Error(`[CardLoader] Error loading card: ${JSON.stringify(e)}, ${e}`);
+      } finally {
+        this.loading = false;
+        this.$emit('card-loaded');
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.cardView {
+  padding: 15px;
+  border-radius: 8px;
+}
+
+.component-fade-enter-active,
+.component-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.component-fade-enter, .component-fade-leave-to
+/* .component-fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>

package/src/components/cardRendering/CardViewer.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-card elevation="12">
+    <transition name="component-fade" mode="out-in">
+      <component
+        :is="view"
+        ref="activeView"
+        :key="course_id + '-' + card_id + '-' + sessionOrder"
+        :data="data"
+        :modify-difficulty="user_elo.global.score - card_elo"
+        class="cardView ma-2 pa-2"
+        @emit-response="processResponse($event)"
+      />
+    </transition>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { CardRecord } from '@vue-skuilder/db';
+import { CourseElo, ViewData } from '@vue-skuilder/common';
+import { ViewComponent } from '../../composables';
+
+interface CardViewerRefs {
+  activeView: ViewComponent;
+}
+
+export default defineComponent({
+  name: 'CardViewer',
+
+  ref: {} as CardViewerRefs,
+
+  props: {
+    sessionOrder: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    card_id: {
+      type: String as () => PouchDB.Core.DocumentId,
+      required: true,
+      default: '',
+    },
+    course_id: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    view: {
+      type: [Function, Object] as PropType<ViewComponent>,
+      required: true,
+    },
+    data: {
+      type: Array as () => ViewData[],
+      required: true,
+    },
+    user_elo: {
+      type: Object as () => CourseElo,
+      default: () => ({
+        global: {
+          score: 1000,
+          count: 0,
+        },
+        tags: {},
+        misc: {},
+      }),
+    },
+    card_elo: {
+      type: Number,
+      default: 1000,
+    },
+  },
+
+  emits: ['emitResponse'],
+
+  methods: {
+    processResponse(r: CardRecord): void {
+      console.log(`
+        Card was displayed at ${r.timeStamp}
+        User spent ${r.timeSpent} milliseconds with the card.
+        `);
+      this.$emit('emitResponse', r);
+    },
+  },
+});
+</script>
+
+<style scoped>
+.cardView {
+  padding: 15px;
+  border-radius: 8px;
+}
+
+.component-fade-enter-active,
+.component-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.component-fade-enter, .component-fade-leave-to
+/* .component-fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>

package/src/components/cardRendering/CodeBlockRenderer.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="code-block-wrapper pa-2">
+    <div class="language-indicator" v-if="language">{{ language }}</div>
+    <highlightjs :language="language" :code="code" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import hljs from 'highlight.js/lib/core';
+import hljsVuePlugin from '@highlightjs/vue-plugin';
+import { getCurrentInstance } from 'vue';
+
+// Import only the languages you need
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import css from 'highlight.js/lib/languages/css';
+import html from 'highlight.js/lib/languages/xml';
+import bash from 'highlight.js/lib/languages/bash';
+import json from 'highlight.js/lib/languages/json';
+import go from 'highlight.js/lib/languages/go';
+import python from 'highlight.js/lib/languages/python';
+
+// Register languages
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('ts', typescript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('html', html);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('sh', bash);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('golang', go);
+hljs.registerLanguage('python', python);
+
+// Get access to the current component instance
+const instance = getCurrentInstance();
+if (instance) {
+  // Register the component locally
+  instance.appContext.app.component('highlightjs', hljsVuePlugin.component);
+}
+
+defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+  language: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<style>
+/* Import a highlight.js theme */
+@import 'highlight.js/styles/github.css';
+
+.code-block-wrapper {
+  margin: 1rem 0;
+  border-radius: 4px;
+  background-color: #f6f8fa;
+  overflow: auto;
+  position: relative;
+}
+
+.language-indicator {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  color: #666;
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 4px;
+  z-index: 1;
+  font-family: monospace;
+  text-transform: lowercase;
+}
+</style>

package/src/components/cardRendering/MarkdownRenderer.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <!-- <v-textarea v-if="testRoute" v-model="md" variant="outlined" label="Type Here" name="name" /> -->
+    <span v-for="(token, i) in tokens" :key="i">
+      <md-token-renderer v-if="token.type" :token="token" :last="i === tokens.length - 1" />
+      <audio-auto-player v-else-if="token.audio" :src="token.audio" />
+      <!-- // [ ] insert img display here.  "if token.image ? (also see if the audio aboke is functional)" -->
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import MdTokenRenderer from './MdTokenRenderer.vue';
+import AudioAutoPlayer from './AudioAutoPlayer.vue';
+import * as marked from 'marked';
+
+type SkldrToken =
+  | marked.Token
+  | {
+      type: false;
+      audio: string;
+    };
+
+// Using Options API with mixin
+export default defineComponent({
+  name: 'MarkdownRenderer',
+  components: {
+    MdTokenRenderer,
+    AudioAutoPlayer,
+  },
+  props: {
+    md: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+  computed: {
+    tokens(): SkldrToken[] {
+      return marked.lexer(this.md);
+    },
+  },
+});
+</script>
+
+<style lang="css" scoped></style>

package/src/components/cardRendering/MarkdownRendererHelpers.ts

@@ -0,0 +1,114 @@
+import { Token, MarkedToken, Tokens } from 'marked';
+import * as marked from 'marked';
+
+/**
+ * recursively splits text according to the passed delimiters.
+ *
+ * eg: ("abcde", "b", "d")   => ["a", "bcd", "e"]
+ *     ("a[b][c]", "[", "]") => ["a", "[b]", "[c]"]
+ *
+ * it does not check that the delimiters are well formed in the text
+ * @param text the text to be split
+ * @param l the left delimiter
+ * @param r the right delimiter
+ * @returns the split result
+ */
+export function splitByDelimiters(text: string, l: string, r: string): string[] {
+  if (text.length === 0) return [];
+
+  let ret: string[] = [];
+
+  const left = text.indexOf(l);
+  const right = text.indexOf(r, left);
+
+  if (left >= 0 && right > left) {
+    // pre-delimited characters
+    ret.push(text.substring(0, left));
+    // delimited section
+    ret.push(text.substring(left, right + r.length));
+    // recurse on remaining text
+    ret = ret.concat(splitByDelimiters(text.substring(right + r.length), l, r));
+  } else {
+    return [text];
+  }
+
+  return ret;
+}
+
+export function splitTextToken(token: Tokens.Text): Tokens.Text[] {
+  if (containsComponent(token)) {
+    const textChunks = splitByDelimiters(token.text, '{{', '}}');
+    const rawChunks = splitByDelimiters(token.raw, '{{', '}}');
+
+    if (textChunks.length === rawChunks.length) {
+      return textChunks.map((c, i) => {
+        return {
+          type: 'text',
+          text: textChunks[i],
+          raw: rawChunks[i],
+        };
+      });
+    } else {
+      throw new Error(`Error parsing markdown`);
+    }
+  } else {
+    return [token];
+  }
+}
+
+export type TokenOrComponent = MarkedToken | { type: 'component'; raw: string };
+
+export function splitParagraphToken(token: Tokens.Paragraph): TokenOrComponent[] {
+  let ret: MarkedToken[] = [];
+
+  if (containsComponent(token)) {
+    const textChunks = splitByDelimiters(token.text, '{{', '}}');
+    const rawChunks = splitByDelimiters(token.raw, '{{', '}}');
+    if (textChunks.length === rawChunks.length) {
+      for (let i = 0; i < textChunks.length; i++) {
+        const textToken = {
+          type: 'text',
+          text: textChunks[i],
+          raw: rawChunks[i],
+        } as Tokens.Text;
+
+        if (isComponent(textToken)) {
+          ret.push(textToken);
+        } else {
+          marked.lexer(rawChunks[i]).forEach((t) => {
+            if (t.type === 'paragraph') {
+              ret = ret.concat(t.tokens as MarkedToken[]);
+            } else {
+              ret.push(t as MarkedToken);
+            }
+          });
+        }
+      }
+      return ret;
+    } else {
+      throw new Error(`Error parsing Markdown`);
+    }
+  } else {
+    ret.push(token);
+  }
+  return ret;
+}
+
+export function containsComponent(token: MarkedToken) {
+  if (token.type === 'text' || token.type === 'paragraph') {
+    const opening = token.raw.indexOf('{{');
+    const closing = token.raw.indexOf('}}');
+
+    if (opening !== -1 && closing !== -1 && closing > opening) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
+
+export function isComponent(token: MarkedToken) {
+  return token.type === 'text' && token.text.startsWith('{{') && token.text.endsWith('}}');
+}