Layout and scanner improvements
This commit is contained in:
parent
e09d80c9fc
commit
1d5ca69701
|
@ -30,12 +30,14 @@
|
|||
"fs-extra": "^8.1.0",
|
||||
"graphql-tag": "^2.10.1",
|
||||
"image-size": "^0.7.4",
|
||||
"img-type": "^0.1.13",
|
||||
"image-type": "^4.1.0",
|
||||
"is-image": "^3.0.0",
|
||||
"jsonwebtoken": "^8.5.1",
|
||||
"lodash": "^4.17.14",
|
||||
"neo4j-driver": "^1.7.3",
|
||||
"neo4j-graphql-js": "^2.6.3",
|
||||
"node-fetch": "^2.3.0",
|
||||
"read-chunk": "^3.2.0",
|
||||
"regenerator-runtime": "^0.13.2",
|
||||
"sharp": "^0.22.1",
|
||||
"uuid": "^3.3.2"
|
||||
|
|
|
@ -2,14 +2,31 @@ import fs from 'fs-extra'
|
|||
import path from 'path'
|
||||
import { resolve as pathResolve, basename as pathBasename } from 'path'
|
||||
import { PubSub } from 'apollo-server'
|
||||
import imgType from 'img-type'
|
||||
import uuid from 'uuid'
|
||||
import { exiftool } from 'exiftool-vendored'
|
||||
import sharp from 'sharp'
|
||||
import readChunk from 'read-chunk'
|
||||
import imageType from 'image-type'
|
||||
import config from './config'
|
||||
|
||||
export const EVENT_SCANNER_PROGRESS = 'SCANNER_PROGRESS'
|
||||
|
||||
const isImage = async path => {
|
||||
const buffer = await readChunk(path, 0, 12)
|
||||
const type = imageType(buffer)
|
||||
|
||||
return type != null
|
||||
}
|
||||
|
||||
const isRawImage = async path => {
|
||||
const buffer = await readChunk(path, 0, 12)
|
||||
const { ext } = imageType(buffer)
|
||||
|
||||
const rawTypes = ['cr2', 'arw', 'crw', 'dng']
|
||||
|
||||
return rawTypes.includes(ext)
|
||||
}
|
||||
|
||||
class PhotoScanner {
|
||||
constructor(driver) {
|
||||
this.driver = driver
|
||||
|
@ -146,7 +163,7 @@ class PhotoScanner {
|
|||
continue
|
||||
}
|
||||
|
||||
if (!foundImage && (await imgType.isImg(itemPath))) {
|
||||
if (!foundImage && (await isImage(itemPath))) {
|
||||
foundImage = true
|
||||
}
|
||||
}
|
||||
|
@ -167,7 +184,7 @@ class PhotoScanner {
|
|||
for (const item of list) {
|
||||
const itemPath = pathResolve(path, item)
|
||||
|
||||
if (await imgType.isImg(itemPath)) {
|
||||
if (await isImage(itemPath)) {
|
||||
const session = this.driver.session()
|
||||
|
||||
const photoResult = await session.run(
|
||||
|
@ -217,13 +234,9 @@ class PhotoScanner {
|
|||
await fs.remove(imagePath)
|
||||
await fs.mkdirp(imagePath)
|
||||
|
||||
const type = await imgType.getType(photo.path)
|
||||
|
||||
let resizeBaseImg = photo.path
|
||||
|
||||
const rawTypes = ['cr2', 'arw', 'crw', 'dng']
|
||||
|
||||
if (rawTypes.includes(type)) {
|
||||
if (await isRawImage(photo.path)) {
|
||||
console.log('Processing RAW image')
|
||||
|
||||
const extractedPath = path.resolve(imagePath, 'extracted.jpg')
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React, { Component } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const Container = styled.div`
|
||||
height: 100%;
|
||||
|
@ -11,9 +12,9 @@ const LeftSidebar = styled.div`
|
|||
height: 100%;
|
||||
width: 80px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
background-color: #eee;
|
||||
padding-top: 10px;
|
||||
`
|
||||
|
||||
const RightSidebar = styled.div`
|
||||
|
@ -21,23 +22,55 @@ const RightSidebar = styled.div`
|
|||
width: 500px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #eee;
|
||||
top: 60px;
|
||||
background-color: white;
|
||||
`
|
||||
|
||||
const Content = styled.div`
|
||||
margin-top: 60px;
|
||||
margin-left: 80px;
|
||||
margin-right: 500px;
|
||||
padding: 0 8px;
|
||||
padding: 12px 8px 0;
|
||||
`
|
||||
|
||||
const SideButton = styled(Link)`
|
||||
border: 1px solid #eee;
|
||||
text-align: center;
|
||||
padding-top: 17px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 10px;
|
||||
`
|
||||
|
||||
const Header = styled.div`
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: white;
|
||||
top: 0;
|
||||
/* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
||||
`
|
||||
|
||||
const Title = styled.h1`
|
||||
font-size: 36px;
|
||||
padding: 5px 12px;
|
||||
`
|
||||
|
||||
class Layout extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<LeftSidebar>Left</LeftSidebar>
|
||||
<LeftSidebar>
|
||||
<SideButton to="/">Albums</SideButton>
|
||||
</LeftSidebar>
|
||||
<Content>{this.props.children}</Content>
|
||||
<RightSidebar>Right</RightSidebar>
|
||||
<Header>
|
||||
<Title>Photoview</Title>
|
||||
</Header>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -91,10 +91,13 @@ class AlbumPage extends Component {
|
|||
})
|
||||
|
||||
return (
|
||||
<Gallery>
|
||||
{photos}
|
||||
<PhotoFiller />
|
||||
</Gallery>
|
||||
<div>
|
||||
<h1>{data.album.title}</h1>
|
||||
<Gallery>
|
||||
{photos}
|
||||
<PhotoFiller />
|
||||
</Gallery>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</Query>
|
||||
|
|
|
@ -19,6 +19,13 @@ const getAlbumsQuery = gql`
|
|||
}
|
||||
`
|
||||
|
||||
const Container = styled.div`
|
||||
margin: -10px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
min-height: 500px;
|
||||
`
|
||||
|
||||
const AlbumBoxLink = styled(Link)`
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
|
@ -41,7 +48,7 @@ const AlbumBoxImage = styled.div`
|
|||
class Albums extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={{ position: 'relative', minHeight: '500px' }}>
|
||||
<Container>
|
||||
<Query query={getAlbumsQuery}>
|
||||
{({ loading, error, data }) => {
|
||||
// if (loading) return <Loader active />
|
||||
|
@ -52,7 +59,9 @@ class Albums extends Component {
|
|||
if (data && data.myAlbums) {
|
||||
albums = data.myAlbums.map(album => (
|
||||
<AlbumBoxLink key={album.id} to={`/album/${album.id}`}>
|
||||
<AlbumBoxImage image={album.photos[0].thumbnail.path} />
|
||||
<AlbumBoxImage
|
||||
image={album.photos[0] && album.photos[0].thumbnail.path}
|
||||
/>
|
||||
<p>{album.title}</p>
|
||||
</AlbumBoxLink>
|
||||
))
|
||||
|
@ -76,7 +85,7 @@ class Albums extends Component {
|
|||
)
|
||||
}}
|
||||
</Query>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,7 +6,7 @@ class HomePage extends Component {
|
|||
render() {
|
||||
return (
|
||||
<Layout>
|
||||
<h1>Home</h1>
|
||||
<h1>Albums</h1>
|
||||
<Albums />
|
||||
</Layout>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue