feat: displaying images now works

This commit is contained in:
overflowerror 2021-10-09 16:37:24 +02:00
parent 26f93f4604
commit b6f1c5763a
7 changed files with 102 additions and 9 deletions

View file

@ -1,11 +1,21 @@
import React, {FunctionComponent} from "react";
import {MediaFile} from "../../database/file";
import MediaListItem from "../MediaListItem";
export type MediaListProps = {
basePath: string,
files: MediaFile[]
}
const MediaList: FunctionComponent<MediaListProps> = () => {
const MediaList: FunctionComponent<MediaListProps> = ({basePath, files}) => {
return (
<div></div>
<div>
{
files.map(f => (
<MediaListItem basePath={basePath} file={f} />
))
}
</div>
)
}

View file

@ -0,0 +1,28 @@
import React, {FunctionComponent} from "react";
import {MediaFile} from "../../database/file";
import MediaPreview from "../MediaPreview";
export type MediaListItemProps = {
basePath: string,
file: MediaFile
}
const MediaListItem: FunctionComponent<MediaListItemProps> = ({basePath, file}) => {
return (
<div>
<MediaPreview basePath={basePath} file={file} />
<div>
Tags:
<ul>
{
file.getTags().map(t => (
<li key={t}>{t}</li>
))
}
</ul>
</div>
</div>
)
}
export default MediaListItem

View file

@ -0,0 +1,33 @@
import React, {FunctionComponent} from "react";
import {MediaFile} from "../../database/file";
import {MediaFileType} from "../../database/file-type";
export type MediaPreviewProps = {
basePath: string,
file: MediaFile
}
const MediaPreview: FunctionComponent<MediaPreviewProps> = ({basePath, file}) => {
switch (file.getType()) {
case MediaFileType.unknown:
return (
<div>
unknown file type
</div>
)
case MediaFileType.video:
return (
<div>
videos not yet supported
</div>
)
case MediaFileType.image:
return (
<div>
<img src={"media://" + basePath + "/" + file.getPath()} alt={file.getPath()} />
</div>
)
}
}
export default MediaPreview

View file

@ -1,8 +1,9 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tagify</title>
<meta http-equiv="Content-Security-Policy" content="img-src media:">
</head>
<body>
<div id="root">

View file

@ -1,4 +1,5 @@
import {app, BrowserWindow, dialog, Menu} from 'electron';
import {app, BrowserWindow, dialog, Menu, protocol, session} from 'electron'
// This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack
// plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
// whether you're running in development or production).
@ -12,13 +13,27 @@ if (require('electron-squirrel-startup')) { // eslint-disable-line global-requir
}
const createWindow = (): void => {
protocol.registerFileProtocol('media', (request, callback) => {
const pathname = decodeURI(request.url.replace('media:///', ''));
callback({ path: pathname });
})
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
'Content-Security-Policy': ['img-src media:']
}
})
})
// Create the browser window.
const mainWindow = new BrowserWindow({
height: 600,
width: 1300,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
contextIsolation: false,
}
});
@ -34,7 +49,7 @@ const createWindow = (): void => {
submenu: [
{
label: 'Open',
click: menuItem => {
click: () => {
dialog.showOpenDialog({
title: "Open Repository",
properties: [
@ -50,7 +65,7 @@ const createWindow = (): void => {
},
{
label: 'Exit',
click: menuItem => app.quit()
click: () => app.quit()
}
]
}

View file

@ -12,6 +12,10 @@ class Repository {
this.path = path
}
public getPath(): string {
return this.path
}
public async get(): Promise<Database> {
if (!this.cached) {
const buffer = await fsPromises.readFile(this.path + "/" + DB_FILE)

View file

@ -16,6 +16,8 @@ function queryFilter(query: Query, tags: string[]): Query {
return query
}
const emptyQuery = new Query([])
const Home: FunctionComponent<HomeProps> = () => {
const repository = useRepository()
@ -41,7 +43,7 @@ const Home: FunctionComponent<HomeProps> = () => {
}
}, [repository])
const query = database ? queryFilter(database.query(), tags) : new Query([])
const query = database ? queryFilter(database.query(), tags) : emptyQuery
return (
<div>
@ -57,7 +59,7 @@ const Home: FunctionComponent<HomeProps> = () => {
<></>
}
{ !selected &&
<MediaList />
<MediaList basePath={repository.getPath()} files={query.get()} />
}
</>
}