@gxp-dev/app-ui 0.1.6

package/src/components/domain/theme-wrapper/ThemeWrapper.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+/**
+ * Top-level wrapper that applies a `ThemeColors` palette as CSS custom
+ * properties to its subtree. Also accepts an optional background image,
+ * background video, and logo. Used as the root of theme-able portal
+ * pages.
+ */
+
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
+import { cn } from '@/lib/utils'
+
+export interface ThemeColors {
+  page_background_color?: string
+  page_text_color?: string
+  input_field_background_color?: string
+  input_field_text_color?: string
+  input_field_border_color?: string
+  primary_button_background_color?: string
+  primary_button_text_color?: string
+  primary_button_border_color?: string
+  secondary_button_background_color?: string
+  secondary_button_text_color?: string
+  secondary_button_border_color?: string
+  spinner_background_color?: string
+  spinner_color?: string
+}
+
+export interface ThemeWrapperProps {
+  backgroundImage?: string
+  backgroundVideo?: string
+  logoImage?: string
+  logoSize?: number
+  colors?: ThemeColors
+  hideVideo?: boolean
+  pageName?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<ThemeWrapperProps>(), {
+  logoSize: 0.3,
+  hideVideo: false,
+  pageName: '',
+})
+
+const appInner = ref<HTMLElement | null>(null)
+
+const isVideoUrl = (url?: string): boolean => {
+  if (!url) return false
+  const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.mkv', '.avi', '.flv', '.wmv', '.m4v']
+  try {
+    const { pathname } = new URL(url)
+    return videoExtensions.some((ext) => pathname.toLowerCase().endsWith(ext))
+  } catch {
+    return videoExtensions.some((ext) => url.toLowerCase().includes(ext))
+  }
+}
+
+const resolvedBackgroundVideo = computed(() => {
+  if (props.backgroundVideo && !props.hideVideo) return props.backgroundVideo
+  if (props.backgroundImage && isVideoUrl(props.backgroundImage) && !props.hideVideo) {
+    return props.backgroundImage
+  }
+  return null
+})
+
+const showBackgroundImage = computed(
+  () => props.backgroundImage && !resolvedBackgroundVideo.value && !isVideoUrl(props.backgroundImage),
+)
+
+// Apply theme CSS variables with instance-scoped style element
+let styleElement: HTMLStyleElement | null = null
+
+watch(
+  () => props.colors,
+  (colors) => {
+    if (styleElement) {
+      styleElement.remove()
+      styleElement = null
+    }
+    if (!colors) return
+
+    const vars: Record<string, string> = {}
+    for (const [key, value] of Object.entries(colors)) {
+      if (value) vars[`--${key}`] = value
+    }
+
+    if (Object.keys(vars).length === 0) return
+
+    styleElement = document.createElement('style')
+    styleElement.textContent = `:root { ${Object.entries(vars).map(([k, v]) => `${k}: ${v}`).join('; ')} }`
+    document.head.appendChild(styleElement)
+  },
+  { immediate: true, deep: true },
+)
+
+onBeforeUnmount(() => {
+  if (styleElement) {
+    styleElement.remove()
+    styleElement = null
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="appInner"
+    :class="cn('relative min-h-screen bg-cover bg-center bg-no-repeat', pageName && `${pageName}__Page`, props.class)"
+    :style="showBackgroundImage ? { backgroundImage: `url(${backgroundImage})` } : undefined"
+  >
+    <video
+      v-if="resolvedBackgroundVideo"
+      autoplay
+      muted
+      loop
+      :src="resolvedBackgroundVideo"
+      class="absolute inset-0 h-full w-full object-cover"
+    />
+    <div class="relative z-[1]">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/domain/theme-wrapper/index.ts

@@ -0,0 +1,2 @@
+export { default as ThemeWrapper } from './ThemeWrapper.vue'
+export type { ThemeWrapperProps, ThemeColors } from './ThemeWrapper.vue'

package/src/components/domain/video-grid/VideoGrid.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VideoGrid from './VideoGrid.vue'
+import type { VideoParticipant } from '../video-tile/VideoTile.vue'
+
+function createParticipants(count: number): VideoParticipant[] {
+  const names = [
+    'Alice Smith', 'Bob Jones', 'Charlie Brown', 'Diana Prince',
+    'Eve Davis', 'Frank Miller', 'Grace Lee', 'Henry Wilson',
+    'Iris Chen', 'Jack Taylor', 'Kate Morgan', 'Leo Garcia',
+  ]
+  return Array.from({ length: count }, (_, i) => ({
+    id: `p${i + 1}`,
+    displayName: names[i] || `Participant ${i + 1}`,
+    isMuted: false,
+    isVideoOff: true,
+    isHandRaised: false,
+    isScreenSharing: false,
+  }))
+}
+
+const meta = {
+  title: 'Domain/VideoGrid',
+  component: VideoGrid,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div style="width: 800px;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof VideoGrid>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SingleParticipant: Story = {
+  args: {
+    participants: createParticipants(1),
+  },
+}
+
+export const TwoParticipants: Story = {
+  args: {
+    participants: createParticipants(2),
+  },
+}
+
+export const FourParticipants: Story = {
+  args: {
+    participants: createParticipants(4),
+  },
+}
+
+export const NineParticipants: Story = {
+  args: {
+    participants: createParticipants(9),
+  },
+}
+
+export const WithLocalParticipant: Story = {
+  args: {
+    participants: createParticipants(3),
+    localParticipant: {
+      id: 'local',
+      displayName: 'Me',
+      isMuted: false,
+      isVideoOff: true,
+      isHandRaised: false,
+      isScreenSharing: false,
+    },
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    participants: [],
+  },
+}

package/src/components/domain/video-grid/VideoGrid.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import VideoGrid from './VideoGrid.vue'
+import type { VideoParticipant } from '../video-tile/VideoTile.vue'
+
+function createParticipant(id: string, name: string): VideoParticipant {
+  return {
+    id,
+    displayName: name,
+    isMuted: false,
+    isVideoOff: false,
+    isHandRaised: false,
+    isScreenSharing: false,
+  }
+}
+
+function createParticipants(count: number): VideoParticipant[] {
+  return Array.from({ length: count }, (_, i) =>
+    createParticipant(`p${i + 1}`, `Participant ${i + 1}`),
+  )
+}
+
+describe('VideoGrid', () => {
+  it('renders correct number of tiles', () => {
+    const wrapper = mount(VideoGrid, {
+      props: { participants: createParticipants(3) },
+    })
+    const tiles = wrapper.findAll('.video-tile')
+    expect(tiles).toHaveLength(3)
+  })
+
+  it('shows empty state when no participants', () => {
+    const wrapper = mount(VideoGrid, {
+      props: { participants: [] },
+    })
+    expect(wrapper.find('[data-testid="empty-state"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('No participants')
+  })
+
+  it('includes local participant when provided', () => {
+    const local = createParticipant('local', 'Me')
+    const wrapper = mount(VideoGrid, {
+      props: {
+        participants: createParticipants(2),
+        localParticipant: local,
+      },
+    })
+    const tiles = wrapper.findAll('.video-tile')
+    expect(tiles).toHaveLength(3)
+  })
+
+  it('calculates grid columns correctly for 1 participant', () => {
+    const wrapper = mount(VideoGrid, {
+      props: { participants: createParticipants(1) },
+    })
+    expect(wrapper.find('[data-grid-columns="1"]').exists()).toBe(true)
+  })
+
+  it('calculates grid columns correctly for 2 participants', () => {
+    const wrapper = mount(VideoGrid, {
+      props: { participants: createParticipants(2) },
+    })
+    expect(wrapper.find('[data-grid-columns="2"]').exists()).toBe(true)
+  })
+
+  it('calculates grid columns correctly for 4 participants', () => {
+    const wrapper = mount(VideoGrid, {
+      props: { participants: createParticipants(4) },
+    })
+    expect(wrapper.find('[data-grid-columns="2"]').exists()).toBe(true)
+  })
+
+  it('calculates grid columns correctly for 9 participants', () => {
+    const wrapper = mount(VideoGrid, {
+      props: { participants: createParticipants(9) },
+    })
+    expect(wrapper.find('[data-grid-columns="3"]').exists()).toBe(true)
+  })
+
+  it('does not show empty state when participants exist', () => {
+    const wrapper = mount(VideoGrid, {
+      props: { participants: createParticipants(1) },
+    })
+    expect(wrapper.find('[data-testid="empty-state"]').exists()).toBe(false)
+  })
+
+  it('marks local participant tile as local', () => {
+    const local = createParticipant('local', 'Me')
+    const wrapper = mount(VideoGrid, {
+      props: {
+        participants: [],
+        localParticipant: local,
+      },
+    })
+    expect(wrapper.find('.video-tile--local').exists()).toBe(true)
+  })
+})

package/src/components/domain/video-grid/VideoGrid.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+/**
+ * Adaptive multi-tile grid for a video call's remote participants (plus
+ * optional local tile). Picks a layout (1×1, 2×2, 3×3, …) based on
+ * participant count. Highlights the active speaker.
+ */
+
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+import VideoTile from '../video-tile/VideoTile.vue'
+import type { VideoParticipant } from '../video-tile/VideoTile.vue'
+import { Users } from 'lucide-vue-next'
+
+export interface VideoGridProps {
+  participants: VideoParticipant[]
+  localParticipant?: VideoParticipant | null
+  localStream?: MediaStream | null
+  activeSpeakerId?: string | null
+  class?: string
+}
+
+const props = withDefaults(defineProps<VideoGridProps>(), {
+  localParticipant: null,
+  localStream: undefined,
+  activeSpeakerId: null,
+})
+
+const totalCount = computed(() => {
+  return props.participants.length + (props.localParticipant ? 1 : 0)
+})
+
+const gridColumns = computed(() => {
+  const count = totalCount.value
+  if (count === 0) return 1
+  if (count === 1) return 1
+  if (count === 2) return 2
+  if (count <= 4) return 2
+  if (count <= 9) return 3
+  return 4
+})
+
+const gridClass = computed(() => {
+  switch (gridColumns.value) {
+    case 1: return 'grid-cols-1'
+    case 2: return 'grid-cols-2'
+    case 3: return 'grid-cols-3'
+    case 4: return 'grid-cols-4'
+    default: return 'grid-cols-1'
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="totalCount > 0"
+    :class="cn('grid gap-2', gridClass, props.class)"
+    :data-grid-columns="gridColumns"
+  >
+    <!-- Local participant -->
+    <VideoTile
+      v-if="localParticipant"
+      :participant="localParticipant"
+      :stream="localStream ?? undefined"
+      :is-local="true"
+      :is-active-speaker="activeSpeakerId === localParticipant.id"
+    />
+
+    <!-- Remote participants -->
+    <VideoTile
+      v-for="participant in participants"
+      :key="participant.id"
+      :participant="participant"
+      :stream="participant.stream ?? undefined"
+      :is-active-speaker="activeSpeakerId === participant.id"
+    />
+  </div>
+
+  <!-- Empty state -->
+  <div
+    v-else
+    :class="cn('flex flex-col items-center justify-center rounded-lg border border-dashed border-muted-foreground/25 p-12', props.class)"
+    data-testid="empty-state"
+  >
+    <Users class="mb-3 h-12 w-12 text-muted-foreground/50" />
+    <p class="text-sm text-muted-foreground">No participants</p>
+  </div>
+</template>

package/src/components/domain/video-grid/index.ts

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

package/src/components/domain/video-player/VideoPlayer.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VideoPlayer from './VideoPlayer.vue'
+
+const meta = {
+  title: 'Domain/VideoPlayer',
+  component: VideoPlayer,
+  tags: ['autodocs'],
+  argTypes: {
+    src: { control: 'text' },
+    height: { control: 'text' },
+    controls: { control: 'boolean' },
+    autoplay: { control: 'boolean' },
+    muted: { control: 'boolean' },
+    loop: { control: 'boolean' },
+  },
+} satisfies Meta<typeof VideoPlayer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    controls: true,
+  },
+}
+
+export const WithControls: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    controls: true,
+    height: '400px',
+  },
+}
+
+export const Autoplay: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    autoplay: true,
+    muted: true, // Browsers require muted for autoplay
+    controls: true,
+  },
+}
+
+export const NoControls: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    controls: false,
+  },
+}
+
+export const Looping: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    loop: true,
+    controls: true,
+  },
+}
+
+export const CustomHeight: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    height: '300px',
+    controls: true,
+  },
+}

