fix message list scrollbar
parent
296d95fcf2
commit
1286f90444
|
@ -384,42 +384,38 @@ export default class Meta extends Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="cabana-meta-messages">
|
<div className="cabana-meta-messages-header">
|
||||||
<div className="cabana-meta-messages-header">
|
<div
|
||||||
<div
|
style={{
|
||||||
style={{
|
display: 'inline-block',
|
||||||
display: 'inline-block',
|
float: 'right'
|
||||||
float: 'right'
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<h5 className="t-capline">
|
||||||
<h5 className="t-capline">
|
Show log events
|
||||||
Show log events
|
<input
|
||||||
<input
|
type="checkbox"
|
||||||
type="checkbox"
|
onChange={this.toggleShowLogEvents}
|
||||||
onChange={this.toggleShowLogEvents}
|
checked={!!this.state.showLogEvents}
|
||||||
checked={!!this.state.showLogEvents}
|
/>
|
||||||
/>
|
</h5>
|
||||||
</h5>
|
|
||||||
</div>
|
|
||||||
<h5 className="t-capline">Available messages</h5>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="cabana-meta-messages-window">
|
<h5 className="t-capline">Available messages</h5>
|
||||||
<div className="cabana-meta-messages-filter">
|
</div>
|
||||||
<div className="form-field form-field--small">
|
<div className="cabana-meta-messages-filter">
|
||||||
<input
|
<div className="form-field form-field--small">
|
||||||
type="text"
|
<input
|
||||||
value={this.state.filterText}
|
type="text"
|
||||||
onFocus={this.onFilterFocus}
|
value={this.state.filterText}
|
||||||
onBlur={this.onFilterUnfocus}
|
onFocus={this.onFilterFocus}
|
||||||
onChange={this.onFilterChanged}
|
onBlur={this.onFilterUnfocus}
|
||||||
/>
|
onChange={this.onFilterChanged}
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
<div className="cabana-meta-messages-list">
|
|
||||||
{this.renderAvailableMessagesList()}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="cabana-meta-messages-list">
|
||||||
|
{this.renderAvailableMessagesList()}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,8 +12,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 0.5;
|
flex: 0.5;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 100vh;
|
height: 100%;
|
||||||
overflow-y: scroll;
|
|
||||||
&-header {
|
&-header {
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -79,7 +78,7 @@
|
||||||
padding: 11px;
|
padding: 11px;
|
||||||
}
|
}
|
||||||
&-list {
|
&-list {
|
||||||
height: 100%;
|
padding: 8px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
&-item {
|
&-item {
|
||||||
|
|
|
@ -47,7 +47,6 @@ export default class RouteVideoSync extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
shouldShowJpeg: true,
|
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
videoElement: null,
|
videoElement: null,
|
||||||
source: null,
|
source: null,
|
||||||
|
@ -114,14 +113,12 @@ export default class RouteVideoSync extends Component {
|
||||||
|
|
||||||
onLoadStart() {
|
onLoadStart() {
|
||||||
this.setState({
|
this.setState({
|
||||||
shouldShowJpeg: true,
|
|
||||||
isLoading: true
|
isLoading: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onLoadEnd() {
|
onLoadEnd() {
|
||||||
this.setState({
|
this.setState({
|
||||||
shouldShowJpeg: false,
|
|
||||||
isLoading: false
|
isLoading: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -174,24 +171,9 @@ export default class RouteVideoSync extends Component {
|
||||||
return ratio * this.videoLength() + this.startTime();
|
return ratio * this.videoLength() + this.startTime();
|
||||||
}
|
}
|
||||||
|
|
||||||
nearestFrameUrl() {
|
|
||||||
const { thumbnails } = this.props;
|
|
||||||
if (!this.seekTime) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
for (let i = 0, l = thumbnails.length; i < l; ++i) {
|
|
||||||
if (Math.abs(thumbnails[i].monoTime - this.seekTime) < 5) {
|
|
||||||
const data = btoa(String.fromCharCode(...thumbnails[i].data));
|
|
||||||
return `data:image/jpeg;base64,${data}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
isLoading,
|
isLoading,
|
||||||
shouldShowJpeg,
|
|
||||||
videoElement,
|
videoElement,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
const {
|
const {
|
||||||
|
@ -207,13 +189,6 @@ export default class RouteVideoSync extends Component {
|
||||||
return (
|
return (
|
||||||
<div className="cabana-explorer-visuals-camera">
|
<div className="cabana-explorer-visuals-camera">
|
||||||
{isLoading ? this.loadingOverlay() : null}
|
{isLoading ? this.loadingOverlay() : null}
|
||||||
{shouldShowJpeg ? (
|
|
||||||
<img
|
|
||||||
src={this.nearestFrameUrl()}
|
|
||||||
className={css(Styles.img)}
|
|
||||||
alt={`Camera preview at t = ${Math.round(userSeekTime)}`}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
{this.state.source && <HLS
|
{this.state.source && <HLS
|
||||||
className={css(Styles.hls)}
|
className={css(Styles.hls)}
|
||||||
source={this.state.source}
|
source={this.state.source}
|
||||||
|
|
|
@ -621,6 +621,9 @@ export default class DBC {
|
||||||
|
|
||||||
const signalValuesByName = {};
|
const signalValuesByName = {};
|
||||||
Object.values(frame.signals).forEach((signalSpec) => {
|
Object.values(frame.signals).forEach((signalSpec) => {
|
||||||
|
if (isNaN(signalSpec.startBit)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
let value;
|
let value;
|
||||||
if (signalSpec.size > 32) {
|
if (signalSpec.size > 32) {
|
||||||
value = this.valueForInt64Signal(signalSpec, hexData);
|
value = this.valueForInt64Signal(signalSpec, hexData);
|
||||||
|
|
Loading…
Reference in New Issue