General cleanup

.vscode/settings.json

@@ -1,5 +1,3 @@
 {
-  "eslint.workingDirectories": [
+  "eslint.workingDirectories": ["ui"]
-    "ui", "api"
+}
-  ]
-}

ui/.vscode/launch.json

@@ -1,12 +0,0 @@
-{
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Chrome",
-            "type": "chrome",
-            "request": "launch",
-            "url": "http://localhost:3000",
-            "webRoot": "${workspaceRoot}/src"
-        }
-    ]
-}

ui/src/Layout.js

@@ -21,9 +21,6 @@ const adminQuery = gql`
 const Container = styled.div`
   height: 100%;
   display: flex;
-  /* margin-right: 500px; */
-  /* display: grid;
-  grid-template-columns: 80px 1fr 500px; */
 `
 
 const SideMenu = styled.div`

ui/src/Pages/SharePage/SharePage.js

@@ -1,22 +1,14 @@
-import React, { useState } from 'react'
+import gql from 'graphql-tag'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import React, { useState } from 'react'
-import RouterProps from 'react-router-prop-types'
+import { useQuery } from 'react-apollo'
 import { Route, Switch } from 'react-router-dom'
+import RouterProps from 'react-router-prop-types'
+import { Form, Header, Icon, Input, Message } from 'semantic-ui-react'
+import styled from 'styled-components'
+import { getSharePassword, saveSharePassword } from '../../authentication'
 import AlbumSharePage from './AlbumSharePage'
 import MediaSharePage from './MediaSharePage'
-import { useQuery } from 'react-apollo'
-import gql from 'graphql-tag'
-import {
-  Container,
-  Header,
-  Form,
-  Button,
-  Input,
-  Icon,
-  Message,
-} from 'semantic-ui-react'
-import { saveSharePassword, getSharePassword } from '../../authentication'
 
 const shareTokenQuery = gql`
   query SharePageToken($token: String!, $password: String) {
@@ -61,9 +53,12 @@ const shareTokenQuery = gql`
     }
     downloads {
       title
-      url
+      mediaUrl {
-      width
+        url
-      height
+        width
+        height
+        fileSize
+      }
     }
     highRes {
       url

ui/src/components/albumGallery/AlbumBoxes.js

@@ -9,7 +9,7 @@ const Container = styled.div`
   position: relative;
 `
 
-const AlbumBoxes = ({ loading, error, albums, getCustomLink }) => {
+const AlbumBoxes = ({ error, albums, getCustomLink }) => {
   if (error) return <div>Error {error.message}</div>
 
   let albumElements = []
@@ -28,12 +28,7 @@ const AlbumBoxes = ({ loading, error, albums, getCustomLink }) => {
     }
   }
 
-  return (
+  return <Container>{albumElements}</Container>
-    <Container>
-      {/* <Loader active={loading}>Loading albums</Loader> */}
-      {albumElements}
-    </Container>
-  )
 }
 
 AlbumBoxes.propTypes = {

ui/src/components/photoGallery/ProtectedMedia.js

@@ -4,14 +4,10 @@ import PropTypes from 'prop-types'
 const getProtectedUrl = url => {
   const imgUrl = new URL(url)
 
-  if (localStorage.getItem('token') == null) {
+  const tokenRegex = location.pathname.match(/^\/share\/([\d\w]+)(\/?.*)$/)
-    // Get share token if not authorized
+  if (tokenRegex) {
-
+    const token = tokenRegex[1]
-    const tokenRegex = location.pathname.match(/^\/share\/([\d\w]+)(\/?.*)$/)
+    imgUrl.searchParams.set('token', token)
-    if (tokenRegex) {
-      const token = tokenRegex[1]
-      imgUrl.searchParams.set('token', token)
-    }
   }
 
   return imgUrl.href
@@ -20,76 +16,25 @@ const getProtectedUrl = url => {
 /**
  * An image that needs authorization to load
  */
-export const ProtectedImage = ({ src, ...props }) => {
+export const ProtectedImage = ({ src, ...props }) => (
-  // const [imgSrc, setImgSrc] = useState(null)
+  <img {...props} src={getProtectedUrl(src)} crossOrigin="use-credentials" />
-
+)
-  // useEffect(() => {
-  //   if (imageCache[src]) return
-
-  //   const fetchController = new AbortController()
-  //   let canceled = false
-
-  //   setImgSrc('')
-
-  //   const imgUrl = new URL(src)
-  //   const fetchHeaders = {}
-
-  //   if (localStorage.getItem('token') == null) {
-  //     // Get share token if not authorized
-
-  //     const tokenRegex = location.pathname.match(/^\/share\/([\d\w]+)(\/?.*)$/)
-  //     if (tokenRegex) {
-  //       const token = tokenRegex[1]
-  //       imgUrl.searchParams.set('token', token)
-
-  //       const tokenPassword = sessionStorage.getItem(`share-token-pw-${token}`)
-  //       if (tokenPassword) {
-  //         fetchHeaders['TokenPassword'] = tokenPassword
-  //       }
-  //     }
-  //   }
-
-  //   fetchProtectedImage(imgUrl.href, {
-  //     signal: fetchController.signal,
-  //     headers: fetchHeaders,
-  //   })
-  //     .then(newSrc => {
-  //       if (!canceled) {
-  //         setImgSrc(newSrc)
-  //       }
-  //     })
-  //     .catch(error => {
-  //       console.log('Fetch image error', error.message)
-  //     })
-
-  //   return function cleanup() {
-  //     canceled = true
-  //     fetchController.abort()
-  //   }
-  // }, [src])
-
-  return (
-    <img {...props} src={getProtectedUrl(src)} crossOrigin="use-credentials" />
-  )
-}
 
 ProtectedImage.propTypes = {
   src: PropTypes.string.isRequired,
 }
 
-export const ProtectedVideo = ({ media, ...props }) => {
+export const ProtectedVideo = ({ media, ...props }) => (
-  return (
+  <video
-    <video
+    {...props}
-      {...props}
+    controls
-      controls
+    key={media.id}
-      key={media.id}
+    crossOrigin="use-credentials"
-      crossOrigin="use-credentials"
+    poster={getProtectedUrl(media.thumbnail.url)}
-      poster={getProtectedUrl(media.thumbnail.url)}
+  >
-    >
+    <source src={getProtectedUrl(media.videoWeb.url)} type="video/mp4" />
-      <source src={getProtectedUrl(media.videoWeb.url)} type="video/mp4" />
+  </video>
-    </video>
+)
-  )
-}
 
 ProtectedVideo.propTypes = {
   media: PropTypes.object.isRequired,

ui/src/components/photoGallery/presentView/PresentMedia.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { ProtectedImage, ProtectedVideo } from '../ProtectedMedia'