@mjhls/mjh-framework 1.0.13 → 1.0.15

package/dist/index.es.js

@@ -13,6 +13,7 @@ import Form from 'react-bootstrap/Form';
 import FormControl from 'react-bootstrap/FormControl';
 import Button from 'react-bootstrap/Button';
 import PropTypes from 'prop-types';
+import { Figure, Carousel } from 'react-bootstrap';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -892,6 +893,27 @@ var DeckQueue = function (_React$Component) {
   return DeckQueue;
 }(React__default.Component);
 
+var Column1 = function Column1(props) {
+  return React__default.createElement(
+    'section',
+    null,
+    React__default.createElement(
+      Row,
+      { className: 'justify-content-md-center' },
+      React__default.createElement(
+        Col,
+        { className: 'middleCol' },
+        React__default.createElement(
+          'h1',
+          null,
+          props.title
+        ),
+        props.children
+      )
+    )
+  );
+};
+
 var Column2 = function Column2(props) {
   var rightItems = props.rightItems;
 
@@ -1428,6 +1450,126 @@ var NavNormal = function NavNormal(props) {
   );
 };
 
+var NavDvm = function NavDvm(props) {
+  var logo = props.logo,
+      dataObject = props.dataObject,
+      subNavHeads = props.subNavHeads;
+
+
+  return React__default.createElement(
+    'section',
+    null,
+    React__default.createElement(
+      Navbar,
+      { expand: 'md', className: 'header-container', style: { background: '#151F5D' } },
+      React__default.createElement(
+        Container,
+        { className: 'd-flex px-0' },
+        React__default.createElement(
+          'div',
+          { className: 'd-flex' },
+          React__default.createElement('img', { src: logo, className: 'h-100' }),
+          React__default.createElement('div', { className: ' ml-4' })
+        ),
+        React__default.createElement(
+          'div',
+          { className: 'login-right-wrapper w-50  my-3', style: { background: 'linear-gradient(to right,#104676,#01ABB5)' } },
+          React__default.createElement(
+            'div',
+            { className: 'row' },
+            subNavHeads && subNavHeads.map(function (item, index) {
+              return React__default.createElement(
+                'div',
+                { key: index, className: 'col-3 py-1', style: { fontSize: '12px' } },
+                React__default.createElement(
+                  'span',
+                  { style: { color: '#fff' } },
+                  item.name,
+                  ' '
+                )
+              );
+            })
+          )
+        )
+      )
+    ),
+    React__default.createElement(
+      Navbar,
+      { variant: 'dark', className: 'dvm-nav p-0', style: { background: 'linear-gradient(to right,#FFB71C,#ED4303,#EB3300)' } },
+      React__default.createElement(
+        Container,
+        null,
+        React__default.createElement(Navbar.Toggle, { 'aria-controls': 'basic-navbar-nav' }),
+        React__default.createElement(
+          Navbar.Collapse,
+          { id: 'basic-navbar-nav' },
+          React__default.createElement(
+            Nav,
+            { className: 'mr-auto' },
+            dataObject && dataObject.map(function (row, index) {
+              if (row.subQuery.length > 1) {
+                return React__default.createElement(
+                  NavDropdown,
+                  { key: index, title: row.name, id: 'basic-nav-dropdown' },
+                  row.subQuery && row.subQuery.map(function (ddRow, ddItems, subIndex) {
+                    if (ddRow.type === 'divider') {
+                      return React__default.createElement(NavDropdown.Divider, { key: subIndex });
+                    } else {
+                      return React__default.createElement(
+                        Link,
+                        { href: ddRow.url },
+                        React__default.createElement(
+                          'a',
+                          { key: subIndex, className: 'dropdown-item' },
+                          ddRow.name
+                        )
+                      );
+                    }
+                  })
+                );
+              } else {
+                return React__default.createElement(
+                  Link,
+                  { href: row.url },
+                  React__default.createElement(
+                    'a',
+                    { key: index, className: 'nav-link' },
+                    row.name
+                  )
+                );
+              }
+            })
+          ),
+          React__default.createElement(
+            'div',
+            { className: 'login-subscibe', style: { fontSize: '12px' } },
+            React__default.createElement(
+              'span',
+              { style: { color: '#FFDC3F' } },
+              '>> ',
+              React__default.createElement(
+                'span',
+                { style: { color: '#fff' } },
+                ' Login'
+              )
+            ),
+            React__default.createElement(
+              'span',
+              { style: { color: '#FFDC3F' } },
+              '>> ',
+              React__default.createElement(
+                'span',
+                { style: { color: '#fff' } },
+                ' Register'
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function unwrapExports (x) {
@@ -3081,52 +3223,63 @@ var lib_1 = lib.DFPSlotsProvider;
 var lib_2 = lib.AdSlot;
 var lib_3 = lib.DFPManager;
 
-var AD728x90 = function (_Component) {
-  inherits(AD728x90, _Component);
-
-  function AD728x90(props) {
-    classCallCheck(this, AD728x90);
+var AD = function AD(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit,
+      sizeMapping = _ref.sizeMapping,
+      className = _ref.className,
+      _ref$slotId = _ref.slotId,
+      slotId = _ref$slotId === undefined ? 'test' : _ref$slotId,
+      sizes = _ref.sizes,
+      minInViewPercent = _ref.minInViewPercent;
 
-    var _this = possibleConstructorReturn(this, (AD728x90.__proto__ || Object.getPrototypeOf(AD728x90)).call(this, props));
+  return React__default.createElement(
+    lib_1,
+    { dfpNetworkId: networkID, sizeMapping: sizeMapping },
+    React__default.createElement(
+      'div',
+      { className: className },
+      React__default.createElement(lib_2, {
+        slotId: slotId,
+        sizes: sizes,
+        adUnit: adUnit,
+        sizeMapping: sizeMapping,
+        onSlotVisibilityChanged: function onSlotVisibilityChanged(dfpEventData) {
+          if (minInViewPercent && dfpEventData.event.inViewPercentage < minInViewPercent) {
+            lib_3.refresh(slotId);
+          }
+        },
+        onSlotIsViewable: function onSlotIsViewable(dfpEventData) {
+          return console.log(slotId + ' viewable!.', dfpEventData);
+        }
+      })
+    )
+  );
+};
 
-    _this.option = {
-      networkID: props.networkID,
-      adUnit: props.adUnit
-    };
-    return _this;
-  }
+AD.propTypes = {
+  networkID: PropTypes.number.isRequired,
+  adUnit: PropTypes.string.isRequired,
+  slotId: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  sizeMapping: PropTypes.array,
+  sizes: PropTypes.array,
+  minInViewPercent: PropTypes.number
+};
 
-  createClass(AD728x90, [{
-    key: 'render',
-    value: function render() {
-      return React__default.createElement(
-        lib_1,
-        {
-          dfpNetworkId: this.option.networkID,
-          sizeMapping: [{ viewport: [768, 1], sizes: [[728, 90]] }, { viewport: [1, 1], sizes: [[320, 50]] }] },
-        React__default.createElement(
-          'div',
-          { className: 'AD728x90' },
-          React__default.createElement(lib_2, {
-            slotId: 'test',
-            sizes: [[728, 90], [320, 50]],
-            adUnit: this.option.adUnit,
-            sizeMapping: [{ viewport: [768, 1], sizes: [[728, 90]] }, { viewport: [1, 1], sizes: [[320, 50]] }],
-            onSlotVisibilityChanged: function onSlotVisibilityChanged(dfpEventData) {
-              if (dfpEventData.event.inViewPercentage < '70') {
-                lib_3.refresh('test');
-              }
-            },
-            onSlotIsViewable: function onSlotIsViewable(dfpEventData) {
-              return console.log('slot 1 viewable!.', dfpEventData);
-            }
-          })
-        )
-      );
-    }
-  }]);
-  return AD728x90;
-}(Component);
+var AD728x90 = function AD728x90(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit;
+
+  return React__default.createElement(AD, {
+    networkID: networkID,
+    adUnit: adUnit,
+    className: 'AD728x90',
+    sizes: [[300, 250], [300, 600]],
+    sizeMapping: [{ viewport: [768, 1], sizes: [[728, 90]] }, { viewport: [1, 1], sizes: [[320, 50]] }],
+    minInViewPercent: 70
+  });
+};
 
 // Main
 var TemplateNormal = function TemplateNormal(props) {
@@ -3145,6 +3298,8 @@ var TemplateNormal = function TemplateNormal(props) {
         return React__default.createElement(NavMagazine, { logo: website.logo, dataObject: config.navItems });
       case 'native':
         return React__default.createElement(NavNative, { logo: website.logo, dataObject: config.navItems });
+      case 'dvm':
+        return React__default.createElement(NavDvm, { logo: website.logo, dataObject: config.navItems });
       default:
         return React__default.createElement('noNav', null);
     }
@@ -3152,6 +3307,12 @@ var TemplateNormal = function TemplateNormal(props) {
 
   function layout() {
     switch (config.columns) {
+      case '1':
+        return React__default.createElement(
+          Column1,
+          null,
+          props.children
+        );
       case '2':
         return React__default.createElement(
           Column2,
@@ -3187,72 +3348,64 @@ var TemplateNormal = function TemplateNormal(props) {
   );
 };
 
-var AD300x250 = function (_Component) {
-  inherits(AD300x250, _Component);
+var AD300x250 = function AD300x250(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit;
 
-  function AD300x250(props) {
-    classCallCheck(this, AD300x250);
-
-    var _this = possibleConstructorReturn(this, (AD300x250.__proto__ || Object.getPrototypeOf(AD300x250)).call(this, props));
-
-    _this.option = {
-      networkID: props.networkID,
-      adUnit: props.adUnit
-    };
-    return _this;
-  }
+  return React__default.createElement(AD, { networkID: networkID, adUnit: adUnit, className: 'AD300x250', sizes: [[300, 250]] });
+};
 
-  createClass(AD300x250, [{
-    key: 'render',
-    value: function render() {
-      return React__default.createElement(
-        lib_1,
-        { dfpNetworkId: this.option.networkID },
-        React__default.createElement(
-          'div',
-          { className: 'AD300x250' },
-          React__default.createElement(lib_2, { sizes: [[300, 250]], adUnit: this.option.adUnit })
-        )
-      );
-    }
-  }]);
-  return AD300x250;
-}(Component);
+var AD300x250x600 = function AD300x250x600(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit;
 
-var AD300x250x600 = function (_Component) {
-  inherits(AD300x250x600, _Component);
+  return React__default.createElement(AD, {
+    networkID: networkID,
+    adUnit: adUnit,
+    className: 'AD300x250',
+    sizes: [[300, 250], [300, 600]]
+  });
+};
 
-  function AD300x250x600(props) {
-    classCallCheck(this, AD300x250x600);
+var FigureComponent = function FigureComponent(_ref) {
+  var caption = _ref.caption,
+      url = _ref.url;
 
-    var _this = possibleConstructorReturn(this, (AD300x250x600.__proto__ || Object.getPrototypeOf(AD300x250x600)).call(this, props));
+  return React__default.createElement(
+    'div',
+    { style: { textAlign: 'center', marginTop: '1em', marginBottom: '1em' } },
+    React__default.createElement(
+      Figure,
+      null,
+      React__default.createElement(Figure.Image, { alt: caption, src: url }),
+      React__default.createElement(
+        Figure.Caption,
+        null,
+        caption
+      )
+    )
+  );
+};
 
-    _this.option = {
-      networkID: props.networkID,
-      adUnit: props.adUnit
-    };
-    return _this;
-  }
+var Slideshow = function Slideshow(_ref) {
+  var slides = _ref.slides;
 
-  createClass(AD300x250x600, [{
-    key: 'render',
-    value: function render() {
-      return React__default.createElement(
-        lib_1,
-        { dfpNetworkId: this.option.networkID },
-        React__default.createElement(
-          'div',
-          { className: 'AD300x250' },
-          React__default.createElement(lib_2, {
-            sizes: [[300, 250], [300, 600]],
-            adUnit: this.option.adUnit
-          })
-        )
-      );
-    }
-  }]);
-  return AD300x250x600;
-}(Component);
+  return React__default.createElement(
+    'div',
+    { style: { marginTop: '1em', marginBottom: '1em' } },
+    React__default.createElement(
+      Carousel,
+      null,
+      slides && slides.map(function (slide) {
+        return React__default.createElement(
+          Carousel.Item,
+          { key: slide._key },
+          React__default.createElement('img', { style: { width: '100%' }, src: slide.url, alt: slide.asset.originalFilename })
+        );
+      })
+    )
+  );
+};
 
 var getYoutubeId = createCommonjsModule(function (module, exports) {
 (function (root, factory) {
@@ -5919,19 +6072,582 @@ YouTube.PlayerState = {
   CUED: 5
 };
 
-var getSerializers = function getSerializers() {
+var YouTubePlayer$1 = function YouTubePlayer(_ref) {
+  var url = _ref.url;
+
+  var id = getYoutubeId(url);
+  return React__default.createElement(YouTube, { videoId: id, opts: { width: '100%' } });
+};
+
+var parseAssetId_1 = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+var example = 'image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg';
+function parseAssetId(ref) {
+    var _a = ref.split('-'), id = _a[1], dimensionString = _a[2], format = _a[3];
+    if (!id || !dimensionString || !format) {
+        throw new Error("Malformed asset _ref '" + ref + "'. Expected an id like \"" + example + "\".");
+    }
+    var _b = dimensionString.split('x'), imgWidthStr = _b[0], imgHeightStr = _b[1];
+    var width = +imgWidthStr;
+    var height = +imgHeightStr;
+    var isValidAssetId = isFinite(width) && isFinite(height);
+    if (!isValidAssetId) {
+        throw new Error("Malformed asset _ref '" + ref + "'. Expected an id like \"" + example + "\".");
+    }
+    return { id: id, width: width, height: height, format: format };
+}
+exports.default = parseAssetId;
+
+});
+
+unwrapExports(parseAssetId_1);
+
+var parseSource_1 = createCommonjsModule(function (module, exports) {
+var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var isRef = function (src) {
+    var source = src;
+    return source ? typeof source._ref === 'string' : false;
+};
+var isAsset = function (src) {
+    var source = src;
+    return source ? typeof source._id === 'string' : false;
+};
+var isAssetStub = function (src) {
+    var source = src;
+    return source && source.asset ? typeof source.asset.url === 'string' : false;
+};
+// Convert an asset-id, asset or image to an image record suitable for processing
+// eslint-disable-next-line complexity
+function parseSource(source) {
+    if (!source) {
+        return null;
+    }
+    var image;
+    if (typeof source === 'string' && isUrl(source)) {
+        // Someone passed an existing image url?
+        image = {
+            asset: { _ref: urlToId(source) }
+        };
+    }
+    else if (typeof source === 'string') {
+        // Just an asset id
+        image = {
+            asset: { _ref: source }
+        };
+    }
+    else if (isRef(source)) {
+        // We just got passed an asset directly
+        image = {
+            asset: source
+        };
+    }
+    else if (isAsset(source)) {
+        // If we were passed an image asset document
+        image = {
+            asset: {
+                _ref: source._id || ''
+            }
+        };
+    }
+    else if (isAssetStub(source)) {
+        // If we were passed a partial asset (`url`, but no `_id`)
+        image = {
+            asset: {
+                _ref: urlToId(source.asset.url)
+            }
+        };
+    }
+    else if (typeof source.asset === 'object') {
+        // Probably an actual image with materialized asset
+        image = source;
+    }
+    else {
+        // We got something that does not look like an image, or it is an image
+        // that currently isn't sporting an asset.
+        return null;
+    }
+    var img = source;
+    if (img.crop) {
+        image.crop = img.crop;
+    }
+    if (img.hotspot) {
+        image.hotspot = img.hotspot;
+    }
+    return applyDefaults(image);
+}
+exports.default = parseSource;
+function isUrl(url) {
+    return /^https?:\/\//.test("" + url);
+}
+function urlToId(url) {
+    var parts = url.split('/').slice(-1);
+    return ("image-" + parts[0]).replace(/\.([a-z]+)$/, '-$1');
+}
+// Mock crop and hotspot if image lacks it
+function applyDefaults(image) {
+    if (image.crop && image.hotspot) {
+        return image;
+    }
+    // We need to pad in default values for crop or hotspot
+    var result = __assign({}, image);
+    if (!result.crop) {
+        result.crop = {
+            left: 0,
+            top: 0,
+            bottom: 0,
+            right: 0
+        };
+    }
+    if (!result.hotspot) {
+        result.hotspot = {
+            x: 0.5,
+            y: 0.5,
+            height: 1.0,
+            width: 1.0
+        };
+    }
+    return result;
+}
+
+});
+
+unwrapExports(parseSource_1);
+
+var urlForImage_1 = createCommonjsModule(function (module, exports) {
+var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var parseAssetId_1$$1 = __importDefault(parseAssetId_1);
+var parseSource_1$$1 = __importDefault(parseSource_1);
+exports.parseSource = parseSource_1$$1.default;
+exports.SPEC_NAME_TO_URL_NAME_MAPPINGS = [
+    ['width', 'w'],
+    ['height', 'h'],
+    ['format', 'fm'],
+    ['download', 'dl'],
+    ['blur', 'blur'],
+    ['sharpen', 'sharp'],
+    ['invert', 'invert'],
+    ['orientation', 'or'],
+    ['minHeight', 'min-h'],
+    ['maxHeight', 'max-h'],
+    ['minWidth', 'min-w'],
+    ['maxWidth', 'max-w'],
+    ['quality', 'q'],
+    ['fit', 'fit'],
+    ['crop', 'crop'],
+    ['auto', 'auto'],
+    ['dpr', 'dpr']
+];
+function urlForImage(options) {
+    var spec = __assign({}, (options || {}));
+    var source = spec.source;
+    delete spec.source;
+    var image = parseSource_1$$1.default(source);
+    if (!image) {
+        return null;
+    }
+    var id = image.asset._ref || image.asset._id || '';
+    var asset = parseAssetId_1$$1.default(id);
+    // Compute crop rect in terms of pixel coordinates in the raw source image
+    var cropLeft = Math.round(image.crop.left * asset.width);
+    var cropTop = Math.round(image.crop.top * asset.height);
+    var crop = {
+        left: cropLeft,
+        top: cropTop,
+        width: Math.round(asset.width - image.crop.right * asset.width - cropLeft),
+        height: Math.round(asset.height - image.crop.bottom * asset.height - cropTop)
+    };
+    // Compute hot spot rect in terms of pixel coordinates
+    var hotSpotVerticalRadius = (image.hotspot.height * asset.height) / 2;
+    var hotSpotHorizontalRadius = (image.hotspot.width * asset.width) / 2;
+    var hotSpotCenterX = image.hotspot.x * asset.width;
+    var hotSpotCenterY = image.hotspot.y * asset.height;
+    var hotspot = {
+        left: hotSpotCenterX - hotSpotHorizontalRadius,
+        top: hotSpotCenterY - hotSpotVerticalRadius,
+        right: hotSpotCenterX + hotSpotHorizontalRadius,
+        bottom: hotSpotCenterY + hotSpotVerticalRadius
+    };
+    // If irrelevant, or if we are requested to: don't perform crop/fit based on
+    // the crop/hotspot.
+    if (!(spec.rect || spec.focalPoint || spec.ignoreImageParams || spec.crop)) {
+        spec = __assign({}, spec, fit({ crop: crop, hotspot: hotspot }, spec));
+    }
+    return specToImageUrl(__assign({}, spec, { asset: asset }));
+}
+exports.default = urlForImage;
+// eslint-disable-next-line complexity
+function specToImageUrl(spec) {
+    var cdnUrl = spec.baseUrl || 'https://cdn.sanity.io';
+    var filename = spec.asset.id + "-" + spec.asset.width + "x" + spec.asset.height + "." + spec.asset.format;
+    var baseUrl = cdnUrl + "/images/" + spec.projectId + "/" + spec.dataset + "/" + filename;
+    var params = [];
+    if (spec.rect) {
+        // Only bother url with a crop if it actually crops anything
+        var _a = spec.rect, left = _a.left, top_1 = _a.top, width = _a.width, height = _a.height;
+        var isEffectiveCrop = left !== 0 || top_1 !== 0 || height !== spec.asset.height || width !== spec.asset.width;
+        if (isEffectiveCrop) {
+            params.push("rect=" + left + "," + top_1 + "," + width + "," + height);
+        }
+    }
+    if (spec.bg) {
+        params.push("bg=" + spec.bg);
+    }
+    if (spec.focalPoint) {
+        params.push("fp-x=" + spec.focalPoint.x);
+        params.push("fp-x=" + spec.focalPoint.y);
+    }
+    var flip = [spec.flipHorizontal && 'h', spec.flipVertical && 'v'].filter(Boolean).join('');
+    if (flip) {
+        params.push("flip=" + flip);
+    }
+    // Map from spec name to url param name, and allow using the actual param name as an alternative
+    exports.SPEC_NAME_TO_URL_NAME_MAPPINGS.forEach(function (mapping) {
+        var specName = mapping[0], param = mapping[1];
+        if (typeof spec[specName] !== 'undefined') {
+            params.push(param + "=" + encodeURIComponent(spec[specName]));
+        }
+        else if (typeof spec[param] !== 'undefined') {
+            params.push(param + "=" + encodeURIComponent(spec[param]));
+        }
+    });
+    if (params.length === 0) {
+        return baseUrl;
+    }
+    return baseUrl + "?" + params.join('&');
+}
+function fit(source, spec) {
+    var cropRect;
+    var imgWidth = spec.width;
+    var imgHeight = spec.height;
+    // If we are not constraining the aspect ratio, we'll just use the whole crop
+    if (!(imgWidth && imgHeight)) {
+        return { width: imgWidth, height: imgHeight, rect: source.crop };
+    }
+    var crop = source.crop;
+    var hotspot = source.hotspot;
+    // If we are here, that means aspect ratio is locked and fitting will be a bit harder
+    var desiredAspectRatio = imgWidth / imgHeight;
+    var cropAspectRatio = crop.width / crop.height;
+    if (cropAspectRatio > desiredAspectRatio) {
+        // The crop is wider than the desired aspect ratio. That means we are cutting from the sides
+        var height = crop.height;
+        var width = height * desiredAspectRatio;
+        var top_2 = crop.top;
+        // Center output horizontally over hotspot
+        var hotspotXCenter = (hotspot.right - hotspot.left) / 2 + hotspot.left;
+        var left = hotspotXCenter - width / 2;
+        // Keep output within crop
+        if (left < crop.left) {
+            left = crop.left;
+        }
+        else if (left + width > crop.left + crop.width) {
+            left = crop.left + crop.width - width;
+        }
+        cropRect = {
+            left: Math.round(left),
+            top: Math.round(top_2),
+            width: Math.round(width),
+            height: Math.round(height)
+        };
+    }
+    else {
+        // The crop is taller than the desired ratio, we are cutting from top and bottom
+        var width = crop.width;
+        var height = width / desiredAspectRatio;
+        var left = crop.left;
+        // Center output vertically over hotspot
+        var hotspotYCenter = (hotspot.bottom - hotspot.top) / 2 + hotspot.top;
+        var top_3 = hotspotYCenter - height / 2;
+        // Keep output rect within crop
+        if (top_3 < crop.top) {
+            top_3 = crop.top;
+        }
+        else if (top_3 + height > crop.top + crop.height) {
+            top_3 = crop.top + crop.height - height;
+        }
+        cropRect = {
+            left: Math.max(0, Math.floor(left)),
+            top: Math.max(0, Math.floor(top_3)),
+            width: Math.round(width),
+            height: Math.round(height)
+        };
+    }
+    return {
+        width: imgWidth,
+        height: imgHeight,
+        rect: cropRect
+    };
+}
+
+});
+
+unwrapExports(urlForImage_1);
+var urlForImage_2 = urlForImage_1.parseSource;
+var urlForImage_3 = urlForImage_1.SPEC_NAME_TO_URL_NAME_MAPPINGS;
+
+var builder = createCommonjsModule(function (module, exports) {
+var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var urlForImage_1$$1 = __importStar(urlForImage_1);
+var validFits = ['clip', 'crop', 'fill', 'fillmax', 'max', 'scale', 'min'];
+var validCrops = ['top', 'bottom', 'left', 'right', 'center', 'focalpoint', 'entropy'];
+var validAutoModes = ['format'];
+function isSanityClient(client) {
+    return client ? typeof client.clientConfig === 'object' : false;
+}
+function rewriteSpecName(key) {
+    var specs = urlForImage_1$$1.SPEC_NAME_TO_URL_NAME_MAPPINGS;
+    for (var _i = 0, specs_1 = specs; _i < specs_1.length; _i++) {
+        var entry = specs_1[_i];
+        var specName = entry[0], param = entry[1];
+        if (key === specName || key === param) {
+            return specName;
+        }
+    }
+    return key;
+}
+function urlBuilder(options) {
+    // Did we get a SanityClient?
+    var client = options;
+    if (isSanityClient(client)) {
+        // Inherit config from client
+        var _a = client.clientConfig, apiHost = _a.apiHost, projectId = _a.projectId, dataset = _a.dataset;
+        return new ImageUrlBuilder(null, {
+            baseUrl: apiHost.replace(/^https:\/\/api\./, 'https://cdn.'),
+            projectId: projectId,
+            dataset: dataset
+        });
+    }
+    // Or just accept the options as given
+    return new ImageUrlBuilder(null, options);
+}
+exports.default = urlBuilder;
+var ImageUrlBuilder = /** @class */ (function () {
+    function ImageUrlBuilder(parent, options) {
+        this.options = parent
+            ? __assign({}, (parent.options || {}), (options || {})) : __assign({}, (options || {})); // Copy options
+    }
+    ImageUrlBuilder.prototype.withOptions = function (options) {
+        var baseUrl = options.baseUrl || '';
+        var newOptions = { baseUrl: baseUrl };
+        for (var key in options) {
+            if (options.hasOwnProperty(key)) {
+                var specKey = rewriteSpecName(key);
+                newOptions[specKey] = options[key];
+            }
+        }
+        return new ImageUrlBuilder(this, __assign({ baseUrl: baseUrl }, newOptions));
+    };
+    // The image to be represented. Accepts a Sanity 'image'-document, 'asset'-document or
+    // _id of asset. To get the benefit of automatic hot-spot/crop integration with the content
+    // studio, the 'image'-document must be provided.
+    ImageUrlBuilder.prototype.image = function (source) {
+        return this.withOptions({ source: source });
+    };
+    // Specify the dataset
+    ImageUrlBuilder.prototype.dataset = function (dataset) {
+        return this.withOptions({ dataset: dataset });
+    };
+    // Specify the projectId
+    ImageUrlBuilder.prototype.projectId = function (projectId) {
+        return this.withOptions({ projectId: projectId });
+    };
+    // Specify background color
+    ImageUrlBuilder.prototype.bg = function (bg) {
+        return this.withOptions({ bg: bg });
+    };
+    // Set DPR scaling factor
+    ImageUrlBuilder.prototype.dpr = function (dpr) {
+        return this.withOptions({ dpr: dpr });
+    };
+    // Specify the width of the image in pixels
+    ImageUrlBuilder.prototype.width = function (width) {
+        return this.withOptions({ width: width });
+    };
+    // Specify the height of the image in pixels
+    ImageUrlBuilder.prototype.height = function (height) {
+        return this.withOptions({ height: height });
+    };
+    // Specify focal point in fraction of image dimensions. Each component 0.0-1.0
+    ImageUrlBuilder.prototype.focalPoint = function (x, y) {
+        return this.withOptions({ focalPoint: { x: x, y: y } });
+    };
+    ImageUrlBuilder.prototype.maxWidth = function (maxWidth) {
+        return this.withOptions({ maxWidth: maxWidth });
+    };
+    ImageUrlBuilder.prototype.minWidth = function (minWidth) {
+        return this.withOptions({ minWidth: minWidth });
+    };
+    ImageUrlBuilder.prototype.maxHeight = function (maxHeight) {
+        return this.withOptions({ maxHeight: maxHeight });
+    };
+    ImageUrlBuilder.prototype.minHeight = function (minHeight) {
+        return this.withOptions({ minHeight: minHeight });
+    };
+    // Specify width and height in pixels
+    ImageUrlBuilder.prototype.size = function (width, height) {
+        return this.withOptions({ width: width, height: height });
+    };
+    // Specify blur between 0 and 100
+    ImageUrlBuilder.prototype.blur = function (blur) {
+        return this.withOptions({ blur: blur });
+    };
+    ImageUrlBuilder.prototype.sharpen = function (sharpen) {
+        return this.withOptions({ sharpen: sharpen });
+    };
+    // Specify the desired rectangle of the image
+    ImageUrlBuilder.prototype.rect = function (left, top, width, height) {
+        return this.withOptions({ rect: { left: left, top: top, width: width, height: height } });
+    };
+    // Specify the image format of the image. 'jpg', 'pjpg', 'png', 'webp'
+    ImageUrlBuilder.prototype.format = function (format) {
+        return this.withOptions({ format: format });
+    };
+    ImageUrlBuilder.prototype.invert = function (invert) {
+        return this.withOptions({ invert: invert });
+    };
+    // Rotation in degrees 0, 90, 180, 270
+    ImageUrlBuilder.prototype.orientation = function (orientation) {
+        return this.withOptions({ orientation: orientation });
+    };
+    // Compression quality 0-100
+    ImageUrlBuilder.prototype.quality = function (quality) {
+        return this.withOptions({ quality: quality });
+    };
+    // Make it a download link. Parameter is default filename.
+    ImageUrlBuilder.prototype.forceDownload = function (download) {
+        return this.withOptions({ download: download });
+    };
+    // Flip image horizontally
+    ImageUrlBuilder.prototype.flipHorizontal = function () {
+        return this.withOptions({ flipHorizontal: true });
+    };
+    // Flip image verically
+    ImageUrlBuilder.prototype.flipVertical = function () {
+        return this.withOptions({ flipVertical: true });
+    };
+    // Ignore crop/hotspot from image record, even when present
+    ImageUrlBuilder.prototype.ignoreImageParams = function () {
+        return this.withOptions({ ignoreImageParams: true });
+    };
+    ImageUrlBuilder.prototype.fit = function (value) {
+        if (validFits.indexOf(value) === -1) {
+            throw new Error("Invalid fit mode \"" + value + "\"");
+        }
+        return this.withOptions({ fit: value });
+    };
+    ImageUrlBuilder.prototype.crop = function (value) {
+        if (validCrops.indexOf(value) === -1) {
+            throw new Error("Invalid crop mode \"" + value + "\"");
+        }
+        return this.withOptions({ crop: value });
+    };
+    ImageUrlBuilder.prototype.auto = function (value) {
+        if (validAutoModes.indexOf(value) === -1) {
+            throw new Error("Invalid auto mode \"" + value + "\"");
+        }
+        return this.withOptions({ auto: value });
+    };
+    // Gets the url based on the submitted parameters
+    ImageUrlBuilder.prototype.url = function () {
+        return urlForImage_1$$1.default(this.options);
+    };
+    // Synonym for url()
+    ImageUrlBuilder.prototype.toString = function () {
+        return this.url();
+    };
+    return ImageUrlBuilder;
+}());
+
+});
+
+unwrapExports(builder);
+
+var node$1 = createCommonjsModule(function (module) {
+var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var builder_1 = __importDefault(builder);
+module.exports = builder_1.default;
+
+});
+
+var imageUrlBuilder = unwrapExports(node$1);
+
+var urlFor = function urlFor(source, client) {
+  return imageUrlBuilder(client).image(source);
+};
+
+var getSerializers = function getSerializers(client) {
   return {
     types: {
       youtube: function youtube(_ref) {
         var node = _ref.node;
         var url = node.url;
 
-        var id = getYoutubeId(url);
-        return React__default.createElement(YouTube, { videoId: id, className: 'youtube' });
+        return React__default.createElement(YouTubePlayer$1, { url: url });
+      },
+      figure: function figure(_ref2) {
+        var node = _ref2.node;
+        var asset = node.asset,
+            caption = node.caption;
+
+        var url = urlFor(asset, client).url();
+        return React__default.createElement(FigureComponent, { caption: caption, url: url });
+      },
+      slideshow: function slideshow(_ref3) {
+        var node = _ref3.node;
+
+        var slides = node.slides && node.slides.map(function (slide) {
+          return Object.assign(slide, { url: urlFor(slide.asset, client).url() });
+        });
+        return React__default.createElement(Slideshow, { slides: slides });
       }
     }
   };
 };
 
-export { DeckContent, DeckQueue, Column2, Column3, Header, LeftNav, NavMagazine, NavNative, NavNormal, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers };
+export { DeckContent, DeckQueue, Column1, Column2, Column3, Header, LeftNav, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers };
 //# sourceMappingURL=index.es.js.map