General cleanup
This commit is contained in:
parent
8e7c43798a
commit
c9216a4d79
|
@ -1,5 +1,3 @@
|
|||
{
|
||||
"eslint.workingDirectories": [
|
||||
"ui", "api"
|
||||
]
|
||||
}
|
||||
"eslint.workingDirectories": ["ui"]
|
||||
}
|
||||
|
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Chrome",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:3000",
|
||||
"webRoot": "${workspaceRoot}/src"
|
||||
}
|
||||
]
|
||||
}
|
|
@ -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`
|
||||
|
|
|
@ -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 RouterProps from 'react-router-prop-types'
|
||||
import React, { useState } from 'react'
|
||||
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
|
||||
width
|
||||
height
|
||||
mediaUrl {
|
||||
url
|
||||
width
|
||||
height
|
||||
fileSize
|
||||
}
|
||||
}
|
||||
highRes {
|
||||
url
|
||||
|
|
|
@ -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 (
|
||||
<Container>
|
||||
{/* <Loader active={loading}>Loading albums</Loader> */}
|
||||
{albumElements}
|
||||
</Container>
|
||||
)
|
||||
return <Container>{albumElements}</Container>
|
||||
}
|
||||
|
||||
AlbumBoxes.propTypes = {
|
||||
|
|
|
@ -4,14 +4,10 @@ import PropTypes from 'prop-types'
|
|||
const getProtectedUrl = url => {
|
||||
const imgUrl = new URL(url)
|
||||
|
||||
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 tokenRegex = location.pathname.match(/^\/share\/([\d\w]+)(\/?.*)$/)
|
||||
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 }) => {
|
||||
// const [imgSrc, setImgSrc] = useState(null)
|
||||
|
||||
// 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" />
|
||||
)
|
||||
}
|
||||
export const ProtectedImage = ({ src, ...props }) => (
|
||||
<img {...props} src={getProtectedUrl(src)} crossOrigin="use-credentials" />
|
||||
)
|
||||
|
||||
ProtectedImage.propTypes = {
|
||||
src: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
export const ProtectedVideo = ({ media, ...props }) => {
|
||||
return (
|
||||
<video
|
||||
{...props}
|
||||
controls
|
||||
key={media.id}
|
||||
crossOrigin="use-credentials"
|
||||
poster={getProtectedUrl(media.thumbnail.url)}
|
||||
>
|
||||
<source src={getProtectedUrl(media.videoWeb.url)} type="video/mp4" />
|
||||
</video>
|
||||
)
|
||||
}
|
||||
export const ProtectedVideo = ({ media, ...props }) => (
|
||||
<video
|
||||
{...props}
|
||||
controls
|
||||
key={media.id}
|
||||
crossOrigin="use-credentials"
|
||||
poster={getProtectedUrl(media.thumbnail.url)}
|
||||
>
|
||||
<source src={getProtectedUrl(media.videoWeb.url)} type="video/mp4" />
|
||||
</video>
|
||||
)
|
||||
|
||||
ProtectedVideo.propTypes = {
|
||||
media: PropTypes.object.isRequired,
|
||||
|
|
|
@ -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'
|
||||
|
|
Loading…
Reference in New Issue