diff --git a/README.md b/README.md index 89a432e..c46d9a5 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows. - `@prozilla-os/terminal` ([source][terminal]) - Terminal/shell app - `@prozilla-os/text-editor` ([source][text-editor]) - Text editor app - `@prozilla-os/settings` ([source][settings]) - Settings app +- `@prozilla-os/media-viewer` ([source][media-viewer]) - Media viewer app ## Links @@ -64,4 +65,5 @@ These resources can help you get started with ProzillaOS. [file-explorer]: ./packages/apps/file-explorer/ [terminal]: ./packages/apps/terminal/ [text-editor]: ./packages/apps/text-editor/ -[settings]: ./packages/apps/settings/ \ No newline at end of file +[settings]: ./packages/apps/settings/ +[media-viewer]: ./packages/apps/media-viewer/ \ No newline at end of file diff --git a/packages/apps/file-explorer/README.md b/packages/apps/file-explorer/README.md index 18d9ea8..5778ea1 100644 --- a/packages/apps/file-explorer/README.md +++ b/packages/apps/file-explorer/README.md @@ -1,7 +1,7 @@

- ProzillaOS + ProzillaOS

License diff --git a/packages/apps/media-viewer/README.md b/packages/apps/media-viewer/README.md new file mode 100644 index 0000000..bc666cf --- /dev/null +++ b/packages/apps/media-viewer/README.md @@ -0,0 +1,77 @@ +

+
+

+ ProzillaOS +

+

+ License + Stars + Forks + NPM Version +

+
+ +## About + +`@prozilla-os/media-viewer` is a ProzillaOS application for viewing different kinds of media. + +## Installation + +`@prozilla-os/core` is required to run this application. + +```sh +$ npm install @prozilla-os/core @prozilla-os/media-viewer +$ yarn add @prozilla-os/core @prozilla-os/media-viewer +$ pnpm add @prozilla-os/core @prozilla-os/media-viewer +``` + +## Usage + +### Basic setup + +```tsx +import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core"; +import { mediaViewer } from "@prozilla-os/media-viewer"; + +function App() { + return ( + + + + + + + ); +} +``` + +### Window options + +```tsx +/** + * A virtual file containing media to open + */ +file: VirtualFile; +``` + +## Links + +- [Website/demo][website] +- [GitHub][github] +- [npm][npm] +- [Discord][discord] +- [Ko-fi][ko-fi] + +[website]: https://os.prozilla.dev/media-viewer +[github]: https://github.com/prozilla-os/ProzillaOS/tree/convert-to-monorepo/packages/apps/media-viewer +[npm]: https://www.npmjs.com/package/@prozilla-os/media-viewer +[discord]: https://discord.gg/JwbyQP4tdz +[ko-fi]: https://ko-fi.com/prozilla \ No newline at end of file diff --git a/packages/apps/media-viewer/config/mediaViewer.config.ts b/packages/apps/media-viewer/config/mediaViewer.config.ts deleted file mode 100644 index ad76161..0000000 --- a/packages/apps/media-viewer/config/mediaViewer.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const IMAGE_FORMATS = [ - "png", - "jpeg", - "svg", - "gif", - "webp", - "ico" -]; \ No newline at end of file diff --git a/packages/apps/media-viewer/package.json b/packages/apps/media-viewer/package.json new file mode 100644 index 0000000..516742d --- /dev/null +++ b/packages/apps/media-viewer/package.json @@ -0,0 +1,49 @@ +{ + "name": "@prozilla-os/media-viewer", + "description": "A ProzillaOS application for viewing different kinds of media.", + "version": "1.0.0", + "homepage": "https://os.prozilla.dev/media-viewer", + "author": { + "name": "Prozilla", + "email": "business@prozilla.dev", + "url": "https://prozilla.dev/" + }, + "type": "module", + "main": "dist/main.js", + "types": "dist/main.d.ts", + "scripts": { + "build": "tsc && vite build" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/prozilla-os/ProzillaOS.git", + "directory": "packages/apps/media-viewer" + }, + "license": "MIT", + "dependencies": { + "@prozilla-os/core": "workspace:*", + "anser": "^2.1.1", + "escape-carriage": "^1.3.1", + "react": "^18.3.1" + }, + "devDependencies": { + "@types/node": "^20.14.5", + "@types/react": "^18.3.3", + "@vitejs/plugin-react-swc": "^3.7.0", + "typescript": "^5.4.5", + "vite": "^5.3.1", + "vite-plugin-dts": "^3.9.1", + "vite-plugin-lib-inject-css": "^2.1.1", + "@prozilla-os/shared": "workspace:*" + }, + "files": [ + "dist" + ], + "sideEffects": [ + "**/*.css" + ], + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + } +} diff --git a/packages/apps/media-viewer/components/MediaViewer.module.css b/packages/apps/media-viewer/src/components/MediaViewer.module.css similarity index 100% rename from packages/apps/media-viewer/components/MediaViewer.module.css rename to packages/apps/media-viewer/src/components/MediaViewer.module.css diff --git a/packages/apps/media-viewer/components/MediaViewer.tsx b/packages/apps/media-viewer/src/components/MediaViewer.tsx similarity index 50% rename from packages/apps/media-viewer/components/MediaViewer.tsx rename to packages/apps/media-viewer/src/components/MediaViewer.tsx index acc7ba9..ce76d20 100644 --- a/packages/apps/media-viewer/components/MediaViewer.tsx +++ b/packages/apps/media-viewer/src/components/MediaViewer.tsx @@ -1,17 +1,13 @@ - import { useEffect } from "react"; -import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext"; import styles from "./MediaViewer.module.css"; -import { APPS } from "../../../config/apps.config"; -import { IMAGE_FORMATS } from "../../../config/apps/mediaViewer.config"; -import { VirtualFile } from "../../../features/virtual-drive/file"; -import { WindowProps } from "../../windows/WindowView"; +import { AppsConfig, IMAGE_EXTENSIONS, useSystemManager, useWindowsManager, VirtualFile, WindowProps } from "@prozilla-os/core"; -interface MediaViewerProps extends WindowProps { +export interface MediaViewerProps extends WindowProps { file?: VirtualFile; } export function MediaViewer({ file, close, setTitle }: MediaViewerProps) { + const { appsConfig } = useSystemManager(); const windowsManager = useWindowsManager(); useEffect(() => { @@ -19,14 +15,17 @@ export function MediaViewer({ file, close, setTitle }: MediaViewerProps) { }, [file, setTitle]); if (file == null) { + const fileExplorerApp = appsConfig.getAppByRole(AppsConfig.APP_ROLES.FileExplorer); + setTimeout(() => { - windowsManager?.open(APPS.FILE_EXPLORER, { path: "~/Pictures" }); + if (fileExplorerApp != null) + windowsManager?.open(fileExplorerApp.id, { path: "~/Pictures" }); close?.(); }, 10); return; } - if (file.extension == null || !IMAGE_FORMATS.includes(file.extension)) return

