@gxp-dev/app-ui 0.1.6

package/src/components/domain/live-countdown-sync/LiveCountdownSync.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { cn } from '@/lib/utils'
+
+export type LiveCountdownSyncSeverity = 'normal' | 'warning' | 'danger' | 'expired'
+
+export interface LiveCountdownSyncProps {
+  /** ISO timestamp (e.g. `'2026-05-11T12:34:56Z'`) of when the countdown should hit zero. */
+  endAt: string
+  /** Original duration in seconds, used for the progress bar's denominator. */
+  durationSeconds?: number
+  showProgress?: boolean
+  /** Seconds remaining at which the `warning` severity kicks in. */
+  warningThreshold?: number
+  /** Seconds remaining at which the `danger` severity kicks in. */
+  dangerThreshold?: number
+  /** Hide the default clock icon. */
+  hideIcon?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<LiveCountdownSyncProps>(), {
+  durationSeconds: 30,
+  showProgress: true,
+  warningThreshold: 10,
+  dangerThreshold: 5,
+  hideIcon: false,
+})
+
+const emit = defineEmits<{
+  tick: [remainingSeconds: number]
+  warning: [remainingSeconds: number]
+  danger: [remainingSeconds: number]
+  expired: []
+}>()
+
+const calculate = (): number => {
+  const end = new Date(props.endAt).getTime()
+  if (Number.isNaN(end)) return 0
+  return Math.max(0, Math.floor((end - Date.now()) / 1000))
+}
+
+// Initialize synchronously so the very first render has the right value —
+// onMounted runs after a microtask and would otherwise flash a stale 0:00.
+const remainingSeconds = ref(calculate())
+let timer: ReturnType<typeof setInterval> | undefined
+
+const formattedTime = computed(() => {
+  if (remainingSeconds.value <= 0) return '0:00'
+  const m = Math.floor(remainingSeconds.value / 60)
+  const s = remainingSeconds.value % 60
+  return `${m}:${s.toString().padStart(2, '0')}`
+})
+
+const progressPercent = computed(() =>
+  props.durationSeconds > 0
+    ? Math.max(0, (remainingSeconds.value / props.durationSeconds) * 100)
+    : 0,
+)
+
+const isExpired = computed(() => remainingSeconds.value <= 0)
+const isDanger = computed(
+  () => remainingSeconds.value <= props.dangerThreshold && remainingSeconds.value > 0,
+)
+const isWarning = computed(
+  () =>
+    remainingSeconds.value <= props.warningThreshold &&
+    remainingSeconds.value > props.dangerThreshold,
+)
+
+const severity = computed<LiveCountdownSyncSeverity>(() => {
+  if (isExpired.value) return 'expired'
+  if (isDanger.value) return 'danger'
+  if (isWarning.value) return 'warning'
+  return 'normal'
+})
+
+const stopTimer = (): void => {
+  if (timer) {
+    clearInterval(timer)
+    timer = undefined
+  }
+}
+
+const tick = (): void => {
+  const previousSeverity = severity.value
+  remainingSeconds.value = calculate()
+  emit('tick', remainingSeconds.value)
+
+  if (previousSeverity !== 'warning' && severity.value === 'warning') {
+    emit('warning', remainingSeconds.value)
+  }
+  if (previousSeverity !== 'danger' && severity.value === 'danger') {
+    emit('danger', remainingSeconds.value)
+  }
+  if (remainingSeconds.value <= 0) {
+    emit('expired')
+    stopTimer()
+  }
+}
+
+const startTimer = (): void => {
+  stopTimer()
+  remainingSeconds.value = calculate()
+  if (remainingSeconds.value <= 0) {
+    emit('expired')
+    return
+  }
+  timer = setInterval(tick, 1000)
+}
+
+watch(() => props.endAt, startTimer)
+onMounted(startTimer)
+onBeforeUnmount(stopTimer)
+
+const severityClass = computed(() => {
+  switch (severity.value) {
+    case 'danger':
+      return 'bg-destructive/15 text-destructive animate-pulse'
+    case 'warning':
+      return 'bg-amber-100 text-amber-900 dark:bg-amber-500/20 dark:text-amber-200'
+    case 'expired':
+      return 'bg-muted text-muted-foreground'
+    default:
+      return 'bg-muted text-foreground'
+  }
+})
+
+const progressBarClass = computed(() => {
+  switch (severity.value) {
+    case 'danger':
+      return 'bg-destructive'
+    case 'warning':
+      return 'bg-amber-500'
+    default:
+      return 'bg-primary'
+  }
+})
+
+defineExpose({ remainingSeconds, startTimer, stopTimer })
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-semibold transition-colors',
+      severityClass,
+      props.class,
+    )"
+    role="timer"
+    :aria-live="isDanger ? 'assertive' : 'polite'"
+    :data-severity="severity"
+    data-testid="live-countdown-sync"
+  >
+    <slot name="icon" :severity="severity">
+      <svg
+        v-if="!hideIcon"
+        class="h-5 w-5"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="12 6 12 12 16 14" />
+      </svg>
+    </slot>
+
+    <slot name="time" :remaining-seconds="remainingSeconds" :severity="severity">
+      <span class="min-w-[3rem] tabular-nums" data-testid="live-countdown-sync-time">
+        {{ formattedTime }}
+      </span>
+    </slot>
+
+    <slot
+      name="progress"
+      :percent="progressPercent"
+      :severity="severity"
+      :remaining-seconds="remainingSeconds"
+    >
+      <div
+        v-if="showProgress"
+        class="h-1 min-w-[60px] flex-1 overflow-hidden rounded-full bg-black/10 dark:bg-white/10"
+        data-testid="live-countdown-sync-progress"
+      >
+        <div
+          :class="cn('h-full transition-[width] duration-1000 ease-linear', progressBarClass)"
+          :style="{ width: progressPercent + '%' }"
+        />
+      </div>
+    </slot>
+  </div>
+</template>

