@botonic/react/lib/cjs/components/video.js

Build Chatbots using React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Video = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
const environment_1 = require("../util/environment");
const message_1 = require("./message");
const StyledVideo = styled_components_1.default.video `
  background-color: ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_5};
  border-radius: 8px;
  max-height: 180px;
  max-width: 300px;
  margin: 10px;
`;
const serialize = (videoProps) => {
    return { video: videoProps.src };
};
const Video = (props) => {
    props = Object.assign(Object.assign({}, props), { src: (0, environment_1.staticAsset)(props.src) });
    let content = props.children;
    if ((0, core_1.isBrowser)())
        content = ((0, jsx_runtime_1.jsx)(StyledVideo, Object.assign({ controls: true }, { children: (0, jsx_runtime_1.jsx)("source", { src: props.src }) })));
    return ((0, jsx_runtime_1.jsx)(message_1.Message, Object.assign({ role: constants_1.ROLES.VIDEO_MESSAGE, json: serialize(props) }, props, { type: core_1.INPUT.VIDEO }, { children: content })));
};
exports.Video = Video;
exports.Video.serialize = serialize;
//# sourceMappingURL=video.js.map