162 lines
5.7 KiB
JavaScript
162 lines
5.7 KiB
JavaScript
import { html, css, LitElement } from '../assets/lit-core-2.7.4.min.js';
|
|
import { SettingsView } from '../settings/SettingsView.js';
|
|
import { ListenView } from '../listen/ListenView.js';
|
|
import { AskView } from '../ask/AskView.js';
|
|
import { ShortcutSettingsView } from '../settings/ShortCutSettingsView.js';
|
|
|
|
import '../listen/audioCore/renderer.js';
|
|
|
|
export class PickleGlassApp extends LitElement {
|
|
static styles = css`
|
|
:host {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--text-color);
|
|
background: transparent;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
listen-view {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
ask-view, settings-view, history-view, help-view, setup-view {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
`;
|
|
|
|
static properties = {
|
|
currentView: { type: String },
|
|
statusText: { type: String },
|
|
startTime: { type: Number },
|
|
currentResponseIndex: { type: Number },
|
|
isMainViewVisible: { type: Boolean },
|
|
selectedProfile: { type: String },
|
|
selectedLanguage: { type: String },
|
|
selectedScreenshotInterval: { type: String },
|
|
selectedImageQuality: { type: String },
|
|
isClickThrough: { type: Boolean, state: true },
|
|
layoutMode: { type: String },
|
|
_viewInstances: { type: Object, state: true },
|
|
_isClickThrough: { state: true },
|
|
structuredData: { type: Object },
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
this.currentView = urlParams.get('view') || 'listen';
|
|
this.currentResponseIndex = -1;
|
|
this.selectedProfile = localStorage.getItem('selectedProfile') || 'interview';
|
|
|
|
// Language format migration for legacy users
|
|
let lang = localStorage.getItem('selectedLanguage') || 'en';
|
|
if (lang.includes('-')) {
|
|
const newLang = lang.split('-')[0];
|
|
console.warn(`[Migration] Correcting language format from "${lang}" to "${newLang}".`);
|
|
localStorage.setItem('selectedLanguage', newLang);
|
|
lang = newLang;
|
|
}
|
|
this.selectedLanguage = lang;
|
|
|
|
this.selectedScreenshotInterval = localStorage.getItem('selectedScreenshotInterval') || '5';
|
|
this.selectedImageQuality = localStorage.getItem('selectedImageQuality') || 'medium';
|
|
this._isClickThrough = false;
|
|
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
|
|
if (window.api) {
|
|
window.api.pickleGlassApp.onClickThroughToggled((_, isEnabled) => {
|
|
this._isClickThrough = isEnabled;
|
|
});
|
|
}
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
if (window.api) {
|
|
window.api.pickleGlassApp.removeAllClickThroughListeners();
|
|
}
|
|
}
|
|
|
|
updated(changedProperties) {
|
|
if (changedProperties.has('currentView')) {
|
|
const viewContainer = this.shadowRoot?.querySelector('.view-container');
|
|
if (viewContainer) {
|
|
viewContainer.classList.add('entering');
|
|
requestAnimationFrame(() => {
|
|
viewContainer.classList.remove('entering');
|
|
});
|
|
}
|
|
}
|
|
|
|
// Only update localStorage when these specific properties change
|
|
if (changedProperties.has('selectedProfile')) {
|
|
localStorage.setItem('selectedProfile', this.selectedProfile);
|
|
}
|
|
if (changedProperties.has('selectedLanguage')) {
|
|
localStorage.setItem('selectedLanguage', this.selectedLanguage);
|
|
}
|
|
if (changedProperties.has('selectedScreenshotInterval')) {
|
|
localStorage.setItem('selectedScreenshotInterval', this.selectedScreenshotInterval);
|
|
}
|
|
if (changedProperties.has('selectedImageQuality')) {
|
|
localStorage.setItem('selectedImageQuality', this.selectedImageQuality);
|
|
}
|
|
if (changedProperties.has('layoutMode')) {
|
|
this.updateLayoutMode();
|
|
}
|
|
}
|
|
|
|
async handleClose() {
|
|
if (window.api) {
|
|
await window.api.common.quitApplication();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
switch (this.currentView) {
|
|
case 'listen':
|
|
return html`<listen-view
|
|
.currentResponseIndex=${this.currentResponseIndex}
|
|
.selectedProfile=${this.selectedProfile}
|
|
.structuredData=${this.structuredData}
|
|
@response-index-changed=${e => (this.currentResponseIndex = e.detail.index)}
|
|
></listen-view>`;
|
|
case 'ask':
|
|
return html`<ask-view></ask-view>`;
|
|
case 'settings':
|
|
return html`<settings-view
|
|
.selectedProfile=${this.selectedProfile}
|
|
.selectedLanguage=${this.selectedLanguage}
|
|
.onProfileChange=${profile => (this.selectedProfile = profile)}
|
|
.onLanguageChange=${lang => (this.selectedLanguage = lang)}
|
|
></settings-view>`;
|
|
case 'shortcut-settings':
|
|
return html`<shortcut-settings-view></shortcut-settings-view>`;
|
|
case 'history':
|
|
return html`<history-view></history-view>`;
|
|
case 'help':
|
|
return html`<help-view></help-view>`;
|
|
case 'setup':
|
|
return html`<setup-view></setup-view>`;
|
|
default:
|
|
return html`<div>Unknown view: ${this.currentView}</div>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('pickle-glass-app', PickleGlassApp);
|