Invalid file format.

; + if (file.extension == null || !IMAGE_EXTENSIONS.includes(file.extension)) return

Invalid file format.

; if (file.source == null) return

File failed to load.

; diff --git a/packages/apps/media-viewer/src/main.ts b/packages/apps/media-viewer/src/main.ts new file mode 100644 index 0000000..3dcccb8 --- /dev/null +++ b/packages/apps/media-viewer/src/main.ts @@ -0,0 +1,9 @@ +import { App, AppsConfig, IMAGE_EXTENSIONS } from "@prozilla-os/core"; +import { MediaViewer, MediaViewerProps } from "./components/MediaViewer"; + +const mediaViewer = new App("Media Viewer", "media-viewer", MediaViewer) + .setIconUrl("https://os.prozilla.dev/assets/apps/icons/media-viewer.svg") + .setRole(AppsConfig.APP_ROLES.MediaViewer) + .setAssociatedExtensions(IMAGE_EXTENSIONS); + +export { mediaViewer }; \ No newline at end of file diff --git a/packages/apps/media-viewer/tsconfig.build.json b/packages/apps/media-viewer/tsconfig.build.json new file mode 100644 index 0000000..5f2ed76 --- /dev/null +++ b/packages/apps/media-viewer/tsconfig.build.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "paths": { + "@prozilla-os/core": ["packages/core/dist/main"], + "@prozilla-os/shared": ["packages/shared/dist/main"] + } + } +} \ No newline at end of file diff --git a/packages/apps/media-viewer/tsconfig.json b/packages/apps/media-viewer/tsconfig.json new file mode 100644 index 0000000..97d732b --- /dev/null +++ b/packages/apps/media-viewer/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "baseUrl": "../../..", + "composite": true, + "outDir": "dist", + "declaration": true, + "emitDeclarationOnly": true, + "noEmit": false, + "paths": { + "@prozilla-os/core": ["./node_modules/@prozilla-os/core/src/main"], + "@prozilla-os/shared": ["./node_modules/@prozilla-os/shared/src/main"] + } + }, + "include": ["src", "vite.config.ts"], + "exclude": ["node_modules"], +} \ No newline at end of file diff --git a/packages/apps/media-viewer/vite.config.ts b/packages/apps/media-viewer/vite.config.ts new file mode 100644 index 0000000..eee27b2 --- /dev/null +++ b/packages/apps/media-viewer/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from "vite"; +import { appViteConfig } from "@prozilla-os/shared"; + +export default defineConfig({ + ...appViteConfig(__dirname, "src/main.ts") +}); \ No newline at end of file diff --git a/packages/apps/settings/README.md b/packages/apps/settings/README.md index a05e27d..f3d5ff8 100644 --- a/packages/apps/settings/README.md +++ b/packages/apps/settings/README.md @@ -1,7 +1,7 @@

