Add video component

.changeset/nasty-monkeys-flow.md

@@ -0,0 +1,5 @@
+---
+'threlte-uikit': minor
+---
+
+Add `<Video>` Component

README.md

@@ -43,6 +43,7 @@ The component internals may be accessed via the `ref` property.
 - [Text](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#text)
 - [SVG](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#svg)
 - [Content](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#content)
+- [Video](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#video)
 
 ## Context providers
 

package.json

@@ -29,7 +29,7 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
-    "@pmndrs/uikit": "^0.3.8"
+    "@pmndrs/uikit": "^0.3.10"
   },
   "peerDependencies": {
     "@threlte/core": ">=7",

src/lib/components/Image.svelte

@@ -21,7 +21,7 @@
   const innerRef = currentWritable(new Group())
   const { style, properties, defaults } = usePropertySignals<ImageProperties>()
   $: props = { ...$$restProps }
-  $: properties.value = $$restProps
+  $: properties.value = props
 
   const internals = createImage(parent, style, properties, defaults, outerRef, innerRef)
   $: internals.interactionPanel.name = name ?? ''

src/lib/components/Video.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import Image from './Image.svelte'
+  import { SRGBColorSpace, VideoTexture } from 'three'
+  import { useThrelte } from '@threlte/core'
+  import type { VideoProperties } from '@pmndrs/uikit'
+  import { setupVideoElementInvalidation, updateVideoElement } from '@pmndrs/uikit/internals'
+  import type { EventHandlers } from '$lib/Events'
+  import type { ImageRef } from '$lib/useInternals'
+  import { onDestroy } from 'svelte'
+
+  type $$Props = VideoProperties & {
+    ref?: ImageRef
+    src: string | HTMLVideoElement
+    element?: HTMLVideoElement
+  } & EventHandlers
+
+  export let src: $$Props['src']
+  export let ref: $$Props['ref'] = undefined
+  export let autoplay: $$Props['autoplay'] = undefined
+  export let loop: $$Props['loop'] = undefined
+  export let muted: $$Props['muted'] = undefined
+  export let playbackRate: $$Props['playbackRate'] = undefined
+  export let preservesPitch: $$Props['preservesPitch'] = undefined
+  export let volume: $$Props['volume'] = undefined
+
+  const { invalidate } = useThrelte()
+
+  let aspectRatio = 1
+
+  $: providedHtmlElement = src instanceof HTMLVideoElement ? src : undefined
+
+  export let element: HTMLVideoElement | undefined = undefined
+  $: element = providedHtmlElement ?? document.createElement('video')
+  $: setupVideoElementInvalidation(element, invalidate)
+  $: updateVideoElement(element, {
+    src,
+    autoplay,
+    loop,
+    muted,
+    playbackRate,
+    preservesPitch,
+    volume,
+  })
+
+  const updateAspectRatio = () => {
+    aspectRatio = element.videoWidth / element.videoHeight
+  }
+
+  $: {
+    element
+    updateAspectRatio()
+  }
+
+  $: {
+    element.removeEventListener('resize', updateAspectRatio)
+    element.addEventListener('resize', updateAspectRatio)
+  }
+
+  onDestroy(() => element.removeEventListener('resize', updateAspectRatio))
+
+  let texture: VideoTexture | undefined
+
+  $: {
+    if (texture) texture.dispose()
+    texture = new VideoTexture(element)
+    texture.colorSpace = SRGBColorSpace
+  }
+</script>
+
+{#if texture}
+  <Image
+    bind:ref
+    {aspectRatio}
+    {...$$restProps}
+    src={texture}
+  >
+    <slot />
+  </Image>
+{/if}

src/lib/index.ts

@@ -28,6 +28,7 @@ export { default as Image } from './components/Image.svelte'
 export { default as Root } from './components/Root.svelte'
 export { default as SVG } from './components/Svg.svelte'
 export { default as Text } from './components/Text.svelte'
+export { default as Video } from './components/Video.svelte'
 
 // Refs
 export type { ContainerRef, ContentRef, ImageRef, RootRef, SvgRef, TextRef } from './useInternals'

src/routes/Scene.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { Root, Container, Text, Image, Content, SVG } from '$lib'
+  import { Root, Container, Text, Image, Content, SVG, Video } from '$lib'
   import { T, useTask } from '@threlte/core'
-  import { PerfMonitor } from '@threlte/extras'
+  import { PerfMonitor, TransformControls } from '@threlte/extras'
   import { OrbitControls, interactivity } from '@threlte/extras'
   import Fullscreen from './Fullscreen.svelte'
   // import { Inspector } from 'three-inspect'
@@ -15,15 +15,18 @@
     elapsed += delta
     val = Math.sin(elapsed * 5) * 20
   })
+
+  let clicked = false
 </script>
 
+<svelte:window on:click={() => (clicked = true)} />
 <PerfMonitor />
 
 <Fullscreen />
 
 <T.PerspectiveCamera
   makeDefault
-  position={[2, 2, 5]}
+  position={[5, 5, 10]}
   on:create={({ ref }) => ref.lookAt(0, 0, 0)}
 >
   <OrbitControls />
@@ -41,6 +44,7 @@
     padding={20}
     width={330 + val}
     height={300}
+    backgroundColor="#fff"
     hover={{
       backgroundColor: '#ccc',
     }}
@@ -91,4 +95,21 @@
   </Root>
 </T.Group>
 
+{#if clicked}
+  <TransformControls position.y={3}>
+    <T.Group>
+      <Root
+        height={200}
+        width={400}
+      >
+        <Video
+          autoplay
+          borderRadius={10}
+          src="/BigBuckBunny_320x180.mp4"
+        />
+      </Root>
+    </T.Group>
+  </TransformControls>
+{/if}
+
 <T.DirectionalLight />