Version 1.9.1, corresponding to September 2018 release of ArcGIS Online

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "cascade-storytelling-template-js-dev",
-  "version": "1.8.3",
+  "version": "1.9.1",
   "homepage": "",
   "authors": [
     "Gregory L'Azou <[email protected]>"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Storymaps-Cascade",
-  "version": "1.8.3",
+  "version": "1.9.1",
   "description": "The Story Map Cascade app lets you combine narrative text with maps, images, and multimedia content in an engaging, full-screen scrolling experience",
   "license": "Apache-2.0",
   "repository": {

src/app/storymaps/issue-checker/src/PremiumManager.js

@@ -74,7 +74,7 @@ export default class PremiumManager {
 
   _resolvePremiumContent(url) {
     let isSubscription = this._appProxySettings._isPremium(url);
-    let isPremium = this._appProxySettings._consumesCredits(url);
+    let isPremium = this._appProxySettings._isSubscriber(url);
 
     // premium content that consumes credits will return true for both of the above, but we want to differentiate the two.
     // if it is both, flag it as premium only and not subscription.

src/app/storymaps/issue-checker/src/media/Audio.js

@@ -1,3 +1,6 @@
+import IdentityManager from 'esri/IdentityManager';
+import ArcGISUtils from 'esri/arcgis/utils';
+
 import IssueTypes from './../IssueTypes';
 import Media from './Media';
 
@@ -41,7 +44,21 @@ export default class Audio extends Media {
           Audio._onAudioError(audio, resolve);
         };
 
-        trialAudio.src = [audio.id];
+        let baseURL = ArcGISUtils.arcgisUrl.split('/sharing/')[0];
+        let credential = IdentityManager.findCredential(baseURL);
+        let tokenSuffix = '';
+
+        // check if it is hosted on AGOL...
+        if (credential && this._isAGOLAudio(audio)) {
+          // only add a token if there isn't already one on there.
+          if (audio.id.indexOf('?token') === -1 && audio.id.indexOf('&token') === -1) {
+            tokenSuffix = '?token=' + credential.token;
+          }
+        }
+
+        if (audio.id) {
+          trialAudio.src = audio.id + tokenSuffix;
+        }
       });
     });
   }
@@ -55,4 +72,13 @@ export default class Audio extends Media {
     audio.errors.push(IssueTypes.audio.inaccessible);
     resolve(audio);
   }
+
+  static _isAGOLAudio(audio) {
+    if (audio.id && audio.id.match(new RegExp('\/sharing\/rest\/content\/items\/.*?\/resources\/'))) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
 }

src/app/storymaps/tpl/builder/BannerNotification.js

