-
-
Notifications
You must be signed in to change notification settings - Fork 253
/
video-stream-indicator.html
158 lines (138 loc) · 4.52 KB
/
video-stream-indicator.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<template id="video-stream-indicator-template">
<style>
@import "css/style.css";
:host {
position: relative;
display: flex;
align-items: center;
margin-left: 2.5em;
font-size: 0.95em;
}
.status-bar-tooltip {
/* Slightly tweak the tooltip width, so that the text will break in an
optimal way, without creating extra space on the right. */
max-width: 23em;
}
:host(:hover) .status-bar-tooltip {
display: block;
}
.icon {
height: 1.2em;
margin-right: 0.5em;
}
.label-mjpeg,
.label-h264 {
display: none;
}
:host([mode="MJPEG"]) .label-mjpeg,
:host([mode="H264"]) .label-h264 {
display: inline;
}
.tooltip-text-info {
display: block;
}
.warning-icon {
height: 0.95em;
margin-left: 0.4em;
}
.tooltip-text-h264-failure,
.warning-icon {
display: none;
}
:host([has-h264-failed]) .tooltip-text-info {
display: none;
}
:host([has-h264-failed]) .tooltip-text-h264-failure,
:host([has-h264-failed]) .warning-icon {
display: block;
}
</style>
<img src="/img/video-stream-icon.svg" class="icon" alt="Video Stream" />
<span class="label-mjpeg">MJPEG</span>
<span class="label-h264">H.264</span>
<div class="status-bar-tooltip">
<!-- For menu breadcrumbs (e.g., `“System” > “Logs”`) in the tooltip
message, make it so that line breaks always occur after the `>` token.
-->
<div class="tooltip-text-info">
<p>
TinyPilot is currently using
<span class="label-mjpeg">MJPEG</span>
<span class="label-h264">H.264</span>
compression to stream the video output of your target device.
</p>
<p>
You can configure the streaming mode in the “System” >
“Video Settings” dialog.
</p>
</div>
<div class="tooltip-text-h264-failure">
<p>
TinyPilot failed to stream video output from your target device using
H.264 compression.
</p>
<p>
You may be able to resolve this issue by using a STUN server. Go to
“System” > “Video Settings” >
“Show Advanced Settings” to enable this option.
</p>
<p>See “System” > “Logs” for diagnostic details.</p>
</div>
</div>
<img src="/img/warning-icon.svg" class="warning-icon" alt="Warning" />
</template>
<script type="module">
(function () {
const template = document.querySelector("#video-stream-indicator-template");
customElements.define(
"video-stream-indicator",
class extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: "open" }).appendChild(
template.content.cloneNode(true)
);
}
disconnectedCallback() {
clearTimeout(this._delayedH264Warning);
}
get mode() {
return this.getAttribute("mode");
}
set mode(mode) {
this.setAttribute("mode", mode);
this._checkModeSuccess();
}
get desiredMode() {
return this.getAttribute("desired-mode");
}
/**
* Schedules a (delayed) check to see whether the desired mode
* eventually succeeded. We currently only handle the case where the
* H264 stream fails to come up, because we cannot determine the state
* of the MJPEG stream. The delay is needed, because it may take a few
* seconds for the H264 stream to come up, and we don’t want to confuse
* users with a flickering warning icon.
*
* This method is safe to call at any time, regardless of the current
* mode. It only may restart a currently ongoing timer, which may cause
* some extra delay.
*/
_checkModeSuccess() {
const DELAY_SECONDS = 7;
clearTimeout(this._delayedH264Warning);
if (this.mode === this.desiredMode) {
this.removeAttribute("has-h264-failed");
} else {
this._delayedH264Warning = setTimeout(() => {
// If H264 was selected but hasn’t come into effect, display the
// warning; in all other cases, hide it.
const hasH264Failed =
this.desiredMode === "H264" && this.mode !== "H264";
this.toggleAttribute("has-h264-failed", hasH264Failed);
}, DELAY_SECONDS * 1000);
}
}
}
);
})();
</script>