feat: fullscreen terminal with iPhone landscape action buttons #57
+11
-10
@@ -1,16 +1,17 @@
|
|||||||
name: Run Tests
|
name: Run Tests
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
workflow_dispatch:
|
||||||
branches: [main]
|
# push:
|
||||||
paths:
|
# branches: [main]
|
||||||
- 'dashboard/**'
|
# paths:
|
||||||
- '.gitea/workflows/test.yml'
|
# - 'dashboard/**'
|
||||||
pull_request:
|
# - '.gitea/workflows/test.yml'
|
||||||
branches: [main]
|
# pull_request:
|
||||||
paths:
|
# branches: [main]
|
||||||
- 'dashboard/**'
|
# paths:
|
||||||
- '.gitea/workflows/test.yml'
|
# - 'dashboard/**'
|
||||||
|
# - '.gitea/workflows/test.yml'
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
backend-tests:
|
backend-tests:
|
||||||
|
|||||||
@@ -35,6 +35,7 @@
|
|||||||
let showMenu = $state(false);
|
let showMenu = $state(false);
|
||||||
let voiceTick = $state(0);
|
let voiceTick = $state(0);
|
||||||
let isDark = $state(false);
|
let isDark = $state(false);
|
||||||
|
let isFullscreen = $state(false);
|
||||||
let tabCounter = 0;
|
let tabCounter = 0;
|
||||||
const tabData = new Map();
|
const tabData = new Map();
|
||||||
|
|
||||||
@@ -459,6 +460,35 @@
|
|||||||
|
|
||||||
function activeVoice() { return voiceTick >= 0 && tabData.get(activeTab)?.voice; }
|
function activeVoice() { return voiceTick >= 0 && tabData.get(activeTab)?.voice; }
|
||||||
|
|
||||||
|
function toggleFullscreen() {
|
||||||
|
const elem = document.documentElement;
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
elem.requestFullscreen().then(() => {
|
||||||
|
isFullscreen = true;
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('Failed to enter fullscreen:', err);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen().then(() => {
|
||||||
|
isFullscreen = false;
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('Failed to exit fullscreen:', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
syncTheme();
|
||||||
|
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
|
||||||
|
const requestedHost = new URLSearchParams(window.location.search).get("host");
|
||||||
|
if (requestedHost && !tabs.length && hostById(requestedHost)) addTab(requestedHost);
|
||||||
|
|
||||||
|
// Listen for fullscreen changes
|
||||||
|
document.addEventListener('fullscreenchange', () => {
|
||||||
|
isFullscreen = !!document.fullscreenElement;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
themeObserver.disconnect();
|
themeObserver.disconnect();
|
||||||
tabData.forEach((d) => {
|
tabData.forEach((d) => {
|
||||||
@@ -536,17 +566,30 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if activeTab && tabs.find(t => t.id === activeTab)?.connected && activeVoice()}
|
{#if activeTab && tabs.find(t => t.id === activeTab)?.connected}
|
||||||
{@const v = activeVoice()}
|
<div class="ml-auto flex items-center gap-1">
|
||||||
<div class="ml-auto">
|
|
||||||
<button
|
<button
|
||||||
class="px-2 py-1 rounded text-sm transition-colors {v.voiceMode ? 'text-rose-400' : v.sttAvailable ? 'text-surface-600 dark:text-surface-500 hover:text-surface-800 dark:hover:text-surface-300' : 'text-surface-300 dark:text-surface-700 cursor-not-allowed'}"
|
class="px-2 py-1 rounded text-sm transition-colors text-surface-600 dark:text-surface-500 hover:text-surface-800 dark:hover:text-surface-300"
|
||||||
title={!v.sttAvailable ? 'STT not supported' : v.voiceMode ? 'Voice mode on' : 'Enter voice mode'}
|
title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
|
||||||
disabled={!v.sttAvailable}
|
onclick={toggleFullscreen}
|
||||||
onclick={() => { if (!v.voiceMode) v.enterVoiceMode(); else v.exitVoiceMode(); voiceTick++; }}
|
|
||||||
>
|
>
|
||||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
{#if isFullscreen}
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/></svg>
|
||||||
|
{:else}
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>
|
||||||
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
|
{#if activeVoice()}
|
||||||
|
{@const v = activeVoice()}
|
||||||
|
<button
|
||||||
|
class="px-2 py-1 rounded text-sm transition-colors {v.voiceMode ? 'text-rose-400' : v.sttAvailable ? 'text-surface-600 dark:text-surface-500 hover:text-surface-800 dark:hover:text-surface-300' : 'text-surface-300 dark:text-surface-700 cursor-not-allowed'}"
|
||||||
|
title={!v.sttAvailable ? 'STT not supported' : v.voiceMode ? 'Voice mode on' : 'Enter voice mode'}
|
||||||
|
disabled={!v.sttAvailable}
|
||||||
|
onclick={() => { if (!v.voiceMode) v.enterVoiceMode(); else v.exitVoiceMode(); voiceTick++; }}
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user