@mopinion/survey/features/elements/components/Multimedia.js

Collect customer feedback with the Mopinion survey library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _preact = require("preact");
var _compat = require("preact/compat");
var _utils = require("../../../utils");
function getMediaStyle(_ref) {
  var _ref$properties = _ref.properties,
    properties = _ref$properties === void 0 ? {} : _ref$properties;
  if (properties.mediatype === 'image' && ['jpg', 'jpeg', 'gif', 'png', 'svg'].indexOf(properties.location.split('.').pop()) > -1) {
    return {
      textAlign: properties.media_align ? properties.media_align : 'left'
    };
  } else if (['youtube', 'vimeo'].indexOf(properties.mediatype) > -1 && properties.location.match(/^(https\:\/\/youtube)|^(https\:\/\/www\.youtube)|^(https\:\/\/player\.vimeo)/gi)) {
    return {
      width: properties.media_width,
      margin: properties.media_align === 'right' ? '0 0 0 auto' : properties.media_align === 'center' ? 'auto' : '0'
    };
  } else {
    return null;
  }
}
function Media(_ref2) {
  var block = _ref2.block;
  var properties = block.properties;
  if (block.type === 'img') {
    var _ref3, _block$properties$alt, _block$properties, _block$properties$alt2, _block$properties2;
    return (0, _preact.h)("img", {
      src: block.url,
      title: (_ref3 = (_block$properties$alt = (_block$properties = block.properties) === null || _block$properties === void 0 ? void 0 : _block$properties.alt) !== null && _block$properties$alt !== void 0 ? _block$properties$alt : block.title) !== null && _ref3 !== void 0 ? _ref3 : '',
      alt: (_block$properties$alt2 = (_block$properties2 = block.properties) === null || _block$properties2 === void 0 ? void 0 : _block$properties2.alt) !== null && _block$properties$alt2 !== void 0 ? _block$properties$alt2 : '',
      style: {
        height: 'auto',
        width: '100%'
      }
    });
  } else if (properties.mediatype === 'image' && ['jpg', 'jpeg', 'gif', 'png', 'svg'].indexOf(properties.location.split('.').pop()) > -1) {
    var _ref4, _block$properties$alt3, _block$properties3, _block$properties$alt4, _block$properties4;
    return (0, _preact.h)("img", {
      title: (_ref4 = (_block$properties$alt3 = (_block$properties3 = block.properties) === null || _block$properties3 === void 0 ? void 0 : _block$properties3.alt) !== null && _block$properties$alt3 !== void 0 ? _block$properties$alt3 : block.title) !== null && _ref4 !== void 0 ? _ref4 : '',
      alt: (_block$properties$alt4 = (_block$properties4 = block.properties) === null || _block$properties4 === void 0 ? void 0 : _block$properties4.alt) !== null && _block$properties$alt4 !== void 0 ? _block$properties$alt4 : '',
      src: (0, _utils.getImageUri)(properties.location),
      style: {
        height: 'auto',
        width: properties.media_width || '100%'
      }
    });
  } else if (['youtube', 'vimeo'].indexOf(properties.mediatype) > -1 && properties.location.match(/^(https\:\/\/youtube)|^(https\:\/\/www\.youtube)|^(https\:\/\/player\.vimeo)/gi)) {
    return (0, _preact.h)("div", {
      style: {
        padding: '56.25% 0 0 0',
        position: 'relative'
      }
    }, (0, _preact.h)("iframe", {
      title: block.title,
      "class": "video-frame",
      src: properties.location,
      frameborder: 0,
      allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture",
      allowfullscreen: true,
      style: {
        height: '100%',
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0
      }
    }));
  }
}
var _default = exports["default"] = (0, _compat.memo)(function Multimedia(_ref5) {
  var block = _ref5.block;
  return (0, _preact.h)("div", {
    id: "multimedia_".concat(block.id),
    style: getMediaStyle(block),
    "class": "section-multimedia"
  }, (0, _preact.h)(Media, {
    block: block
  }));
}, function () {
  return false;
});
//# sourceMappingURL=Multimedia.js.map