@mjhls/mjh-framework 1.0.430 → 1.0.432

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,5 @@
1
1
 
2
-
3
- # mjh-framework v. 1.0.430
4
-
2
+ # mjh-framework v. 1.0.432
5
3
 
6
4
  > Foundation Framework
7
5
 
@@ -84,7 +84,6 @@ var loadData = function loadData(values, query, client, params, setData, setScro
84
84
  };
85
85
 
86
86
  var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage, itemsPerPage, itemIndex) {
87
-
88
87
  if (seoPaginate) {
89
88
  var path = router.asPath;
90
89
  var qrIndex = path.indexOf('?');
@@ -237,19 +236,38 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
237
236
  { className: 'p-0 mb-1' },
238
237
  article.source
239
238
  ),
240
- showCategory && article.contentCategory && React__default.createElement(
241
- 'p',
242
- {
243
- className: 'article-category',
244
- style: {
245
- background: '#3FB618',
246
- color: '#ffffff',
247
- marginBottom: '.25rem',
248
- display: 'inline-block',
249
- padding: '0 .25rem',
250
- fontSize: '.8rem'
251
- } },
252
- article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
239
+ React__default.createElement(
240
+ 'div',
241
+ { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' } },
242
+ showCategory && article.contentCategory && React__default.createElement(
243
+ 'p',
244
+ {
245
+ className: 'article-category',
246
+ style: {
247
+ background: '#3FB618',
248
+ color: '#ffffff',
249
+ marginBottom: '.25rem',
250
+ display: 'inline-block',
251
+ padding: '0 .25rem',
252
+ fontSize: '.8rem'
253
+ } },
254
+ article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
255
+ ),
256
+ article.issueSection && article.issueSection.name && React__default.createElement(
257
+ 'p',
258
+ {
259
+ className: 'issueSection',
260
+ style: {
261
+ background: '#000000 !important',
262
+ color: '#ffffff',
263
+ marginBottom: '.25rem',
264
+ marginLeft: '.25rem',
265
+ display: 'inline-block',
266
+ padding: '0 .25rem',
267
+ fontSize: '.8rem'
268
+ } },
269
+ article.issueSection.name
270
+ )
253
271
  ),
254
272
  article.summary && React__default.createElement(
255
273
  'p',
@@ -314,18 +332,38 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
314
332
  { className: 'p-0 mb-1' },
315
333
  article.source
316
334
  ),
317
- showCategory && article.contentCategory && React__default.createElement(
318
- 'p',
319
- {
320
- style: {
321
- background: '#3FB618',
322
- color: '#ffffff',
323
- marginBottom: '.25rem',
324
- display: 'inline-block',
325
- padding: '0 .25rem',
326
- fontSize: '.8rem'
327
- } },
328
- article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
335
+ React__default.createElement(
336
+ 'div',
337
+ { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' } },
338
+ showCategory && article.contentCategory && React__default.createElement(
339
+ 'p',
340
+ {
341
+ className: 'article-category',
342
+ style: {
343
+ background: '#3FB618',
344
+ color: '#ffffff',
345
+ marginBottom: '.25rem',
346
+ display: 'inline-block',
347
+ padding: '0 .25rem',
348
+ fontSize: '.8rem'
349
+ } },
350
+ article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
351
+ ),
352
+ article.issueSection && article.issueSection.name && React__default.createElement(
353
+ 'p',
354
+ {
355
+ className: 'issueSection',
356
+ style: {
357
+ background: '#000000 !important',
358
+ color: '#ffffff',
359
+ marginBottom: '.25rem',
360
+ marginLeft: '.25rem',
361
+ display: 'inline-block',
362
+ padding: '0 .25rem',
363
+ fontSize: '.8rem'
364
+ } },
365
+ article.issueSection.name
366
+ )
329
367
  ),
330
368
  article.summary && React__default.createElement(
331
369
  'p',
@@ -400,18 +438,38 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
400
438
  { className: 'p-0 mb-1' },
401
439
  article.source
402
440
  ),
403
- showCategory && article.contentCategory && React__default.createElement(
404
- 'p',
405
- {
406
- style: {
407
- background: '#3FB618',
408
- color: '#ffffff',
409
- marginBottom: '.25rem',
410
- display: 'inline-block',
411
- padding: '0 .25rem',
412
- fontSize: '.8rem'
413
- } },
414
- article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
441
+ React__default.createElement(
442
+ 'div',
443
+ { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' } },
444
+ showCategory && article.contentCategory && React__default.createElement(
445
+ 'p',
446
+ {
447
+ className: 'article-category',
448
+ style: {
449
+ background: '#3FB618',
450
+ color: '#ffffff',
451
+ marginBottom: '.25rem',
452
+ display: 'inline-block',
453
+ padding: '0 .25rem',
454
+ fontSize: '.8rem'
455
+ } },
456
+ article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
457
+ ),
458
+ article.issueSection && article.issueSection.name && React__default.createElement(
459
+ 'p',
460
+ {
461
+ className: 'issueSection',
462
+ style: {
463
+ background: '#000000 !important',
464
+ color: '#ffffff',
465
+ marginBottom: '.25rem',
466
+ marginLeft: '.25rem',
467
+ display: 'inline-block',
468
+ padding: '0 .25rem',
469
+ fontSize: '.8rem'
470
+ } },
471
+ article.issueSection.name
472
+ )
415
473
  ),
416
474
  article.summary && React__default.createElement(
417
475
  'p',
package/dist/cjs/index.js CHANGED
@@ -8114,7 +8114,9 @@ var Video = function Video(_ref) {
8114
8114
  var node = _ref.node,
8115
8115
  accountIDs = _ref.accountIDs,
8116
8116
  _ref$autoplay = _ref.autoplay,
8117
- autoplay = _ref$autoplay === undefined ? false : _ref$autoplay;
8117
+ autoplay = _ref$autoplay === undefined ? false : _ref$autoplay,
8118
+ _ref$autoplayNextVide = _ref.autoplayNextVideo,
8119
+ autoplayNextVideo = _ref$autoplayNextVide === undefined ? function () {} : _ref$autoplayNextVide;
8118
8120
  var source = node.source,
8119
8121
  videoID = node.videoID,
8120
8122
  playlistID = node.playlistID,
@@ -8125,10 +8127,10 @@ var Video = function Video(_ref) {
8125
8127
  //console.log('success:', success.ref)
8126
8128
  var player = success.ref;
8127
8129
 
8128
- // this is video ready
8130
+ // this is video ready
8129
8131
  player.on('loadedmetadata', function (evt) {
8130
8132
  //console.log('loadedmetadata:', evt)
8131
- console.log('mediainfo:', player.mediainfo); // get the duration from here
8133
+ console.log('mediainfo:', player.mediainfo); // get the duration from here
8132
8134
  var duration = player.mediainfo.duration;
8133
8135
  var current = player.currentTime();
8134
8136
  var queue = Math.floor(duration / 10);
@@ -8159,7 +8161,7 @@ var Video = function Video(_ref) {
8159
8161
  AdSlot.Beam.report_beam_video('Play', main.main_16, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
8160
8162
  });
8161
8163
 
8162
- // pause
8164
+ // pause
8163
8165
  player.on('pause', function (evt) {
8164
8166
  var duration = player.mediainfo.duration;
8165
8167
  var current = player.currentTime();
@@ -8175,6 +8177,7 @@ var Video = function Video(_ref) {
8175
8177
  var queue = Math.floor(duration / 10);
8176
8178
  var segment = Math.floor(current / queue);
8177
8179
  AdSlot.Beam.report_beam_video('End', main.main_16, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
8180
+ autoplayNextVideo(evt);
8178
8181
  });
8179
8182
 
8180
8183
  var queueProgress = [];
@@ -8189,7 +8192,7 @@ var Video = function Video(_ref) {
8189
8192
  }
8190
8193
  });
8191
8194
 
8192
- // ad impression
8195
+ // ad impression
8193
8196
  player.on('ads-ad-started', function (evt) {
8194
8197
  var duration = player.ads.ad.duration;
8195
8198
  var id = player.ads.ad.id;
@@ -8198,7 +8201,7 @@ var Video = function Video(_ref) {
8198
8201
  AdSlot.Beam.report_beam_ad('AD Started', main.main_16, '', '', '', '', '', adType, duration, id);
8199
8202
  });
8200
8203
 
8201
- // ad ended
8204
+ // ad ended
8202
8205
  player.on('ads-ad-ended', function (evt) {
8203
8206
  var duration = player.ads.ad.duration;
8204
8207
  var id = player.ads.ad.id;
@@ -8209,15 +8212,39 @@ var Video = function Video(_ref) {
8209
8212
 
8210
8213
  if (source === 'brightcove' && accountIDs.brightcove) {
8211
8214
  if (videoID) {
8212
- return React__default.createElement(ReactPlayerLoader, { onSuccess: onVideoSuccess, accountId: accountIDs.brightcove.accountId, videoId: videoID, playerId: accountIDs.brightcove.playerId, attrs: { className: 'brightcove', autoplay: 'muted' } });
8215
+ return React__default.createElement(
8216
+ 'div',
8217
+ null,
8218
+ React__default.createElement(ReactPlayerLoader, {
8219
+ onSuccess: onVideoSuccess,
8220
+ accountId: accountIDs.brightcove.accountId,
8221
+ videoId: videoID,
8222
+ playerId: accountIDs.brightcove.playerId,
8223
+ attrs: { className: 'brightcove', autoplay: 'muted' }
8224
+ }),
8225
+ React__default.createElement(
8226
+ 'style',
8227
+ { jsx: 'true' },
8228
+ '\n .brightcove {\n position: relative;\n padding-bottom: 56.25%; /* 16:9 */\n height: 0;\n width: 100%;\n }\n .brightcove .video-js {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n '
8229
+ )
8230
+ );
8213
8231
  } else if (playlistID) {
8214
- return React__default.createElement(ReactPlayerLoader, {
8215
- accountId: accountIDs.brightcove.accountId,
8216
- playlistId: playlistID,
8217
- playerId: accountIDs.brightcove.playerId,
8218
- onSuccess: onVideoSuccess,
8219
- attrs: { className: 'brightcove brightcove-playlist', autoplay: 'muted' }
8220
- });
8232
+ return React__default.createElement(
8233
+ 'div',
8234
+ null,
8235
+ React__default.createElement(ReactPlayerLoader, {
8236
+ accountId: accountIDs.brightcove.accountId,
8237
+ playlistId: playlistID,
8238
+ playerId: accountIDs.brightcove.playerId,
8239
+ onSuccess: onVideoSuccess,
8240
+ attrs: { className: 'brightcove brightcove-playlist', autoplay: 'muted' }
8241
+ }),
8242
+ React__default.createElement(
8243
+ 'style',
8244
+ { jsx: 'true' },
8245
+ '\n .brightcove {\n position: relative;\n padding-bottom: 56.25%; /* 16:9 */\n height: 0;\n width: 100%;\n }\n .brightcove .video-js {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n '
8246
+ )
8247
+ );
8221
8248
  } else if (experienceID) {
8222
8249
  return React__default.createElement(
8223
8250
  'div',
@@ -13044,6 +13071,27 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13044
13071
  setState(nodes.videos[nextVid].url, '', nextVid + 1);
13045
13072
  }
13046
13073
 
13074
+ var autoplayNextVideo = function autoplayNextVideo(e) {
13075
+ //for brightcove videos
13076
+
13077
+ var currentVid = void 0;
13078
+ var nextVid = void 0;
13079
+ //Find index of video currently playing
13080
+ seriesData.forEach(function (vid, index) {
13081
+ if (vid.url === vidUrl) {
13082
+ currentVid = index;
13083
+ }
13084
+ });
13085
+ //increment +1, or if at the end of the series list, go back to the beginning
13086
+ if (currentVid + 1 >= seriesData.length) {
13087
+ nextVid = 0;
13088
+ } else {
13089
+ nextVid = currentVid + 1;
13090
+ }
13091
+ // set the new Video URL
13092
+ setState(nodes.videos[nextVid].url, '', nextVid + 1);
13093
+ };
13094
+
13047
13095
  var handlePlayPercent = function handlePlayPercent(player) {
13048
13096
  var current = player.getCurrentTime();
13049
13097
  var duration = player.getDuration();
@@ -13110,7 +13158,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13110
13158
  }
13111
13159
  }),
13112
13160
  vidUrl && vidType == 'mp4' && React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
13113
- vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs }),
13161
+ vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { autoplay: true, node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs, autoplayNextVideo: autoplayNextVideo }),
13114
13162
  React__default.createElement(
13115
13163
  'div',
13116
13164
  {
@@ -13162,7 +13210,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13162
13210
  React__default.createElement(
13163
13211
  'style',
13164
13212
  { jsx: 'true' },
13165
- '\n \n #fluid-video-container > div {\n position: relative;\n padding-bottom: 56.25%; /* 16:9 */\n height: 0;\n }\n #fluid-video-container .fluid-iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n }\n\n span.btn {\n margin: 0 1rem;\n }\n .brightcove .video-js {\n float: none;\n width: 100%;\n height: 385px;\n }\n @media screen and (max-width: 1399px) {\n .brightcove .video-js {\n height: 360px;\n }\n }\n @media screen and (max-width: 495px) {\n .brightcove .video-js {\n height: 255px;\n }\n }\n '
13213
+ '\n \n #fluid-video-container > div {\n position: relative;\n padding-bottom: 56.25%; /* 16:9 */\n height: 0;\n }\n #fluid-video-container .fluid-iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n }\n\n span.btn {\n margin: 0 1rem;\n }\n \n \n '
13166
13214
  )
13167
13215
  );
13168
13216
  };
@@ -14924,6 +14972,72 @@ var PublicationLanding = function PublicationLanding(props) {
14924
14972
  );
14925
14973
  };
14926
14974
 
14975
+ /* usage
14976
+ import Settings, { Ads } from '../../../../settings'
14977
+ import { IssueLanding, getQuery } from '@mjhls/mjh-framework'
14978
+ import client from '../../../../client'
14979
+ import moment from 'moment'
14980
+ import Shell from '../../../../components/2.0/Shell'
14981
+ import { pageview } from '../../../../utilities/gtag'
14982
+
14983
+ const Issue = (props) => {
14984
+ const { pubIssue, cache } = props
14985
+ const targeting = {
14986
+ content_placement: [`/publications/${pubIssue.identifier.current}/${pubIssue.issue.identifier.current}`],
14987
+ document_url: [`/publications/${pubIssue.identifier.current}/${pubIssue.issue.identifier.current}`],
14988
+ }
14989
+ return (
14990
+ <Shell cache={cache} settings={Settings} targeting={targeting} ads={Ads} layout='3' title={pubIssue.issue.name}>
14991
+ <IssueLanding pubIssue={pubIssue} client={client} settings={Settings} pageview={pageview} rightItems={Ads.getMobileAds(targeting)} />
14992
+ </Shell>
14993
+ )
14994
+ }
14995
+
14996
+ Issue.getInitialProps = async (ctx) => {
14997
+ const { query } = ctx
14998
+ const pubIssue = await client.fetch(getQuery('issue'), { ...query, currentDate: moment().utc().format() }
14999
+ )
15000
+ return { pubIssue }
15001
+ }
15002
+
15003
+ export default Issue
15004
+ */
15005
+
15006
+ var IssueLanding = function IssueLanding(props) {
15007
+ var pubIssue = props.pubIssue,
15008
+ client = props.client,
15009
+ settings = props.settings,
15010
+ pageview = props.pageview,
15011
+ rightItems = props.rightItems;
15012
+
15013
+ return React__default.createElement(
15014
+ 'div',
15015
+ { id: 'issueLanding' },
15016
+ React__default.createElement(Breadcrumbs$1, null),
15017
+ pubIssue.issue.displayLabel && React__default.createElement(
15018
+ 'p',
15019
+ { className: 'badge badge-primary' },
15020
+ pubIssue.issue.name
15021
+ ),
15022
+ React__default.createElement(QueueDeckExpanded, {
15023
+ client: client,
15024
+ mapping: settings.mapping,
15025
+ dataRecord: pubIssue.issue.articles,
15026
+ seoPaginate: true,
15027
+ pageview: pageview,
15028
+ columns: 'rotate',
15029
+ variant: 'top',
15030
+ autoScroll: true,
15031
+ defaultImage: settings.logo,
15032
+ showPublished: true,
15033
+ showCategory: true,
15034
+ imageHeight: 270,
15035
+ imageWidth: 480,
15036
+ rightItems: rightItems
15037
+ })
15038
+ );
15039
+ };
15040
+
14927
15041
  var PopUpModal = function PopUpModal(props) {
14928
15042
  var _ref = props.ModalImage ? React.useState(true) : React.useState(false),
14929
15043
  _ref2 = slicedToArray._slicedToArray(_ref, 2),
@@ -22767,6 +22881,8 @@ var getQuery = function getQuery(type) {
22767
22881
  return '*[\n _type == "article" \n && !(_id in path("drafts.**")) \n && defined(title) \n && defined(url) \n && url.current == $url \n ][0]{\n title,\n published,\n summary,\n thumbnail,\n ...,\n passwordLock,\n password,\n "authorDetails": authorMapping[]->{ displayName, url },\n body[] {\n ...,\n upload_doc {\n _type,\n asset->\n },\n uploadAudio {\n _type,\n asset->\n }\n },\n \'content_placement\': taxonomyMapping[]-> {\n ...,\n \'ancestor\': parent->parent->identifier,\n \'parent\': parent->identifier,\n \'name\': name,\n \'path\': identifier\n },\n documentGroup-> {\n name,\n thumbnail,\n parent->{...,parent->},\n \'path\': identifier.current\n },\n \'category\':contentCategory->{\n name\n },\n \'issue\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.issueGroup._ref][0] {\n name,\n \'path\': identifier.current,\n \'publication\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.parent._ref][0] {\n name,\n \'path\': identifier.current\n },\n \'url\' : pdf.asset-> url\n }\n \n }';
22768
22882
  case 'publication':
22769
22883
  return '*[_type == \'publication\'\n && identifier.current == $publication][0] {\n ...,\n \'issues\': *[_type == \'publication\'\n && is_visible\n && references(^._id)\n && defined(identifier)] {\n ...,\n pdf{asset->}\n } | order(year desc, month desc)\n }';
22884
+ case 'issue':
22885
+ return '*[_type == \'publication\' \n && identifier.current == $publication][0] {\n ...,\n \'issue\': *[_type == \'publication\' \n && references(^._id)\n && identifier.current == $issue][0] {\n ...,\n \'articles\': *[_type == \'article\' \n && !(_id in path("drafts.**"))\n && defined(title) \n && is_visible \n && defined(url) \n && dateTime(published) <= dateTime($currentDate) \n && references(^._id)] {\n ...,\n authorMapping[0]->,\n contentCategory->,\n issueSection-> {\n name\n }\n }\n }\n }';
22770
22886
  }
22771
22887
  };
22772
22888
 
@@ -22824,6 +22940,7 @@ exports.GridHero = GridHero;
22824
22940
  exports.Hero = Hero;
22825
22941
  exports.HighlightenVideo = HighlightenVideo;
22826
22942
  exports.HorizontalHero = HorizontalHero;
22943
+ exports.IssueLanding = IssueLanding;
22827
22944
  exports.KMTracker = KMTracker;
22828
22945
  exports.OncliveHero = OncliveHero;
22829
22946
  exports.OncliveLargeHero = OncliveLargeHero;
@@ -78,7 +78,6 @@ var loadData = function loadData(values, query, client, params, setData, setScro
78
78
  };
79
79
 
80
80
  var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage, itemsPerPage, itemIndex) {
81
-
82
81
  if (seoPaginate) {
83
82
  var path = router.asPath;
84
83
  var qrIndex = path.indexOf('?');
@@ -231,19 +230,38 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
231
230
  { className: 'p-0 mb-1' },
232
231
  article.source
233
232
  ),
234
- showCategory && article.contentCategory && React__default.createElement(
235
- 'p',
236
- {
237
- className: 'article-category',
238
- style: {
239
- background: '#3FB618',
240
- color: '#ffffff',
241
- marginBottom: '.25rem',
242
- display: 'inline-block',
243
- padding: '0 .25rem',
244
- fontSize: '.8rem'
245
- } },
246
- article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
233
+ React__default.createElement(
234
+ 'div',
235
+ { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' } },
236
+ showCategory && article.contentCategory && React__default.createElement(
237
+ 'p',
238
+ {
239
+ className: 'article-category',
240
+ style: {
241
+ background: '#3FB618',
242
+ color: '#ffffff',
243
+ marginBottom: '.25rem',
244
+ display: 'inline-block',
245
+ padding: '0 .25rem',
246
+ fontSize: '.8rem'
247
+ } },
248
+ article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
249
+ ),
250
+ article.issueSection && article.issueSection.name && React__default.createElement(
251
+ 'p',
252
+ {
253
+ className: 'issueSection',
254
+ style: {
255
+ background: '#000000 !important',
256
+ color: '#ffffff',
257
+ marginBottom: '.25rem',
258
+ marginLeft: '.25rem',
259
+ display: 'inline-block',
260
+ padding: '0 .25rem',
261
+ fontSize: '.8rem'
262
+ } },
263
+ article.issueSection.name
264
+ )
247
265
  ),
248
266
  article.summary && React__default.createElement(
249
267
  'p',
@@ -308,18 +326,38 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
308
326
  { className: 'p-0 mb-1' },
309
327
  article.source
310
328
  ),
311
- showCategory && article.contentCategory && React__default.createElement(
312
- 'p',
313
- {
314
- style: {
315
- background: '#3FB618',
316
- color: '#ffffff',
317
- marginBottom: '.25rem',
318
- display: 'inline-block',
319
- padding: '0 .25rem',
320
- fontSize: '.8rem'
321
- } },
322
- article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
329
+ React__default.createElement(
330
+ 'div',
331
+ { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' } },
332
+ showCategory && article.contentCategory && React__default.createElement(
333
+ 'p',
334
+ {
335
+ className: 'article-category',
336
+ style: {
337
+ background: '#3FB618',
338
+ color: '#ffffff',
339
+ marginBottom: '.25rem',
340
+ display: 'inline-block',
341
+ padding: '0 .25rem',
342
+ fontSize: '.8rem'
343
+ } },
344
+ article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
345
+ ),
346
+ article.issueSection && article.issueSection.name && React__default.createElement(
347
+ 'p',
348
+ {
349
+ className: 'issueSection',
350
+ style: {
351
+ background: '#000000 !important',
352
+ color: '#ffffff',
353
+ marginBottom: '.25rem',
354
+ marginLeft: '.25rem',
355
+ display: 'inline-block',
356
+ padding: '0 .25rem',
357
+ fontSize: '.8rem'
358
+ } },
359
+ article.issueSection.name
360
+ )
323
361
  ),
324
362
  article.summary && React__default.createElement(
325
363
  'p',
@@ -394,18 +432,38 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
394
432
  { className: 'p-0 mb-1' },
395
433
  article.source
396
434
  ),
397
- showCategory && article.contentCategory && React__default.createElement(
398
- 'p',
399
- {
400
- style: {
401
- background: '#3FB618',
402
- color: '#ffffff',
403
- marginBottom: '.25rem',
404
- display: 'inline-block',
405
- padding: '0 .25rem',
406
- fontSize: '.8rem'
407
- } },
408
- article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
435
+ React__default.createElement(
436
+ 'div',
437
+ { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' } },
438
+ showCategory && article.contentCategory && React__default.createElement(
439
+ 'p',
440
+ {
441
+ className: 'article-category',
442
+ style: {
443
+ background: '#3FB618',
444
+ color: '#ffffff',
445
+ marginBottom: '.25rem',
446
+ display: 'inline-block',
447
+ padding: '0 .25rem',
448
+ fontSize: '.8rem'
449
+ } },
450
+ article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
451
+ ),
452
+ article.issueSection && article.issueSection.name && React__default.createElement(
453
+ 'p',
454
+ {
455
+ className: 'issueSection',
456
+ style: {
457
+ background: '#000000 !important',
458
+ color: '#ffffff',
459
+ marginBottom: '.25rem',
460
+ marginLeft: '.25rem',
461
+ display: 'inline-block',
462
+ padding: '0 .25rem',
463
+ fontSize: '.8rem'
464
+ } },
465
+ article.issueSection.name
466
+ )
409
467
  ),
410
468
  article.summary && React__default.createElement(
411
469
  'p',
package/dist/esm/index.js CHANGED
@@ -44,6 +44,7 @@ import GroupDeck from './GroupDeck.js';
44
44
  export { default as GroupDeck } from './GroupDeck.js';
45
45
  export { default as YoutubeGroup } from './YoutubeGroup.js';
46
46
  import { Spinner as Spinner$1, Container as Container$1, Row as Row$1, Col as Col$1, Carousel, Table, Figure as Figure$1, Button as Button$1, ProgressBar, Card as Card$1, Form } from 'react-bootstrap';
47
+ import QueueDeckExpanded from './QueueDeckExpanded.js';
47
48
  export { default as QueueDeckExpanded } from './QueueDeckExpanded.js';
48
49
  import { I as IoMdArrowDropdown } from './index.esm-536609db.js';
49
50
  export { default as VideoSeriesListing } from './VideoSeriesListing.js';
@@ -8111,7 +8112,9 @@ var Video = function Video(_ref) {
8111
8112
  var node = _ref.node,
8112
8113
  accountIDs = _ref.accountIDs,
8113
8114
  _ref$autoplay = _ref.autoplay,
8114
- autoplay = _ref$autoplay === undefined ? false : _ref$autoplay;
8115
+ autoplay = _ref$autoplay === undefined ? false : _ref$autoplay,
8116
+ _ref$autoplayNextVide = _ref.autoplayNextVideo,
8117
+ autoplayNextVideo = _ref$autoplayNextVide === undefined ? function () {} : _ref$autoplayNextVide;
8115
8118
  var source = node.source,
8116
8119
  videoID = node.videoID,
8117
8120
  playlistID = node.playlistID,
@@ -8122,10 +8125,10 @@ var Video = function Video(_ref) {
8122
8125
  //console.log('success:', success.ref)
8123
8126
  var player = success.ref;
8124
8127
 
8125
- // this is video ready
8128
+ // this is video ready
8126
8129
  player.on('loadedmetadata', function (evt) {
8127
8130
  //console.log('loadedmetadata:', evt)
8128
- console.log('mediainfo:', player.mediainfo); // get the duration from here
8131
+ console.log('mediainfo:', player.mediainfo); // get the duration from here
8129
8132
  var duration = player.mediainfo.duration;
8130
8133
  var current = player.currentTime();
8131
8134
  var queue = Math.floor(duration / 10);
@@ -8156,7 +8159,7 @@ var Video = function Video(_ref) {
8156
8159
  Beam.report_beam_video('Play', main_16, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
8157
8160
  });
8158
8161
 
8159
- // pause
8162
+ // pause
8160
8163
  player.on('pause', function (evt) {
8161
8164
  var duration = player.mediainfo.duration;
8162
8165
  var current = player.currentTime();
@@ -8172,6 +8175,7 @@ var Video = function Video(_ref) {
8172
8175
  var queue = Math.floor(duration / 10);
8173
8176
  var segment = Math.floor(current / queue);
8174
8177
  Beam.report_beam_video('End', main_16, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
8178
+ autoplayNextVideo(evt);
8175
8179
  });
8176
8180
 
8177
8181
  var queueProgress = [];
@@ -8186,7 +8190,7 @@ var Video = function Video(_ref) {
8186
8190
  }
8187
8191
  });
8188
8192
 
8189
- // ad impression
8193
+ // ad impression
8190
8194
  player.on('ads-ad-started', function (evt) {
8191
8195
  var duration = player.ads.ad.duration;
8192
8196
  var id = player.ads.ad.id;
@@ -8195,7 +8199,7 @@ var Video = function Video(_ref) {
8195
8199
  Beam.report_beam_ad('AD Started', main_16, '', '', '', '', '', adType, duration, id);
8196
8200
  });
8197
8201
 
8198
- // ad ended
8202
+ // ad ended
8199
8203
  player.on('ads-ad-ended', function (evt) {
8200
8204
  var duration = player.ads.ad.duration;
8201
8205
  var id = player.ads.ad.id;
@@ -8206,15 +8210,39 @@ var Video = function Video(_ref) {
8206
8210
 
8207
8211
  if (source === 'brightcove' && accountIDs.brightcove) {
8208
8212
  if (videoID) {
8209
- return React__default.createElement(ReactPlayerLoader, { onSuccess: onVideoSuccess, accountId: accountIDs.brightcove.accountId, videoId: videoID, playerId: accountIDs.brightcove.playerId, attrs: { className: 'brightcove', autoplay: 'muted' } });
8213
+ return React__default.createElement(
8214
+ 'div',
8215
+ null,
8216
+ React__default.createElement(ReactPlayerLoader, {
8217
+ onSuccess: onVideoSuccess,
8218
+ accountId: accountIDs.brightcove.accountId,
8219
+ videoId: videoID,
8220
+ playerId: accountIDs.brightcove.playerId,
8221
+ attrs: { className: 'brightcove', autoplay: 'muted' }
8222
+ }),
8223
+ React__default.createElement(
8224
+ 'style',
8225
+ { jsx: 'true' },
8226
+ '\n .brightcove {\n position: relative;\n padding-bottom: 56.25%; /* 16:9 */\n height: 0;\n width: 100%;\n }\n .brightcove .video-js {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n '
8227
+ )
8228
+ );
8210
8229
  } else if (playlistID) {
8211
- return React__default.createElement(ReactPlayerLoader, {
8212
- accountId: accountIDs.brightcove.accountId,
8213
- playlistId: playlistID,
8214
- playerId: accountIDs.brightcove.playerId,
8215
- onSuccess: onVideoSuccess,
8216
- attrs: { className: 'brightcove brightcove-playlist', autoplay: 'muted' }
8217
- });
8230
+ return React__default.createElement(
8231
+ 'div',
8232
+ null,
8233
+ React__default.createElement(ReactPlayerLoader, {
8234
+ accountId: accountIDs.brightcove.accountId,
8235
+ playlistId: playlistID,
8236
+ playerId: accountIDs.brightcove.playerId,
8237
+ onSuccess: onVideoSuccess,
8238
+ attrs: { className: 'brightcove brightcove-playlist', autoplay: 'muted' }
8239
+ }),
8240
+ React__default.createElement(
8241
+ 'style',
8242
+ { jsx: 'true' },
8243
+ '\n .brightcove {\n position: relative;\n padding-bottom: 56.25%; /* 16:9 */\n height: 0;\n width: 100%;\n }\n .brightcove .video-js {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n '
8244
+ )
8245
+ );
8218
8246
  } else if (experienceID) {
8219
8247
  return React__default.createElement(
8220
8248
  'div',
@@ -13041,6 +13069,27 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13041
13069
  setState(nodes.videos[nextVid].url, '', nextVid + 1);
13042
13070
  }
13043
13071
 
13072
+ var autoplayNextVideo = function autoplayNextVideo(e) {
13073
+ //for brightcove videos
13074
+
13075
+ var currentVid = void 0;
13076
+ var nextVid = void 0;
13077
+ //Find index of video currently playing
13078
+ seriesData.forEach(function (vid, index) {
13079
+ if (vid.url === vidUrl) {
13080
+ currentVid = index;
13081
+ }
13082
+ });
13083
+ //increment +1, or if at the end of the series list, go back to the beginning
13084
+ if (currentVid + 1 >= seriesData.length) {
13085
+ nextVid = 0;
13086
+ } else {
13087
+ nextVid = currentVid + 1;
13088
+ }
13089
+ // set the new Video URL
13090
+ setState(nodes.videos[nextVid].url, '', nextVid + 1);
13091
+ };
13092
+
13044
13093
  var handlePlayPercent = function handlePlayPercent(player) {
13045
13094
  var current = player.getCurrentTime();
13046
13095
  var duration = player.getDuration();
@@ -13107,7 +13156,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13107
13156
  }
13108
13157
  }),
13109
13158
  vidUrl && vidType == 'mp4' && React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
13110
- vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs }),
13159
+ vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { autoplay: true, node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs, autoplayNextVideo: autoplayNextVideo }),
13111
13160
  React__default.createElement(
13112
13161
  'div',
13113
13162
  {
@@ -13159,7 +13208,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13159
13208
  React__default.createElement(
13160
13209
  'style',
13161
13210
  { jsx: 'true' },
13162
- '\n \n #fluid-video-container > div {\n position: relative;\n padding-bottom: 56.25%; /* 16:9 */\n height: 0;\n }\n #fluid-video-container .fluid-iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n }\n\n span.btn {\n margin: 0 1rem;\n }\n .brightcove .video-js {\n float: none;\n width: 100%;\n height: 385px;\n }\n @media screen and (max-width: 1399px) {\n .brightcove .video-js {\n height: 360px;\n }\n }\n @media screen and (max-width: 495px) {\n .brightcove .video-js {\n height: 255px;\n }\n }\n '
13211
+ '\n \n #fluid-video-container > div {\n position: relative;\n padding-bottom: 56.25%; /* 16:9 */\n height: 0;\n }\n #fluid-video-container .fluid-iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n }\n\n span.btn {\n margin: 0 1rem;\n }\n \n \n '
13163
13212
  )
13164
13213
  );
13165
13214
  };
@@ -14921,6 +14970,72 @@ var PublicationLanding = function PublicationLanding(props) {
14921
14970
  );
14922
14971
  };
14923
14972
 
14973
+ /* usage
14974
+ import Settings, { Ads } from '../../../../settings'
14975
+ import { IssueLanding, getQuery } from '@mjhls/mjh-framework'
14976
+ import client from '../../../../client'
14977
+ import moment from 'moment'
14978
+ import Shell from '../../../../components/2.0/Shell'
14979
+ import { pageview } from '../../../../utilities/gtag'
14980
+
14981
+ const Issue = (props) => {
14982
+ const { pubIssue, cache } = props
14983
+ const targeting = {
14984
+ content_placement: [`/publications/${pubIssue.identifier.current}/${pubIssue.issue.identifier.current}`],
14985
+ document_url: [`/publications/${pubIssue.identifier.current}/${pubIssue.issue.identifier.current}`],
14986
+ }
14987
+ return (
14988
+ <Shell cache={cache} settings={Settings} targeting={targeting} ads={Ads} layout='3' title={pubIssue.issue.name}>
14989
+ <IssueLanding pubIssue={pubIssue} client={client} settings={Settings} pageview={pageview} rightItems={Ads.getMobileAds(targeting)} />
14990
+ </Shell>
14991
+ )
14992
+ }
14993
+
14994
+ Issue.getInitialProps = async (ctx) => {
14995
+ const { query } = ctx
14996
+ const pubIssue = await client.fetch(getQuery('issue'), { ...query, currentDate: moment().utc().format() }
14997
+ )
14998
+ return { pubIssue }
14999
+ }
15000
+
15001
+ export default Issue
15002
+ */
15003
+
15004
+ var IssueLanding = function IssueLanding(props) {
15005
+ var pubIssue = props.pubIssue,
15006
+ client = props.client,
15007
+ settings = props.settings,
15008
+ pageview = props.pageview,
15009
+ rightItems = props.rightItems;
15010
+
15011
+ return React__default.createElement(
15012
+ 'div',
15013
+ { id: 'issueLanding' },
15014
+ React__default.createElement(Breadcrumbs$1, null),
15015
+ pubIssue.issue.displayLabel && React__default.createElement(
15016
+ 'p',
15017
+ { className: 'badge badge-primary' },
15018
+ pubIssue.issue.name
15019
+ ),
15020
+ React__default.createElement(QueueDeckExpanded, {
15021
+ client: client,
15022
+ mapping: settings.mapping,
15023
+ dataRecord: pubIssue.issue.articles,
15024
+ seoPaginate: true,
15025
+ pageview: pageview,
15026
+ columns: 'rotate',
15027
+ variant: 'top',
15028
+ autoScroll: true,
15029
+ defaultImage: settings.logo,
15030
+ showPublished: true,
15031
+ showCategory: true,
15032
+ imageHeight: 270,
15033
+ imageWidth: 480,
15034
+ rightItems: rightItems
15035
+ })
15036
+ );
15037
+ };
15038
+
14924
15039
  var PopUpModal = function PopUpModal(props) {
14925
15040
  var _ref = props.ModalImage ? useState(true) : useState(false),
14926
15041
  _ref2 = _slicedToArray(_ref, 2),
@@ -22764,7 +22879,9 @@ var getQuery = function getQuery(type) {
22764
22879
  return '*[\n _type == "article" \n && !(_id in path("drafts.**")) \n && defined(title) \n && defined(url) \n && url.current == $url \n ][0]{\n title,\n published,\n summary,\n thumbnail,\n ...,\n passwordLock,\n password,\n "authorDetails": authorMapping[]->{ displayName, url },\n body[] {\n ...,\n upload_doc {\n _type,\n asset->\n },\n uploadAudio {\n _type,\n asset->\n }\n },\n \'content_placement\': taxonomyMapping[]-> {\n ...,\n \'ancestor\': parent->parent->identifier,\n \'parent\': parent->identifier,\n \'name\': name,\n \'path\': identifier\n },\n documentGroup-> {\n name,\n thumbnail,\n parent->{...,parent->},\n \'path\': identifier.current\n },\n \'category\':contentCategory->{\n name\n },\n \'issue\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.issueGroup._ref][0] {\n name,\n \'path\': identifier.current,\n \'publication\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.parent._ref][0] {\n name,\n \'path\': identifier.current\n },\n \'url\' : pdf.asset-> url\n }\n \n }';
22765
22880
  case 'publication':
22766
22881
  return '*[_type == \'publication\'\n && identifier.current == $publication][0] {\n ...,\n \'issues\': *[_type == \'publication\'\n && is_visible\n && references(^._id)\n && defined(identifier)] {\n ...,\n pdf{asset->}\n } | order(year desc, month desc)\n }';
22882
+ case 'issue':
22883
+ return '*[_type == \'publication\' \n && identifier.current == $publication][0] {\n ...,\n \'issue\': *[_type == \'publication\' \n && references(^._id)\n && identifier.current == $issue][0] {\n ...,\n \'articles\': *[_type == \'article\' \n && !(_id in path("drafts.**"))\n && defined(title) \n && is_visible \n && defined(url) \n && dateTime(published) <= dateTime($currentDate) \n && references(^._id)] {\n ...,\n authorMapping[0]->,\n contentCategory->,\n issueSection-> {\n name\n }\n }\n }\n }';
22767
22884
  }
22768
22885
  };
22769
22886
 
22770
- export { AD300x250, AD300x250x600, ADFloatingFooter, ADFooter, ADGutter, ADWelcome, AccordionPanel, AdSlotsProvider, AlphabeticList, ArticleQueue, auth as Auth, Breadcrumbs$1 as Breadcrumbs, CMEDeck, ConferenceArticleCard, EventsDeck, Feature, fbsHero as ForbesHero, GridHero, Hero, HighlightenVideo, HorizontalHero, KMTracker, OncliveHero, OncliveLargeHero, PdfDownload, PopUpModal, PublicationLanding, RelatedContent, RelatedTopicsDropdown, SetCookie, SocialShare$1 as SocialShare, VerticalHero, View, YahooHero, getKeywords, getQuery, getSerializers, getSeriesDetail, getTargeting, urlFor$5 as urlFor };
22887
+ export { AD300x250, AD300x250x600, ADFloatingFooter, ADFooter, ADGutter, ADWelcome, AccordionPanel, AdSlotsProvider, AlphabeticList, ArticleQueue, auth as Auth, Breadcrumbs$1 as Breadcrumbs, CMEDeck, ConferenceArticleCard, EventsDeck, Feature, fbsHero as ForbesHero, GridHero, Hero, HighlightenVideo, HorizontalHero, IssueLanding, KMTracker, OncliveHero, OncliveLargeHero, PdfDownload, PopUpModal, PublicationLanding, RelatedContent, RelatedTopicsDropdown, SetCookie, SocialShare$1 as SocialShare, VerticalHero, View, YahooHero, getKeywords, getQuery, getSerializers, getSeriesDetail, getTargeting, urlFor$5 as urlFor };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mjhls/mjh-framework",
3
- "version": "1.0.430",
3
+ "version": "1.0.432",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",