glass/src/ui/app/PickleGlassApp.js
2025-07-13 04:57:09 +09:00

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);