From a3e027166da9ca508118cfc596c385927419404a Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 6 Aug 2020 14:42:18 +0200
Subject: different sizes of paragraph

---
 .../player/components.inline/inline.image.js       | 32 ++++++++++++----------
 1 file changed, 18 insertions(+), 14 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js')

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 f005fc0..0312a8f 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
@@ -3,11 +3,11 @@ import React, { Component } from 'react'
 export const MediaCitation = ({ media }) => {
   if (media.citation) {
     return (
-      <span dangerouslySetInnerHTML={{ _html: media.citation }} />
+      <div className='citation' dangerouslySetInnerHTML={{ _html: media.citation }} />
     )
   }
   return (
-    <span>
+    <div className='citation'>
       {media.author}
       {', '}
       {media.pre_title}
@@ -23,24 +23,28 @@ export const MediaCitation = ({ media }) => {
       {media.source && (
         ' ' + media.source.trim()
       )}
-    </span>
+    </div>
   )
 }
 
 export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   if (!media.lookup) return <div />
-  const className = currentParagraph ? 'media image current' : 'media image'
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
-  return (
-    <div
-      className={className}
-      onDoubleClick={e => onDoubleClick(e, paragraph)}
-    >
-      {"["}
-      <MediaCitation media={item} />
-      {"]"}
-    </div>
-  )
+  if (annotation.settings.fullscreen) {
+    return (
+      <div className="media image fullscreen">
+        <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}} />
+        <MediaCitation media={item} />
+      </div>
+    )
+  } else {
+    return (
+      <div className="media image">
+        <img src={item.settings.display.url} />
+        <MediaCitation media={item} />
+      </div>
+    )
+  }
 }
-- 
cgit v1.2.3-70-g09d2