124 |
149 | );
150 | }
151 |
152 | export default App;
153 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { app, BrowserWindow, ipcMain, Menu, screen } from "electron";
2 | import { updateElectronApp } from "update-electron-app";
3 | import settings from './settings';
4 | import oscListener from "./osc";
5 |
6 | import {
7 | add,
8 | differenceInMilliseconds,
9 | isPast,
10 | parse,
11 | } from "date-fns";
12 |
13 | // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
14 | // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
15 | // whether you're running in development or production).
16 | declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
17 | declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
18 |
19 | // Handle creating/removing shortcuts on Windows when installing/uninstalling.
20 | if (require("electron-squirrel-startup")) {
21 | app.quit();
22 | }
23 |
24 | const isMac = process.platform === "darwin";
25 | const isDebug = process.env.NODE_ENV === "development";
26 | let timer: NodeJS.Timeout;
27 |
28 | const createWindow = (): void => {
29 | const appSettings = new settings();
30 | const prefs = appSettings.prefs();
31 | const targetScreen = screen
32 | .getAllDisplays()
33 | .find(
34 | (display) =>
35 | display.id.toString() ===
36 | prefs.value("application.display")
37 | );
38 |
39 | const osc = new oscListener(appSettings.prefs);
40 |
41 | // Create the browser window.
42 | const mainWindow = new BrowserWindow({
43 | x: targetScreen?.nativeOrigin?.x || 0,
44 | y: targetScreen?.nativeOrigin?.y || 0,
45 | fullscreen: prefs.value("application.fullscreen") || false,
46 | height: 600,
47 | width: 800,
48 | webPreferences: {
49 | preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
50 | },
51 | autoHideMenuBar: true,
52 | });
53 |
54 | ipcMain.on("display:reset", () => {
55 | mainWindow.webContents.send("display:reset");
56 | });
57 |
58 | // and load the index.html of the app.
59 | mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
60 |
61 | mainWindow.on("closed", () => {
62 | clearInterval(timer);
63 | timer = null;
64 | });
65 |
66 | // Open the DevTools.
67 | if (isDebug) {
68 | mainWindow.webContents.openDevTools();
69 | }
70 |
71 | const menu = Menu.buildFromTemplate([
72 | {
73 | label: "File",
74 | submenu: [
75 | {
76 | label: "Preferences",
77 | click: () => {
78 | appSettings.show();
79 | },
80 | },
81 | isMac ? { role: "close" } : { role: "quit" },
82 | ],
83 | },
84 | {
85 | label: "View",
86 | submenu: [
87 | { role: "reload" },
88 | { role: "forceReload" },
89 | { role: "toggleDevTools" },
90 | { type: "separator" },
91 | { role: "resetZoom" },
92 | { role: "zoomIn" },
93 | { role: "zoomOut" },
94 | { type: "separator" },
95 | { role: "togglefullscreen" },
96 | ],
97 | },
98 | ]);
99 |
100 | Menu.setApplicationMenu(menu);
101 |
102 | timer = setInterval(() => {
103 | mainWindow.webContents.send("timers:update", {
104 | currentTime: osc.currentTime,
105 | totalTime: osc.totalTime,
106 | remainingTime: osc.remainingTime,
107 | loop: osc.loop,
108 | stopped: osc.stopped,
109 | enableProductionClock: prefs.value("production.enable"),
110 | enableOntime: prefs.value("production.ontime"),
111 | ontimeCurrent: osc.ontimeCurrent,
112 | elapsedColor: prefs.value("colors.elapsed"),
113 | remainingColor: prefs.value("colors.remaining"),
114 | clockColor: prefs.value("colors.clock"),
115 | productionColor: prefs.value("colors.production"),
116 | startTime: prefs.value("production.start"),
117 | runtime: runtimeClock(
118 | prefs.value("production.start"),
119 | prefs.value("production.runtime")
120 | ),
121 | });
122 | }, 200);
123 | };
124 |
125 | const runtimeClock = (startTime: string, runtime: string) => {
126 |
127 | if (!startTime || !runtime) {
128 | return "00:00:00";
129 | }
130 |
131 | const timeFormat = /^(\d{2}:\d{2}:\d{2})$/;
132 |
133 | if (!timeFormat.test(startTime) || !timeFormat.test(runtime)) {
134 | return "00:00:00";
135 | }
136 |
137 | const runtimeDate = parse(runtime, "HH:mm:ss", new Date());
138 | const startDate = parse(startTime, "HH:mm:ss", new Date());
139 | const endDate = add(startDate, {
140 | hours: runtimeDate.getHours(),
141 | minutes: runtimeDate.getMinutes(),
142 | seconds: runtimeDate.getSeconds(),
143 | });
144 |
145 | if (isPast(startDate)) {
146 | const diff = differenceInMilliseconds(endDate, new Date());
147 | return new Date(diff).toISOString().substr(11, 8);
148 | } else {
149 | const diff = differenceInMilliseconds(startDate, new Date());
150 |
151 | return new Date(diff).toISOString().substr(11, 8);
152 | }
153 | };
154 |
155 | updateElectronApp();
156 |
157 | // This method will be called when Electron has finished
158 | // initialization and is ready to create browser windows.
159 | // Some APIs can only be used after this event occurs.
160 | app.on("ready", createWindow);
161 |
162 | // Quit when all windows are closed, except on macOS. There, it's common
163 | // for applications and their menu bar to stay active until the user quits
164 | // explicitly with Cmd + Q.
165 | app.on("window-all-closed", () => {
166 | if (process.platform !== "darwin") {
167 | app.quit();
168 | }
169 | });
170 |
171 | app.on("activate", () => {
172 | // On OS X it's common to re-create a window in the app when the
173 | // dock icon is clicked and there are no other windows open.
174 | if (BrowserWindow.getAllWindows().length === 0) {
175 | createWindow();
176 | }
177 | });
178 |
179 | // In this file you can include the rest of your app's specific main process
180 | // code. You can also put them in separate files and import them here.
181 |
--------------------------------------------------------------------------------
/src/settings.ts:
--------------------------------------------------------------------------------
1 | import { app, Menu, screen } from "electron";
2 | import path from "path";
3 | import ElectronPreferences from "electron-preferences";
4 |
5 | const displays = () => {
6 | return screen.getAllDisplays().map((display, index) => {
7 | return {
8 | label: `Display ${display.id} - ${display.label}`,
9 | value: display.id,
10 | };
11 | });
12 | };
13 |
14 | class Settings {
15 | prefs: typeof ElectronPreferences;
16 | constructor() {
17 | this.prefs = this.preferences;
18 | }
19 |
20 | public show = () => {
21 | this.prefs().show();
22 | };
23 |
24 | private preferences = (): typeof ElectronPreferences => {
25 | return new ElectronPreferences({
26 | // Preference default values
27 | defaults: {
28 | server: {
29 | port: 6251,
30 | channel: 1,
31 | },
32 | production: {
33 | enable: false,
34 | start: "00:10:00",
35 | runtime: "00:20:00",
36 | },
37 | colors: {
38 | clock: "#960000",
39 | production: "#960000",
40 | elapsed: "#00FF00",
41 | remaining: "#FF0000",
42 | }
43 | },
44 |
45 | dataStore: path.resolve(app.getPath("userData"), "preferences.json"),
46 |
47 | browserWindowOpts: {
48 | title: "My custom preferences title",
49 | width: 900,
50 | maxWidth: 1000,
51 | height: 700,
52 | maxHeight: 1000,
53 | resizable: true,
54 | maximizable: false,
55 | //...
56 | },
57 |
58 | menu: Menu.buildFromTemplate([
59 | {
60 | label: "Window",
61 | role: "window",
62 | submenu: [
63 | {
64 | label: "Close",
65 | accelerator: "CmdOrCtrl+W",
66 | role: "close",
67 | },
68 | ],
69 | },
70 | ]),
71 |
72 | // Preference sections visible to the UI
73 | sections: [
74 | {
75 | id: "server",
76 | label: "Server",
77 | icon: "single-01", // See the list of available icons below
78 | form: {
79 | groups: [
80 | {
81 | label: "Server connection", // optional
82 | fields: [
83 | {
84 | label: "Port",
85 | key: "port",
86 | type: "number",
87 | help: "CasparCG OSC Port",
88 | },
89 | {
90 | label: "Channel",
91 | key: "channel",
92 | type: "number",
93 | help: "CasparCG channel",
94 | },
95 | // ...
96 | ],
97 | },
98 | // ...
99 | ],
100 | },
101 | },
102 | {
103 | id: "application",
104 | label: "Application",
105 | icon: "settings-gear-63",
106 | form: {
107 | groups: [
108 | {
109 | label: "Display",
110 | fields: [
111 | {
112 | label: "Display",
113 | key: "display",
114 | type: "dropdown",
115 | options: displays(),
116 | help: "You might want to set this to an external display.",
117 | },
118 | {
119 | label: "Fullscreen",
120 | key: "fullscreen",
121 | type: "radio",
122 | options: [
123 | { label: "No", value: false },
124 | { label: "Yes", value: true },
125 | ],
126 | help: "Start in fullscreen mode",
127 | },
128 | ],
129 | },
130 | ],
131 | },
132 | },
133 | {
134 | id: "production",
135 | label: "Production",
136 | icon: "settings-gear-63",
137 | form: {
138 | groups: [
139 | {
140 | label: "Production",
141 | fields: [
142 | {
143 | label: "Enable production clock",
144 | key: "enable",
145 | type: "radio",
146 | options: [
147 | { label: "No", value: false },
148 | { label: "Yes", value: true },
149 | ],
150 | help: "Splits clock in two clocks. A live clock and a production clock",
151 | },
152 | {
153 | label: "Start time",
154 | key: "start",
155 | type: "text",
156 | help: "The time the production starts",
157 | hideFunction: (preferences: typeof ElectronPreferences) => { return (!preferences.production.enable && !preferences.production.ontime) }
158 | },
159 | {
160 | label: "Runtime",
161 | key: "runtime",
162 | type: "text",
163 | help: "Approximate runtime of the production",
164 | hideFunction: (preferences: typeof ElectronPreferences) => { return !preferences.production.enable && !preferences.production.ontime}
165 | },
166 | {
167 | label: "ontime",
168 | key: "ontime",
169 | type: "radio",
170 | options: [
171 | { label: "No", value: false },
172 | { label: "Yes", value: true },
173 | ],
174 | help: "Use ontime for production clock start time and remaining time",
175 | }
176 | ],
177 | },
178 | ],
179 | },
180 | },
181 | {
182 | id: "colors",
183 | label: "Colors",
184 | icon: "image",
185 | form: {
186 | groups: [
187 | {
188 | label: "Clocks",
189 | fields: [
190 | {
191 | label: "Clock",
192 | key: "clock",
193 | type: "color",
194 | format: "hex",
195 | },
196 | {
197 | label: "Production",
198 | key: "production",
199 | type: "color",
200 | format: "hex",
201 | },
202 | ],
203 | },
204 | {
205 | label: "Playout clocks",
206 | fields: [
207 | {
208 | label: "Elapsed",
209 | key: "elapsed",
210 | type: "color",
211 | format: "hex",
212 | },
213 | {
214 | label: "Remaining",
215 | key: "remaining",
216 | type: "color",
217 | format: "hex",
218 | },
219 | ],
220 | },
221 | ],
222 | }
223 | }
224 | ],
225 | });
226 | };
227 | }
228 |
229 | export default Settings;
230 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 | Version 3, 29 June 2007
3 |
4 | Copyright (C) 2007 Free Software Foundation, Inc.
125 |
138 |
139 |
126 |
130 | {state.enableProductionClock ? (
131 | Clock
127 |{clockTime()}
128 |
129 |
132 |
135 | ) : null}
136 |
137 | Production
133 |{state.enableOntime ? Utils.msToTime(state.ontimeCurrent) : state.runtime}
134 |
140 |
144 | {state.loop ? "LOOP" : null}
141 |Elapsed
142 |{toTime(state.currentTime)}
143 |
145 |
148 | Remaining
146 |{toTime(state.remainingTime)}
147 |