@gxp-dev/app-ui 0.1.6

package/src/experience/pages/audio-capture/AudioCapturePage.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { useMedia } from '@/composables/useMedia'
+import AudioVisualizer from '@/components/domain/audio-visualizer/AudioVisualizer.vue'
+
+export interface AudioCapturePageProps {
+  maxDurationSeconds?: number
+  title?: string
+  recordLabel?: string
+  stopLabel?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<AudioCapturePageProps>(), {
+  maxDurationSeconds: 30,
+  title: 'Record audio',
+  recordLabel: 'Record',
+  stopLabel: 'Stop',
+})
+
+const emit = defineEmits<{
+  next: [blob: Blob]
+  back: []
+  exit: []
+}>()
+
+const {
+  audioStream,
+  audioBlob,
+  setAudioDevice,
+  startRecording,
+  stopRecording,
+  resetState,
+} = useMedia()
+
+const isRecording = ref(false)
+const elapsed = ref(0)
+let timer: ReturnType<typeof setInterval> | undefined
+
+const remaining = computed(() =>
+  props.maxDurationSeconds > 0 ? Math.max(0, props.maxDurationSeconds - elapsed.value) : null,
+)
+
+watch(audioBlob, (blob) => {
+  if (blob) emit('next', blob)
+})
+
+onMounted(async () => {
+  try {
+    await setAudioDevice()
+  } catch {
+    /* surfaced via flow.error */
+  }
+})
+
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer)
+  if (isRecording.value) stopRecording()
+  resetState()
+})
+
+const handleStart = () => {
+  isRecording.value = true
+  elapsed.value = 0
+  startRecording({ audio: true })
+  timer = setInterval(() => {
+    elapsed.value += 1
+    if (props.maxDurationSeconds > 0 && elapsed.value >= props.maxDurationSeconds) {
+      handleStop()
+    }
+  }, 1000)
+}
+
+const handleStop = () => {
+  if (!isRecording.value) return
+  isRecording.value = false
+  if (timer) clearInterval(timer)
+  stopRecording()
+}
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'experience-page experience-page--audio-capture flex h-full w-full flex-col items-center justify-center gap-6 p-8',
+      props.class,
+    )"
+    data-testid="audio-capture-page"
+  >
+    <slot name="header">
+      <h1 class="text-2xl font-bold tracking-tight text-foreground">{{ title }}</h1>
+    </slot>
+
+    <div class="flex h-32 w-full max-w-md items-center justify-center">
+      <AudioVisualizer
+        :active="isRecording"
+        :stream="audioStream"
+        mode="frequency"
+        class="h-24 w-24 text-primary"
+        data-testid="audio-capture-visualizer"
+      />
+    </div>
+
+    <p v-if="remaining !== null && isRecording" class="text-sm text-muted-foreground" data-testid="audio-capture-timer">
+      {{ remaining }}s
+    </p>
+
+    <slot name="controls" :start="handleStart" :stop="handleStop" :is-recording="isRecording">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+        :data-testid="isRecording ? 'audio-capture-stop' : 'audio-capture-record'"
+        @click="isRecording ? handleStop() : handleStart()"
+      >
+        {{ isRecording ? stopLabel : recordLabel }}
+      </button>
+    </slot>
+  </section>
+</template>

package/src/experience/pages/audio-capture/index.ts

@@ -0,0 +1,7 @@
+import AudioCapturePageComponent from './AudioCapturePage.vue'
+import { withExperienceDefaults } from '../../withDefaults'
+
+export const AudioCapturePage = withExperienceDefaults(AudioCapturePageComponent, {
+  resultKey: 'audioBlob',
+})
+export type { AudioCapturePageProps } from './AudioCapturePage.vue'

package/src/experience/pages/audio-review/AudioReviewPage.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AudioReviewPageComponent from './AudioReviewPage.vue'
+
+const meta = {
+  title: 'Experience/Pages/AudioReviewPage',
+  component: AudioReviewPageComponent,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AudioReviewPageComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { allowCaption: true },
+  render: (args) => ({
+    components: { AudioReviewPage: AudioReviewPageComponent },
+    setup: () => ({ args }),
+    template: '<div class="h-screen w-screen"><AudioReviewPage v-bind="args" :audio-blob="null" /></div>',
+  }),
+}

