BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial support for pwa mode

Browse Source
This commit is contained in:
Raphaël Forment
2023-11-10 09:53:47 +01:00
parent 35c07a0707
commit ff3eb8fa92
7 changed files with 2608 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -12,7 +12,8 @@
"@tauri-apps/cli": "^1.4.0",
"@types/audioworklet": "^0.0.49",
"typescript": "^5.2.2",
"vite": "^4.4.5"
"vite": "^4.4.5",
"vite-plugin-pwa": "^0.16.7"
},
"dependencies": {
"@codemirror/lang-javascript": "^6.1.9",

2
src/API.ts
View File

@ -171,6 +171,7 @@ export class UserAPI {
this.app.interface.error_line.innerHTML = errorMessage;
this.app.interface.error_line.style.color = "color-red-800";
this.app.interface.error_line.classList.remove("hidden");
// @ts-ignore
this.errorTimeoutID = setTimeout(
() => this.app.interface.error_line.classList.add("hidden"),
2000
@ -184,6 +185,7 @@ export class UserAPI {
this.app.interface.error_line.innerHTML = message as string;
this.app.interface.error_line.style.color = "white";
this.app.interface.error_line.classList.remove("hidden");
// @ts-ignore
this.printTimeoutID = setTimeout(
() => this.app.interface.error_line.classList.add("hidden"),
4000

1
src/AudioVisualisation.ts
View File

@ -81,6 +81,7 @@ export const blinkScript = (
_drawBlinker(shiftAmount);
// Save timeout ID for later clearing
// @ts-ignore
app.blinkTimeouts[shiftAmount] = setTimeout(() => {
_clearBlinker(shiftAmount);
// Clear the canvas before drawing new blinkers

7
src/IO/MidiConnection.ts
View File

@ -578,8 +578,7 @@ export class MidiConnection {
if (typeof output === "number") {
if (output < 0 || output >= this.midiOutputs.length) {
console.error(
`Invalid MIDI output index. Index must be in the range 0-${
this.midiOutputs.length - 1
`Invalid MIDI output index. Index must be in the range 0-${this.midiOutputs.length - 1
}.`
);
return this.currentOutputIndex;
@ -608,8 +607,7 @@ export class MidiConnection {
if (typeof input === "number") {
if (input < 0 || input >= this.midiInputs.length) {
console.error(
`Invalid MIDI input index. Index must be in the range 0-${
this.midiInputs.length - 1
`Invalid MIDI input index. Index must be in the range 0-${this.midiInputs.length - 1
}.`
);
return -1;
@ -676,6 +674,7 @@ export class MidiConnection {
delete this.scheduledNotes[noteNumber];
}, (duration - 0.02) * 1000);
// @ts-ignore
this.scheduledNotes[noteNumber] = timeoutId;
} else {
console.error("MIDI output not available.");

359
src/StringExtensions.ts
View File

@ -1,229 +1,230 @@
import { noteNameToMidi } from "zifferjs";
import { type UserAPI } from "./API";
import { Player } from "./classes/ZPlayer";
export {};
export { };
// Extend String prototype
declare global {
interface String {
speak(): void;
rate(speed: number): string;
pitch(pitch: number): string;
volume(volume: number): string;
voice(voice: number): string;
lang(language: string): string;
options(): SpeechOptions;
z(): Player;
z0(): Player;
z1(): Player;
z2(): Player;
z3(): Player;
z4(): Player;
z5(): Player;
z6(): Player;
z7(): Player;
z8(): Player;
z9(): Player;
z10(): Player;
z11(): Player;
z12(): Player;
z13(): Player;
z14(): Player;
z15(): Player;
z16(): Player;
note(): number;
}
interface String {
speak(): void;
rate(speed: number): string;
pitch(pitch: number): string;
volume(volume: number): string;
voice(voice: number): string;
lang(language: string): string;
options(): SpeechOptions;
z(): Player;
z0(): Player;
z1(): Player;
z2(): Player;
z3(): Player;
z4(): Player;
z5(): Player;
z6(): Player;
z7(): Player;
z8(): Player;
z9(): Player;
z10(): Player;
z11(): Player;
z12(): Player;
z13(): Player;
z14(): Player;
z15(): Player;
z16(): Player;
note(): number;
}
}
const isJsonString = (str: string):boolean => {
return str[0] === '{' && str[str.length - 1] === '}'
const isJsonString = (str: string): boolean => {
return str[0] === '{' && str[str.length - 1] === '}'
}
const stringObject = (str: string, params: object) => {
if(isJsonString(str)) {
const obj = JSON.parse(str);
return JSON.stringify({...obj, ...params});
} else {
return JSON.stringify({...params, text: str});
}
if (isJsonString(str)) {
const obj = JSON.parse(str);
return JSON.stringify({ ...obj, ...params });
} else {
return JSON.stringify({ ...params, text: str });
}
}
export const makeStringExtensions = (api: UserAPI) => {
String.prototype.speak = function () {
const options = JSON.parse(this.valueOf());
new Speaker({ ...options, text: options.text }).speak().then(() => {
// Done
}).catch((e) => {
console.log("Error speaking:", e);
});
};
String.prototype.speak = function() {
const options = JSON.parse(this.valueOf());
new Speaker({ ...options, text: options.text }).speak().then(() => {
// Done
}).catch((e) => {
console.log("Error speaking:", e);
});
};
String.prototype.rate = function (speed: number) {
return stringObject(this.valueOf(), {rate: speed});
};
String.prototype.rate = function(speed: number) {
return stringObject(this.valueOf(), { rate: speed });
};
String.prototype.pitch = function (pitch: number) {
return stringObject(this.valueOf(), {pitch: pitch});
};
String.prototype.pitch = function(pitch: number) {
return stringObject(this.valueOf(), { pitch: pitch });
};
String.prototype.lang = function (language: string) {
return stringObject(this.valueOf(),{lang: language});
};
String.prototype.lang = function(language: string) {
return stringObject(this.valueOf(), { lang: language });
};
String.prototype.volume = function (volume: number) {
return stringObject(this.valueOf(), {volume: volume});
};
String.prototype.volume = function(volume: number) {
return stringObject(this.valueOf(), { volume: volume });
};
String.prototype.voice = function (voice: number) {
return stringObject(this.valueOf(), {voice: voice});
};
String.prototype.voice = function(voice: number) {
return stringObject(this.valueOf(), { voice: voice });
};
String.prototype.z = function (options: {[key: string]: any} = {}) {
return api.z(this.valueOf(), options);
};
String.prototype.z0 = function (options: {[key: string]: any} = {}) {
return api.z0(this.valueOf(), options);
};
String.prototype.z = function(options: { [key: string]: any } = {}) {
return api.z(this.valueOf(), options);
};
String.prototype.z1 = function (options: {[key: string]: any} = {}) {
return api.z1(this.valueOf(), options);
};
String.prototype.z0 = function(options: { [key: string]: any } = {}) {
return api.z0(this.valueOf(), options);
};
String.prototype.z2 = function (options: {[key: string]: any} = {}) {
return api.z2(this.valueOf(), options);
};
String.prototype.z1 = function(options: { [key: string]: any } = {}) {
return api.z1(this.valueOf(), options);
};
String.prototype.z3 = function (options: {[key: string]: any} = {}) {
return api.z3(this.valueOf(), options);
};
String.prototype.z2 = function(options: { [key: string]: any } = {}) {
return api.z2(this.valueOf(), options);
};
String.prototype.z4 = function (options: {[key: string]: any} = {}) {
return api.z4(this.valueOf(), options);
};
String.prototype.z3 = function(options: { [key: string]: any } = {}) {
return api.z3(this.valueOf(), options);
};
String.prototype.z5 = function (options: {[key: string]: any} = {}) {
return api.z5(this.valueOf(), options);
};
String.prototype.z4 = function(options: { [key: string]: any } = {}) {
return api.z4(this.valueOf(), options);
};
String.prototype.z6 = function (options: {[key: string]: any} = {}) {
return api.z6(this.valueOf(), options);
};
String.prototype.z5 = function(options: { [key: string]: any } = {}) {
return api.z5(this.valueOf(), options);
};
String.prototype.z7 = function (options: {[key: string]: any} = {}) {
return api.z7(this.valueOf(), options);
};
String.prototype.z6 = function(options: { [key: string]: any } = {}) {
return api.z6(this.valueOf(), options);
};
String.prototype.z8 = function (options: {[key: string]: any} = {}) {
return api.z8(this.valueOf(), options);
};
String.prototype.z7 = function(options: { [key: string]: any } = {}) {
return api.z7(this.valueOf(), options);
};
String.prototype.z9 = function (options: {[key: string]: any} = {}) {
return api.z9(this.valueOf(), options);
};
String.prototype.z8 = function(options: { [key: string]: any } = {}) {
return api.z8(this.valueOf(), options);
};
String.prototype.z10 = function (options: {[key: string]: any} = {}) {
return api.z10(this.valueOf(), options);
};
String.prototype.z9 = function(options: { [key: string]: any } = {}) {
return api.z9(this.valueOf(), options);
};
String.prototype.z11 = function (options: {[key: string]: any} = {}) {
return api.z11(this.valueOf(), options);
};
String.prototype.z10 = function(options: { [key: string]: any } = {}) {
return api.z10(this.valueOf(), options);
};
String.prototype.z12 = function (options: {[key: string]: any} = {}) {
return api.z12(this.valueOf(), options);
};
String.prototype.z11 = function(options: { [key: string]: any } = {}) {
return api.z11(this.valueOf(), options);
};
String.prototype.z13 = function (options: {[key: string]: any} = {}) {
return api.z13(this.valueOf(), options);
};
String.prototype.z12 = function(options: { [key: string]: any } = {}) {
return api.z12(this.valueOf(), options);
};
String.prototype.z14 = function (options: {[key: string]: any} = {}) {
return api.z14(this.valueOf(), options);
};
String.prototype.z13 = function(options: { [key: string]: any } = {}) {
return api.z13(this.valueOf(), options);
};
String.prototype.z15 = function (options: {[key: string]: any} = {}) {
return api.z15(this.valueOf(), options);
};
String.prototype.z14 = function(options: { [key: string]: any } = {}) {
return api.z14(this.valueOf(), options);
};
String.prototype.z16 = function (options: {[key: string]: any} = {}) {
return api.z16(this.valueOf(), options);
};
String.prototype.z15 = function(options: { [key: string]: any } = {}) {
return api.z15(this.valueOf(), options);
};
String.prototype.note = function () {
try {
return parseInt(this.valueOf());
} catch (e) {
return noteNameToMidi(this.valueOf());
}
};
String.prototype.z16 = function(options: { [key: string]: any } = {}) {
return api.z16(this.valueOf(), options);
};
String.prototype.note = function() {
try {
return parseInt(this.valueOf());
} catch (e) {
return noteNameToMidi(this.valueOf());
}
};
}
type SpeechOptions = {
text?: string;
rate?: number;
pitch?: number;
volume?: number;
voice?: number;
lang?: string;
text?: string;
rate?: number;
pitch?: number;
volume?: number;
voice?: number;
lang?: string;
}
let speakerTimeout: number;
export class Speaker {
constructor(
public options: SpeechOptions
) {}
speak = () => {
return new Promise<void>((resolve, reject) => {
if (this.options.text) {
const synth = window.speechSynthesis;
if(synth.speaking) synth.cancel();
constructor(
public options: SpeechOptions
) { }
const utterance = new SpeechSynthesisUtterance(this.options.text);
utterance.rate = this.options.rate || 1;
utterance.pitch = this.options.pitch || 1;
utterance.volume = this.options.volume || 1;
if (this.options.voice) {
utterance.voice = synth.getVoices()[this.options.voice];
}
if(this.options.lang) {
// Check if language has country code
if (this.options.lang.length === 2) {
utterance.lang = `${this.options.lang}-${this.options.lang.toUpperCase()}`
} else if (this.options.lang.length === 5) {
utterance.lang = this.options.lang;
} else {
// Fallback to en us
utterance.lang = 'en-US';
}
}
speak = () => {
return new Promise<void>((resolve, reject) => {
if (this.options.text) {
const synth = window.speechSynthesis;
if (synth.speaking) synth.cancel();
utterance.onend = () => {
resolve();
};
utterance.onerror = (error) => {
reject(error);
};
if(synth.speaking) {
// Cancel again?
synth.cancel();
// Set timeout
if(speakerTimeout) clearTimeout(speakerTimeout);
speakerTimeout = setTimeout(() => {
synth.speak(utterance);
}, 200);
} else {
synth.speak(utterance);
}
} else {
reject("No text provided");
const utterance = new SpeechSynthesisUtterance(this.options.text);
utterance.rate = this.options.rate || 1;
utterance.pitch = this.options.pitch || 1;
utterance.volume = this.options.volume || 1;
if (this.options.voice) {
utterance.voice = synth.getVoices()[this.options.voice];
}
if (this.options.lang) {
// Check if language has country code
if (this.options.lang.length === 2) {
utterance.lang = `${this.options.lang}-${this.options.lang.toUpperCase()}`
} else if (this.options.lang.length === 5) {
utterance.lang = this.options.lang;
} else {
// Fallback to en us
utterance.lang = 'en-US';
}
}
});
}
utterance.onend = () => {
resolve();
};
utterance.onerror = (error) => {
reject(error);
};
if (synth.speaking) {
// Cancel again?
synth.cancel();
// Set timeout
if (speakerTimeout) clearTimeout(speakerTimeout);
// @ts-ignore
speakerTimeout = setTimeout(() => {
synth.speak(utterance);
}, 200);
} else {
synth.speak(utterance);
}
} else {
reject("No text provided");
}
});
}
}

8
vite.config.js
View File

@ -1,9 +1,14 @@
import { defineConfig } from "vite";
import { VitePWA } from 'vite-plugin-pwa';
// import * as mdPlugin from 'vite-plugin-markdown';
export default defineConfig(({ command, mode, ssrBuild }) => {
if (command === "serve") {
return {
plugins: [
VitePWA({ registerType: 'autoUpdate' })
],
assetsInclude: ["**/*.md"],
server: {
port: 8000,
@ -12,6 +17,9 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
};
} else {
return {
plugins: [
VitePWA({ registerType: 'autoUpdate' })
],
chunkSizeWarningLimit: 1600 * 2,
build: {
outDir: "dist",

2416
yarn.lock
View File

File diff suppressed because it is too large Load Diff