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