- ProzillaOS + ProzillaOS

License diff --git a/packages/apps/settings/package.json b/packages/apps/settings/package.json index d6e1df5..8d6dafb 100644 --- a/packages/apps/settings/package.json +++ b/packages/apps/settings/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/settings", "description": "A settings app for ProzillaOS.", - "version": "1.0.11", + "version": "1.0.0", "homepage": "https://os.prozilla.dev/settings", "author": { "name": "Prozilla", diff --git a/packages/apps/terminal/README.md b/packages/apps/terminal/README.md index 9654009..e264b1d 100644 --- a/packages/apps/terminal/README.md +++ b/packages/apps/terminal/README.md @@ -1,7 +1,7 @@


- ProzillaOS + ProzillaOS

License diff --git a/packages/apps/text-editor/README.md b/packages/apps/text-editor/README.md index f2d32fc..84c031b 100644 --- a/packages/apps/text-editor/README.md +++ b/packages/apps/text-editor/README.md @@ -1,7 +1,7 @@


- ProzillaOS + ProzillaOS

License diff --git a/packages/core/README.md b/packages/core/README.md index 392eeb3..3a5e903 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -1,7 +1,7 @@


- ProzillaOS + ProzillaOS

License diff --git a/packages/core/src/features/system/configs/appsConfig.ts b/packages/core/src/features/system/configs/appsConfig.ts index 2a28874..402fe14 100644 --- a/packages/core/src/features/system/configs/appsConfig.ts +++ b/packages/core/src/features/system/configs/appsConfig.ts @@ -16,7 +16,8 @@ export class AppsConfig { FileExplorer: "file-explorer", Terminal: "terminal", TextEditor: "text-editor", - Settings: "settings" + Settings: "settings", + MediaViewer: "media-viewer" }; constructor(options: OptionalInterface = {}) { diff --git a/packages/prozilla-os/README.md b/packages/prozilla-os/README.md index 801089f..267637a 100644 --- a/packages/prozilla-os/README.md +++ b/packages/prozilla-os/README.md @@ -1,7 +1,7 @@


- ProzillaOS + ProzillaOS

License @@ -34,6 +34,7 @@ $ pnpm add prozilla-os - [`@prozilla-os/terminal`][terminal] - Terminal/shell app - [`@prozilla-os/text-editor`][text-editor] - Text editor app - [`@prozilla-os/settings`][settings] - Settings app +- [`@prozilla-os/media-viewer`][media-viewer] - Media viewer app ## Usage @@ -184,4 +185,5 @@ function App() { [file-explorer]: https://www.npmjs.com/package/@prozilla-os/file-explorer [terminal]: https://www.npmjs.com/package/@prozilla-os/terminal [text-editor]: https://www.npmjs.com/package/@prozilla-os/text-editor -[settings]: https://www.npmjs.com/package/@prozilla-os/settings \ No newline at end of file +[settings]: https://www.npmjs.com/package/@prozilla-os/settings +[media-viewer]: https://www.npmjs.com/package/@prozilla-os/media-viewer \ No newline at end of file diff --git a/packages/prozilla-os/package.json b/packages/prozilla-os/package.json index 84c597a..f62bdc4 100644 --- a/packages/prozilla-os/package.json +++ b/packages/prozilla-os/package.json @@ -24,6 +24,7 @@ "@fortawesome/fontawesome-svg-core": "^6.5.2", "@prozilla-os/core": "workspace:*", "@prozilla-os/file-explorer": "workspace:*", + "@prozilla-os/media-viewer": "workspace:^", "@prozilla-os/settings": "workspace:^", "@prozilla-os/terminal": "workspace:*", "@prozilla-os/text-editor": "workspace:*", diff --git a/packages/prozilla-os/src/main.ts b/packages/prozilla-os/src/main.ts index 1882439..7173557 100644 --- a/packages/prozilla-os/src/main.ts +++ b/packages/prozilla-os/src/main.ts @@ -3,3 +3,4 @@ export * from "@prozilla-os/file-explorer"; export * from "@prozilla-os/terminal"; export * from "@prozilla-os/text-editor"; export * from "@prozilla-os/settings"; +export * from "@prozilla-os/media-viewer"; diff --git a/packages/shared/README.md b/packages/shared/README.md index 756b430..6503328 100644 --- a/packages/shared/README.md +++ b/packages/shared/README.md @@ -1,7 +1,7 @@


- ProzillaOS + ProzillaOS

License diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 95e02a1..c6f13e4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -140,6 +140,46 @@ importers: specifier: ^2.1.1 version: 2.1.1(vite@5.3.1(@types/node@20.14.6)(less@4.2.0)) + packages/apps/media-viewer: + dependencies: + '@prozilla-os/core': + specifier: workspace:* + version: link:../../core + anser: + specifier: ^2.1.1 + version: 2.1.1 + escape-carriage: + specifier: ^1.3.1 + version: 1.3.1 + react: + specifier: ^18.3.1 + version: 18.3.1 + devDependencies: + '@prozilla-os/shared': + specifier: workspace:* + version: link:../../shared + '@types/node': + specifier: ^20.14.5 + version: 20.14.6 + '@types/react': + specifier: ^18.3.3 + version: 18.3.3 + '@vitejs/plugin-react-swc': + specifier: ^3.7.0 + version: 3.7.0(vite@5.3.1(@types/node@20.14.6)(less@4.2.0)) + typescript: + specifier: ^5.4.5 + version: 5.4.5 + vite: + specifier: ^5.3.1 + version: 5.3.1(@types/node@20.14.6)(less@4.2.0) + vite-plugin-dts: + specifier: ^3.9.1 + version: 3.9.1(@types/node@20.14.6)(rollup@4.18.0)(typescript@5.4.5)(vite@5.3.1(@types/node@20.14.6)(less@4.2.0)) + vite-plugin-lib-inject-css: + specifier: ^2.1.1 + version: 2.1.1(vite@5.3.1(@types/node@20.14.6)(less@4.2.0)) + packages/apps/settings: dependencies: '@fortawesome/fontawesome-svg-core': @@ -335,6 +375,9 @@ importers: '@prozilla-os/file-explorer': specifier: workspace:* version: link:../apps/file-explorer + '@prozilla-os/media-viewer': + specifier: workspace:^ + version: link:../apps/media-viewer '@prozilla-os/settings': specifier: workspace:^ version: link:../apps/settings diff --git a/src/config/apps.config.ts b/src/config/apps.config.ts index 1dd3ef1..19f1e2f 100644 --- a/src/config/apps.config.ts +++ b/src/config/apps.config.ts @@ -1,4 +1,4 @@ -import { AppsConfig, fileExplorer, settings, terminal, textEditor } from "prozilla-os"; +import { AppsConfig, fileExplorer, mediaViewer, settings, terminal, textEditor } from "prozilla-os"; import { NAME } from "./branding.config"; export const appsConfig = new AppsConfig({ @@ -15,5 +15,7 @@ export const appsConfig = new AppsConfig({ settings.setName("Settings") .setDescription(`Configure ${NAME}'s settings and customize your experience.`) .setIconUrl("/assets/apps/icons/settings.svg"), + mediaViewer.setName("Photos") + .setIconUrl("/assets/apps/icons/media-viewer.svg"), ], }); \ No newline at end of file