textbus / xnote

xnote 是一个无头、高性能的富文本编辑器,支持多人在线协作。
https://textbus.io/playground
32 stars 8 forks source link

[Video] no rootRef bind #5

Closed wan-kong closed 2 months ago

wan-kong commented 2 months ago
image

video组件绑定参数缺失,渲染时会有问题

问题部分代码:

// src/textbus/components/video/video.component.tsx
// ...other code

export function VideoView(props: ViewComponentProps<VideoComponent>) {
  const { name, state } = props.component
  const videoRef = createRef<HTMLVideoElement>()
  const readonly = useReadonly()
  const output = useOutput()
  return () => {
    if (readonly() || output()) {
      return (
      // 这里缺少了 ref={props.rootRef}
        <div class="xnote-video" data-component={name}>
          <video ref={videoRef} src={state.src} style={{
            width: state.width,
            height: state.height
          }}/>
        </div>
      )
    }
    return (
      <div class="xnote-video" ref={props.rootRef} data-component={name}>
        <DragResize source={videoRef} component={props.component}>
          <video ref={videoRef} src={state.src} 
          controls
          style={{
            width: state.width,
            height: state.height
          }}/>
        </DragResize>
      </div>
    )
  }
}