144 lines
2.7 KiB
Svelte
144 lines
2.7 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte'
|
|
import { NextSpeaker, SkipSpeaker, PauseMeeting, ResumeMeeting, StopMeeting } from '../../wailsjs/go/app/App'
|
|
import { t } from '../lib/i18n'
|
|
|
|
export let timerState
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
$: isPaused = timerState?.paused || false
|
|
$: hasQueue = (timerState?.remainingQueue?.length || 0) > 0
|
|
|
|
async function handleNext() {
|
|
await NextSpeaker()
|
|
}
|
|
|
|
async function handleSkip() {
|
|
await SkipSpeaker()
|
|
}
|
|
|
|
async function handlePauseResume() {
|
|
if (isPaused) {
|
|
await ResumeMeeting()
|
|
} else {
|
|
await PauseMeeting()
|
|
}
|
|
}
|
|
|
|
async function handleStop() {
|
|
await StopMeeting()
|
|
dispatch('stop')
|
|
}
|
|
|
|
function handleKeydown(e) {
|
|
// ⌘N - Next speaker
|
|
if (e.metaKey && e.key.toLowerCase() === 'n') {
|
|
e.preventDefault()
|
|
handleNext()
|
|
}
|
|
// ⌘S - Skip speaker
|
|
if (e.metaKey && e.key.toLowerCase() === 's') {
|
|
e.preventDefault()
|
|
handleSkip()
|
|
}
|
|
// Space - Pause/Resume
|
|
if (e.code === 'Space' && !e.metaKey && !e.ctrlKey && !e.altKey) {
|
|
e.preventDefault()
|
|
handlePauseResume()
|
|
}
|
|
// ⌘Q - Stop meeting
|
|
if (e.metaKey && e.key.toLowerCase() === 'q') {
|
|
e.preventDefault()
|
|
handleStop()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window on:keydown={handleKeydown} />
|
|
|
|
<div class="controls">
|
|
<button class="btn primary" on:click={handleNext}>
|
|
{hasQueue ? $t('controls.next') : $t('controls.stop')}
|
|
</button>
|
|
|
|
{#if hasQueue}
|
|
<button class="btn secondary" on:click={handleSkip}>
|
|
{$t('controls.skip')}
|
|
</button>
|
|
{/if}
|
|
|
|
<button class="btn secondary pause-btn" on:click={handlePauseResume}>
|
|
{isPaused ? '▶' : '⏸'}
|
|
</button>
|
|
|
|
<button class="btn danger" on:click={handleStop}>
|
|
⏹
|
|
</button>
|
|
</div>
|
|
|
|
<style>
|
|
.controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
padding: 12px;
|
|
background: #232f3e;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px 16px;
|
|
height: 44px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn.primary {
|
|
flex: 2;
|
|
background: #4a90d9;
|
|
color: white;
|
|
}
|
|
|
|
.btn.primary:hover {
|
|
background: #3a7bc8;
|
|
}
|
|
|
|
.btn.secondary {
|
|
flex: 1;
|
|
background: #3d4f61;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.btn.secondary:hover {
|
|
background: #4d5f71;
|
|
}
|
|
|
|
.btn.pause-btn {
|
|
flex: 0;
|
|
min-width: 44px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.btn.danger {
|
|
flex: 0;
|
|
min-width: 44px;
|
|
font-size: 18px;
|
|
background: #7f1d1d;
|
|
color: #fca5a5;
|
|
}
|
|
|
|
.btn.danger:hover {
|
|
background: #991b1b;
|
|
}
|
|
|
|
</style>
|