import { createElement, Fragment } from "react";
import { Component, useField, SugaredField } from "@contember/binding";
import { FieldFallbackView } from "./FieldFallbackView.js";
const VideoFieldView = Component(({
  srcField,
  titleField,
  formatUrl,
  fallback,
  fallbackStyle,
  ...videoProps
}) => {
  const srcAccessor = useField(srcField);
  const titleAccessor = useField(titleField);
  if (srcAccessor.value === null) {
    return /* @__PURE__ */ createElement(FieldFallbackView, {
      fallback,
      fallbackStyle
    });
  }
  return /* @__PURE__ */ createElement("video", {
    src: formatUrl ? formatUrl(srcAccessor.value) : srcAccessor.value,
    title: titleAccessor?.value || void 0,
    controls: true,
    ...videoProps
  });
}, ({ srcField, titleField, fallback, fallbackStyle }) => /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement(SugaredField, {
  field: srcField
}), titleField && /* @__PURE__ */ createElement(SugaredField, {
  field: titleField
}), /* @__PURE__ */ createElement(FieldFallbackView, {
  fallback,
  fallbackStyle
})), "VideoFieldView");
export { VideoFieldView };
//# sourceMappingURL=VideoFieldView.js.map
