Merge pull request #35 from chamilo/feature/mobile2-learning-path-runtime

Mobile: add learning path runtime player

Author: christianbeeznest

src/components/learningPaths/LearningPathContentViewer.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { useI18n } from "vue-i18n"
+
+import type { LearningPathRuntimeItem } from "@/domain/learningPaths/types"
+
+const props = defineProps<{
+  blob: Blob
+  item: LearningPathRuntimeItem
+}>()
+
+const emit = defineEmits<{
+  openExternal: []
+  download: []
+}>()
+
+const { t } = useI18n()
+const objectUrl = ref("")
+const textContent = ref("")
+
+function extension(filename: string): string {
+  const match = filename
+    .trim()
+    .toLowerCase()
+    .match(/\.([a-z0-9]+)$/)
+
+  return match?.[1] ?? ""
+}
+
+const mimeType = computed(() => props.blob.type.trim().toLowerCase())
+const fileExtension = computed(() => extension(props.item.title))
+
+const viewerKind = computed<"image" | "video" | "audio" | "text" | "frame" | "unsupported">(() => {
+  if (mimeType.value.startsWith("image/")) {
+    return "image"
+  }
+
+  if (mimeType.value.startsWith("video/")) {
+    return "video"
+  }
+
+  if (mimeType.value.startsWith("audio/")) {
+    return "audio"
+  }
+
+  if (mimeType.value === "text/plain" || ["txt", "md", "csv"].includes(fileExtension.value)) {
+    return "text"
+  }
+
+  if (
+    mimeType.value === "application/pdf" ||
+    mimeType.value === "text/html" ||
+    mimeType.value === "application/xhtml+xml" ||
+    ["pdf", "html", "htm"].includes(fileExtension.value)
+  ) {
+    return "frame"
+  }
+
+  return "unsupported"
+})
+
+async function refreshObjectUrl(): Promise<void> {
+  if (objectUrl.value) {
+    URL.revokeObjectURL(objectUrl.value)
+  }
+
+  objectUrl.value = URL.createObjectURL(props.blob)
+  textContent.value = viewerKind.value === "text" ? await props.blob.text() : ""
+}
+
+watch(
+  () => [props.blob, props.item.id] as const,
+  () => {
+    void refreshObjectUrl()
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  if (objectUrl.value) {
+    URL.revokeObjectURL(objectUrl.value)
+  }
+})
+</script>
+
+<template>
+  <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+    <img
+      v-if="viewerKind === 'image'"
+      :src="objectUrl"
+      :alt="item.title"
+      class="mx-auto max-h-[70dvh] w-auto max-w-full object-contain"
+    />
+
+    <video
+      v-else-if="viewerKind === 'video'"
+      :src="objectUrl"
+      class="max-h-[70dvh] w-full bg-black"
+      controls
+      playsinline
+    />
+
+    <audio v-else-if="viewerKind === 'audio'" :src="objectUrl" class="w-full p-4" controls />
+
+    <pre
+      v-else-if="viewerKind === 'text'"
+      class="max-h-[70dvh] overflow-auto whitespace-pre-wrap break-words p-4 text-sm text-slate-800"
+      >{{ textContent }}</pre
+    >
+
+    <iframe
+      v-else-if="viewerKind === 'frame'"
+      :src="objectUrl"
+      :title="item.title"
+      class="h-[65dvh] min-h-[420px] w-full bg-white"
+      sandbox="allow-same-origin"
+      referrerpolicy="no-referrer"
+    />
+
+    <div v-else class="space-y-3 p-4">
+      <p class="text-sm text-slate-700">
+        {{ t("learningPaths.viewerUnsupported") }}
+      </p>
+      <div class="grid gap-2 sm:grid-cols-2">
+        <button
+          type="button"
+          class="inline-flex min-h-touch items-center justify-center gap-2 rounded-xl bg-chamilo-700 px-4 py-3 font-semibold text-white"
+          @click="emit('openExternal')"
+        >
+          <i class="pi pi-external-link" aria-hidden="true" />
+          {{ t("learningPaths.openExternal") }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex min-h-touch items-center justify-center gap-2 rounded-xl border border-slate-300 px-4 py-3 font-semibold text-slate-800"
+          @click="emit('download')"
+        >
+          <i class="pi pi-download" aria-hidden="true" />
+          {{ t("learningPaths.downloadContent") }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

src/components/learningPaths/LearningPathToc.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import { useI18n } from "vue-i18n"
+
+import {
+  isCompletedLearningPathStatus,
+  isSupportedLearningPathItem,
+} from "@/domain/learningPaths/contracts"
+import type { LearningPathRuntimeItem } from "@/domain/learningPaths/types"
+
+const props = defineProps<{
+  items: LearningPathRuntimeItem[]
+  currentItemId: number
+  busy: boolean
+  accordion: boolean
+}>()
+
+const emit = defineEmits<{
+  select: [itemId: number]
+}>()
+
+const { t } = useI18n()
+const expandedSections = ref<Set<number>>(new Set())
+
+const itemById = computed(() => new Map(props.items.map((item) => [item.id, item] as const)))
+
+function ancestorIds(item: LearningPathRuntimeItem): number[] {
+  const ancestors: number[] = []
+  const visited = new Set<number>()
+  let parentId = item.parentId
+
+  while (parentId > 0 && !visited.has(parentId)) {
+    visited.add(parentId)
+    ancestors.push(parentId)
+    parentId = itemById.value.get(parentId)?.parentId ?? 0
+  }
+
+  return ancestors
+}
+
+function initializeExpandedSections(): void {
+  const next = new Set<number>()
+
+  for (const item of props.items) {
+    if (item.isSection) {
+      next.add(item.id)
+    }
+  }
+
+  const current = itemById.value.get(props.currentItemId)
+
+  if (current) {
+    for (const ancestorId of ancestorIds(current)) {
+      next.add(ancestorId)
+    }
+  }
+
+  expandedSections.value = next
+}
+
+watch(() => [props.items, props.currentItemId] as const, initializeExpandedSections, {
+  immediate: true,
+  deep: true,
+})
+
+const visibleItems = computed(() =>
+  props.items.filter((item) =>
+    ancestorIds(item).every((ancestorId) => expandedSections.value.has(ancestorId)),
+  ),
+)
+
+function toggleSection(item: LearningPathRuntimeItem): void {
+  const next = new Set(expandedSections.value)
+
+  if (next.has(item.id)) {
+    next.delete(item.id)
+  } else {
+    if (props.accordion) {
+      for (const candidate of props.items) {
+        if (candidate.isSection && candidate.parentId === item.parentId) {
+          next.delete(candidate.id)
+        }
+      }
+    }
+
+    next.add(item.id)
+  }
+
+  expandedSections.value = next
+}
+
+function statusIcon(item: LearningPathRuntimeItem): string {
+  if (!item.available) {
+    return "pi pi-lock"
+  }
+
+  if (isCompletedLearningPathStatus(item.status)) {
+    return item.status.trim().toLowerCase() === "failed"
+      ? "pi pi-times-circle"
+      : "pi pi-check-circle"
+  }
+
+  if (item.id === props.currentItemId) {
+    return "pi pi-play-circle"
+  }
+
+  return item.isSection ? "pi pi-folder" : "pi pi-circle"
+}
+
+function statusLabel(item: LearningPathRuntimeItem): string {
+  if (!item.available) {
+    return t("learningPaths.status.locked")
+  }
+
+  if (!isSupportedLearningPathItem(item) && !item.isSection) {
+    return t("learningPaths.status.playerPending")
+  }
+
+  const normalizedStatus = item.status.trim().toLowerCase().replace(/\s+/g, "_")
+  const key = `learningPaths.status.${normalizedStatus}`
+
+  return t(key)
+}
+
+function activate(item: LearningPathRuntimeItem): void {
+  if (item.isSection) {
+    toggleSection(item)
+    return
+  }
+
+  if (!props.busy && isSupportedLearningPathItem(item)) {
+    emit("select", item.id)
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <button
+      v-for="item in visibleItems"
+      :key="item.id"
+      type="button"
+      class="flex min-h-touch w-full items-center gap-3 rounded-xl border bg-white px-3 py-2.5 text-left shadow-sm transition"
+      :class="[
+        item.id === currentItemId
+          ? 'ring-chamilo-200 border-chamilo-500 ring-1'
+          : 'border-slate-200',
+        !item.available || (!item.isSection && !isSupportedLearningPathItem(item))
+          ? 'opacity-65'
+          : 'hover:border-chamilo-300',
+      ]"
+      :disabled="busy || !item.available || (!item.isSection && !isSupportedLearningPathItem(item))"
+      :style="{ paddingLeft: `${12 + Math.min(item.level, 5) * 14}px` }"
+      :aria-current="item.id === currentItemId ? 'step' : undefined"
+      :aria-expanded="item.isSection ? expandedSections.has(item.id) : undefined"
+      @click="activate(item)"
+    >
+      <i :class="statusIcon(item)" class="shrink-0 text-chamilo-700" aria-hidden="true" />
+
+      <span class="min-w-0 flex-1">
+        <span class="block break-words font-medium text-slate-900">
+          {{ item.title }}
+        </span>
+        <span class="mt-0.5 block text-xs text-slate-500">
+          {{ statusLabel(item) }}
+        </span>
+      </span>
+
+      <i
+        v-if="item.isSection"
+        :class="expandedSections.has(item.id) ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
+        class="text-xs text-slate-400"
+        aria-hidden="true"
+      />
+      <i
+        v-else-if="item.available && isSupportedLearningPathItem(item)"
+        class="pi pi-chevron-right text-xs text-slate-400"
+        aria-hidden="true"
+      />
+    </button>
+  </div>
+</template>