Added media viewer app

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
 
@@ -65,3 +66,4 @@ These resources can help you get started with ProzillaOS.
 [terminal]: ./packages/apps/terminal/
 [text-editor]: ./packages/apps/text-editor/
 [settings]: ./packages/apps/settings/
+[media-viewer]: ./packages/apps/media-viewer/

packages/apps/file-explorer/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <br />
   <p>
-    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg" height="200" alt="ProzillaOS" /></a>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
   </p>
   <p>
     <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>

packages/apps/media-viewer/README.md

@@ -0,0 +1,77 @@
+<div align="center">
+  <br />
+  <p>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
+  </p>
+  <p>
+    <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
+    <a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
+  </p>
+</div>
+
+## 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 (
+    <ProzillaOS
+      systemName="Example"
+      tagLine="Powered by ProzillaOS"
+      config={{
+        apps: new AppsConfig({
+          apps: [ mediaViewer ]
+        })
+      }}
+    >
+      <Taskbar/>
+      <WindowsView/>
+      <ModalsView/>
+      <Desktop/>
+    </ProzillaOS>
+  );
+}
+```
+
+### 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

packages/apps/media-viewer/config/mediaViewer.config.ts

@@ -1,8 +0,0 @@
-export const IMAGE_FORMATS = [
-	"png",
-	"jpeg",
-	"svg",
-	"gif",
-	"webp",
-	"ico"
-];

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"
+	}
+}

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 { AppsConfig, IMAGE_EXTENSIONS, useSystemManager, useWindowsManager, VirtualFile, WindowProps } from "@prozilla-os/core";
-import { IMAGE_FORMATS } from "../../../config/apps/mediaViewer.config";
-import { VirtualFile } from "../../../features/virtual-drive/file";
-import { WindowProps } from "../../windows/WindowView";
 
-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 <p>Invalid file format.</p>;
+	if (file.extension == null || !IMAGE_EXTENSIONS.includes(file.extension)) return <p>Invalid file format.</p>;
 
 	if (file.source == null) return <p>File failed to load.</p>;
 

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<MediaViewerProps>("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 };

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"]
+		}
+	}
+}

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"],
+}

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")
+});

packages/apps/settings/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <br />
   <p>
-    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg" height="200" alt="ProzillaOS" /></a>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
   </p>
   <p>
     <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>

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",

packages/apps/terminal/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <br />
   <p>
-    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg" height="200" alt="ProzillaOS" /></a>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
   </p>
   <p>
     <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>

packages/apps/text-editor/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <br />
   <p>
-    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg" height="200" alt="ProzillaOS" /></a>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
   </p>
   <p>
     <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>

packages/core/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <br />
   <p>
-    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg" height="200" alt="ProzillaOS" /></a>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
   </p>
   <p>
     <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>

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<AppsConfigOptions> = {}) {

packages/prozilla-os/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <br />
   <p>
-    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg" height="200" alt="ProzillaOS" /></a>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
   </p>
   <p>
     <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
@@ -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
 
@@ -185,3 +186,4 @@ function App() {
 [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
+[media-viewer]: https://www.npmjs.com/package/@prozilla-os/media-viewer

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:*",

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";

packages/shared/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <br />
   <p>
-    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg" height="200" alt="ProzillaOS" /></a>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
   </p>
   <p>
     <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>

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

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"),
 	],
 });