mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

General cleanup

This commit is contained in:
viktorstrate 2020-08-15 13:00:46 +02:00
parent 8e7c43798a
commit c9216a4d79
7 changed files with 36 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.vscode/settings.json vendored
View File

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

12
ui/.vscode/launch.json vendored
View File

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

3
ui/src/Layout.js
View File

@ -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`

31
ui/src/Pages/SharePage/SharePage.js
View File

@ -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
ui/src/components/albumGallery/AlbumBoxes.js
View File

@ -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 = {

91
ui/src/components/photoGallery/ProtectedMedia.js
View File

@ -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,

2
ui/src/components/photoGallery/presentView/PresentMedia.js
View File

@ -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'