@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");
var allowedImageExtensions = ['jpg', 'jpeg', 'gif', 'png', 'svg'];
var allowedVideoRegex = /^(https\:\/\/youtube)|^(https\:\/\/www\.youtube)|^(https\:\/\/player\.vimeo)/gi;
function getMediaType() {
  var properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var mediaImage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  var mediatype = properties.mediatype,
    _properties$location = properties.location,
    location = _properties$location === void 0 ? '' : _properties$location;
  var imageUrl = mediaImage || location;
  var imageExtension = imageUrl.split('.').pop();
  if (mediatype === 'image' && allowedImageExtensions.indexOf(imageExtension) > -1) {
    return 'image';
  }
  if (['youtube', 'vimeo'].indexOf(mediatype) > -1 && location.match(allowedVideoRegex)) {
    return 'video';
  }
}
function getMediaStyle() {
  var properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var mediaType = arguments.length > 1 ? arguments[1] : undefined;
  if (mediaType === 'image') {
    return {
      textAlign: properties.media_align ? properties.media_align : 'left'
    };
  } else if (mediaType === 'video') {
    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(_ref) {
  var block = _ref.block,
    mediaType = _ref.mediaType;
  var properties = block.properties;
  if (block.type === 'img') {
    var _block$image$url, _block$image, _ref2, _block$image$alt, _block$image2, _block$properties, _ref3, _block$properties$alt, _block$properties2;
    var imageUrl = (_block$image$url = (_block$image = block.image) === null || _block$image === void 0 ? void 0 : _block$image.url) !== null && _block$image$url !== void 0 ? _block$image$url : block.url;
    var imageAlt = (_ref2 = (_block$image$alt = (_block$image2 = block.image) === null || _block$image2 === void 0 ? void 0 : _block$image2.alt) !== null && _block$image$alt !== void 0 ? _block$image$alt : (_block$properties = block.properties) === null || _block$properties === void 0 ? void 0 : _block$properties.alt) !== null && _ref2 !== void 0 ? _ref2 : '';
    return (0, _preact.h)("img", {
      src: imageUrl,
      title: (_ref3 = (_block$properties$alt = (_block$properties2 = block.properties) === null || _block$properties2 === void 0 ? void 0 : _block$properties2.alt) !== null && _block$properties$alt !== void 0 ? _block$properties$alt : block.title) !== null && _ref3 !== void 0 ? _ref3 : '',
      alt: imageAlt,
      style: {
        height: 'auto',
        width: '100%'
      }
    });
  } else if (mediaType === 'image') {
    var _block$image$url2, _block$image3, _ref4, _block$image$alt2, _block$image4, _block$properties3, _ref5;
    var _imageUrl = (0, _utils.getImageUri)((_block$image$url2 = (_block$image3 = block.image) === null || _block$image3 === void 0 ? void 0 : _block$image3.url) !== null && _block$image$url2 !== void 0 ? _block$image$url2 : properties.location);
    var _imageAlt = (_ref4 = (_block$image$alt2 = (_block$image4 = block.image) === null || _block$image4 === void 0 ? void 0 : _block$image4.alt) !== null && _block$image$alt2 !== void 0 ? _block$image$alt2 : (_block$properties3 = block.properties) === null || _block$properties3 === void 0 ? void 0 : _block$properties3.alt) !== null && _ref4 !== void 0 ? _ref4 : '';
    return (0, _preact.h)("img", {
      title: (_ref5 = _imageAlt !== null && _imageAlt !== void 0 ? _imageAlt : block.title) !== null && _ref5 !== void 0 ? _ref5 : '',
      alt: _imageAlt,
      src: _imageUrl,
      style: {
        height: 'auto',
        width: properties.media_width || '100%'
      }
    });
  } else if (mediaType === 'video') {
    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(_ref6) {
  var _block$image$url3, _block$image5;
  var block = _ref6.block;
  var mediaType = getMediaType(block.properties, (_block$image$url3 = (_block$image5 = block.image) === null || _block$image5 === void 0 ? void 0 : _block$image5.url) !== null && _block$image$url3 !== void 0 ? _block$image$url3 : '');
  var mediaStyle = getMediaStyle(block.properties, mediaType);
  return (0, _preact.h)("div", {
    id: "multimedia_".concat(block.id),
    style: mediaStyle,
    "class": "section-multimedia"
  }, (0, _preact.h)(Media, {
    block: block,
    mediaType: mediaType
  }));
}, function () {
  return false;
});
//# sourceMappingURL=Multimedia.js.map