package/src/components/domain/live-countdown-sync/index.ts

@@ -0,0 +1,2 @@
+export { default as LiveCountdownSync } from './LiveCountdownSync.vue'
+export type { LiveCountdownSyncProps, LiveCountdownSyncSeverity } from './LiveCountdownSync.vue'

package/src/components/domain/local-preview/LocalPreview.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import LocalPreview from './LocalPreview.vue'
+
+const meta = {
+  title: 'Domain/LocalPreview',
+  component: LocalPreview,
+  tags: ['autodocs'],
+  argTypes: {
+    isMuted: { control: 'boolean' },
+    isVideoOff: { control: 'boolean' },
+    displayName: { control: 'text' },
+  },
+  decorators: [
+    () => ({
+      template: '<div style="width: 400px; height: 300px;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof LocalPreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    displayName: 'Alice Smith',
+    isMuted: false,
+    isVideoOff: true,
+  },
+}
+
+export const CameraOff: Story = {
+  args: {
+    displayName: 'Alice Smith',
+    isVideoOff: true,
+    isMuted: false,
+  },
+}
+
+export const Muted: Story = {
+  args: {
+    displayName: 'Alice Smith',
+    isMuted: true,
+    isVideoOff: false,
+  },
+}
+
+export const AllOff: Story = {
+  args: {
+    displayName: 'Alice Smith',
+    isMuted: true,
+    isVideoOff: true,
+  },
+}

package/src/components/domain/local-preview/LocalPreview.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import LocalPreview from './LocalPreview.vue'
+
+describe('LocalPreview', () => {
+  it('renders display name', () => {
+    const wrapper = mount(LocalPreview, {
+      props: { displayName: 'Alice' },
+    })
+    const name = wrapper.find('[data-testid="display-name"]')
+    expect(name.text()).toBe('Alice')
+  })
+
+  it('shows avatar when video off', () => {
+    const wrapper = mount(LocalPreview, {
+      props: { isVideoOff: true },
+    })
+    expect(wrapper.find('[data-testid="avatar-fallback"]').exists()).toBe(true)
+  })
+
+  it('shows muted badge', () => {
+    const wrapper = mount(LocalPreview, {
+      props: { isMuted: true },
+    })
+    expect(wrapper.find('[data-testid="muted-badge"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="muted-badge"]').text()).toContain('Muted')
+  })
+
+  it('shows camera off badge', () => {
+    const wrapper = mount(LocalPreview, {
+      props: { isVideoOff: true },
+    })
+    expect(wrapper.find('[data-testid="camera-off-badge"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="camera-off-badge"]').text()).toContain('Camera Off')
+  })
+
+  it('shows LIVE badge when active', () => {
+    const wrapper = mount(LocalPreview)
+    expect(wrapper.find('[data-testid="live-badge"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="live-badge"]').text()).toContain('LIVE')
+  })
+
+  it('does not show avatar when video is on', () => {
+    const wrapper = mount(LocalPreview, {
+      props: { isVideoOff: false },
+    })
+    expect(wrapper.find('[data-testid="avatar-fallback"]').exists()).toBe(false)
+  })
+
+  it('does not show muted badge when not muted', () => {
+    const wrapper = mount(LocalPreview, {
+      props: { isMuted: false },
+    })
+    expect(wrapper.find('[data-testid="muted-badge"]').exists()).toBe(false)
+  })
+
+  it('renders default display name', () => {
+    const wrapper = mount(LocalPreview)
+    const name = wrapper.find('[data-testid="display-name"]')
+    expect(name.text()).toBe('You')
+  })
+
+  it('renders audio level meter', () => {
+    const wrapper = mount(LocalPreview)
+    expect(wrapper.find('[data-testid="audio-level-meter"]').exists()).toBe(true)
+  })
+
+  it('applies mirrored transform to video', () => {
+    const wrapper = mount(LocalPreview)
+    const video = wrapper.find('video')
+    expect(video.classes()).toContain('local-preview-video')
+  })
+})

package/src/components/domain/local-preview/LocalPreview.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+/**
+ * Local participant self-view for video calls: renders the user's
+ * `videoStream` in a mirrored `<video>` and an animated audio-level
+ * indicator driven by an `AnalyserNode`. Shows `MicOff` / `VideoOff`
+ * overlays when muted.
+ */
+
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { cn } from '@/lib/utils'
+import { MicOff, VideoOff, User } from 'lucide-vue-next'
+
+export interface LocalPreviewProps {
+  videoStream?: MediaStream | null
+  audioStream?: MediaStream | null
+  isMuted?: boolean
+  isVideoOff?: boolean
+  displayName?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<LocalPreviewProps>(), {
+  videoStream: undefined,
+  audioStream: undefined,
+  isMuted: false,
+  isVideoOff: false,
+  displayName: 'You',
+})
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+const audioLevel = ref(0)
+let audioContext: AudioContext | null = null
+let analyser: AnalyserNode | null = null
+let animationFrameId: number | null = null
+
+watch(
+  () => props.videoStream,
+  (stream) => {
+    if (videoRef.value) {
+      videoRef.value.srcObject = stream ?? null
+    }
+  },
+  { immediate: true },
+)
+
+onMounted(() => {
+  if (videoRef.value && props.videoStream) {
+    videoRef.value.srcObject = props.videoStream
+  }
+})
+
+watch(
+  () => props.audioStream,
+  (stream) => {
+    cleanupAudio()
+    if (stream) {
+      setupAudioAnalyser(stream)
+    }
+  },
+  { immediate: true },
+)
+
+function setupAudioAnalyser(stream: MediaStream) {
+  try {
+    audioContext = new AudioContext()
+    analyser = audioContext.createAnalyser()
+    analyser.fftSize = 256
+
+    const source = audioContext.createMediaStreamSource(stream)
+    source.connect(analyser)
+
+    const dataArray = new Uint8Array(analyser.frequencyBinCount)
+
+    function updateLevel() {
+      if (!analyser) return
+      analyser.getByteFrequencyData(dataArray)
+      const sum = dataArray.reduce((acc, val) => acc + val, 0)
+      const avg = sum / dataArray.length
+      audioLevel.value = Math.min(100, Math.round((avg / 255) * 100))
+      animationFrameId = requestAnimationFrame(updateLevel)
+    }
+
+    updateLevel()
+  } catch {
+    // AudioContext not available
+  }
+}
+
+function cleanupAudio() {
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
+  }
+  if (audioContext) {
+    audioContext.close().catch(() => {})
+    audioContext = null
+  }
+  analyser = null
+  audioLevel.value = 0
+}
+
+onUnmounted(() => {
+  cleanupAudio()
+})
+
+function getInitial(name: string | undefined): string {
+  return name?.charAt(0)?.toUpperCase() || '?'
+}
+
+function audioLevelColor(level: number): string {
+  if (level >= 90) return 'bg-destructive'
+  if (level >= 70) return 'bg-yellow-500'
+  return 'bg-green-500'
+}
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'relative overflow-hidden rounded-lg bg-muted',
+      props.class,
+    )"
+  >
+    <!-- Mirrored self-view video -->
+    <video
+      v-show="!isVideoOff"
+      ref="videoRef"
+      class="local-preview-video h-full w-full object-cover"
+      autoplay
+      playsinline
+      muted
+    />
+
+    <!-- Avatar fallback when camera off -->
+    <div
+      v-if="isVideoOff"
+      class="flex h-full w-full items-center justify-center bg-muted"
+      data-testid="avatar-fallback"
+    >
+      <div class="flex h-20 w-20 items-center justify-center rounded-full bg-primary text-primary-foreground">
+        <User v-if="!displayName" class="h-10 w-10" />
+        <span v-else class="text-3xl font-semibold">{{ getInitial(displayName) }}</span>
+      </div>
+    </div>
+
+    <!-- LIVE badge -->
+    <div class="absolute left-3 top-3" data-testid="live-badge">
+      <span class="rounded bg-destructive px-2 py-0.5 text-xs font-bold uppercase tracking-wider text-destructive-foreground">
+        LIVE
+      </span>
+    </div>
+
+    <!-- Status badges -->
+    <div class="absolute right-3 top-3 flex gap-1.5">
+      <div
+        v-if="isMuted"
+        class="flex items-center gap-1 rounded-full bg-destructive/90 px-2 py-1"
+        data-testid="muted-badge"
+      >
+        <MicOff class="h-3.5 w-3.5 text-destructive-foreground" />
+        <span class="text-xs font-medium text-destructive-foreground">Muted</span>
+      </div>
+
+      <div
+        v-if="isVideoOff"
+        class="flex items-center gap-1 rounded-full bg-destructive/90 px-2 py-1"
+        data-testid="camera-off-badge"
+      >
+        <VideoOff class="h-3.5 w-3.5 text-destructive-foreground" />
+        <span class="text-xs font-medium text-destructive-foreground">Camera Off</span>
+      </div>
+    </div>
+
+    <!-- Name overlay -->
+    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-3 py-2">
+      <span class="text-sm font-medium text-white" data-testid="display-name">
+        {{ displayName }}
+      </span>
+    </div>
+
+    <!-- Audio level meter -->
+    <div class="absolute bottom-2 right-3 flex h-16 w-2 flex-col-reverse overflow-hidden rounded-full bg-black/30">
+      <div
+        :class="cn('w-full rounded-full transition-all duration-100', audioLevelColor(audioLevel))"
+        :style="{ height: `${audioLevel}%` }"
+        data-testid="audio-level-meter"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.local-preview-video {
+  transform: scaleX(-1);
+}
+</style>