@@ -60,6 +60,8 @@ define([
       },
       // The number of times to show banner message before it doesn't show again.
       autohideAfter: typeof options.autohideAfter !== 'undefined' ? options.autohideAfter : 2,
+      // The number of milliseconds after which the banner will disappear.
+      fadeAfter: typeof options.fadeAfter !== 'undefined' ? options.fadeAfter : 30000,
       // The IDs of other banner notification that will block this banner from
       // showing if their hidden cookie has not been set. This allows you to
       // only show a single banner per app load.
@@ -103,6 +105,8 @@ define([
       }
     };
 
+    var bannerTimer;
+
     var isNotificationBlocked = function() {
       var isBlocked = false;
       var blockingNotifications = [].concat(settings.blockingNotifications);
@@ -408,10 +412,13 @@ define([
 
         document.querySelector('#' + settings.id + '-banner-notification-dont-show').checked = true;
         setDontShowCookie();
+        clearTimeout(bannerTimer);
       };
 
       var closeMessage = function(e) {
-        e.stopPropagation();
+        if (e && e.stopPropagation) {
+          e.stopPropagation();
+        }
 
         document.removeEventListener('keyup', escapeEvent);
         window.removeEventListener('resize', resizeMainMsg);
@@ -458,6 +465,9 @@ define([
           });
         }
 
+        // Close message if ignored by author when bannerTimer expires
+        bannerTimer = setTimeout(closeMessage, settings.fadeAfter);
+
         // Don't show again checkbox
         dontShowCheckbox.addEventListener('click', setDontShowCookie);
         dontShowCheckbox.addEventListener('keypress', function(e) {

src/app/storymaps/tpl/builder/BuilderView.js

@@ -113,40 +113,8 @@ define([
     };
 
     this.initBannerNotification = function() {
-      var stringsSurvey = i18n.builder.june2018SurveyMessage;
       var stringsHttps = i18n.builder.httpsTransitionMessage;
 
-      new BannerNotification({
-        id: 'june2018Survey',
-        bannerMsg: stringsSurvey.bannerMsg,
-        primaryColor: '#1e8a87',
-        mainMsgHtml: '\
-        <h2 class="banner-notification-text">' + stringsSurvey.s1h1 + '</h2>\
-        <p class="banner-notification-text">' + stringsSurvey.s1p1 + '</p>\
-        <p class="banner-notification-text">' + stringsSurvey.s2p1 + '</p>\
-        ',
-        actions: [
-          {
-            string: stringsSurvey.action1,
-            closeOnAction: true
-          },
-          {
-            primary: true,
-            string: stringsSurvey.action2,
-            closeOnAction: true,
-            action: function() {
-              window.open('http://links.esri.com/storymaps/june2018-survey');
-            }
-          }
-        ],
-        cookie: {
-          domain: 'arcgis.com',
-          path: '/',
-          maxAge: 60 * 60 * 24 * 365
-        }
-        // autohideAfter: new Date() > new Date(/*'July 31 2018'*/) ? 0 : 2
-      });
-
       new BannerNotification({
         id: 'httpsTransitionMessage',
         bannerMsg: stringsHttps.bannerMsg,
@@ -180,8 +148,7 @@ define([
           domain: 'arcgis.com',
           path: '/',
           maxAge: 60 * 60 * 24 * 365
-        },
-        blockingNotifications: 'june2018Survey'
+        }
       });
     };
 

src/app/storymaps/tpl/builder/mediaPicker/browsePanel/gallery/GalleryItem.jsx

@@ -198,6 +198,11 @@ function GalleryItem(props) {
         thumbUrl: props.item.thumbUrl
       });
     }
+    else if (itemType === 'audio') {
+      Object.assign(selection, {
+        url: props.item.url
+      });
+    }
     else {
       Object.assign(selection, {
         id: props.item.id
@@ -245,6 +250,8 @@ function GalleryItem(props) {
         return 'globe fa-2x';
       case constants.contentType.IMAGE:
         return 'picture-o';
+      case constants.contentType.AUDIO:
+        return 'volume-up';
       default:
         return 'star';
     }
@@ -278,7 +285,10 @@ function GalleryItem(props) {
   };
 
   var getItemThumbUrl = function(item) {
-    return item.dataUrl || item.tokenizedThumbUrl || item.thumbUrl || item.thumbnail;
+    if (item.dataUrl && item.dataUrl !== true) {
+      return item.dataUrl;
+    }
+    return item.tokenizedThumbUrl || item.thumbUrl || item.thumbnail;
   };
 
   var showItems = function() {

src/app/storymaps/tpl/builder/mediaPicker/browsePanel/providers/UrlContainer.jsx

@@ -137,6 +137,9 @@ class UrlContainer extends React.Component {
     if (nextProps.currentMedia) {
       const media = nextProps.currentMedia[nextProps.currentMedia.type];
       const appId = app.data.appItem.item.id;
+      // TODO: not sure this is sufficient to catch all images that don't come
+      // from services, and exclude the ones that do.
+      const notFromResources = media.url && (media.source === 'url' || !media.thumbUrl) && (!appId || !media.url.match(appId + '/resources'));
       switch (nextProps.currentMedia.type) {
         case 'webpage':
           var src = nextProps.currentMedia.webpage.url.replace(/^\/\//, '');
@@ -147,9 +150,7 @@ class UrlContainer extends React.Component {
           Object.assign(newState, {textInputValue});
           break;
         case 'image': {
-          // TODO: not sure this is sufficient to catch all images that don't come
-          // from services, and exclude the ones that do.
-          if (media.url && (media.source === 'url' || !media.thumbUrl) && (!appId || !media.url.match(appId + '/resources'))) {
+          if (notFromResources) {
             Object.assign(newState, {
               textInputValue: media.url.replace(/^\/\//, '')
             });
@@ -168,14 +169,11 @@ class UrlContainer extends React.Component {
           break;
         }
         case 'audio': {
-          if (media.url) {
+          if (notFromResources) {
             Object.assign(newState, {
               textInputValue: media.url.replace(/^\/\//, '')
             });
           }
-          else {
-            console.warn('audio fell through because no url');
-          }
           break;
         }
         default:

src/app/storymaps/tpl/builder/mediaPicker/browsePanel/sidePanel/FileUploader/AudioUploadHelper.jsx

@@ -0,0 +1,53 @@
+import constants from '../../../constants';
+
+/* ----- main function to export ----- */
+
+// need to return
+// {
+//    type: 'audio' // since this is the audio helper, we shouldn't have gotten here on a different media type
+//    file: the original file
+//    thumb: need some sort of datauri maybe with an icon?
+// }
+
+const loadAudioFromFile = function(file, isSingle) {
+  return new Promise((resolve, reject) => {
+    handleAudioFile(file, isSingle).then(resolve).catch(reject);
+  });
+};
+
+const handleAudioFile = function(file, isSingle) {
+  return new Promise((resolve, reject) => {
+    // do some client-side processing to make sure the gif isn't too big
+    // (either in dimensions or filesize);
+
+    // since we can't resample or resize audio client-side, first check the filesize.
+    // if it's too big, no sense in continuing...
+    if (!validateFileSize(file)) {
+      console.warn('gif file size too big!');
+      reject({reason: 'filesize'});
+      return;
+    }
+
+    resolveWithData({file, isSingle}, resolve);
+
+  });
+};
+
+/* ----- UTILITY FUNCTIONS ----- */
+
+const resolveWithData = function(options, resolve) {
+  options.img = options.img || options.canvas;
+  resolve({
+    type: 'audio',
+    file: options.file,
+    dataUrl: options.isSingle
+  });
+};
+
+const validateFileSize = function(fileOrBlob) {
+  return fileOrBlob.size <= constants.fileSettings.maxFileSize;
+};
+
+export default {
+  loadAudioFromFile
+};