1 files changed, 46 insertions, 35 deletions
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index ea34bbe..9c9e311 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,68 +1,79 @@
-import React, { useState, useEffect } from 'react'
-import { generateTransform, pickCursor } from 'app/views/tile/tile.utils'
+import React, { useState, useEffect } from "react";
+import { generateTransform, pickCursor } from "app/views/tile/tile.utils";
 
-export default function TileImage({ tile, box, bounds, cursors, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave }) {
+export default function TileImage({
+  tile,
+  box,
+  bounds,
+  cursors,
+  videoBounds,
+  viewing,
+  onMouseDown,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+}) {
   const [style, setStyle] = useState({
     transition: tile.settings.is_popup ? "opacity 0.2s" : "",
     opacity: tile.settings.is_popup ? 0.0 : tile.settings.opacity,
-  })
-  const [className, setClassName] = useState("tile")
+  });
+  const [className, setClassName] = useState("tile");
 
   useEffect(() => {
     // console.log(tile)
     const style = {
       transform: generateTransform(tile, box, bounds, videoBounds),
       opacity: tile.settings.is_popup ? 0.0 : tile.settings.opacity,
-      transition: tile.settings.is_popup ? "opacity 0.2s" : ""
-    }
+      transition: tile.settings.is_popup ? "opacity 0.2s" : "",
+    };
     // console.log(generateTransform(tile))
-    let content
-    let className = ['tile', tile.type].join(' ')
+    let content;
+    let className = ["tile", tile.type].join(" ");
 
-    let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
+    let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing);
     if (cursorClass) {
-      className += " " + cursorClass
+      className += " " + cursorClass;
     }
     if (cursorStyle) {
-      style.cursor = cursorStyle
+      style.cursor = cursorStyle;
     }
 
     if (!tile.settings.url) {
-      return null
+      return;
     }
     if (tile.settings.is_tiled) {
-      style.backgroundImage = 'url(' + tile.settings.url + ')'
-      style.backgroundPosition = tile.settings.align.replace('_', ' ')
+      style.backgroundImage = "url(" + tile.settings.url + ")";
+      style.backgroundPosition = tile.settings.align.replace("_", " ");
       switch (tile.settings.tile_style) {
         default:
-        case 'tile':
-          break
-        case 'cover':
-          style.backgroundSize = 'cover'
-          break
-        case 'contain':
-          style.backgroundSize = 'contain'
-          break
-        case 'contain no-repeat':
-          style.backgroundSize = 'contain'
-          style.backgroundRepeat = 'no-repeat'
-          break
+        case "tile":
+          break;
+        case "cover":
+          style.backgroundSize = "cover";
+          break;
+        case "contain":
+          style.backgroundSize = "contain";
+          break;
+        case "contain no-repeat":
+          style.backgroundSize = "contain";
+          style.backgroundRepeat = "no-repeat";
+          break;
       }
-      className += ' is_tiled'
+      className += " is_tiled";
     } else {
-      className += ' ' + tile.settings.align
+      className += " " + tile.settings.align;
     }
-    setStyle(style)
-    setClassName(className)
+    setStyle(style);
+    setClassName(className);
     if (tile.settings.is_popup) {
       setTimeout(() => {
         setStyle({
           ...style,
           opacity: tile.settings.opacity,
-        })
-      }, 10)
+        });
+      }, 10);
     }
-  }, [])
+  }, []);
 
   return (
     <div
@@ -75,5 +86,5 @@ export default function TileImage({ tile, box, bounds, cursors, videoBounds, vie
     >
       {!tile.settings.is_tiled && <img src={tile.settings.url} />}
     </div>
-  )
+  );
 }