various image size styles

1 files changed, 20 insertions, 19 deletions

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>
+    )
+  }
 }