adding a little fade i guess

2 files changed, 63 insertions, 44 deletions

diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index c020b08..ea34bbe 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,61 +1,79 @@
-import React from 'react'
+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 }) {
-  // console.log(tile)
-  const style = {
-    transform: generateTransform(tile, box, bounds, videoBounds),
-    opacity: tile.settings.opacity,
-  }
-  // console.log(generateTransform(tile))
-  let content
-  let className = ['tile', tile.type].join(' ')
+  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")
 
-  let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
-  if (cursorClass) {
-    className += " " + cursorClass
-  }
-  if (cursorStyle) {
-    style.cursor = cursorStyle
-  }
+  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" : ""
+    }
+    // console.log(generateTransform(tile))
+    let content
+    let className = ['tile', tile.type].join(' ')
+
+    let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
+    if (cursorClass) {
+      className += " " + cursorClass
+    }
+    if (cursorStyle) {
+      style.cursor = cursorStyle
+    }
 
-  if (!tile.settings.url) {
-    return null
-  }
-  if (tile.settings.is_tiled) {
-    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
+    if (!tile.settings.url) {
+      return null
     }
-    className += ' is_tiled'
-  } else {
-    className += ' ' + tile.settings.align
-    content = <img src={tile.settings.url} />
-  }
+    if (tile.settings.is_tiled) {
+      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
+      }
+      className += ' is_tiled'
+    } else {
+      className += ' ' + tile.settings.align
+    }
+    setStyle(style)
+    setClassName(className)
+    if (tile.settings.is_popup) {
+      setTimeout(() => {
+        setStyle({
+          ...style,
+          opacity: tile.settings.opacity,
+        })
+      }, 10)
+    }
+  }, [])
 
   return (
     <div
+      style={style}
       className={className}
       onMouseDown={onMouseDown}
       onDoubleClick={onDoubleClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      style={style}
     >
-      {content}
+      {!tile.settings.is_tiled && <img src={tile.settings.url} />}
     </div>
   )
 }
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 77640ef..dfa6de7 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -19,7 +19,7 @@ export default class TileVideo extends Component {
     this.bind()
     setTimeout(() => {
       this.setState({ ready: true })
-    }, 1)
+    }, 10)
   }
 
   componentDidUpdate() {
@@ -100,6 +100,7 @@ export default class TileVideo extends Component {
     const muted = viewing
       ? (tile.settings.muted || audio.muted)
       : true
+
     return (
       <div
         className={className}