@mjhls/mjh-framework 1.0.108 → 1.0.109-8.1

package/dist/esm/VideoSeriesLandingPage.js

@@ -0,0 +1,172 @@
+import { _ as _asyncToGenerator, r as regenerator } from './asyncToGenerator-1ebeb135.js';
+import { _ as _typeof } from './typeof-3ab7d3b6.js';
+import React__default from 'react';
+import { m as moment } from './moment-48faeb9c.js';
+import { g as getYoutubeId } from './index-c7e2ac95.js';
+import Breadcrumbs from './Breadcrumbs.js';
+import MasterDeck from './MasterDeck.js';
+import VideoSeriesCard from './VideoSeriesCard.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './core.get-iterator-method-95db387d.js';
+import './web.dom.iterable-3fffc027.js';
+import './_library-528f1934.js';
+import './_set-species-7d3317b7.js';
+import './_iter-detect-2f89237f.js';
+import './_is-array-68c79b29.js';
+import './extends-2f4448b8.js';
+import './slicedToArray-72ed566b.js';
+import 'react-bootstrap/Breadcrumb';
+import './toConsumableArray-e6f28e5c.js';
+import './inherits-96c84cbd.js';
+import './_object-sap-14bd8e96.js';
+import './define-property-433c51d3.js';
+import './index-5cc7b406.js';
+import 'prop-types';
+import 'react-bootstrap/Container';
+import 'react-bootstrap/Row';
+import 'react-bootstrap/Col';
+import 'react-bootstrap/Card';
+import 'next/router';
+import './lodash-f97fd99a.js';
+import './debounce-533d9748.js';
+import './isSymbol-a7e9aafe.js';
+import './toNumber-5aeba6e7.js';
+import './index.es-a6137319.js';
+import './visibility-sensor-72fd8f8b.js';
+import 'react-dom';
+import './index-3f5c03b2.js';
+import './ADlgInfeed-30649360.js';
+import './AdSlot.js';
+import './Beam.js';
+import './stringify-1e2a5946.js';
+import './Segment.js';
+import './main-754d4992.js';
+import './ADInfeed-3442c999.js';
+import './index-755f2cc2.js';
+import './urlFor.js';
+import './style-inject.es-1f59c1d0.js';
+
+var _this = undefined;
+
+var VideoSeriesLandingPage = function VideoSeriesLandingPage(props) {
+  var summary = props.summary,
+      client = props.client,
+      posts = props.posts,
+      _props$variant = props.variant,
+      variant = _props$variant === undefined ? 'left' : _props$variant,
+      _props$defaultImage = props.defaultImage,
+      defaultImage = _props$defaultImage === undefined ? '/placeholder.jpg' : _props$defaultImage,
+      mapping = props.mapping,
+      query = props.query,
+      params = props.params,
+      _props$currentPage = props.currentPage,
+      currentPage = _props$currentPage === undefined ? 1 : _props$currentPage,
+      pageview = props.pageview,
+      _props$autoScroll = props.autoScroll,
+      autoScroll = _props$autoScroll === undefined ? true : _props$autoScroll,
+      rightItems = props.rightItems,
+      brandInsightAd = props.brandInsightAd,
+      _props$showBI = props.showBI,
+      showBI = _props$showBI === undefined ? false : _props$showBI,
+      _props$lgInfeedAd = props.lgInfeedAd,
+      lgInfeedAd = _props$lgInfeedAd === undefined ? false : _props$lgInfeedAd;
+
+  return React__default.createElement(
+    'div',
+    null,
+    summary && React__default.createElement(
+      'div',
+      { style: { fontSize: '1rem' }, className: 'series-summary px-1 my-4' },
+      summary
+    ),
+    React__default.createElement(Breadcrumbs, null),
+    posts && React__default.createElement(MasterDeck, {
+      deck: VideoSeriesCard,
+      variant: variant,
+      client: client,
+      defaultImage: defaultImage,
+      mapping: mapping,
+      dataRecord: posts,
+      query: query,
+      params: params,
+      currentPage: currentPage,
+      pageview: pageview,
+      autoScroll: autoScroll,
+      rightItems: rightItems,
+      brandInsightAd: brandInsightAd,
+      showBI: showBI,
+      lgInfeedAd: lgInfeedAd
+    })
+  );
+};
+
+VideoSeriesLandingPage.getInitialData = function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(context, client) {
+    var itemsPerPage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
+    var taxonomyId = arguments[3];
+    var today, urlQuery, seriesName, currentPage, start, params, query, posts, seriesTitle, summary, url;
+    return regenerator.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            today = moment().utc().format();
+            urlQuery = context.query;
+            seriesName = urlQuery.series;
+            currentPage = urlQuery.page ? parseInt(urlQuery.page) : 1;
+            start = (currentPage - 1) * itemsPerPage;
+            params = {
+              from: start,
+              to: start + itemsPerPage,
+              itemsPerPage: itemsPerPage
+            };
+            query = '*[\n    _type == \'article\' \n    && !(_id in path("drafts.**")) \n    && defined(title) \n    && defined(url) \n    && dateTime(published) <= dateTime(now()) \n    && references(\'' + taxonomyId + '\') \n    && is_visible == true \n    && url.current == \'' + seriesName + '\'\n  ][$from...$to] | order(published desc) {\n\t\ttitle,\n\t\tsummary,\n\t\tpublished,\n\t\tthumbnail,\n\t\turl,\n\t\ttaxonomy,\n\t\tbody[_type == "youtubeGallery"]\n\t}';
+            _context.next = 9;
+            return client.fetch(query, params);
+
+          case 9:
+            posts = _context.sent;
+            seriesTitle = '';
+            summary = '';
+
+
+            if (posts.length > 0 && posts[0].body.length > 0 && posts[0].body[0].videos) {
+              url = posts[0].url.current + '?seriesVid=';
+
+              seriesTitle = posts[0].title;
+              summary = posts[0].summary;
+              posts = posts[0].body[0].videos.filter(function (video) {
+                if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (today >= video.published || !video.hasOwnProperty('published'))) {
+                  return video;
+                }
+              });
+              //start youtube thumbnail fix
+              posts.map(function (post, index) {
+                if (post.thumbnail && _typeof(post.thumbnail) !== 'object' || !post.thumbnail) {
+                  var id = getYoutubeId(post.url);
+                  var imageURL = 'https://img.youtube.com/vi/' + id + '/hqdefault.jpg';
+                  return post['thumbnail'] = imageURL, post['url'] = {
+                    current: url + (index + 1)
+                  };
+                }
+                return post['url'] = {
+                  current: url + (index + 1)
+                };
+              });
+              //end
+            }
+            return _context.abrupt('return', { posts: posts, query: query, params: params, seriesTitle: seriesTitle, summary: summary, seriesName: seriesName });
+
+          case 14:
+          case 'end':
+            return _context.stop();
+        }
+      }
+    }, _callee, _this);
+  }));
+
+  return function (_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+export { VideoSeriesLandingPage as default };

package/dist/esm/VideoSeriesListing.js

@@ -0,0 +1,414 @@
+import { _ as _extends } from './extends-2f4448b8.js';
+import { _ as _inherits, a as _classCallCheck, b as _possibleConstructorReturn, c as _Object$getPrototypeOf, d as _createClass } from './inherits-96c84cbd.js';
+import React__default from 'react';
+import { l as lib_3 } from './index-5cc7b406.js';
+import Container from 'react-bootstrap/Container';
+import { V as VisibilitySensor } from './visibility-sensor-72fd8f8b.js';
+import { I as IoIosArrowForward } from './index.esm-eb1e8e80.js';
+import { m as moment } from './moment-48faeb9c.js';
+import { withRouter } from 'next/router';
+import YoutubeGroup from './YoutubeGroup.js';
+import { d as debounce_1 } from './debounce-533d9748.js';
+import { I as InfiniteScroll } from './index.es-a6137319.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './core.get-iterator-method-95db387d.js';
+import './_object-sap-14bd8e96.js';
+import './define-property-433c51d3.js';
+import './typeof-3ab7d3b6.js';
+import './web.dom.iterable-3fffc027.js';
+import './_is-array-68c79b29.js';
+import './_library-528f1934.js';
+import 'prop-types';
+import 'react-dom';
+import './iconBase-ccc56b97.js';
+import './slicedToArray-72ed566b.js';
+import './index-c7e2ac95.js';
+import './index-755f2cc2.js';
+import './smoothscroll-fa4e3f8c.js';
+import './urlFor.js';
+import './index-3f5c03b2.js';
+import './main-754d4992.js';
+import './isSymbol-a7e9aafe.js';
+import './toNumber-5aeba6e7.js';
+
+var VideoSeriesListing = function (_React$Component) {
+  _inherits(VideoSeriesListing, _React$Component);
+
+  function VideoSeriesListing() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, VideoSeriesListing);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = VideoSeriesListing.__proto__ || _Object$getPrototypeOf(VideoSeriesListing)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.today = moment().utc().format(), _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
+      data: _this.dataArr.map(function (item) {
+        var tempObj = item.map(function (arrItem) {
+          if (arrItem.body) {
+            var filteredBody = arrItem.body.map(function (item) {
+              if (item._type === 'youtubeGallery') {
+                var innerObj = item;
+                var filteredArticles = innerObj.videos.filter(function (video) {
+                  if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (_this.today >= video.published || !video.hasOwnProperty('published'))) {
+                    return video;
+                  }
+                });
+                innerObj.videos = filteredArticles;
+                return innerObj;
+              } else {
+                return item;
+              }
+            });
+
+            arrItem.body = filteredBody;
+          }
+          return arrItem;
+        });
+        return tempObj;
+      }),
+      per: _this.params ? _this.params.itemsPerPage : 2,
+      page: _this.props.currentPage || 1,
+      from: _this.params ? _this.params.from : 0,
+      to: _this.params ? _this.params.to : 2,
+      total_pages: null,
+      scrolling: true,
+      query: _this.query,
+      currentPage: _this.props.currentPage || 1,
+      lastDataSize: _this.data ? _this.data.length : 0
+    }, _this.loadMore = debounce_1(function () {
+      _this.setState(function (state) {
+        var page = state.page,
+            from = state.from,
+            per = state.per,
+            to = state.to;
+
+        return {
+          page: page + 1,
+          from: from + per,
+          to: to + per
+        };
+      }, _this.loadData);
+    }, 0), _this.loadData = function () {
+      var _this$state = _this.state,
+          from = _this$state.from,
+          to = _this$state.to;
+          _this$state.data;
+          var query = _this$state.query,
+          page = _this$state.page;
+      var client = _this.props.client;
+      //this.changePageNumber(page)
+
+      var params = _extends({}, _this.params, { from: from, to: to
+        // const queryUpdated = query.replace('$from', params.from).replace('$to', params.to)
+        // const query = '*[_type == "article" && defined(title) && defined(thumbnail)][$from...$to] { title, summary, thumbnail { asset-> }, url }'
+      });client.fetch(query, params).then(function (dataArr) {
+        if (_this.pointer && _this.pointerArray) {
+          var pointer = _this.pointer;
+          dataArr = dataArr[_this.pointerArray][pointer];
+        }
+        dataArr = dataArr.map(function (item) {
+          return _extends({}, item, {
+            pageNumber: page
+          });
+        });
+
+        _this.setState(function () {
+          if (dataArr.length > 0) {
+            var newDataArr = _this.state.data;
+            newDataArr.push(dataArr);
+            return {
+              data: newDataArr,
+              scrolling: true,
+              lastDataSize: dataArr.length
+            };
+          } else {
+            return {
+              scrolling: false,
+              lastDataSize: 0
+            };
+          }
+        });
+      });
+    }, _this.changePageNumber = function (pageNumber) {
+      var _this$props = _this.props,
+          seoPaginate = _this$props.seoPaginate,
+          pageview = _this$props.pageview,
+          router = _this$props.router;
+      var currentPage = _this.state.currentPage;
+
+      if (seoPaginate) {
+        var path = router.asPath;
+        var qrIndex = path.indexOf('?');
+        var pathname = router.pathname;
+        var queryString = '';
+
+        if (qrIndex > 0) {
+          path = path.substring(1, qrIndex);
+
+          var partialQS = router.asPath.substring(qrIndex + 1);
+          var partialQSArr = partialQS.split('&');
+
+          // exclude page=xxx from query string
+          partialQSArr.map(function (item) {
+            var itemArr = item.split('=');
+            var key = itemArr[0];
+            var val = itemArr[1];
+
+            if (key !== 'page') {
+              queryString += (queryString.length === 0 ? '' : '&') + key + '=' + val;
+            }
+          });
+        }
+
+        if (queryString.length > 0) {
+          path += '?' + queryString;
+        }
+
+        pageNumber = parseInt(pageNumber);
+
+        if (currentPage !== pageNumber) {
+          lib_3.refresh();
+
+          _this.setState({
+            currentPage: pageNumber
+          }, function () {
+            if (path[0] !== '/') {
+              path = '/' + path;
+            }
+
+            var newPath = pageNumber === 1 ? '' + path : '' + path + (path.includes('?') ? '&page=' + pageNumber : '?page=' + pageNumber);
+
+            if (pageview) {
+              pageview(newPath);
+            }
+
+            router.push(pathname, newPath, {
+              shallow: true
+            });
+          });
+        }
+      }
+    }, _this.renderManualPagination = function (_ref2) {
+      var nextPagePostsCount = _ref2.nextPagePostsCount;
+      var currentPage = _this.state.currentPage;
+
+
+      return React__default.createElement(
+        'div',
+        { className: 'd-flex justify-content-between' },
+        currentPage && currentPage > 1 && React__default.createElement(
+          'a',
+          { href: '?page=' + (currentPage - 1) },
+          '<< Previous'
+        ),
+        !(_this.state.lastDataSize < _this.state.per) && nextPagePostsCount > 0 && React__default.createElement(
+          'a',
+          { href: '?page=' + (currentPage + 1) },
+          'Next >>'
+        )
+      );
+    }, _this.renderSeries = function (seriesData) {
+      var itemCounter = 0;
+
+      return React__default.createElement(
+        'div',
+        null,
+        seriesData && seriesData.map(function (docSeries, index) {
+          if (docSeries.body && docSeries.body.length > 0 && docSeries.body[0].videos) {
+            docSeries.body[0].videos.map(function (singleVideo, indexInner) {
+              singleVideo.link = '/view/' + docSeries.url.current + '?seriesVid=' + (indexInner + 1);
+            });
+          }
+
+          return React__default.createElement(
+            'div',
+            { key: index, style: { marginBottom: '2rem' }, counter: itemCounter++ },
+            React__default.createElement(
+              'div',
+              {
+                className: 'video-title-banner',
+                style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', fontSize: '1.25rem', borderBottom: '1px solid #d4a64d' } },
+              React__default.createElement(
+                'a',
+                { href: '/' + _this.props.page + '/' + docSeries.url.current },
+                docSeries.title,
+                React__default.createElement(
+                  'span',
+                  { style: { fontSize: '.9rem', color: 'grey', marginLeft: '1rem', transform: 'translateY(-2px)' } },
+                  React__default.createElement(IoIosArrowForward, null)
+                )
+              )
+            ),
+            docSeries.body && docSeries.body.length > 0 && docSeries.body[0].videos ? React__default.createElement(YoutubeGroup, _extends({ displayEpisodeNumber: true, key: index, dataset: docSeries.body[0].videos }, _this.props)) : React__default.createElement(
+              'p',
+              null,
+              'No Video Found.'
+            )
+          );
+        })
+      );
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(VideoSeriesListing, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      // console.log(this.state)
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          _props$autoScroll = _props.autoScroll,
+          autoScroll = _props$autoScroll === undefined ? true : _props$autoScroll,
+          _props$nextPagePostsC = _props.nextPagePostsCount,
+          nextPagePostsCount = _props$nextPagePostsC === undefined ? 3 : _props$nextPagePostsC;
+
+
+      if (autoScroll) {
+        return React__default.createElement(
+          React__default.Fragment,
+          null,
+          this.state.data.length >= 1 && this.state.data[0].length > 0 ?
+          //Check if any Video Groups available
+          React__default.createElement(
+            InfiniteScroll,
+            { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.8 },
+            React__default.createElement(
+              Container,
+              null,
+              this.state.data && this.state.data.map(function (series, index) {
+                var page = series && series.length > 0 && series[0].pageNumber !== 1 ? series[0].pageNumber : 1;
+
+                return React__default.createElement(
+                  React__default.Fragment,
+                  { key: index },
+                  React__default.createElement(
+                    VisibilitySensor,
+                    {
+                      onChange: function onChange(isVisible) {
+                        isVisible && _this2.changePageNumber(page);
+                      } },
+                    React__default.createElement('div', { className: 'visibility-sensor', style: { minHeight: '.25rem' } })
+                  ),
+                  React__default.createElement(
+                    'div',
+                    null,
+                    _this2.renderSeries(series)
+                  )
+                );
+              }),
+              React__default.createElement(
+                'noscript',
+                null,
+                this.renderManualPagination({ nextPagePostsCount: nextPagePostsCount })
+              )
+            )
+          ) : React__default.createElement(
+            'div',
+            { style: { marginTop: '10px' } },
+            React__default.createElement(
+              'h5',
+              null,
+              React__default.createElement(
+                'em',
+                null,
+                'New content coming soon, please check back later.'
+              )
+            )
+          )
+        );
+      }
+      if (!autoScroll) {
+        return React__default.createElement(
+          React__default.Fragment,
+          null,
+          this.state.data.length >= 1 && this.state.data[0].length > 0 ?
+          //Check if any Video Groups available
+          React__default.createElement(
+            Container,
+            null,
+            this.state.data && this.state.data.map(function (series, index) {
+              var page = series && series.length > 0 && series[0].pageNumber !== 1 ? series[0].pageNumber : 1;
+
+              return React__default.createElement(
+                React__default.Fragment,
+                { key: index },
+                React__default.createElement(
+                  VisibilitySensor,
+                  {
+                    onChange: function onChange(isVisible) {
+                      isVisible && _this2.changePageNumber(page);
+                    } },
+                  React__default.createElement('div', { className: 'visibility-sensor', style: { minHeight: '.25rem' } })
+                ),
+                React__default.createElement(
+                  'div',
+                  null,
+                  _this2.renderSeries(series)
+                ),
+                _this2.state.scrolling ? React__default.createElement(
+                  'button',
+                  {
+                    className: 'btn',
+                    style: {
+                      margin: '0 auto 2rem',
+                      display: 'block',
+                      fontSize: '18px',
+                      padding: '.5rem 1.5rem',
+                      boxShadow: '1px 2px 4px 4px rgba(0,0,0,.15)',
+                      background: 'var(--primary)',
+                      color: '#fff',
+                      borderRadius: '5px'
+                    },
+                    onClick: function onClick(e) {
+                      e.target.style.display = 'none';
+                      _this2.loadMore();
+                    } },
+                  'Load More'
+                ) : React__default.createElement(
+                  'p',
+                  { style: { textAlign: 'center' } },
+                  React__default.createElement(
+                    'b',
+                    null,
+                    'End of data'
+                  )
+                ),
+                React__default.createElement(
+                  'noscript',
+                  null,
+                  _this2.renderManualPagination({ nextPagePostsCount: nextPagePostsCount })
+                )
+              );
+            })
+          ) : React__default.createElement(
+            'div',
+            { style: { marginTop: '10px' } },
+            React__default.createElement(
+              'h5',
+              null,
+              React__default.createElement(
+                'em',
+                null,
+                'New content coming soon, please check back later.'
+              )
+            )
+          )
+        );
+      }
+    }
+  }]);
+
+  return VideoSeriesListing;
+}(React__default.Component);
+
+var VideoSeriesListing$1 = withRouter(VideoSeriesListing);
+
+export { VideoSeriesListing$1 as default };