Remove present view animations

ui/src/components/albumGallery/AlbumGallery.js

@@ -32,21 +32,22 @@ const AlbumGallery = ({ album, loading = false, customAlbumLink }) => {
   }, [])
 
   // On update
-  useEffect(() => {
+  // TODO: Fix hash
-    if (presenting) {
+  // useEffect(() => {
-      window.history.replaceState(
+  //   if (presenting) {
-        null,
+  //     window.history.replaceState(
-        null,
+  //       null,
-        document.location.pathname + '#' + `present=${activeImage}`
+  //       null,
-      )
+  //       document.location.pathname + '#' + `present=${activeImage}`
-    } else if (presentIndexFromHash(document.location.hash)) {
+  //     )
-      window.history.replaceState(
+  //   } else if (presentIndexFromHash(document.location.hash)) {
-        null,
+  //     window.history.replaceState(
-        null,
+  //       null,
-        document.location.pathname.split('#')[0]
+  //       null,
-      )
+  //       document.location.pathname.split('#')[0]
-    }
+  //     )
-  })
+  //   }
+  // })
 
   useEffect(() => {
     setActiveImage(-1)

ui/src/components/photoGallery/PhotoGallery.js

@@ -1,6 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
-import { animated } from 'react-spring'
-import { Transition } from 'react-spring/renderprops'
 import styled from 'styled-components'
 import { Loader } from 'semantic-ui-react'
 import { Photo } from './Photo'
@@ -42,17 +40,14 @@ const PhotoGallery = ({
       }
 
       if (e.key == 'ArrowRight') {
-        setMoveDirection('right')
         nextImage && nextImage()
       }
 
       if (e.key == 'ArrowLeft') {
-        setMoveDirection('left')
         nextImage && previousImage()
       }
 
       if (e.key == 'Escape') {
-        setMoveDirection(null)
         setPresenting(false)
       }
     }
@@ -64,8 +59,6 @@ const PhotoGallery = ({
     }
   })
 
-  const [moveDirection, setMoveDirection] = useState(null)
-
   const activeImage = photos && activeIndex != -1 && photos[activeIndex]
 
   const getPhotoElements = updateSidebar => {
@@ -103,60 +96,24 @@ const PhotoGallery = ({
     return photoElements
   }
 
-  let transformDirectionIndex = 0
-  if (moveDirection == 'right') transformDirectionIndex = 1
-  if (moveDirection == 'left') transformDirectionIndex = 2
-
-  const presentViewTransitionConfig = {
-    items: activeImage,
-    keys: x => x,
-    config: {
-      tension: 220,
-    },
-    from: {
-      opacity: 0,
-      transform: [
-        'translate(0%, 0)',
-        'translate(12%, 0)',
-        'translate(-12%, 0)',
-      ][transformDirectionIndex],
-    },
-    enter: {
-      opacity: 1,
-      transform: 'translate(0%, 0)',
-    },
-  }
-
-  const AnimatedPresentPhoto = animated(PresentPhoto)
-
   return (
     <SidebarConsumer>
       {({ updateSidebar }) => (
         <div>
-          {!presenting ? (
+          <Gallery>
-            <Gallery>
+            <Loader active={loading}>Loading images</Loader>
-              <Loader active={loading}>Loading images</Loader>
+            {getPhotoElements(updateSidebar)}
-              {getPhotoElements(updateSidebar)}
+            <PhotoFiller />
-              <PhotoFiller />
+          </Gallery>
-            </Gallery>
+          {presenting && (
-          ) : (
             <PresentContainer>
-              <Transition {...presentViewTransitionConfig}>
+              <PresentPhoto photo={activeImage} />
-                {photo => props => (
-                  <PresentPhoto
-                    thumbnail={photo && photo.thumbnail.url}
-                    photo={photo}
-                    style={props}
-                  />
-                )}
-              </Transition>
             </PresentContainer>
           )}
         </div>
       )}
     </SidebarConsumer>
   )
-  // }
 }
 
 PhotoGallery.propTypes = {

ui/src/components/photoGallery/PresentView.js

@@ -1,8 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { createGlobalStyle } from 'styled-components'
-import { Query } from 'react-apollo'
-import gql from 'graphql-tag'
 import ProtectedImage from './ProtectedImage'
 
 export const PresentContainer = ({ children, ...otherProps }) => {
@@ -26,7 +24,7 @@ export const PresentContainer = ({ children, ...otherProps }) => {
 }
 
 PresentContainer.propTypes = {
-  children: PropTypes.element,
+  children: PropTypes.any,
 }
 
 const PreventScroll = createGlobalStyle`
@@ -36,101 +34,33 @@ const PreventScroll = createGlobalStyle`
   }
 `
 
-const imageQuery = gql`
-  query presentImage($id: ID!) {
-    photo(id: $id) {
-      id
-      title
-      original {
-        width
-        height
-        url
-      }
-    }
-  }
-`
-
 const StyledPhoto = styled(ProtectedImage)`
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100vw;
   height: 100vh;
   object-fit: contain;
   object-position: center;
 `
 
-export const PresentPhoto = ({
+export const PresentPhoto = ({ photo, imageLoaded, ...otherProps }) => {
-  photo,
-  thumbnail,
-  imageLoaded,
-  ...otherProps
-}) => {
-  let [originalPhoto, setOriginalPhoto] = useState(null)
-  useEffect(() => {
-    if (!(photo && photo.id)) return
-
-    function loadOriginalPhoto() {
-      let originalPhoto = null
-
-      if (photo && photo.original && photo.original.url) {
-        originalPhoto = (
-          <StyledPhoto
-            style={{ display: 'none' }}
-            src={photo.original.url}
-            onLoad={e => {
-              e.target.style.display = 'initial'
-              imageLoaded && imageLoaded()
-            }}
-          />
-        )
-      } else {
-        originalPhoto = (
-          <Query query={imageQuery} variables={{ id: photo.id }}>
-            {({ loading, error, data }) => {
-              if (error) {
-                alert(error)
-                return null
-              }
-
-              if (data && data.photo) {
-                const photo = data.photo
-
-                return (
-                  <StyledPhoto
-                    style={{ display: 'none' }}
-                    src={photo.original.url}
-                    onLoad={e => {
-                      e.target.style.display = 'initial'
-                      imageLoaded && imageLoaded()
-                    }}
-                  />
-                )
-              }
-
-              return null
-            }}
-          </Query>
-        )
-      }
-
-      setOriginalPhoto(originalPhoto)
-    }
-
-    const timeoutHandle = setTimeout(loadOriginalPhoto, 500)
-
-    return function cleanup() {
-      clearTimeout(timeoutHandle)
-    }
-  }, [])
-
   return (
     <div {...otherProps}>
-      {originalPhoto}
+      <StyledPhoto src={photo.thumbnail.url} />
-      <StyledPhoto src={thumbnail} />
+      <StyledPhoto
+        style={{ display: 'none' }}
+        src={photo.original.url}
+        onLoad={e => {
+          e.target.style.display = 'initial'
+          imageLoaded && imageLoaded()
+        }}
+      />
     </div>
   )
 }
 
 PresentPhoto.propTypes = {
   photo: PropTypes.object,
-  thumbnail: PropTypes.string,
   imageLoaded: PropTypes.func,
 }