web/kvm/window-stream.pug


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

- let confirm_msg = "Do you want to close the stream? This action will temporarily stop<br>";
- confirm_msg += "the video transmission until you open the broadcast again.<br>";
- confirm_msg += "This can be useful for saving traffic.";

div(id="stream-window" class="window window-resizable" data-close-confirm=confirm_msg)
	div(id="stream-window-header" class="window-header")
		div(class="window-grab") Stream
		button(class="window-button-close") &times;
		button(class="window-button-maximize") &#9744;
		button(class="window-button-full-screen") &#10530;

	div(id="stream-info")

	div(id="stream-box" class="stream-box-inactive")
		div(class="window-lock-alert hidden")
			| #[b Failed to acquire keyboard lock.#[br]Shortcuts like Alt+Tab, Ctrl+W, Ctrl+N might not be captured.]#[br]
			| #[br]
			| For best keyboard handling use a #[a(href="https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API#Browser_compatibility") browser with keyboard lock support API].#[br]
			| In Chrome use HTTPS and enable #[i system-keyboard-lock] by putting at URL #[i chrome://flags/#system-keyboard-lock].#[br]
			| More details on keyboard lock API are #[a(href="https://wicg.github.io/keyboard-lock/" target="_blank") here].
		img(id="stream-image" class="stream-image-inactive" src=`${png_dir}/blank-stream.png`)

	div(id="stream-mouse-buttons" class="keypad" align="center")
		div(class="keypad-block")
			div(class="keypad-row")
				div(data-code="left" class="key wide-4 left small") #[span Mouse#[br]Left]
				div(data-code="left" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold]
				div(class="empty-key" style="width:10px")
				div(data-code="middle" class="key wide-2 left small") #[span Mouse#[br]Middle]
				div(data-code="middle" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold]
				div(class="empty-key" style="width:10px")
				div(data-code="right" class="modifier wide-2 right small") #[span #[b &bull;]#[br]Hold &rarr;]
				div(data-code="right" class="key wide-4 right small") #[span Mouse#[br]Right]
			div(class="keypad-row" style="display:none")
				div(data-code="up" class="key wide-4 left small") #[span Mouse#[br]Up/Back]
				div(data-code="up" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold]
				div(class="empty-key" style="width:10px")
				div(data-code="down" class="modifier wide-2 right small") #[span #[b &bull;]#[br]Hold &rarr;]
				div(data-code="down" class="key wide-4 right small") #[span Mouse#[br]Down/Fw]