34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
|
import { html } from '@design.estate/dees-element';
|
||
|
|
import type { IAudioDevice } from './eco-applauncher-soundmenu.js';
|
||
|
|
|
||
|
|
const mockDevices: IAudioDevice[] = [
|
||
|
|
{ id: 'speakers', name: 'Built-in Speakers', type: 'speaker' },
|
||
|
|
{ id: 'headphones', name: 'AirPods Pro', type: 'bluetooth' },
|
||
|
|
{ id: 'hdmi', name: 'LG Monitor', type: 'hdmi' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export const demo = () => html`
|
||
|
|
<style>
|
||
|
|
.demo-container {
|
||
|
|
padding: 48px;
|
||
|
|
background: hsl(240 10% 4%);
|
||
|
|
min-height: 400px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="demo-container">
|
||
|
|
<eco-applauncher-soundmenu
|
||
|
|
open
|
||
|
|
.volume=${70}
|
||
|
|
.muted=${false}
|
||
|
|
.outputDevices=${mockDevices}
|
||
|
|
.activeDeviceId=${'speakers'}
|
||
|
|
@volume-change=${(e: CustomEvent) => console.log('Volume:', e.detail)}
|
||
|
|
@mute-toggle=${(e: CustomEvent) => console.log('Mute:', e.detail)}
|
||
|
|
@device-select=${(e: CustomEvent) => console.log('Device:', e.detail)}
|
||
|
|
@settings-click=${() => console.log('Settings clicked')}
|
||
|
|
></eco-applauncher-soundmenu>
|
||
|
|
</div>
|
||
|
|
`;
|