various image size styles

3 files changed, 30 insertions, 22 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index b4fb9c5..af0e08c 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -109,8 +109,9 @@ export const IMAGE_BACKGROUND_SIZE_OPTIONS = [
 
 export const IMAGE_INLINE_SIZE_OPTIONS = [
   { label: 'Fullscreen', name: 'fullscreen' },
-  { label: 'Wide', name: 'wide' },
-  { label: 'Column width', name: 'column-width' },
+  { label: 'Normal', name: 'normal' },
+  { label: 'Narrow column width', name: 'narrow-column-width' },
+  { label: 'Wide column width', name: 'wide-column-width' },
 ]
 
 export const DISPLAY_SIZE = 2000
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index df30da1..ba3df4c 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -40,24 +40,25 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   }
 
   // "fullscreen-style inline images"
-  // if (annotation.settings.fullscreen) {
-  //   return (
-  //     <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
-  //       <div className="img" style={{ backgroundImage: 'url(' + url + ')'}}>
-  //         <div className="speaker-icon">{SpeakerIcon}</div>
-  //       </div>
-  //       <MediaCitation media={captionItem} />
-  //     </div>
-  //   )
-  // } else {
-  return (
-    <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
-      <div className="image-container" style={style}>
-        <img src={url} />
-        {!annotation.settings.hide_speaker_icon && <div className="speaker-icon">{SpeakerIcon}</div>}
+  if (annotation.settings.inline_size === 'fullscreen') {
+    return (
+      <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
+        <div className="img" style={{ backgroundImage: 'url(' + url + ')'}}>
+          <div className="speaker-icon">{SpeakerIcon}</div>
+        </div>
+        <MediaCitation media={captionItem} />
       </div>
-      {captionItem && <MediaCitation media={captionItem} />}
-    </div>
-  )
-  // }
+    )
+  } else {
+    const imageClassName = "image-container " + (annotation.settings.inline_size || "")
+    return (
+      <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
+        <div className={imageClassName} style={style}>
+          <img src={url} />
+          {!annotation.settings.hide_speaker_icon && <div className="speaker-icon">{SpeakerIcon}</div>}
+        </div>
+        {captionItem && <MediaCitation media={captionItem} />}
+      </div>
+    )
+  }
 }
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index e5db0ba..1bee462 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -194,12 +194,18 @@
   margin: 0 auto;
   display: inline-block;
 }
-.player-transcript .media.image img {
+.player-transcript .media.image .image-container img {
   cursor: pointer;
   display: block;
   max-width: 100%;
   max-height: calc(100vh - 7rem);
 }
+.player-transcript .media.image .image-container.wide-column-width img {
+  max-width: 80vw;
+}
+.player-transcript .media.image .image-container.narrow-column-width img {
+  max-width: 45rem;
+}
 .player-transcript .media.fullscreen .img {
   position: relative;
   width: 100vw;