package/src/components/domain/local-preview/index.ts

@@ -0,0 +1,2 @@
+export { default as LocalPreview } from './LocalPreview.vue'
+export type { LocalPreviewProps } from './LocalPreview.vue'

package/src/components/domain/media-control-bar/MediaControlBar.stories.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import MediaControlBar from './MediaControlBar.vue'
+
+const meta = {
+  title: 'Domain/MediaControlBar',
+  component: MediaControlBar,
+  tags: ['autodocs'],
+  argTypes: {
+    isMuted: { control: 'boolean' },
+    isVideoOff: { control: 'boolean' },
+    isScreenSharing: { control: 'boolean' },
+    isHandRaised: { control: 'boolean' },
+    audioEnabled: { control: 'boolean' },
+    videoEnabled: { control: 'boolean' },
+    screenShareEnabled: { control: 'boolean' },
+  },
+  decorators: [
+    () => ({
+      template: '<div style="display: flex; justify-content: center; padding: 40px;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof MediaControlBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    isMuted: false,
+    isVideoOff: false,
+    isScreenSharing: false,
+    isHandRaised: false,
+  },
+}
+
+export const Muted: Story = {
+  args: {
+    isMuted: true,
+    isVideoOff: false,
+    isScreenSharing: false,
+    isHandRaised: false,
+  },
+}
+
+export const VideoOff: Story = {
+  args: {
+    isMuted: false,
+    isVideoOff: true,
+    isScreenSharing: false,
+    isHandRaised: false,
+  },
+}
+
+export const ScreenSharing: Story = {
+  args: {
+    isMuted: false,
+    isVideoOff: false,
+    isScreenSharing: true,
+    isHandRaised: false,
+  },
+}
+
+export const HandRaised: Story = {
+  args: {
+    isMuted: false,
+    isVideoOff: false,
+    isScreenSharing: false,
+    isHandRaised: true,
+  },
+}
+
+export const AudioOnly: Story = {
+  args: {
+    isMuted: false,
+    isVideoOff: false,
+    isScreenSharing: false,
+    isHandRaised: false,
+    videoEnabled: false,
+    screenShareEnabled: false,
+  },
+}