package/src/experience/pages/audio-review/AudioReviewPage.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { ref, computed, watch, onBeforeUnmount, type PropType } from 'vue'
+import { cn } from '@/lib/utils'
+
+export interface AudioReviewPagePayload {
+  blob: Blob
+  caption?: string
+}
+
+const props = defineProps({
+  audioBlob: { type: [Object, null] as PropType<Blob | null>, default: null },
+  context: { type: Object as PropType<Record<string, unknown>>, default: () => ({}) },
+  allowCaption: { type: Boolean, default: false },
+  captionPlaceholder: { type: String, default: 'Add a caption…' },
+  acceptLabel: { type: String, default: 'Use audio' },
+  retakeLabel: { type: String, default: 'Retake' },
+  class: { type: String, default: undefined },
+})
+
+const emit = defineEmits<{
+  next: [payload: AudioReviewPagePayload]
+  back: []
+  exit: []
+}>()
+
+const caption = ref('')
+
+const resolvedBlob = computed<Blob | null>(() => {
+  if (props.audioBlob instanceof Blob) return props.audioBlob
+  const fromCtx = props.context?.audioBlob
+  return fromCtx instanceof Blob ? fromCtx : null
+})
+
+const previewUrl = ref<string | null>(null)
+watch(
+  resolvedBlob,
+  (blob, _old, onCleanup) => {
+    if (!blob) {
+      previewUrl.value = null
+      return
+    }
+    const url = URL.createObjectURL(blob)
+    previewUrl.value = url
+    onCleanup(() => URL.revokeObjectURL(url))
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
+})
+
+const handleAccept = () => {
+  if (!resolvedBlob.value) return
+  emit('next', {
+    blob: resolvedBlob.value,
+    caption: props.allowCaption && caption.value ? caption.value : undefined,
+  })
+}
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'experience-page experience-page--audio-review flex h-full w-full flex-col items-center justify-center gap-6 p-8',
+      props.class,
+    )"
+    data-testid="audio-review-page"
+  >
+    <slot name="preview" :url="previewUrl" :blob="resolvedBlob">
+      <audio
+        v-if="previewUrl"
+        :src="previewUrl"
+        controls
+        class="w-full max-w-md"
+        data-testid="audio-review-preview"
+      />
+    </slot>
+
+    <slot name="caption">
+      <div v-if="allowCaption" class="w-full max-w-md">
+        <input
+          v-model="caption"
+          type="text"
+          :placeholder="captionPlaceholder"
+          class="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground placeholder:text-muted-foreground"
+          data-testid="audio-review-caption"
+        />
+      </div>
+    </slot>
+
+    <slot name="actions" :accept="handleAccept" :retake="() => $emit('back')">
+      <div class="flex w-full max-w-md justify-between gap-3">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80"
+          data-testid="audio-review-retake"
+          @click="$emit('back')"
+        >
+          {{ retakeLabel }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none"
+          :disabled="!resolvedBlob"
+          data-testid="audio-review-accept"
+          @click="handleAccept"
+        >
+          {{ acceptLabel }}
+        </button>
+      </div>
+    </slot>
+  </section>
+</template>

package/src/experience/pages/audio-review/index.ts

@@ -0,0 +1,8 @@
+import AudioReviewPageComponent from './AudioReviewPage.vue'
+import { withExperienceDefaults } from '../../withDefaults'
+
+export const AudioReviewPage = withExperienceDefaults(AudioReviewPageComponent, {
+  action: 'publishPost',
+  resultKey: 'post',
+})
+export type { AudioReviewPagePayload } from './AudioReviewPage.vue'

package/src/experience/pages/camera/CameraPage.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CameraPageComponent from './CameraPage.vue'
+
+const meta = {
+  title: 'Experience/Pages/CameraPage',
+  component: CameraPageComponent,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CameraPageComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    countdown: 3,
+    facingMode: 'user',
+    mirrored: true,
+  },
+  render: (args) => ({
+    components: { CameraPage: CameraPageComponent },
+    setup: () => ({ args }),
+    template: '<div class="h-screen w-screen"><CameraPage v-bind="args" /></div>',
+  }),
+}

package/src/experience/pages/camera/CameraPage.vue

