feat(stories): add data download (#652)

* feat(stories): support relative links * feat(stories): add data download * feat(stories): remove duplicate story assets getter
ubilabs · Sep 28, 2020 · 8827e1d · 8827e1d
1 parent 9c7fbde
commit 8827e1d
Show file tree

Hide file tree

Showing 8 changed files with 334 additions and 15 deletions.
diff --git a/src/scripts/components/stories/splash-screen/splash-screen.tsx b/src/scripts/components/stories/splash-screen/splash-screen.tsx
@@ -1,7 +1,7 @@
 import React, {FunctionComponent} from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import {getStoryMediaUrl} from '../../../libs/get-story-media-url';
+import {getStoryAssetUrl} from '../../../libs/get-story-asset-urls';
 
 import {Slide} from '../../../types/story';
 
@@ -13,7 +13,7 @@ interface Props {
 }
 
 const SplashScreen: FunctionComponent<Props> = ({storyId, slide}) => {
-  const imageUrl = slide.images && getStoryMediaUrl(storyId, slide.images[0]);
+  const imageUrl = slide.images && getStoryAssetUrl(storyId, slide.images[0]);
 
   return (
     <div

diff --git a/src/scripts/components/stories/story-content/story-content.styl b/src/scripts/components/stories/story-content/story-content.styl
@@ -26,6 +26,11 @@
     font-size: emCalc(11px)
     font-family: NotesEsa
     line-height: normal
+
+  a
+    margin: 1em 0
+    color: $textColor
+    text-decoration: none
 
 .shortTextContent
   overflow-y: hidden

diff --git a/src/scripts/components/stories/story-content/story-content.tsx b/src/scripts/components/stories/story-content/story-content.tsx
@@ -2,7 +2,7 @@ import React, {FunctionComponent} from 'react';
 import ReactMarkdown from 'react-markdown';
 import cx from 'classnames';
 
-import {getStoryMediaUrl} from '../../../libs/get-story-media-url';
+import {getStoryAssetUrl} from '../../../libs/get-story-asset-urls';
 import {useSlide} from '../../../hooks/use-slide';
 
 import {StoryMode} from '../../../types/story-mode';
@@ -27,13 +27,17 @@ const StoryContent: FunctionComponent<Props> = ({mode, slide, storyId}) => {
   );
 
   const transformImageUri = (originalSrc: string) =>
-    getStoryMediaUrl(storyId, originalSrc);
+    getStoryAssetUrl(storyId, originalSrc);
+
+  const transformLinkUri = (originalSrc: string) =>
+    getStoryAssetUrl(storyId, originalSrc);
 
   return (
     <div className={contentClasses}>
       <ReactMarkdown
         source={storyText}
         transformImageUri={transformImageUri}
+        transformLinkUri={transformLinkUri}
         linkTarget="_blank"
         allowedTypes={[
           'heading',
@@ -45,7 +49,8 @@ const StoryContent: FunctionComponent<Props> = ({mode, slide, storyId}) => {
           'image',
           'imageReference',
           'list',
-          'listItem'
+          'listItem',
+          'link'
         ]}
       />
     </div>

diff --git a/src/scripts/components/stories/story-gallery/story-gallery.tsx b/src/scripts/components/stories/story-gallery/story-gallery.tsx
@@ -5,7 +5,7 @@ import {PreviousIcon} from '../../main/icons/previous-icon';
 import {NextIcon} from '../../main/icons/next-icon';
 import {FullscreenExitIcon} from '../../main/icons/fullscreen-exit-icon';
 import {FullscreenIcon} from '../../main/icons/fullscreen-icon';
-import {getStoryMediaUrl} from '../../../libs/get-story-media-url';
+import {getStoryAssetUrl} from '../../../libs/get-story-asset-urls';
 import {useInterval} from '../../../hooks/use-interval';
 import config from '../../../config/main';
 
@@ -90,7 +90,7 @@ const StoryMedia: FunctionComponent<Props> = ({
           }}>
           {images.map((image, index) => {
             const imageCaption = imageCaptions?.find((_, i) => i === index);
-            const imageUrl = getStoryMediaUrl(storyId, image);
+            const imageUrl = getStoryAssetUrl(storyId, image);
 
             return (
               <div

diff --git a/src/scripts/components/stories/story-list-item/story-list-item.tsx b/src/scripts/components/stories/story-list-item/story-list-item.tsx
@@ -5,7 +5,7 @@ import cx from 'classnames';
 import StoryTags from '../story-tags/story-tags';
 import {replaceUrlPlaceholders} from '../../../libs/replace-url-placeholders';
 import {DownloadButton} from '../../main/download-button/download-button';
-import {getStoryMediaUrl} from '../../../libs/get-story-media-url';
+import {getStoryAssetUrl} from '../../../libs/get-story-asset-urls';
 import config from '../../../config/main';
 
 import {StoryListItem as StoryListItemType} from '../../../types/story-list';
@@ -37,7 +37,7 @@ const StoryListItemContent: FunctionComponent<Props> = ({
     id: story.id
   });
   const downloadId = `story-${story.id}`;
-  const imageUrl = getStoryMediaUrl(story.id, story.image);
+  const imageUrl = getStoryAssetUrl(story.id, story.image);
 
   return (
     <div

diff --git a/src/scripts/libs/get-story-media-url.ts → src/scripts/libs/get-story-asset-urls.ts b/src/scripts/libs/get-story-media-url.ts → src/scripts/libs/get-story-asset-urls.ts
@@ -2,14 +2,18 @@ import {
   isElectron,
   isOffline,
   getOfflineStoryMediaUrl
-} from '../libs/electron/index';
-import {replaceUrlPlaceholders} from '../libs/replace-url-placeholders';
+} from './electron/index';
+import {replaceUrlPlaceholders} from './replace-url-placeholders';
 import config from '../config/main';
 
-export function getStoryMediaUrl(
+export function getStoryAssetUrl(
   storyId: string,
-  relativePath: string
+  path: string
 ): string {
+  if (path.startsWith('http')) {
+    return path;
+  }
+
   let baseUrl = replaceUrlPlaceholders(config.api.storyMediaBase, {
     id: storyId
   });
@@ -18,5 +22,5 @@ export function getStoryMediaUrl(
     baseUrl = replaceUrlPlaceholders(getOfflineStoryMediaUrl(), {id: storyId});
   }
 
-  return `${baseUrl}/${relativePath}`;
+  return `${baseUrl}/${path}`;
 }