@prozilla-os/media-viewer 1.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Sieben De Beule
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/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

package/dist/assets/main.css

@@ -0,0 +1 @@
+._MediaViewer_12qrj_1{display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem}._MediaViewer_12qrj_1 img{width:100%;height:100%;object-fit:contain}

package/dist/main.d.ts

@@ -0,0 +1,11 @@
+import { App } from '@prozilla-os/core';
+import { VirtualFile } from '@prozilla-os/core';
+import { WindowProps } from '@prozilla-os/core';
+
+export declare const mediaViewer: App<MediaViewerProps>;
+
+declare interface MediaViewerProps extends WindowProps {
+    file?: VirtualFile;
+}
+
+export { }

package/dist/main.js

@@ -0,0 +1,24 @@
+import { useSystemManager as p, useWindowsManager as u, AppsConfig as a, IMAGE_EXTENSIONS as t, App as c } from "@prozilla-os/core";
+import { jsx as i } from "react/jsx-runtime";
+import { useEffect as l } from "react";
+import './assets/main.css';const m = "_MediaViewer_12qrj_1", f = {
+  MediaViewer: m
+};
+function w({ file: e, close: n, setTitle: r }) {
+  const { appsConfig: d } = p(), s = u();
+  if (l(() => {
+    e != null && (r == null || r(e.id));
+  }, [e, r]), e == null) {
+    const o = d.getAppByRole(a.APP_ROLES.FileExplorer);
+    setTimeout(() => {
+      o != null && (s == null || s.open(o.id, { path: "~/Pictures" })), n == null || n();
+    }, 10);
+    return;
+  }
+  return e.extension == null || !t.includes(e.extension) ? /* @__PURE__ */ i("p", { children: "Invalid file format." }) : e.source == null ? /* @__PURE__ */ i("p", { children: "File failed to load." }) : /* @__PURE__ */ i("div", { className: f.MediaViewer, children: /* @__PURE__ */ i("img", { src: e.source, alt: e.id, draggable: "false" }) });
+}
+const A = new c("Media Viewer", "media-viewer", w).setIconUrl("https://os.prozilla.dev/assets/apps/icons/media-viewer.svg").setRole(a.APP_ROLES.MediaViewer).setAssociatedExtensions(t);
+export {
+  A as mediaViewer
+};
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../src/components/MediaViewer.tsx","../src/main.ts"],"sourcesContent":["import { useEffect } from \"react\";\r\nimport styles from \"./MediaViewer.module.css\";\r\nimport { AppsConfig, IMAGE_EXTENSIONS, useSystemManager, useWindowsManager, VirtualFile, WindowProps } from \"@prozilla-os/core\";\r\n\r\nexport interface MediaViewerProps extends WindowProps {\r\n\tfile?: VirtualFile;\r\n}\r\n\r\nexport function MediaViewer({ file, close, setTitle }: MediaViewerProps) {\r\n\tconst { appsConfig } = useSystemManager();\r\n\tconst windowsManager = useWindowsManager();\r\n\r\n\tuseEffect(() => {\r\n\t\tif (file != null) setTitle?.(file.id);\r\n\t}, [file, setTitle]);\r\n\r\n\tif (file == null) {\r\n\t\tconst fileExplorerApp = appsConfig.getAppByRole(AppsConfig.APP_ROLES.FileExplorer);\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\tif (fileExplorerApp != null)\r\n\t\t\t\twindowsManager?.open(fileExplorerApp.id, { path: \"~/Pictures\" });\r\n\t\t\tclose?.();\r\n\t\t}, 10);\r\n\t\treturn;\r\n\t}\r\n\r\n\tif (file.extension == null || !IMAGE_EXTENSIONS.includes(file.extension)) return <p>Invalid file format.</p>;\r\n\r\n\tif (file.source == null) return <p>File failed to load.</p>;\r\n\r\n\treturn <div className={styles.MediaViewer}>\r\n\t\t<img src={file.source} alt={file.id} draggable=\"false\"/>\r\n\t</div>;\r\n}","import { App, AppsConfig, IMAGE_EXTENSIONS } from \"@prozilla-os/core\";\r\nimport { MediaViewer, MediaViewerProps } from \"./components/MediaViewer\";\r\n\r\nconst mediaViewer = new App<MediaViewerProps>(\"Media Viewer\", \"media-viewer\", MediaViewer)\r\n\t.setIconUrl(\"https://os.prozilla.dev/assets/apps/icons/media-viewer.svg\")\r\n\t.setRole(AppsConfig.APP_ROLES.MediaViewer)\r\n\t.setAssociatedExtensions(IMAGE_EXTENSIONS);\r\n\r\nexport { mediaViewer };"],"names":["MediaViewer","file","close","setTitle","appsConfig","useSystemManager","windowsManager","useWindowsManager","useEffect","fileExplorerApp","AppsConfig","IMAGE_EXTENSIONS","jsx","styles","mediaViewer","App"],"mappings":";;;;;;AAQO,SAASA,EAAY,EAAE,MAAAC,GAAM,OAAAC,GAAO,UAAAC,KAA8B;AAClE,QAAA,EAAE,YAAAC,MAAeC,KACjBC,IAAiBC;AAMvB,MAJAC,EAAU,MAAM;AACf,IAAIP,KAAQ,SAAiBE,KAAA,QAAAA,EAAAF,EAAK;AAAA,EAAE,GAClC,CAACA,GAAME,CAAQ,CAAC,GAEfF,KAAQ,MAAM;AACjB,UAAMQ,IAAkBL,EAAW,aAAaM,EAAW,UAAU,YAAY;AAEjF,eAAW,MAAM;AAChB,MAAID,KAAmB,SACtBH,KAAA,QAAAA,EAAgB,KAAKG,EAAgB,IAAI,EAAE,MAAM,kBAC1CP,KAAA,QAAAA;AAAA,OACN,EAAE;AACL;AAAA,EACD;AAEA,SAAID,EAAK,aAAa,QAAQ,CAACU,EAAiB,SAASV,EAAK,SAAS,IAAW,gBAAAW,EAAA,KAAA,EAAE,UAAoB,uBAAA,CAAA,IAEpGX,EAAK,UAAU,OAAa,gBAAAW,EAAC,OAAE,UAAoB,uBAAA,CAAA,IAE/C,gBAAAA,EAAA,OAAA,EAAI,WAAWC,EAAO,aAC7B,UAAC,gBAAAD,EAAA,OAAA,EAAI,KAAKX,EAAK,QAAQ,KAAKA,EAAK,IAAI,WAAU,SAAO,EACvD,CAAA;AACD;AC/BA,MAAMa,IAAc,IAAIC,EAAsB,gBAAgB,gBAAgBf,CAAW,EACvF,WAAW,4DAA4D,EACvE,QAAQU,EAAW,UAAU,WAAW,EACxC,wBAAwBC,CAAgB;"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@prozilla-os/media-viewer",
+  "description": "A ProzillaOS application for viewing different kinds of media.",
+  "version": "1.0.1",
+  "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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/prozilla-os/ProzillaOS.git",
+    "directory": "packages/apps/media-viewer"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.3.1",
+    "@prozilla-os/core": "1.0.15"
+  },
+  "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": "1.0.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc && vite build"
+  }
+}