@linto-ai/transcript-ui-core 0.9.0

package/src/components/Layout.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import Header from "./Header.vue"
+import TabBar from "./TabBar.vue"
+import { TRANSCRIPTION_TAB, VERBATIM_TAB } from "./TabBar.constants"
+import TranscriptionPanel from "./TranscriptionPanel.vue"
+import VerbatimPanel from "./VerbatimPanel.vue"
+import SpeakerSidebar from "./SpeakerSidebar.vue"
+import SidebarDrawer from "./SidebarDrawer.vue"
+import ChannelSelector from "./ChannelSelector.vue"
+import TranslationSelector from "./TranslationSelector.vue"
+import SelectionActionBar from "./SelectionActionBar.vue"
+import { useIsMobile } from "../composables/useIsMobile"
+import { provideTurnSelection } from "../composables/useTurnSelection"
+import { useCore } from "../core"
+
+const props = withDefaults(
+  defineProps<{
+    showHeader?: boolean
+  }>(),
+  {
+    showHeader: true,
+  },
+)
+
+const core = useCore()
+const { isMobile } = useIsMobile()
+const isSidebarOpen = ref(false)
+
+const activeTab = ref<string>(TRANSCRIPTION_TAB)
+
+const activeTurns = computed(
+  () => core.activeChannel.value?.activeTranslation.value.turns.value ?? [],
+)
+const speakers = core.speakers.all
+
+provideTurnSelection(activeTurns, speakers, core)
+
+const channels = computed(() => [...core.channels.values()])
+const translations = computed(
+  () => core.activeChannel.value?.selectableTranslations ?? [],
+)
+const activeTranslationId = computed(
+  () => core.activeChannel.value?.activeTranslation.value.id ?? "",
+)
+const speakerList = computed(() => Array.from(speakers.values()))
+
+const showTranscription = computed(() => activeTab.value === TRANSCRIPTION_TAB)
+const showVerbatim = computed(() => activeTab.value === VERBATIM_TAB)
+const activeService = computed(() => {
+  if (showTranscription.value || showVerbatim.value) return null
+  return core.llmServices?.get(activeTab.value) ?? null
+})
+
+watch(activeTab, (id) => {
+  if (!core.llmServices) return
+  if (id === TRANSCRIPTION_TAB || id === VERBATIM_TAB) {
+    core.llmServices.setActive(null)
+  } else {
+    core.llmServices.setActive(id)
+  }
+})
+
+watch(
+  () => core.llmServices?.list.value.map((s) => s.id).join("|"),
+  () => {
+    if (
+      activeTab.value !== TRANSCRIPTION_TAB &&
+      activeTab.value !== VERBATIM_TAB &&
+      !core.llmServices?.get(activeTab.value)
+    ) {
+      activeTab.value = TRANSCRIPTION_TAB
+    }
+  },
+)
+
+watch(
+  () => core.activeChannelId.value,
+  () => {
+    core.audio?.pause()
+    if (core.audio) {
+      core.audio.currentTime.value = 0
+      core.audio.isPlaying.value = false
+    }
+    isSidebarOpen.value = false
+  },
+)
+
+watch(showTranscription, (visible) => {
+  if (!visible) core.audio?.pause()
+})
+
+function onChannelChange(channelId: string) {
+  core.setActiveChannel(channelId)
+}
+
+function onTranslationChange(translationId: string) {
+  core.activeChannel.value?.setActiveTranslation(translationId)
+}
+</script>
+
+<template>
+  <div class="editor-layout">
+    <Header
+      v-if="props.showHeader"
+      :title="core.title.value"
+      :date="core.date.value"
+      :duration="core.activeChannel.value?.duration ?? 0"
+      :speaker-count="speakers.size"
+      :is-mobile="isMobile"
+      :can-ask="!!core.chat"
+      @toggle-sidebar="isSidebarOpen = !isSidebarOpen"
+      @open-chat="core.chat?.setDrawerOpen(true)" />
+    <TabBar v-model="activeTab" />
+    <SelectionActionBar v-if="showTranscription" />
+    <main class="editor-body">
+      <TranscriptionPanel
+        v-if="showTranscription"
+        :turns="activeTurns"
+        :speakers="speakers" />
+      <VerbatimPanel v-else-if="showVerbatim" />
+      <component
+        :is="core.components.llmServicePanel"
+        v-else-if="activeService"
+        :key="activeService.id"
+        :service="activeService" />
+      <TranscriptionPanel v-else :turns="activeTurns" :speakers="speakers" />
+      <SpeakerSidebar
+        v-if="!isMobile"
+        :speakers="speakerList"
+        :channels="channels"
+        :selected-channel-id="core.activeChannelId.value"
+        :translations="translations"
+        :selected-translation-id="activeTranslationId"
+        :show-speakers="showTranscription"
+        @update:selected-channel-id="onChannelChange"
+        @update:selected-translation-id="onTranslationChange" />
+
+      <SidebarDrawer v-if="isMobile" v-model:open="isSidebarOpen">
+        <SpeakerSidebar
+          :speakers="speakerList"
+          :channels="channels"
+          :selected-channel-id="core.activeChannelId.value"
+          :translations="translations"
+          :selected-translation-id="activeTranslationId"
+          :show-speakers="showTranscription"
+          @update:selected-channel-id="onChannelChange"
+          @update:selected-translation-id="onTranslationChange" />
+      </SidebarDrawer>
+    </main>
+    <component
+      :is="core.components.player"
+      v-if="core.audio?.src.value"
+      v-show="showTranscription"
+      :audio-src="core.audio.src.value" />
+    <component
+      :is="core.components.subtitleBanner"
+      v-if="
+        core.subtitle?.isVisible.value &&
+        !isMobile &&
+        !core.subtitle.isFullscreen.value
+      " />
+    <component
+      :is="core.components.subtitleFullscreen"
+      v-if="core.subtitle?.isFullscreen.value" />
+    <component :is="core.components.chatDrawer" v-if="core.chat" />
+    <div
+      v-if="isMobile && (channels.length > 1 || translations.length > 1)"
+      class="mobile-selectors">
+      <ChannelSelector
+        v-if="channels.length > 1"
+        :channels="channels"
+        :selected-channel-id="core.activeChannelId.value"
+        @update:selected-channel-id="onChannelChange" />
+      <TranslationSelector
+        v-if="translations.length > 1"
+        :translations="translations"
+        :selected-translation-id="activeTranslationId"
+        @update:selected-translation-id="onTranslationChange" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.editor-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--color-background);
+}
+
+.editor-body {
+  display: grid;
+  grid-template-columns: 1fr var(--sidebar-width);
+  flex: 1;
+  min-height: 0;
+}
+
+.mobile-selectors {
+  display: flex;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-top: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+  flex-shrink: 0;
+  box-shadow: var(--shadow-md);
+  align-items: end;
+}
+
+.mobile-selectors > * {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 767px) {
+  .editor-body {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/src/components/MicrophoneIllustration.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    viewBox="0 0 938 604"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <polygon
+      points="331.5,533.5 331.5,520.5 702.5,428.5 705.5,443.5"
+      fill="#3f3d56"
+      transform="matrix(1.8176168,0,0,1.8176168,-452.14416,-495.30213)" />
+    <polygon
+      points="564.5,469.5 555.5,452.5 544.5,455.5 542.5,472.5"
+      fill="#3f3d56"
+      transform="matrix(1.8176168,0,0,1.8176168,-452.14416,-495.30213)" />
+    <path
+      d="m 317.61655,19.99224 c 0,0 79.97514,-5.452851 101.78654,56.34612 21.81141,61.79897 72.70468,172.67359 92.69846,189.03214 19.99379,16.35855 41.80519,59.98136 38.16995,74.52229"
+      stroke="#3f3d56"
+      stroke-miterlimit="10"
+      stroke-width="9.08808" />
+    <path
+      d="m 329.43106,19.083431 c 0,8.532657 -9.0733,15.449743 -23.62902,15.449743 -14.55571,0 -21.8114,-6.917086 -21.8114,-15.449743 0,-8.532657 7.25569,-15.4497427 21.8114,-15.4497427 14.55572,0 23.62902,6.9170857 23.62902,15.4497427 z"
+      fill="currentColor"
+      style="fill: #999999" />
+    <polygon
+      points="691.5,439.5 364.5,521.5 377.5,602.5 666.5,602.5"
+      fill="#3f3d56"
+      transform="matrix(1.8176168,0,0,1.8176168,-456.32371,-492.51252)" />
+  </svg>
+</template>

package/src/components/SelectionActionBar.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { Button, CopyButton } from "@linto-ai/transcript-ui-ui"
+import { useTurnSelection } from "../composables/useTurnSelection"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+const selection = useTurnSelection()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div
+    v-if="selection.hasSelection.value"
+    class="selection-bar"
+    role="toolbar"
+    :aria-label="t('selection.count')">
+    <span class="selection-count">
+      {{ selection.count.value }} {{ t("selection.count") }}
+    </span>
+    <div class="selection-actions">
+      <CopyButton
+        icon="clipboard-type"
+        :copy-fn="selection.copyText"
+        variant="secondary">
+        {{ t("selection.copyText") }}
+      </CopyButton>
+      <CopyButton icon="clipboard-list" :copy-fn="selection.copyWithMetadata">
+        {{ t("selection.copyWithMetadata") }}
+      </CopyButton>
+      <Button variant="transparent" icon="x" @click="selection.clear()">
+        {{ t("selection.cancel") }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.selection-bar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-xs) var(--spacing-lg);
+  /* No backdrop-filter: it forces a WebRender backdrop render target sized to
+     the content behind, a heavy GPU-memory cost on long transcripts. The
+     semi-opaque glass background stays legible without the blur. */
+  background: var(--glass-background);
+  border-bottom: 1px solid var(--color-border);
+  animation: bar-slide-down var(--transition-duration) ease;
+}
+
+.selection-count {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.selection-actions {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+
+@keyframes bar-slide-down {
+  from {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .selection-bar {
+    animation: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .selection-bar {
+    padding: var(--spacing-xs) var(--spacing-md);
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+  }
+}
+</style>

package/src/components/SidebarDrawer.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {
+  DialogRoot,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from "reka-ui"
+import { X } from "lucide-vue-next"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+const open = defineModel<boolean>("open", { required: true })
+const { t } = useI18n()
+</script>
+
+<template>
+  <DialogRoot v-model:open="open">
+    <DialogPortal disabled>
+      <DialogOverlay class="editor-overlay" />
+      <DialogContent class="sidebar-drawer">
+        <DialogTitle class="sr-only">{{ t("sidebar.speakers") }}</DialogTitle>
+        <DialogClose
+          class="sidebar-close"
+          :aria-label="t('header.closeSidebar')">
+          <X :size="20" />
+        </DialogClose>
+        <slot />
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/src/components/SpeakerLabel.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { SpeakerIndicator } from "@linto-ai/transcript-ui-ui"
+import { computed } from "vue"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import * as utils from "../utils"
+import type { Speaker } from "../types/editor"
+
+const props = defineProps<{
+  speaker?: Speaker
+  startTime?: number
+  startDate?: number
+  language: string
+  /** The label is wrapped in a clickable trigger (speaker assignment):
+   *  show the hover affordance on the name. */
+  interactive?: boolean
+}>()
+
+const { t, locale } = useI18n()
+
+const languageName = computed(() =>
+  utils.getLanguageDisplayName(
+    props.language,
+    locale.value,
+    t("language.wildcard"),
+  ),
+)
+
+const timestamp = computed<{ text: string; datetime: string } | null>(() => {
+  if (props.startTime != null) {
+    return {
+      text: utils.formatTime(props.startTime),
+      datetime: `PT${props.startTime.toFixed(1)}S`,
+    }
+  }
+  if (props.startDate != null) {
+    const date = new Date(props.startDate * 1000)
+    return {
+      text: utils.formatShortDateTime(props.startDate, locale.value),
+      datetime: date.toISOString(),
+    }
+  }
+  return null
+})
+
+const speakerColor = computed(() => props.speaker?.color ?? "transparent")
+
+// A turn always shows a speaker: unnamed ones get an explicit placeholder
+// (assignment lands with the speakers iteration).
+const displayName = computed(() => props.speaker?.name ?? t("speaker.unknown"))
+</script>
+
+<template>
+  <div
+    class="speaker-label"
+    :class="{ 'speaker-label--interactive': interactive }">
+    <SpeakerIndicator v-if="speaker" :color="speakerColor" />
+    <span class="speaker-name" :class="{ 'speaker-name--unknown': !speaker }">{{
+      displayName
+    }}</span>
+    <time v-if="timestamp" class="timestamp" :datetime="timestamp.datetime">{{
+      timestamp.text
+    }}</time>
+    <span v-if="languageName" class="lang">{{ languageName }}</span>
+  </div>
+</template>
+
+<style scoped>
+.speaker-label {
+  display: flex;
+  border-bottom: 2px solid transparent;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.speaker-name {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.speaker-name--unknown {
+  font-weight: 400;
+  font-style: italic;
+  color: var(--color-text-muted);
+}
+
+.speaker-label--interactive:hover .speaker-name {
+  text-decoration: underline;
+}
+
+.timestamp {
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-mono);
+  color: var(--color-text-muted);
+  /* not supported on firefox yet */
+  text-box: trim-both cap alphabetic;
+}
+
+.lang {
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  /* not supported on firefox yet */
+  text-box: trim-both cap alphabetic;
+}
+</style>