@prozilla-os/browser 1.1.19 → 1.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.d.ts +225 -2
- package/dist/main.js +35 -34
- package/dist/main.js.map +1 -1
- package/package.json +7 -6
package/dist/main.d.ts
CHANGED
|
@@ -1,5 +1,133 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* An application that can be ran by ProzillaOS.
|
|
6
|
+
*
|
|
7
|
+
* Applications can be installed by adding them to {@link AppsConfig.apps}.
|
|
8
|
+
* @typeParam AppProps - The props of the {@link windowContent} of this app.
|
|
9
|
+
*/
|
|
10
|
+
declare class App<AppProps extends WindowProps = WindowProps> {
|
|
11
|
+
/**
|
|
12
|
+
* The display name of this application.
|
|
13
|
+
*/
|
|
14
|
+
name: string;
|
|
15
|
+
/**
|
|
16
|
+
* The unique ID of this application.
|
|
17
|
+
*/
|
|
18
|
+
id: string;
|
|
19
|
+
/**
|
|
20
|
+
* Main component that renders this app inside a window.
|
|
21
|
+
*/
|
|
22
|
+
windowContent: FC<AppProps> | null;
|
|
23
|
+
/**
|
|
24
|
+
* Default options that get passed to the {@link App.windowContent} component.
|
|
25
|
+
*/
|
|
26
|
+
windowOptions?: Partial<AppProps> & DefaultWindowOptions;
|
|
27
|
+
/**
|
|
28
|
+
* Description of this application.
|
|
29
|
+
*/
|
|
30
|
+
description: string | null;
|
|
31
|
+
/**
|
|
32
|
+
* URL of the icon of this application.
|
|
33
|
+
*/
|
|
34
|
+
iconUrl: string | null;
|
|
35
|
+
/**
|
|
36
|
+
* Defines what the app can handle and how it can be used elsewhere in the system.
|
|
37
|
+
*/
|
|
38
|
+
role: string | null;
|
|
39
|
+
/**
|
|
40
|
+
* An array of file extensions that this application can interpret.
|
|
41
|
+
*/
|
|
42
|
+
associatedExtensions: string[];
|
|
43
|
+
/**
|
|
44
|
+
* Determines whether the app is pinned by default.
|
|
45
|
+
* @default true
|
|
46
|
+
*/
|
|
47
|
+
pinnedByDefault: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Determines whether the app is launched at startup.
|
|
50
|
+
* @default false
|
|
51
|
+
*/
|
|
52
|
+
launchAtStartup: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* The category the app belongs to.
|
|
55
|
+
*/
|
|
56
|
+
category: typeof APP_CATEGORIES[number] | null;
|
|
57
|
+
/**
|
|
58
|
+
* Metadata of the app's package.
|
|
59
|
+
*/
|
|
60
|
+
metadata: AppMetadata | null;
|
|
61
|
+
/**
|
|
62
|
+
* Determines whether a desktop icon is added to the default data.
|
|
63
|
+
* @default false
|
|
64
|
+
*/
|
|
65
|
+
showDesktopIcon: boolean;
|
|
66
|
+
isActive: boolean;
|
|
67
|
+
isPinned?: boolean;
|
|
68
|
+
isInstalled: boolean;
|
|
69
|
+
constructor(name: App["name"], id: App["id"], windowContent: App<AppProps>["windowContent"], windowOptions?: Partial<AppProps> & DefaultWindowOptions);
|
|
70
|
+
/**
|
|
71
|
+
* Returns the component that renders the content of a window for this app.
|
|
72
|
+
*/
|
|
73
|
+
WindowContent: (props: AppProps) => JSX_2.Element | null;
|
|
74
|
+
/**
|
|
75
|
+
* Sets the display name of this application.
|
|
76
|
+
*/
|
|
77
|
+
setName(name: string): this;
|
|
78
|
+
/**
|
|
79
|
+
* Sets the description of this application.
|
|
80
|
+
*/
|
|
81
|
+
setDescription(description: App["description"]): this;
|
|
82
|
+
/**
|
|
83
|
+
* Sets the URL of the icon of this application.
|
|
84
|
+
*/
|
|
85
|
+
setIconUrl(iconUrl: App["iconUrl"]): this;
|
|
86
|
+
/**
|
|
87
|
+
* Sets the role of this application.
|
|
88
|
+
*/
|
|
89
|
+
setRole(role: string | null): this;
|
|
90
|
+
/**
|
|
91
|
+
* Sets the associated extensions of this application.
|
|
92
|
+
*/
|
|
93
|
+
setAssociatedExtensions(extensions: string[] | null): this;
|
|
94
|
+
/**
|
|
95
|
+
* Changes whether this application is pinned by default or not.
|
|
96
|
+
*/
|
|
97
|
+
setPinnedByDefault(pinnedByDefault: boolean): this;
|
|
98
|
+
/**
|
|
99
|
+
* Changes whether this application is launched at startup or not.
|
|
100
|
+
*/
|
|
101
|
+
setLaunchAtStartup(launchAtStartup: boolean): this;
|
|
102
|
+
/**
|
|
103
|
+
* Changes whether this application is installed by default or not.
|
|
104
|
+
*/
|
|
105
|
+
setInstalled(installed: boolean): this;
|
|
106
|
+
/**
|
|
107
|
+
* Sets the category this application belongs to.
|
|
108
|
+
*/
|
|
109
|
+
setCategory(category: typeof APP_CATEGORIES[number] | null): this;
|
|
110
|
+
/**
|
|
111
|
+
* Sets the metadata for this application.
|
|
112
|
+
*/
|
|
113
|
+
setMetadata(metadata: AppMetadata | null): this;
|
|
114
|
+
/**
|
|
115
|
+
* Changes whether this application has a desktop icon in the default data.
|
|
116
|
+
*/
|
|
117
|
+
setShowDesktopIcon(showDesktopIcon: boolean): this;
|
|
118
|
+
/**
|
|
119
|
+
* Sets the default options for the {@link App.windowContent} component.
|
|
120
|
+
*/
|
|
121
|
+
setWindowOptions(windowOptions: Partial<AppProps> & DefaultWindowOptions): this;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
declare const APP_CATEGORIES: readonly ["Business", "Developer tools", "Education", "Entertainment", "Food & dining", "Health & fitness", "Kids & family", "Lifestyle", "Media", "Medical", "Multimedia design", "Music", "Navigation & maps", "News & weather", "Personal finance", "Personalization", "Photo & video", "Productivity", "Security", "Shopping", "Social", "Sports", "Travel", "Utilities & tools"];
|
|
125
|
+
|
|
126
|
+
declare interface AppMetadata {
|
|
127
|
+
name: string;
|
|
128
|
+
version: `${number}.${number}.${number}`;
|
|
129
|
+
author: string;
|
|
130
|
+
}
|
|
3
131
|
|
|
4
132
|
export declare const browser: App<BrowserProps>;
|
|
5
133
|
|
|
@@ -7,4 +135,99 @@ declare interface BrowserProps extends WindowProps {
|
|
|
7
135
|
url?: string;
|
|
8
136
|
}
|
|
9
137
|
|
|
138
|
+
declare interface DefaultWindowOptions {
|
|
139
|
+
size?: Vector2;
|
|
140
|
+
[key: string]: unknown;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
declare class Vector2 {
|
|
144
|
+
x: number;
|
|
145
|
+
y: number;
|
|
146
|
+
constructor(xy: number);
|
|
147
|
+
constructor(x: number, y?: number);
|
|
148
|
+
static get ZERO(): Vector2;
|
|
149
|
+
get clone(): Vector2;
|
|
150
|
+
get magnitude(): number;
|
|
151
|
+
setX(x: number): this;
|
|
152
|
+
setY(y: number): this;
|
|
153
|
+
set(x: number, y: number): this;
|
|
154
|
+
round(): this;
|
|
155
|
+
normalize(): this;
|
|
156
|
+
scale(scalar: number): this;
|
|
157
|
+
getDistanceSquared(x: number, y?: number): number;
|
|
158
|
+
getDistanceSquared(vector2: Vector2): number;
|
|
159
|
+
getDistance(x: number, y?: number): number;
|
|
160
|
+
getDistance(vector2: Vector2): number;
|
|
161
|
+
add(x: number, y?: number): this;
|
|
162
|
+
add(vector2: Vector2): this;
|
|
163
|
+
subtract(x: number, y?: number): this;
|
|
164
|
+
subtract(vector2: Vector2): this;
|
|
165
|
+
multiply(x: number, y?: number): this;
|
|
166
|
+
multiply(vector2: Vector2): this;
|
|
167
|
+
divide(x: number, y?: number): this;
|
|
168
|
+
divide(vector2: Vector2): this;
|
|
169
|
+
lerp(vector2: Vector2, t: number): this;
|
|
170
|
+
static sum(vector2A: Vector2, vector2B: Vector2): Vector2;
|
|
171
|
+
static difference(vector2A: Vector2, vector2B: Vector2): Vector2;
|
|
172
|
+
static product(vector2A: Vector2, vector2B: Vector2): Vector2;
|
|
173
|
+
static division(vector2A: Vector2, vector2B: Vector2): Vector2;
|
|
174
|
+
static scale(vector2: Vector2, scalar: number): Vector2;
|
|
175
|
+
static normalize(vector2: Vector2): Vector2;
|
|
176
|
+
static lerp(vector2A: Vector2, vector2B: Vector2, t: number): Vector2;
|
|
177
|
+
static from({ x, y }: {
|
|
178
|
+
x: number;
|
|
179
|
+
y: number;
|
|
180
|
+
}): Vector2;
|
|
181
|
+
static parseVector(x: number | Vector2, y?: number): {
|
|
182
|
+
x: number;
|
|
183
|
+
y: number;
|
|
184
|
+
};
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
declare interface WindowOptions {
|
|
188
|
+
/** The ID of the window. */
|
|
189
|
+
id?: string;
|
|
190
|
+
/** The app associated with the window. */
|
|
191
|
+
app?: App;
|
|
192
|
+
/**
|
|
193
|
+
* The size of the window.
|
|
194
|
+
* @default new Vector2(700, 400)
|
|
195
|
+
*/
|
|
196
|
+
size?: Vector2;
|
|
197
|
+
/** The position of the window. */
|
|
198
|
+
position?: Vector2;
|
|
199
|
+
fullscreen?: boolean | string;
|
|
200
|
+
options?: object;
|
|
201
|
+
isFocused?: boolean;
|
|
202
|
+
lastInteraction?: number;
|
|
203
|
+
minimized?: boolean;
|
|
204
|
+
[key: string]: unknown;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
declare interface WindowProps extends WindowOptions {
|
|
208
|
+
/**
|
|
209
|
+
* Whether to start the window in fullscreen mode.
|
|
210
|
+
* @default false
|
|
211
|
+
*/
|
|
212
|
+
fullscreen?: boolean;
|
|
213
|
+
/** Function that sets the title of the window. */
|
|
214
|
+
setTitle?: React.Dispatch<React.SetStateAction<string>>;
|
|
215
|
+
/** Function that sets the icon URL of the window. */
|
|
216
|
+
setIconUrl?: React.Dispatch<React.SetStateAction<string>>;
|
|
217
|
+
/** Function that closes the window. */
|
|
218
|
+
close?: (event?: Event | React.UIEvent<HTMLElement>) => void;
|
|
219
|
+
/** Function that brings the window in focus. */
|
|
220
|
+
focus?: (event?: Event | React.UIEvent<HTMLElement>, force?: boolean) => void;
|
|
221
|
+
/** Whether the window is currently focused and should allow interactions. */
|
|
222
|
+
active?: boolean;
|
|
223
|
+
/** Whether to start the window in minimized mode. */
|
|
224
|
+
minimized?: boolean;
|
|
225
|
+
/** Function that toggles the minimized mode of the window. */
|
|
226
|
+
toggleMinimized?: (event?: Event) => void;
|
|
227
|
+
/** The depth value of the window. */
|
|
228
|
+
index?: number;
|
|
229
|
+
/** Whether the window is in standalone mode. */
|
|
230
|
+
standalone?: boolean;
|
|
231
|
+
}
|
|
232
|
+
|
|
10
233
|
export { }
|
package/dist/main.js
CHANGED
|
@@ -1,48 +1,49 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode('._Browser_rk8bv_1{--header-height: 3.5rem;--nav-bar-height: 2.25rem;display:flex;flex-direction:column;width:100%;height:100%}._Header_rk8bv_11{display:flex;flex-direction:column;width:100%;height:var(--header-height);background-color:var(--background-color-0)}._NavBar_rk8bv_19{display:flex;gap:1rem;justify-content:flex-start;align-items:center;width:100%;height:var(--nav-bar-height);padding:1.25rem}._IconButton_rk8bv_29{--color: var(--foreground-color-0);position:relative;display:flex;justify-content:center;align-items:center;height:1rem;width:auto;padding:0;background:none;border:none;outline:none;aspect-ratio:1;cursor:pointer}._IconButton_rk8bv_29:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff0;border-radius:var(--border-radius-99);transform:scale(1);transform-origin:center;transition:all var(--transition-duration-1) var(--ease-in-out-default)}._IconButton_rk8bv_29:hover:after,._IconButton_rk8bv_29:focus-visible:after{background-color:#ffffff1a;transform:scale(175%)}._IconButton_rk8bv_29:disabled{--color: var(--foreground-color-2)}._IconButton_rk8bv_29 svg{height:100%}._IconButton_rk8bv_29 svg path{fill:var(--color);transition:fill var(--transition-duration-0) var(--ease-in-out-default)}._SearchBar_rk8bv_79{flex:1;padding:.25rem .5rem;background-color:var(--background-color-2);border:none;border-radius:var(--border-radius-1);outline:none;font-family:inherit;font-size:.875em}._Bookmarks_rk8bv_90{height:calc(var(--header-height) - var(--nav-bar-height))}')),document.head.appendChild(r)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
-
import { useHistory as x, WebView as R, isValidUrl as H, App as S,
|
|
2
|
+
import { useHistory as x, WebView as R, isValidUrl as H, App as S, AppsConfig as y } from "@prozilla-os/core";
|
|
3
3
|
import { jsxs as u, jsx as e } from "react/jsx-runtime";
|
|
4
|
-
import { useState as
|
|
4
|
+
import { useState as p, useRef as A, useEffect as z } from "react";
|
|
5
5
|
import { FontAwesomeIcon as a } from "@fortawesome/react-fontawesome";
|
|
6
|
-
import { faCaretLeft as
|
|
7
|
-
|
|
6
|
+
import { faCaretLeft as E, faCaretRight as L, faRotateRight as P, faHome as V } from "@fortawesome/free-solid-svg-icons";
|
|
7
|
+
import { Vector2 as W } from "@prozilla-os/shared";
|
|
8
|
+
const $ = "_Browser_rk8bv_1", j = "_Header_rk8bv_11", F = "_NavBar_rk8bv_19", M = "_IconButton_rk8bv_29", O = "_SearchBar_rk8bv_79", U = "_Bookmarks_rk8bv_90", t = {
|
|
8
9
|
Browser: $,
|
|
9
10
|
Header: j,
|
|
10
11
|
NavBar: F,
|
|
11
12
|
IconButton: M,
|
|
12
13
|
SearchBar: O,
|
|
13
14
|
Bookmarks: U
|
|
14
|
-
},
|
|
15
|
-
function D({ url: s =
|
|
16
|
-
const [c, d] =
|
|
17
|
-
|
|
15
|
+
}, h = "https://prozilla.dev/", q = "https://www.google.com/search?igu=1";
|
|
16
|
+
function D({ url: s = h, focus: f }) {
|
|
17
|
+
const [c, d] = p(s), [v, m] = p(s), { history: i, pushState: _, stateIndex: b, undo: k, redo: w, undoAvailable: I, redoAvailable: g } = x(s), r = A(null);
|
|
18
|
+
z(() => {
|
|
18
19
|
i.length !== 0 && d(i[b]);
|
|
19
20
|
}, [i, b]);
|
|
20
21
|
const B = () => {
|
|
21
22
|
r.current == null || r.current.contentWindow == null || (r.current.contentWindow.location.href = c);
|
|
22
|
-
}, l = (
|
|
23
|
-
if (c ===
|
|
23
|
+
}, l = (o) => {
|
|
24
|
+
if (c === o)
|
|
24
25
|
return B();
|
|
25
|
-
d(
|
|
26
|
-
}, N = (
|
|
27
|
-
m(
|
|
28
|
-
}, C = (
|
|
29
|
-
const n =
|
|
30
|
-
|
|
26
|
+
d(o), m(o), _(o);
|
|
27
|
+
}, N = (o) => {
|
|
28
|
+
m(o.target.value);
|
|
29
|
+
}, C = (o) => {
|
|
30
|
+
const n = o.target.value;
|
|
31
|
+
o.key === "Enter" && n !== "" && (H(n) ? l(n) : l(`${q}&q=${n}`));
|
|
31
32
|
};
|
|
32
|
-
return /* @__PURE__ */ u("div", { className:
|
|
33
|
-
/* @__PURE__ */ u("div", { className:
|
|
34
|
-
/* @__PURE__ */ u("div", { className:
|
|
33
|
+
return /* @__PURE__ */ u("div", { className: t.Browser, children: [
|
|
34
|
+
/* @__PURE__ */ u("div", { className: t.Header, children: [
|
|
35
|
+
/* @__PURE__ */ u("div", { className: t.NavBar, children: [
|
|
35
36
|
/* @__PURE__ */ e(
|
|
36
37
|
"button",
|
|
37
38
|
{
|
|
38
39
|
title: "Back",
|
|
39
40
|
tabIndex: 0,
|
|
40
|
-
className:
|
|
41
|
+
className: t.IconButton,
|
|
41
42
|
onClick: () => {
|
|
42
43
|
k();
|
|
43
44
|
},
|
|
44
45
|
disabled: !I,
|
|
45
|
-
children: /* @__PURE__ */ e(a, { icon:
|
|
46
|
+
children: /* @__PURE__ */ e(a, { icon: E })
|
|
46
47
|
}
|
|
47
48
|
),
|
|
48
49
|
/* @__PURE__ */ e(
|
|
@@ -50,12 +51,12 @@ function D({ url: s = p, focus: v }) {
|
|
|
50
51
|
{
|
|
51
52
|
title: "Forward",
|
|
52
53
|
tabIndex: 0,
|
|
53
|
-
className:
|
|
54
|
+
className: t.IconButton,
|
|
54
55
|
onClick: () => {
|
|
55
56
|
w();
|
|
56
57
|
},
|
|
57
58
|
disabled: !g,
|
|
58
|
-
children: /* @__PURE__ */ e(a, { icon:
|
|
59
|
+
children: /* @__PURE__ */ e(a, { icon: L })
|
|
59
60
|
}
|
|
60
61
|
),
|
|
61
62
|
/* @__PURE__ */ e(
|
|
@@ -63,9 +64,9 @@ function D({ url: s = p, focus: v }) {
|
|
|
63
64
|
{
|
|
64
65
|
title: "Reload",
|
|
65
66
|
tabIndex: 0,
|
|
66
|
-
className:
|
|
67
|
+
className: t.IconButton,
|
|
67
68
|
onClick: B,
|
|
68
|
-
children: /* @__PURE__ */ e(a, { icon:
|
|
69
|
+
children: /* @__PURE__ */ e(a, { icon: P })
|
|
69
70
|
}
|
|
70
71
|
),
|
|
71
72
|
/* @__PURE__ */ e(
|
|
@@ -73,33 +74,33 @@ function D({ url: s = p, focus: v }) {
|
|
|
73
74
|
{
|
|
74
75
|
title: "Home",
|
|
75
76
|
tabIndex: 0,
|
|
76
|
-
className:
|
|
77
|
+
className: t.IconButton,
|
|
77
78
|
onClick: () => {
|
|
78
|
-
l(
|
|
79
|
+
l(h);
|
|
79
80
|
},
|
|
80
|
-
children: /* @__PURE__ */ e(a, { icon:
|
|
81
|
+
children: /* @__PURE__ */ e(a, { icon: V })
|
|
81
82
|
}
|
|
82
83
|
),
|
|
83
84
|
/* @__PURE__ */ e(
|
|
84
85
|
"input",
|
|
85
86
|
{
|
|
86
|
-
value:
|
|
87
|
+
value: v,
|
|
87
88
|
type: "text",
|
|
88
89
|
"aria-label": "Search bar",
|
|
89
|
-
className:
|
|
90
|
+
className: t.SearchBar,
|
|
90
91
|
tabIndex: 0,
|
|
91
92
|
onChange: N,
|
|
92
93
|
onKeyDown: C
|
|
93
94
|
}
|
|
94
95
|
)
|
|
95
96
|
] }),
|
|
96
|
-
/* @__PURE__ */ e("div", { className:
|
|
97
|
+
/* @__PURE__ */ e("div", { className: t.Bookmarks })
|
|
97
98
|
] }),
|
|
98
|
-
/* @__PURE__ */ e(R, { ref: r, source: c, title: "Browser", focus:
|
|
99
|
+
/* @__PURE__ */ e(R, { ref: r, source: c, title: "Browser", focus: f })
|
|
99
100
|
] });
|
|
100
101
|
}
|
|
101
|
-
const K = new S("Browser", "browser", D, { size: new
|
|
102
|
-
K.setMetadata({ name: "@prozilla-os/browser", version: "1.1.
|
|
102
|
+
const K = new S("Browser", "browser", D, { size: new W(700, 500) }).setIconUrl("https://os.prozilla.dev/assets/apps/icons/browser.svg").setRole(y.APP_ROLES.browser).setCategory("Utilities & tools");
|
|
103
|
+
K.setMetadata({ name: "@prozilla-os/browser", version: "1.1.19", author: "Prozilla" });
|
|
103
104
|
export {
|
|
104
105
|
K as browser
|
|
105
106
|
};
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/constants/browser.const.ts","../src/components/Browser.tsx","../src/main.ts"],"sourcesContent":["export const HOME_URL = \"https://prozilla.dev/\";\nexport const SEARCH_URL = \"https://www.google.com/search?igu=1\";","import { ChangeEventHandler, KeyboardEventHandler, useEffect, useRef, useState } from \"react\";\nimport styles from \"./Browser.module.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCaretLeft, faCaretRight, faHome, faRotateRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { isValidUrl, useHistory, WebView, WindowProps } from \"@prozilla-os/core\";\nimport { HOME_URL, SEARCH_URL } from \"../constants/browser.const\";\n\nexport interface BrowserProps extends WindowProps {\n\turl?: string;\n}\n\nexport function Browser({ url: startUrl = HOME_URL, focus }: BrowserProps) {\n\tconst [url, setUrl] = useState<string>(startUrl);\n\tconst [input, setInput] = useState(startUrl);\n\tconst { history, pushState, stateIndex, undo, redo, undoAvailable, redoAvailable } = useHistory(startUrl);\n\tconst ref = useRef<HTMLIFrameElement>(null);\n\n\tuseEffect(() => {\n\t\tif (history.length === 0)\n\t\t\treturn;\n\n\t\tsetUrl(history[stateIndex]);\n\t}, [history, stateIndex]);\n\n\tconst reload = () => {\n\t\tif (ref.current == null || ref.current.contentWindow == null)\n\t\t\treturn;\n\n\t\tref.current.contentWindow.location.href = url;\n\t};\n\n\tconst updateUrl = (newUrl: string) => {\n\t\tif (url === newUrl) {\n\t\t\treturn reload();\n\t\t}\n\n\t\tsetUrl(newUrl);\n\t\tsetInput(newUrl);\n\t\tpushState(newUrl);\n\t};\n\n\tconst onInputChange = (event: Event) => {\n\t\tsetInput((event.target as HTMLInputElement).value);\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\n\t\tif (event.key === \"Enter\" && value !== \"\") {\n\t\t\tif (isValidUrl(value)) {\n\t\t\t\tupdateUrl(value);\n\t\t\t} else {\n\t\t\t\tupdateUrl(`${SEARCH_URL}&q=${value}`);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/constants/browser.const.ts","../src/components/Browser.tsx","../src/main.ts"],"sourcesContent":["export const HOME_URL = \"https://prozilla.dev/\";\nexport const SEARCH_URL = \"https://www.google.com/search?igu=1\";","import { ChangeEventHandler, KeyboardEventHandler, useEffect, useRef, useState } from \"react\";\nimport styles from \"./Browser.module.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCaretLeft, faCaretRight, faHome, faRotateRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { isValidUrl, useHistory, WebView, WindowProps } from \"@prozilla-os/core\";\nimport { HOME_URL, SEARCH_URL } from \"../constants/browser.const\";\n\nexport interface BrowserProps extends WindowProps {\n\turl?: string;\n}\n\nexport function Browser({ url: startUrl = HOME_URL, focus }: BrowserProps) {\n\tconst [url, setUrl] = useState<string>(startUrl);\n\tconst [input, setInput] = useState(startUrl);\n\tconst { history, pushState, stateIndex, undo, redo, undoAvailable, redoAvailable } = useHistory(startUrl);\n\tconst ref = useRef<HTMLIFrameElement>(null);\n\n\tuseEffect(() => {\n\t\tif (history.length === 0)\n\t\t\treturn;\n\n\t\tsetUrl(history[stateIndex]);\n\t}, [history, stateIndex]);\n\n\tconst reload = () => {\n\t\tif (ref.current == null || ref.current.contentWindow == null)\n\t\t\treturn;\n\n\t\tref.current.contentWindow.location.href = url;\n\t};\n\n\tconst updateUrl = (newUrl: string) => {\n\t\tif (url === newUrl) {\n\t\t\treturn reload();\n\t\t}\n\n\t\tsetUrl(newUrl);\n\t\tsetInput(newUrl);\n\t\tpushState(newUrl);\n\t};\n\n\tconst onInputChange = (event: Event) => {\n\t\tsetInput((event.target as HTMLInputElement).value);\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\n\t\tif (event.key === \"Enter\" && value !== \"\") {\n\t\t\tif (isValidUrl(value)) {\n\t\t\t\tupdateUrl(value);\n\t\t\t} else {\n\t\t\t\tupdateUrl(`${SEARCH_URL}&q=${value}`);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn <div className={styles.Browser}>\n\t\t<div className={styles.Header}>\n\t\t\t<div className={styles.NavBar}>\n\t\t\t\t<button\n\t\t\t\t\ttitle=\"Back\"\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tclassName={styles.IconButton}\n\t\t\t\t\tonClick={() => { undo(); }}\n\t\t\t\t\tdisabled={!undoAvailable}\n\t\t\t\t>\n\t\t\t\t\t<FontAwesomeIcon icon={faCaretLeft}/>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\ttitle=\"Forward\"\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tclassName={styles.IconButton}\n\t\t\t\t\tonClick={() => { redo(); }}\n\t\t\t\t\tdisabled={!redoAvailable}\n\t\t\t\t>\n\t\t\t\t\t<FontAwesomeIcon icon={faCaretRight}/>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\ttitle=\"Reload\"\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tclassName={styles.IconButton}\n\t\t\t\t\tonClick={reload}\n\t\t\t\t>\n\t\t\t\t\t<FontAwesomeIcon icon={faRotateRight}/>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\ttitle=\"Home\"\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tclassName={styles.IconButton}\n\t\t\t\t\tonClick={() => { updateUrl(HOME_URL); }}\n\t\t\t\t>\n\t\t\t\t\t<FontAwesomeIcon icon={faHome}/>\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\tvalue={input}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\taria-label=\"Search bar\"\n\t\t\t\t\tclassName={styles.SearchBar}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonChange={onInputChange as unknown as ChangeEventHandler}\n\t\t\t\t\tonKeyDown={onKeyDown as unknown as KeyboardEventHandler}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className={styles.Bookmarks}>\n\n\t\t\t</div>\n\t\t</div>\n\t\t<WebView ref={ref} source={url} title=\"Browser\" focus={focus}/>\n\t</div>;\n}","import { App, AppsConfig } from \"@prozilla-os/core\";\nimport { Browser, BrowserProps } from \"./components/Browser\";\nimport { Vector2 } from \"@prozilla-os/shared\";\n\nconst browser = new App<BrowserProps>(\"Browser\", \"browser\", Browser, { size: new Vector2(700, 500) })\n\t.setIconUrl(\"https://os.prozilla.dev/assets/apps/icons/browser.svg\")\n\t.setRole(AppsConfig.APP_ROLES.browser)\n\t.setCategory(\"Utilities & tools\");\n\nexport { browser };"],"names":["HOME_URL","SEARCH_URL","Browser","startUrl","focus","url","setUrl","useState","input","setInput","history","pushState","stateIndex","undo","redo","undoAvailable","redoAvailable","useHistory","ref","useRef","useEffect","reload","updateUrl","newUrl","onInputChange","event","onKeyDown","value","isValidUrl","jsxs","styles","jsx","FontAwesomeIcon","faCaretLeft","faCaretRight","faRotateRight","faHome","WebView","browser","App","Vector2","AppsConfig"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prozilla-os/browser",
|
|
3
3
|
"description": "A ProzillaOS application for browsing the internet.",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.21",
|
|
5
5
|
"homepage": "https://os.prozilla.dev/browser",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Prozilla",
|
|
@@ -20,17 +20,18 @@
|
|
|
20
20
|
"license": "MIT",
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"react": "^18.3.1",
|
|
23
|
-
"@prozilla-os/
|
|
23
|
+
"@prozilla-os/shared": "1.3.0",
|
|
24
|
+
"@prozilla-os/core": "2.0.1"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
26
27
|
"@types/node": "^20.14.5",
|
|
27
|
-
"@types/react": "^18.3.
|
|
28
|
+
"@types/react": "^18.3.27",
|
|
28
29
|
"@vitejs/plugin-react-swc": "^3.7.0",
|
|
29
30
|
"typescript": "^5.5.4",
|
|
30
|
-
"vite": "^
|
|
31
|
-
"vite-plugin-dts": "^
|
|
31
|
+
"vite": "^7.3.1",
|
|
32
|
+
"vite-plugin-dts": "^4.5.4",
|
|
32
33
|
"vite-plugin-lib-inject-css": "^2.1.1",
|
|
33
|
-
"@prozilla-os/dev-tools": "1.1.
|
|
34
|
+
"@prozilla-os/dev-tools": "1.1.13"
|
|
34
35
|
},
|
|
35
36
|
"files": [
|
|
36
37
|
"dist"
|