electrobun 0.0.19-beta.113 → 0.0.19-beta.114

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.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/templates/photo-booth/bun.lock +16 -2
  3. package/templates/photo-booth/package.json +1 -1
  4. package/templates/photo-booth/src/bun/index.ts +2 -1
  5. package/templates/photo-booth/src/mainview/index.css +112 -0
  6. package/templates/photo-booth/src/mainview/index.html +38 -9
  7. package/templates/photo-booth/src/mainview/index.ts +284 -369
  8. package/templates/photo-booth/src/mainview/index_old.ts +671 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "electrobun",
3
- "version": "0.0.19-beta.113",
3
+ "version": "0.0.19-beta.114",
4
4
  "description": "Build ultra fast, tiny, and cross-platform desktop apps with Typescript.",
5
5
  "license": "MIT",
6
6
  "author": "Blackboard Technologies Inc.",
package/templates/photo-booth/bun.lock CHANGED
@@ -4,7 +4,7 @@
4
4
  "": {
5
5
  "name": "electrobun-photo-booth",
6
6
  "dependencies": {
7
- "electrobun": "^0.0.19-beta.110",
7
+ "electrobun": "file:../../",
8
8
  },
9
9
  "devDependencies": {
10
10
  "@types/bun": "latest",
@@ -18,6 +18,8 @@
18
18
 
19
19
  "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
20
20
 
21
+ "@types/archiver": ["@types/archiver@6.0.3", "", { "dependencies": { "@types/readdir-glob": "*" } }, "sha512-a6wUll6k3zX6qs5KlxIggs1P1JcYJaTCx2gnlr+f0S1yd2DoaEwoIK10HmBaLnZwWneBz+JBm0dwcZu0zECBcQ=="],
22
+
21
23
  "@types/bun": ["@types/bun@1.2.20", "", { "dependencies": { "bun-types": "1.2.20" } }, "sha512-dX3RGzQ8+KgmMw7CsW4xT5ITBSCrSbfHc36SNT31EOUg/LA9JWq0VDdEXDRSe1InVWpd2yLUM1FUF/kEOyTzYA=="],
22
24
 
23
25
  "@types/emscripten": ["@types/emscripten@1.40.1", "", {}, "sha512-sr53lnYkQNhjHNN0oJDdUm5564biioI5DuOpycufDVK7D3y+GR3oUswe2rlwY1nPNyusHbrJ9WoTyIHl4/Bpwg=="],
@@ -32,8 +34,12 @@
32
34
 
33
35
  "@types/react": ["@types/react@19.1.10", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-EhBeSYX0Y6ye8pNebpKrwFJq7BoQ8J5SO6NlvNwwHjSj6adXJViPQrKlsyPw7hLBLvckEMO1yxeGdR82YBBlDg=="],
34
36
 
37
+ "@types/readdir-glob": ["@types/readdir-glob@1.1.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-raiuEPUYqXu+nvtY2Pe8s8FEmZ3x5yAH4VkLdihcPdalvsHltomrRC9BzuStrJ9yk06470hS0Crw0f1pXqD+Hg=="],
38
+
35
39
  "@types/webextension-polyfill": ["@types/webextension-polyfill@0.12.3", "", {}, "sha512-F58aDVSeN/MjUGazXo/cPsmR76EvqQhQ1v4x23hFjUX0cfAJYE+JBWwiOGW36/VJGGxoH74sVlRIF3z7SJCKyg=="],
36
40
 
41
+ "@types/ws": ["@types/ws@8.5.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw=="],
42
+
37
43
  "abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
38
44
 
39
45
  "ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
@@ -84,7 +90,7 @@
84
90
 
85
91
  "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
86
92
 
87
- "electrobun": ["electrobun@0.0.19-beta.110", "", { "dependencies": { "@oneidentity/zstd-js": "^1.0.3", "archiver": "^7.0.1", "rpc-anywhere": "1.5.0", "tar": "^6.2.1" }, "bin": { "electrobun": "bin/electrobun.cjs" } }, "sha512-2QCaFeNI+yK48LJVQWZeICVrkFeBW6MsVT1ARuYQ1iJ3ui2R3XU7BnX9M36LbMuqyCMWxQk2jWnN5UcjEGzF7Q=="],
93
+ "electrobun": ["electrobun@file:../..", { "dependencies": { "@oneidentity/zstd-js": "^1.0.3", "archiver": "^7.0.1", "rpc-anywhere": "1.5.0", "tar": "^6.2.1" }, "devDependencies": { "@types/archiver": "^6.0.3", "@types/bun": "1.1.9" }, "bin": { "electrobun": "./bin/electrobun.cjs" } }],
88
94
 
89
95
  "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
90
96
 
@@ -188,6 +194,8 @@
188
194
 
189
195
  "zip-stream": ["zip-stream@6.0.1", "", { "dependencies": { "archiver-utils": "^5.0.0", "compress-commons": "^6.0.2", "readable-stream": "^4.0.0" } }, "sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA=="],
190
196
 
197
+ "electrobun/@types/bun": ["@types/bun@1.1.9", "", { "dependencies": { "bun-types": "1.1.27" } }, "sha512-SXJRejXpmAc3qxyN/YS4/JGWEzLf4dDBa5fLtRDipQXHqNccuMU4EUYCooXNTsylG0DmwFQsGgEDHxZF+3DqRw=="],
198
+
191
199
  "fs-minipass/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
192
200
 
193
201
  "glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -212,6 +220,8 @@
212
220
 
213
221
  "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
214
222
 
223
+ "electrobun/@types/bun/bun-types": ["bun-types@1.1.27", "", { "dependencies": { "@types/node": "~20.12.8", "@types/ws": "~8.5.10" } }, "sha512-rHXAiIDefeMS/fleNM1rRDYqolJGNRdch3+AuCRwcZWaqTa1vjGBNsahH/HVV7Y82frllYhJomCVSEiHzLzkgg=="],
224
+
215
225
  "lazystream/readable-stream/safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
216
226
 
217
227
  "lazystream/readable-stream/string_decoder": ["string_decoder@1.1.1", "", { "dependencies": { "safe-buffer": "~5.1.0" } }, "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg=="],
@@ -221,5 +231,9 @@
221
231
  "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
222
232
 
223
233
  "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
234
+
235
+ "electrobun/@types/bun/bun-types/@types/node": ["@types/node@20.12.14", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-scnD59RpYD91xngrQQLGkE+6UrHUPzeKZWhhjBSa3HSkwjbQc38+q3RoIVEwxQGRw3M+j5hpNAM+lgV3cVormg=="],
236
+
237
+ "electrobun/@types/bun/bun-types/@types/node/undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
224
238
  }
225
239
  }
package/templates/photo-booth/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "start": "bun run build:dev && bun run dev"
9
9
  },
10
10
  "dependencies": {
11
- "electrobun": "^0.0.19-beta.110"
11
+ "electrobun": "0.0.19-beta.114"
12
12
  },
13
13
  "devDependencies": {
14
14
  "@types/bun": "latest"
package/templates/photo-booth/src/bun/index.ts CHANGED
@@ -75,10 +75,11 @@ const photoBoothRPC = BrowserView.defineRPC<PhotoBoothRPC>({
75
75
  });
76
76
 
77
77
  // Create the main window
78
+ // Use native renderer (WKWebView) by default, but allow overriding with CEF
78
79
  const mainWindow = new BrowserWindow({
79
80
  title: "Photo Booth",
80
81
  url: "views://mainview/index.html",
81
- renderer: "cef",
82
+ // Don't specify renderer to use the default (native WKWebView on macOS)
82
83
  frame: {
83
84
  width: 1000,
84
85
  height: 700,
package/templates/photo-booth/src/mainview/index.css CHANGED
@@ -24,6 +24,45 @@ header {
24
24
  justify-content: space-between;
25
25
  align-items: center;
26
26
  border-bottom: 1px solid #3a3a3a;
27
+ gap: 2rem;
28
+ }
29
+
30
+ .mode-selector {
31
+ display: flex;
32
+ gap: 0.5rem;
33
+ background: #1a1a1a;
34
+ padding: 0.25rem;
35
+ border-radius: 8px;
36
+ border: 1px solid #3a3a3a;
37
+ }
38
+
39
+ .mode-btn {
40
+ display: flex;
41
+ align-items: center;
42
+ gap: 0.5rem;
43
+ padding: 0.75rem 1rem;
44
+ background: transparent;
45
+ color: #999;
46
+ border: none;
47
+ border-radius: 6px;
48
+ font-size: 0.875rem;
49
+ font-weight: 500;
50
+ cursor: pointer;
51
+ transition: all 0.2s;
52
+ }
53
+
54
+ .mode-btn:hover {
55
+ background: #333;
56
+ color: #fff;
57
+ }
58
+
59
+ .mode-btn.active {
60
+ background: #007aff;
61
+ color: white;
62
+ }
63
+
64
+ .mode-btn.active:hover {
65
+ background: #0056b3;
27
66
  }
28
67
 
29
68
  h1 {
@@ -81,6 +120,43 @@ main {
81
120
  justify-content: center;
82
121
  }
83
122
 
123
+ .native-capture-placeholder {
124
+ position: absolute;
125
+ top: 0;
126
+ left: 0;
127
+ right: 0;
128
+ bottom: 0;
129
+ display: flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ background: #1a1a1a;
133
+ color: #999;
134
+ z-index: 1;
135
+ }
136
+
137
+ .placeholder-content {
138
+ text-align: center;
139
+ display: flex;
140
+ flex-direction: column;
141
+ align-items: center;
142
+ gap: 1rem;
143
+ }
144
+
145
+ .placeholder-content svg {
146
+ opacity: 0.6;
147
+ }
148
+
149
+ .placeholder-content p {
150
+ margin: 0;
151
+ font-size: 0.875rem;
152
+ }
153
+
154
+ .placeholder-content p:first-of-type {
155
+ font-size: 1rem;
156
+ font-weight: 500;
157
+ color: #ccc;
158
+ }
159
+
84
160
  #video {
85
161
  width: 100%;
86
162
  height: 100%;
@@ -169,6 +245,42 @@ main {
169
245
  cursor: pointer;
170
246
  }
171
247
 
248
+ .camera-only-control {
249
+ display: flex;
250
+ }
251
+
252
+ .screen-only-control {
253
+ display: none;
254
+ }
255
+
256
+ .mode-screen .camera-only-control {
257
+ display: none;
258
+ }
259
+
260
+ .mode-screen .screen-only-control {
261
+ display: flex;
262
+ }
263
+
264
+ .start-camera-btn,
265
+ .select-screen-btn {
266
+ display: flex;
267
+ align-items: center;
268
+ gap: 0.5rem;
269
+ padding: 0.5rem 1rem;
270
+ background: #007aff;
271
+ color: white;
272
+ border: none;
273
+ border-radius: 6px;
274
+ font-size: 0.875rem;
275
+ cursor: pointer;
276
+ transition: background 0.2s;
277
+ }
278
+
279
+ .start-camera-btn:hover,
280
+ .select-screen-btn:hover {
281
+ background: #0056b3;
282
+ }
283
+
172
284
  .change-source-btn {
173
285
  display: flex;
174
286
  align-items: center;
package/templates/photo-booth/src/mainview/index.html CHANGED
@@ -10,9 +10,26 @@
10
10
  <div class="container">
11
11
  <header>
12
12
  <h1>Photo Booth / Screenshot Tool</h1>
13
+ <div class="mode-selector">
14
+ <button id="cameraModeBtn" class="mode-btn active">
15
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
16
+ <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
17
+ <circle cx="12" cy="13" r="4"/>
18
+ </svg>
19
+ Camera
20
+ </button>
21
+ <button id="screenModeBtn" class="mode-btn">
22
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
23
+ <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
24
+ <line x1="8" y1="21" x2="16" y2="21"/>
25
+ <line x1="12" y1="17" x2="12" y2="21"/>
26
+ </svg>
27
+ Screen Capture
28
+ </button>
29
+ </div>
13
30
  <div class="status" id="status">
14
31
  <span class="status-dot"></span>
15
- <span class="status-text">Initializing media...</span>
32
+ <span class="status-text">Initializing...</span>
16
33
  </div>
17
34
  </header>
18
35
 
@@ -26,29 +43,41 @@
26
43
 
27
44
  <div class="controls">
28
45
  <button id="captureBtn" class="capture-btn" disabled>
29
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
46
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="capture-icon-camera">
30
47
  <circle cx="12" cy="12" r="10"/>
31
48
  <circle cx="12" cy="12" r="7"/>
32
49
  </svg>
33
- Take Photo
50
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="capture-icon-screen" style="display: none;">
51
+ <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
52
+ <circle cx="12" cy="10" r="2"/>
53
+ </svg>
54
+ <span class="capture-btn-text">Take Photo</span>
34
55
  </button>
35
56
 
36
57
  <div class="settings">
37
- <label>
58
+ <label class="timer-setting">
38
59
  <input type="checkbox" id="timerToggle">
39
60
  <span>3s Timer</span>
40
61
  </label>
41
62
 
42
- <select id="cameraSelect" class="camera-select">
63
+ <select id="cameraSelect" class="camera-select camera-only-control">
43
64
  <option value="">Select Camera</option>
44
65
  </select>
45
66
 
46
- <button id="changeSourceBtn" class="change-source-btn" style="display: none;">
67
+ <button id="startCameraBtn" class="start-camera-btn camera-only-control" style="display: none;">
68
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
69
+ <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
70
+ <circle cx="12" cy="13" r="4"/>
71
+ </svg>
72
+ Start Camera
73
+ </button>
74
+
75
+ <button id="selectScreenBtn" class="select-screen-btn screen-only-control" style="display: none;">
47
76
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
48
- <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
49
- <circle cx="12" cy="12" r="3"/>
77
+ <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
78
+ <polyline points="8 17 12 21 16 17"/>
50
79
  </svg>
51
- Change Source
80
+ Select Screen
52
81
  </button>
53
82
  </div>
54
83
  </div>