@@ -0,0 +1,186 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { useMedia } from '@/composables/useMedia'
+
+export interface CameraPageProps {
+  /** Countdown seconds before capture. 0 = capture immediately. */
+  countdown?: number
+  /** Preferred camera facing. */
+  facingMode?: 'user' | 'environment'
+  /** Mirror the preview (selfie). Capture follows preview unless overridden. */
+  mirrored?: boolean
+  /** Target aspect ratio for the captured image (width / height). */
+  aspectRatio?: number | null
+  /** Overlay image (e.g. border frame) drawn on top of the preview. */
+  borderSrc?: string
+  /** Optional silhouette/guide overlay. */
+  silhouetteSrc?: string
+  captureLabel?: string
+  retakeLabel?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<CameraPageProps>(), {
+  countdown: 3,
+  facingMode: 'user',
+  mirrored: true,
+  aspectRatio: null,
+  captureLabel: 'Take photo',
+})
+
+const emit = defineEmits<{
+  next: [blob: Blob]
+  back: []
+  exit: []
+}>()
+
+const {
+  videoStream,
+  setVideoDevice,
+  scaleCanvas,
+  drawToCanvas,
+  resetState,
+} = useMedia()
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+const counter = ref<number | null>(null)
+const isCapturing = ref(false)
+
+const previewMirrored = computed(() => props.mirrored)
+
+watch(videoStream, (stream) => {
+  if (videoRef.value) {
+    videoRef.value.srcObject = stream ?? null
+  }
+})
+
+onMounted(async () => {
+  try {
+    await setVideoDevice({ facingMode: props.facingMode })
+  } catch {
+    // Caller surfaces permission errors via the busy/error overlay
+  }
+})
+
+onBeforeUnmount(() => {
+  resetState()
+})
+
+const captureFrame = (): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    const video = videoRef.value
+    if (!video || !video.videoWidth) {
+      reject(new Error('Camera is not ready'))
+      return
+    }
+    const { canvas, ctx, s } = scaleCanvas(video, props.aspectRatio)
+    if (!ctx) {
+      reject(new Error('Unable to acquire canvas context'))
+      return
+    }
+    drawToCanvas(canvas, ctx, s, video, props.mirrored)
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob)
+      else reject(new Error('toBlob returned null'))
+    }, 'image/png')
+  })
+}
+
+const runCountdown = (seconds: number): Promise<void> => {
+  return new Promise((resolve) => {
+    counter.value = seconds
+    if (seconds <= 0) {
+      counter.value = null
+      resolve()
+      return
+    }
+    const tick = () => {
+      if (counter.value === null) return
+      counter.value -= 1
+      if (counter.value <= 0) {
+        counter.value = null
+        resolve()
+        return
+      }
+      setTimeout(tick, 1000)
+    }
+    setTimeout(tick, 1000)
+  })
+}
+
+const handleCapture = async () => {
+  if (isCapturing.value) return
+  isCapturing.value = true
+  try {
+    await runCountdown(props.countdown)
+    const blob = await captureFrame()
+    emit('next', blob)
+  } catch {
+    // Swallow — user can retry
+  } finally {
+    isCapturing.value = false
+    counter.value = null
+  }
+}
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'experience-page experience-page--camera relative flex h-full w-full flex-col items-center justify-center gap-4 bg-black p-4',
+      props.class,
+    )"
+    data-testid="camera-page"
+  >
+    <div class="relative flex flex-1 w-full items-center justify-center overflow-hidden rounded-lg bg-black">
+      <video
+        ref="videoRef"
+        class="h-full w-full object-cover"
+        :class="{ '-scale-x-100': previewMirrored }"
+        autoplay
+        playsinline
+        muted
+        data-testid="camera-preview"
+      />
+
+      <img
+        v-if="silhouetteSrc"
+        :src="silhouetteSrc"
+        class="pointer-events-none absolute inset-0 h-full w-full object-contain opacity-60"
+        alt=""
+      />
+      <img
+        v-if="borderSrc"
+        :src="borderSrc"
+        class="pointer-events-none absolute inset-0 h-full w-full object-contain"
+        alt=""
+      />
+
+      <slot name="overlay" :counter="counter" />
+
+      <div
+        v-if="counter !== null"
+        class="pointer-events-none absolute inset-0 flex items-center justify-center"
+        data-testid="camera-countdown"
+      >
+        <span class="text-8xl font-bold text-white drop-shadow-lg">{{ counter }}</span>
+      </div>
+    </div>
+
+    <slot name="controls" :capture="handleCapture" :back="() => $emit('back')" :is-capturing="isCapturing">
+      <div class="flex w-full items-center justify-center gap-4">
+        <button
+          type="button"
+          class="inline-flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-white/20 transition-colors hover:bg-white/40 disabled:opacity-50 disabled:pointer-events-none"
+          :disabled="isCapturing"
+          data-testid="camera-capture"
+          aria-label="Take photo"
+          @click="handleCapture"
+        >
+          <span class="h-12 w-12 rounded-full bg-white" />
+        </button>
+      </div>
+    </slot>
+  </section>
+</template>

