@mjhls/mjh-framework 1.0.242 → 1.0.244

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.242
+# mjh-framework v. 1.0.244
 
 
 > Foundation Framework

package/dist/cjs/index.js

@@ -12608,6 +12608,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       client = _ref.client,
       getSerializers = _ref.getSerializers;
 
+  var builder = index$1.imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
+
   var router = Router.useRouter();
   //state
 
@@ -12616,15 +12621,20 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       vidUrl = _useState2[0],
       setVidUrl = _useState2[1];
 
-  var _useState3 = React.useState(''),
+  var _useState3 = React.useState('youtube'),
       _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      series = _useState4[0],
-      setSeries = _useState4[1];
+      vidType = _useState4[0],
+      setVidType = _useState4[1];
 
-  var _useState5 = React.useState([]),
+  var _useState5 = React.useState(''),
       _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      seriesData = _useState6[0],
-      setData = _useState6[1];
+      series = _useState6[0],
+      setSeries = _useState6[1];
+
+  var _useState7 = React.useState([]),
+      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
+      seriesData = _useState8[0],
+      setData = _useState8[1];
   //variables
 
 
@@ -12635,19 +12645,36 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var params = new URL(document.location).searchParams;
     var seriesVid = params.get('seriesVid') || 1;
     var data = [];
+
     nodes.videos.forEach(function (vid) {
-      data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + YoutubeGroup.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+      if (vid.type == 'mp4') {
+        data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+      } else {
+        if (vid.thumbnail && vid.thumbnail.asset) {
+          data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+        } else {
+          data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + YoutubeGroup.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+        }
+      }
     });
     // if series number doesn't exist, route back to first vid of series
+
     if (data.length < seriesVid) {
       setSeries(1);
       setVidUrl(nodes.videos[0].url);
+      if (nodes.videos[0].type) {
+        setVidType(nodes.videos[0].type);
+      }
+
       var newPath = '/' + get2 + '/' + get3 + '?seriesVid=1';
       var vidState = { vid_id: seriesVid };
       window.history.pushState(vidState, '', newPath);
     } else {
       setSeries(seriesVid);
       setVidUrl(nodes.videos[seriesVid - 1].url);
+      if (nodes.videos[0].type) {
+        setVidType(nodes.videos[seriesVid - 1].type);
+      }
     }
     setData(data);
   }, []);
@@ -12717,9 +12744,14 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'div',
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
-      vidUrl && React__default.createElement(YouTube, { videoId: YoutubeGroup.getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
+      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: YoutubeGroup.getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
           return handleOnEnd(e);
-        } }),
+        } }) : React__default.createElement(
+        'video',
+        { style: { width: '100%' }, controls: true },
+        React__default.createElement('source', { src: vidUrl, type: 'video/mp4' }),
+        'Your browser does not support the video tag.'
+      ),
       React__default.createElement(
         'div',
         {
@@ -12765,7 +12797,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
         { className: 'mb-3' },
         nodes.videos[series - 1].title
       ),
-      nodes.videos[series - 1] && React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
+      nodes.videos[series - 1] && nodes.videos[series - 1].text && React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
     ),
     React__default.createElement(
       'style',
@@ -14656,7 +14688,7 @@ var RelatedContent = function RelatedContent(props) {
       dataRecord.map(function (article, index) {
         return React__default.createElement(
           'a',
-          { href: '/view/' + article.url.current, className: 'related-article' },
+          { key: index, href: '/view/' + article.url.current, className: 'related-article' },
           React__default.createElement(
             'figure',
             null,

package/dist/esm/index.js

@@ -12606,6 +12606,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       client = _ref.client,
       getSerializers = _ref.getSerializers;
 
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
+
   var router = useRouter();
   //state
 
@@ -12614,15 +12619,20 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       vidUrl = _useState2[0],
       setVidUrl = _useState2[1];
 
-  var _useState3 = useState(''),
+  var _useState3 = useState('youtube'),
       _useState4 = _slicedToArray(_useState3, 2),
-      series = _useState4[0],
-      setSeries = _useState4[1];
+      vidType = _useState4[0],
+      setVidType = _useState4[1];
 
-  var _useState5 = useState([]),
+  var _useState5 = useState(''),
       _useState6 = _slicedToArray(_useState5, 2),
-      seriesData = _useState6[0],
-      setData = _useState6[1];
+      series = _useState6[0],
+      setSeries = _useState6[1];
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      seriesData = _useState8[0],
+      setData = _useState8[1];
   //variables
 
 
@@ -12633,19 +12643,36 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var params = new URL(document.location).searchParams;
     var seriesVid = params.get('seriesVid') || 1;
     var data = [];
+
     nodes.videos.forEach(function (vid) {
-      data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+      if (vid.type == 'mp4') {
+        data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+      } else {
+        if (vid.thumbnail && vid.thumbnail.asset) {
+          data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+        } else {
+          data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+        }
+      }
     });
     // if series number doesn't exist, route back to first vid of series
+
     if (data.length < seriesVid) {
       setSeries(1);
       setVidUrl(nodes.videos[0].url);
+      if (nodes.videos[0].type) {
+        setVidType(nodes.videos[0].type);
+      }
+
       var newPath = '/' + get2 + '/' + get3 + '?seriesVid=1';
       var vidState = { vid_id: seriesVid };
       window.history.pushState(vidState, '', newPath);
     } else {
       setSeries(seriesVid);
       setVidUrl(nodes.videos[seriesVid - 1].url);
+      if (nodes.videos[0].type) {
+        setVidType(nodes.videos[seriesVid - 1].type);
+      }
     }
     setData(data);
   }, []);
@@ -12715,9 +12742,14 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'div',
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
-      vidUrl && React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
+      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
           return handleOnEnd(e);
-        } }),
+        } }) : React__default.createElement(
+        'video',
+        { style: { width: '100%' }, controls: true },
+        React__default.createElement('source', { src: vidUrl, type: 'video/mp4' }),
+        'Your browser does not support the video tag.'
+      ),
       React__default.createElement(
         'div',
         {
@@ -12763,7 +12795,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
         { className: 'mb-3' },
         nodes.videos[series - 1].title
       ),
-      nodes.videos[series - 1] && React__default.createElement(BlockContent, _extends$2({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
+      nodes.videos[series - 1] && nodes.videos[series - 1].text && React__default.createElement(BlockContent, _extends$2({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
     ),
     React__default.createElement(
       'style',
@@ -14654,7 +14686,7 @@ var RelatedContent = function RelatedContent(props) {
       dataRecord.map(function (article, index) {
         return React__default.createElement(
           'a',
-          { href: '/view/' + article.url.current, className: 'related-article' },
+          { key: index, href: '/view/' + article.url.current, className: 'related-article' },
           React__default.createElement(
             'figure',
             null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.242",
+  "version": "1.0.244",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",