mirror of
https://github.com/sigmasternchen/tagify
synced 2025-03-15 07:08:55 +00:00
feat: displaying images now works
This commit is contained in:
overflowerror
parent
26f93f4604
commit
b6f1c5763a
7 changed files with 102 additions and 9 deletions
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
28
src/components/MediaListItem/index.tsx
Normal file
28
src/components/MediaListItem/index.tsx
Normal 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
|
||||
33
src/components/MediaPreview/index.tsx
Normal file
33
src/components/MediaPreview/index.tsx
Normal 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
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
23
src/index.ts
23
src/index.ts
|
|
@ -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()
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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()} />
|
||||
}
|
||||
</>
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue