From b6f1c5763ac5f64eed496f22e6656bdc7b06d30e Mon Sep 17 00:00:00 2001 From: overflowerror Date: Sat, 9 Oct 2021 16:37:24 +0200 Subject: [PATCH] feat: displaying images now works --- src/components/MediaList/index.tsx | 14 +++++++++-- src/components/MediaListItem/index.tsx | 28 ++++++++++++++++++++++ src/components/MediaPreview/index.tsx | 33 ++++++++++++++++++++++++++ src/index.html | 3 ++- src/index.ts | 23 ++++++++++++++---- src/repository/index.ts | 4 ++++ src/views/Home/index.tsx | 6 +++-- 7 files changed, 102 insertions(+), 9 deletions(-) create mode 100644 src/components/MediaListItem/index.tsx create mode 100644 src/components/MediaPreview/index.tsx diff --git a/src/components/MediaList/index.tsx b/src/components/MediaList/index.tsx index 328f643..2660e22 100644 --- a/src/components/MediaList/index.tsx +++ b/src/components/MediaList/index.tsx @@ -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 = () => { +const MediaList: FunctionComponent = ({basePath, files}) => { return ( -
+
+ { + files.map(f => ( + + )) + } +
) } diff --git a/src/components/MediaListItem/index.tsx b/src/components/MediaListItem/index.tsx new file mode 100644 index 0000000..9a99db9 --- /dev/null +++ b/src/components/MediaListItem/index.tsx @@ -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 = ({basePath, file}) => { + return ( +
+ +
+ Tags: +
    + { + file.getTags().map(t => ( +
  • {t}
    • + )) + } +
+
+
+ ) +} + +export default MediaListItem \ No newline at end of file diff --git a/src/components/MediaPreview/index.tsx b/src/components/MediaPreview/index.tsx new file mode 100644 index 0000000..f694d38 --- /dev/null +++ b/src/components/MediaPreview/index.tsx @@ -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 = ({basePath, file}) => { + switch (file.getType()) { + case MediaFileType.unknown: + return ( +
+ unknown file type +
+ ) + case MediaFileType.video: + return ( +
+ videos not yet supported +
+ ) + case MediaFileType.image: + return ( +
+ {file.getPath()} +
+ ) + } +} + +export default MediaPreview \ No newline at end of file diff --git a/src/index.html b/src/index.html index 299a2c8..28a266a 100644 --- a/src/index.html +++ b/src/index.html @@ -1,8 +1,9 @@ - + Tagify +
diff --git a/src/index.ts b/src/index.ts index 28cb31f..d52b4be 100644 --- a/src/index.ts +++ b/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() } ] } diff --git a/src/repository/index.ts b/src/repository/index.ts index 9d475ce..2b0bc25 100644 --- a/src/repository/index.ts +++ b/src/repository/index.ts @@ -12,6 +12,10 @@ class Repository { this.path = path } + public getPath(): string { + return this.path + } + public async get(): Promise { if (!this.cached) { const buffer = await fsPromises.readFile(this.path + "/" + DB_FILE) diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index 261a9ae..4b54043 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -16,6 +16,8 @@ function queryFilter(query: Query, tags: string[]): Query { return query } +const emptyQuery = new Query([]) + const Home: FunctionComponent = () => { const repository = useRepository() @@ -41,7 +43,7 @@ const Home: FunctionComponent = () => { } }, [repository]) - const query = database ? queryFilter(database.query(), tags) : new Query([]) + const query = database ? queryFilter(database.query(), tags) : emptyQuery return (
@@ -57,7 +59,7 @@ const Home: FunctionComponent = () => { <> } { !selected && - + } }