package/src/experience/pages/camera/index.ts

@@ -0,0 +1,7 @@
+import CameraPageComponent from './CameraPage.vue'
+import { withExperienceDefaults } from '../../withDefaults'
+
+export const CameraPage = withExperienceDefaults(CameraPageComponent, {
+  resultKey: 'photoBlob',
+})
+export type { CameraPageProps } from './CameraPage.vue'

package/src/experience/pages/camera-review/CameraReviewPage.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CameraReviewPageComponent from './CameraReviewPage.vue'
+
+const meta = {
+  title: 'Experience/Pages/CameraReviewPage',
+  component: CameraReviewPageComponent,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CameraReviewPageComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithCaption: Story = {
+  args: {
+    allowCaption: true,
+  },
+  render: (args) => ({
+    components: { CameraReviewPage: CameraReviewPageComponent },
+    setup: () => ({ args }),
+    template: `
+      <div class="h-screen w-screen bg-black flex items-center justify-center text-white">
+        <CameraReviewPage v-bind="args" :photo-blob="null" />
+      </div>
+    `,
+  }),
+}

package/src/experience/pages/camera-review/CameraReviewPage.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi, beforeAll } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CameraReviewPage from './CameraReviewPage.vue'
+
+beforeAll(() => {
+  if (!('createObjectURL' in URL)) {
+    Object.assign(URL, { createObjectURL: vi.fn(() => 'blob:fake'), revokeObjectURL: vi.fn() })
+  }
+})
+
+describe('CameraReviewPage', () => {
+  it('disables accept when there is no blob', () => {
+    const wrapper = mount(CameraReviewPage, { props: { photoBlob: null } })
+    const btn = wrapper.get('[data-testid="camera-review-accept"]')
+      .element as HTMLButtonElement
+    expect(btn.disabled).toBe(true)
+  })
+
+  it('reads photoBlob from context when prop is missing', async () => {
+    const blob = new Blob(['x'], { type: 'image/png' })
+    const wrapper = mount(CameraReviewPage, {
+      props: { context: { photoBlob: blob } },
+    })
+    await wrapper.get('[data-testid="camera-review-accept"]').trigger('click')
+    expect(wrapper.emitted('next')).toBeTruthy()
+    const payload = wrapper.emitted('next')![0][0] as { blob: Blob }
+    expect(payload.blob).toBe(blob)
+  })
+
+  it('includes caption when allowCaption is on and value is filled', async () => {
+    const blob = new Blob(['x'])
+    const wrapper = mount(CameraReviewPage, {
+      props: { photoBlob: blob, allowCaption: true },
+    })
+    await wrapper.get('[data-testid="camera-review-caption"]').setValue('hello')
+    await wrapper.get('[data-testid="camera-review-accept"]').trigger('click')
+    const payload = wrapper.emitted('next')![0][0] as { caption?: string }
+    expect(payload.caption).toBe('hello')
+  })
+
+  it('omits caption when allowCaption is off', async () => {
+    const blob = new Blob(['x'])
+    const wrapper = mount(CameraReviewPage, {
+      props: { photoBlob: blob, allowCaption: false },
+    })
+    await wrapper.get('[data-testid="camera-review-accept"]').trigger('click')
+    const payload = wrapper.emitted('next')![0][0] as { caption?: string }
+    expect(payload.caption).toBeUndefined()
+  })
+
+  it('emits back on retake', async () => {
+    const wrapper = mount(CameraReviewPage, { props: { photoBlob: new Blob(['x']) } })
+    await wrapper.get('[data-testid="camera-review-retake"]').trigger('click')
+    expect(wrapper.emitted('back')).toBeTruthy()
+  })
+})