package/src/components/domain/video-player/VideoPlayer.test.ts

@@ -0,0 +1,180 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import VideoPlayer from './VideoPlayer.vue'
+
+describe('VideoPlayer', () => {
+  it('renders video element', () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+      },
+    })
+
+    const video = wrapper.find('video')
+    expect(video.exists()).toBe(true)
+  })
+
+  it('applies controls by default', () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+      },
+    })
+
+    const video = wrapper.find('video')
+    expect(video.attributes('controls')).toBeDefined()
+  })
+
+  it('sets height prop', () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+        height: '400px',
+      },
+    })
+
+    const video = wrapper.find('video')
+    expect(video.attributes('height')).toBe('400px')
+  })
+
+  it('emits play event on trigger', async () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+      },
+    })
+
+    const video = wrapper.find('video')
+    await video.trigger('play')
+
+    expect(wrapper.emitted('play')).toBeTruthy()
+    expect(wrapper.emitted('play')).toHaveLength(1)
+  })
+
+  it('emits pause event on trigger', async () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+      },
+    })
+
+    const video = wrapper.find('video')
+    await video.trigger('pause')
+
+    expect(wrapper.emitted('pause')).toBeTruthy()
+    expect(wrapper.emitted('pause')).toHaveLength(1)
+  })
+
+  it('emits ended event on trigger', async () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+      },
+    })
+
+    const video = wrapper.find('video')
+    await video.trigger('ended')
+
+    expect(wrapper.emitted('ended')).toBeTruthy()
+    expect(wrapper.emitted('ended')).toHaveLength(1)
+  })
+
+  it('emits error event on trigger', async () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+      },
+    })
+
+    const video = wrapper.find('video')
+    await video.trigger('error')
+
+    expect(wrapper.emitted('error')).toBeTruthy()
+    expect(wrapper.emitted('error')).toHaveLength(1)
+  })
+
+  it('emits loadedmetadata event on trigger', async () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+      },
+    })
+
+    const video = wrapper.find('video')
+    await video.trigger('loadedmetadata')
+
+    expect(wrapper.emitted('loadedmetadata')).toBeTruthy()
+    expect(wrapper.emitted('loadedmetadata')).toHaveLength(1)
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+        class: 'custom-video-class',
+      },
+    })
+
+    const container = wrapper.find('div')
+    expect(container.classes()).toContain('custom-video-class')
+  })
+
+  it('exposes video ref', () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+      },
+    })
+
+    expect(wrapper.vm.video).toBeDefined()
+    expect(wrapper.vm.video?.tagName).toBe('VIDEO')
+  })
+
+  it('applies autoplay attribute when autoplay prop is true', () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+        autoplay: true,
+      },
+    })
+
+    const video = wrapper.find('video')
+    expect(video.element.autoplay).toBe(true)
+  })
+
+  it('applies muted attribute when muted prop is true', () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+        muted: true,
+      },
+    })
+
+    const video = wrapper.find('video')
+    expect(video.element.muted).toBe(true)
+  })
+
+  it('applies loop attribute when loop prop is true', () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+        loop: true,
+      },
+    })
+
+    const video = wrapper.find('video')
+    expect(video.element.loop).toBe(true)
+  })
+
+  it('does not apply controls when controls prop is false', () => {
+    const wrapper = mount(VideoPlayer, {
+      props: {
+        src: 'https://example.com/video.mp4',
+        controls: false,
+      },
+    })
+
+    const video = wrapper.find('video')
+    expect(video.attributes('controls')).toBeUndefined()
+  })
+})