// #region Imports
import { when } from '../../../Directives/Directives';
import { html } from '../../../../Dom/Html';
import { CameraFrame } from './CameraFrame';
// #endregion
/**
 * The template of the {@link CameraElement}.
 *
 * @public
 */
export function cameraElementTemplate(e) {
    return html `
        <div part="underlay">
            <slot name="underlay"></slot>
        </div>
        <video part="video"
                width="${e.width}"
                height="${e.height}"
                ?playsinline="${!e.autoFullScreen}"
                ?autoplay="${e.autoPlay}"
                ?controls="${false}"></video>
        ${when(e.frame, (x) => html `
        <div part="mask"
             style="aspect-ratio: ${CameraFrame.toAspectRatio(x)}; width: ${CameraFrame.parse(x).width}px; height: ${CameraFrame.parse(x).height}px;">
        </div>
        `)}
        <span part="flash"></span>
        <div part="overlay">
            <slot name="overlay"></slot>
        </div>
    `;
}
//# sourceMappingURL=CameraElementTemplate.js.map