Skip to content

Commit 8407b19

Browse files
Merge branch 'master' into ai_server
2 parents 3b07832 + 006576b commit 8407b19

8 files changed

Lines changed: 71 additions & 68 deletions

File tree

web/js/MonitorStream.js

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,8 @@ function MonitorStream(monitorData) {
254254
this.start = function(streamChannel = 'default') {
255255
this.streamListenerBind = streamListener.bind(null, this);
256256

257+
$j('#volumeControls').hide();
258+
257259
if (this.Go2RTCEnabled && ((!this.player) || (-1 != this.player.indexOf('go2rtc')))) {
258260
if (ZM_GO2RTC_PATH) {
259261
const url = new URL(ZM_GO2RTC_PATH);
@@ -279,6 +281,8 @@ function MonitorStream(monitorData) {
279281
this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout);
280282
this.started = true;
281283
this.streamListenerBind();
284+
285+
$j('#volumeControls').show();
282286
return;
283287
} else {
284288
alert("ZM_GO2RTC_PATH is empty. Go to Options->System and set ZM_GO2RTC_PATH accordingly.");
@@ -409,13 +413,21 @@ function MonitorStream(monitorData) {
409413

410414
this.stop = function() {
411415
console.debug(`! ${dateTimeToISOLocal(new Date())} Stream for ID=${this.id} STOPPED`);
412-
if ( 0 ) {
416+
if ( 1 ) {
413417
const stream = this.getElement();
414418
if (!stream) return;
415-
const src = stream.src.replace(/mode=jpeg/i, 'mode=single');
416-
if (stream.src != src) {
417-
stream.src = '';
418-
stream.src = src;
419+
if (stream.src) {
420+
let src = stream.src;
421+
if (-1 === src.indexOf('mode=')) {
422+
src += '&mode=single';
423+
} else {
424+
src = src.replace(/mode=jpeg/i, 'mode=single');
425+
}
426+
427+
if (stream.src != src) {
428+
stream.src = '';
429+
stream.src = src;
430+
}
419431
}
420432
}
421433
this.streamCommand(CMD_STOP);
@@ -486,10 +498,8 @@ function MonitorStream(monitorData) {
486498
};
487499

488500
this.kill = function() {
489-
if (janus) {
490-
if (streaming[this.id]) {
491-
streaming[this.id].detach();
492-
}
501+
if (janus && streaming[this.id]) {
502+
streaming[this.id].detach();
493503
}
494504
const stream = this.getElement();
495505
if (!stream) {
@@ -502,11 +512,7 @@ function MonitorStream(monitorData) {
502512

503513
// this.stop tells zms to stop streaming, but the process remains. We need to turn the stream into an image.
504514
if (stream.src) {
505-
const src = stream.src.replace(/mode=jpeg/i, 'mode=single');
506-
if (stream.src != src) {
507-
stream.src = '';
508-
stream.src = src;
509-
}
515+
stream.src = '';
510516
}
511517

512518
// Because we stopped the zms process above, any remaining ajaxes will fail. But aborting them will also cause them to fail, so why bother?

web/skins/classic/css/base/skin.css

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
--alarmBG: #FFC0C0;
2828
--alarmText: inherit;
2929
--backgroundMediumDark: #485460;
30+
--colorLink: #3498db;
31+
--colorBackgroundButtons: #3498db;
32+
--colorBorder: #3498db;
3033
}
3134

3235
html,
@@ -105,7 +108,7 @@ a {
105108

106109
a.optionhelp,
107110
a:link {
108-
color: #3498db;
111+
color: var(--colorLink);
109112
text-decoration: none;
110113
}
111114

@@ -192,8 +195,8 @@ hr {
192195
height: 1px;
193196
width: 100%;
194197
border: 0;
195-
color: #3498db;
196-
background-color: #3498db;
198+
color: var(--colorLink);
199+
background-color: var(--colorBackgroundButtons);
197200
}
198201

199202
/*
@@ -621,9 +624,9 @@ input[type=button],
621624
input[type=submit],
622625
.btn-primary,
623626
.btn-primary:link {
624-
background-color: #3498db;
627+
background-color: var(--colorBackgroundButtons);
625628
color: #fff;
626-
border-color: #3498db;
629+
border-color: var(--colorBorder);
627630
text-transform: uppercase;
628631
font-weight: 200;
629632
padding: 7px 10px 5px 10px;
@@ -637,8 +640,8 @@ input[type=submit],
637640
.btn-normal,
638641
.btn-normal:link {
639642
color: #fff;
640-
background-color: #3498db;
641-
border: 1px solid #3498db;
643+
background-color: var(--colorBackgroundButtons);
644+
border: 1px solid var(--colorBorder);
642645
}
643646

644647
button:hover,
@@ -665,7 +668,7 @@ input[type=submit]:disabled,
665668
padding: 0;
666669
display: flex;
667670
justify-content: space-between;
668-
background-color:#485460 !important;
671+
background-color: var(--backgroundMediumDark) !important;
669672
}
670673

671674
#navbar-container > nav {
@@ -685,20 +688,20 @@ input[type=submit]:disabled,
685688

686689
.navbar {
687690
padding: 0 0 0 0px;
688-
margin-bottom: 0 !important;
689-
border-radius: 0;
690-
background-color:#485460 !important;
691-
color: #0fbcf9;
692-
border:none;
691+
margin-bottom: 0 !important;
692+
border-radius: 0;
693+
background-color: var(--backgroundMediumDark) !important;
694+
color: #0fbcf9;
695+
border:none;
693696
}
694697

695698
.navbar-brand {
696699
margin-left: 15px;
697-
font-weight: normal;
698-
font-size: 30px;
700+
font-weight: normal;
701+
font-size: 30px;
699702
}
700703
.navbar-brand a {
701-
color:#ffa801;
704+
color:#ffa801;
702705
}
703706
@media (max-width: 600px){
704707
.navbar-brand {
@@ -828,11 +831,11 @@ li.search-choice {
828831
#dropdown_storage+div,
829832
#dropdown_reminder+div,
830833
#dropdown_bandwidth+div {
831-
background-color:#485460;
834+
background-color: var(--backgroundMediumDark);
832835
}
833836

834837
#framesTable td:hover {
835-
cursor: pointer;
838+
cursor: pointer;
836839
}
837840

838841
.zoom,

web/skins/classic/css/base/views/filter.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,12 @@ min-width: 500px;
8383
min-width: 500px;
8484
}
8585
form {
86-
border-bottom: 1px solid #3498db;
86+
border-bottom: 1px solid var(--colorBorder);
8787
}
8888
#ActionsAndOptions {
8989
padding-top: 5px;
90-
border-top: 1px solid #3498db;
91-
border-bottom: 1px solid #3498db;
90+
border-top: 1px solid var(--colorBorder);
91+
border-bottom: 1px solid var(--colorBorder);
9292
}
9393
#ActionsAndOptions fieldset {
9494
border: none;

web/skins/classic/css/base/views/watch.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151

5252
.monitor .imageFeed img,
5353
.monitor .imageFeed video,
54+
.monitor .imageFeed video-stream,
5455
.monitor .imageFeed svg {
5556
border: none;
5657
display: inline-block;

web/skins/classic/views/js/watch.js

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -468,7 +468,8 @@ function fetchImage(streamImage) {
468468
function handleClick(event) {
469469
const targetId = event.target.id;
470470
if (targetId.indexOf("nav-link") >= 0) { //Navigation through monitors
471-
cycleStop(event.target);
471+
cycleStop();
472+
monIdx = event.target.getAttribute('data-monIdx');
472473
const oldId = stringToNumber(document.querySelector('[id ^= "liveStream"]').id);
473474
const newId = stringToNumber(targetId);
474475
streamReStart(oldId, newId);
@@ -778,7 +779,7 @@ function streamPrepareStart(monitor=null) {
778779
// Update table links each time after new data is loaded
779780
table.on('post-body.bs.table', function(data) {
780781
const thumb_ndx = $j('#eventList tr th').filter(function() {
781-
return $j(this).text().trim() == 'Thumbnail';
782+
return $j(this).attr('data-field').toLowerCase().trim() == 'thumbnail';
782783
}).index();
783784
table.find("tr td:nth-child(" + (thumb_ndx+1) + ")").addClass('colThumbnail');
784785
});
@@ -887,15 +888,17 @@ function streamReStart(oldId, newId) {
887888
monitorId = newId;
888889
filterQuery = '&filter[Query][terms][0][attr]=MonitorId&filter[Query][terms][0][op]=%3d&filter[Query][terms][0][val]='+monitorId;
889890

890-
const newMonitorName = document.getElementById('nav-item-cycle'+newId).querySelector('a').textContent;
891-
document.querySelector('title').textContent = newMonitorName;
891+
//const newMonitorName = document.getElementById('nav-item-cycle'+newId).querySelector('a').textContent;
892+
document.querySelector('title').textContent = currentMonitor.name;
892893
const url = new URL(document.location.href);
893894
url.searchParams.set('mid', monitorId);
894895
history.pushState(null, "", url);
895896

896897
zmPanZoom.action('disable', {id: oldId});
897898
if (monitorStream) {
898899
monitorStream.kill();
900+
} else {
901+
console.log("No monitorStream?");
899902
}
900903

901904
const el = document.querySelector('.imageFeed');
@@ -1120,7 +1123,7 @@ function watchAllEvents() {
11201123
window.location.replace(currentMonitor.urlForAllEvents);
11211124
}
11221125

1123-
var intervalId;
1126+
var cycleIntervalId;
11241127
var secondsToCycle = 0;
11251128

11261129
function nextCycleView() {
@@ -1132,58 +1135,51 @@ function nextCycleView() {
11321135
}
11331136

11341137
function cyclePause() {
1135-
clearInterval(intervalId);
1138+
clearInterval(cycleIntervalId);
11361139
cycle = false;
11371140
$j('#cyclePauseBtn').hide();
11381141
$j('#cyclePlayBtn').show();
11391142
}
11401143

11411144
function cycleStart() {
11421145
if (secondsToCycle == 0) secondsToCycle = $j('#cyclePeriod').val();
1143-
intervalId = setInterval(nextCycleView, 1000);
1146+
cycleIntervalId = setInterval(nextCycleView, 1000);
11441147
cycle = true;
11451148
$j('#cyclePauseBtn').show();
11461149
$j('#cyclePlayBtn').hide();
11471150
}
11481151

1149-
function cycleStop(target) {
1152+
function cycleStop() {
11501153
secondsToCycle = 0;
1151-
monIdx = target.getAttribute('data-monIdx');
11521154
$j('#secondsToCycle').text('');
11531155
cyclePause();
11541156
}
11551157

11561158
// FIXME this runs within the interval handler and can take >50ms which will cause chrome to complain.
11571159
function cycleNext() {
1158-
monIdx ++;
1159-
if (monIdx >= monitorData.length) {
1160-
monIdx = 0;
1161-
}
1160+
clearInterval(cycleIntervalId);
1161+
const oldId = monitorData[monIdx].id;
1162+
monIdx = (monIdx >= monitorData.length) ? 0 : parseInt(monIdx)+1;
11621163
if (!monitorData[monIdx]) {
11631164
console.log('No monitorData for ' + monIdx);
11641165
}
1165-
clearInterval(intervalId);
1166+
const newId = monitorData[monIdx].id;
11661167

11671168
// +++ Start next monitor
1168-
const oldId = monitorData[(monIdx == 0) ? monitorData.length-1 : monIdx-1].id;
1169-
const newId = monitorData[monIdx].id;
11701169
streamReStart(oldId, newId);
11711170
if (cycle) cycleStart();
11721171
}
11731172

11741173
function cyclePrev() {
1175-
monIdx --;
1176-
if (monIdx < 0) {
1177-
monIdx = monitorData.length - 1;
1178-
}
1174+
clearInterval(cycleIntervalId);
1175+
const oldId = monitorData[monIdx].id;
1176+
monIdx = (monIdx <= 0) ? monitorData.length - 1 : monIdx-1;
11791177
if (!monitorData[monIdx]) {
11801178
console.log('No monitorData for ' + monIdx);
11811179
}
1182-
clearInterval(intervalId);
1180+
const newId = monitorData[monIdx].id;
11831181

11841182
// +++ Start previous monitor
1185-
const oldId = monitorData[(monIdx == monitorData.length - 1)? 0 : monIdx+1].id;
1186-
const newId = monitorData[monIdx].id;
11871183
streamReStart(oldId, newId);
11881184
if (cycle) cycleStart();
11891185
}

web/skins/classic/views/js/watch.js.php

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<?php
22
global $monitor_index;
3-
global $nextMid;
43
global $options;
54
global $monitors;
65
global $monitorsExtraData;
@@ -36,7 +35,6 @@
3635
var monitorControllable = <?php echo $monitor->Controllable()?'true':'false' ?>;
3736

3837
var monIdx = '<?php echo $monitor_index; ?>';
39-
var nextMid = '<?php echo isset($nextMid)?$nextMid:'' ?>';
4038
var mode = '<?php echo $options['mode'] ?>';
4139

4240
var monitorData = new Array();

web/skins/classic/views/monitor.php

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,6 @@ class="nav-link<?php echo ($tab == $name ? ' active' : '') . ' ' . (($name == 'z
456456
<!-- BEGIN ITEM LIST -->
457457
<div class="container-fluid" id="monitor">
458458
<form name="contentForm" id="contentForm" method="post" action="?view=monitor" autocomplete="off">
459-
<input autocomplete="false" name="hidden" type="text" style="display:none;">
460459
<input type="hidden" name="tab" value="<?php echo $tab?>"/>
461460
<input type="hidden" name="mid" value="<?php echo $monitor->Id() ? $monitor->Id() : $mid ?>"/>
462461
<input type="hidden" name="origMethod" value="<?php echo (null !== $monitor->Method())?validHtmlStr($monitor->Method()):'' ?>"/>
@@ -603,7 +602,7 @@ class="nav-link<?php echo ($tab == $name ? ' active' : '') . ' ' . (($name == 'z
603602
</li>
604603
<li>
605604
<label><?php echo translate('Password') ?></label>
606-
<input type="password" id="newMonitor[ONVIF_Password]" name="newMonitor[ONVIF_Password]" value="<?php echo validHtmlStr($monitor->ONVIF_Password()) ?>" autocomplete="new-password"/>
605+
<input type="password" id="newMonitor[ONVIF_Password]" name="newMonitor[ONVIF_Password]" value="<?php echo validHtmlStr($monitor->ONVIF_Password()) ?>" autocomplete="off"/>
607606
<span class="material-icons md-18" data-on-click-this="toggle_password_visibility" data-password-input="newMonitor[ONVIF_Password]">visibility</span>
608607
</li>
609608
<li>
@@ -716,11 +715,11 @@ class="nav-link<?php echo ($tab == $name ? ' active' : '') . ' ' . (($name == 'z
716715
</li>
717716
<li>
718717
<label><?php echo translate('Username') ?></label>
719-
<input type="text" name="newMonitor[User]" value="<?php echo validHtmlStr($monitor->User()) ?>"/>
718+
<input type="text" name="newMonitor[User]" value="<?php echo validHtmlStr($monitor->User()) ?>" autocomplete="off"/>
720719
</li>
721720
<li>
722721
<label><?php echo translate('Password') ?></label>
723-
<input type="password" id="newMonitor[Pass]" name="newMonitor[Pass]" value="<?php echo validHtmlStr($monitor->Pass()) ?>" autocomplete="new-password"/>
722+
<input type="password" id="newMonitor[Pass]" name="newMonitor[Pass]" value="<?php echo validHtmlStr($monitor->Pass()) ?>" autocomplete="off"/>
724723
<span class="material-icons md-18" data-on-click-this="toggle_password_visibility" data-password-input="newMonitor[Pass]">visibility</span>
725724
</li>
726725
<?php
@@ -731,7 +730,7 @@ class="nav-link<?php echo ($tab == $name ? ' active' : '') . ' ' . (($name == 'z
731730
</li>
732731
<li>
733732
<label><?php echo translate('Password') ?></label>
734-
<input type="password" id="newMonitor[Pass]" name="newMonitor[Pass]" value="<?php echo validHtmlStr($monitor->Pass()) ?>" autocomplete="new-password"/>
733+
<input type="password" id="newMonitor[Pass]" name="newMonitor[Pass]" value="<?php echo validHtmlStr($monitor->Pass()) ?>" autocomplete="off"/>
735734
<span class="material-icons md-18" data-on-click-this="toggle_password_visibility" data-password-input="newMonitor[Pass]">visibility</span>
736735
</li>
737736
<li>
@@ -796,7 +795,7 @@ class="nav-link<?php echo ($tab == $name ? ' active' : '') . ' ' . (($name == 'z
796795
</li>
797796
<li>
798797
<label><?php echo translate('Password') ?></label>
799-
<input type="password" id="newMonitor[Pass]" name="newMonitor[Pass]" value="<?php echo validHtmlStr($monitor->Pass()) ?>" autocomplete="new-password"/>
798+
<input type="password" id="newMonitor[Pass]" name="newMonitor[Pass]" value="<?php echo validHtmlStr($monitor->Pass()) ?>" autocomplete="off"/>
800799
<span class="material-icons md-18" data-on-click-this="toggle_password_visibility" data-password-input="newMonitor[Pass]">visibility</span>
801800
</li>
802801
<li>

web/skins/classic/views/watch.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@
304304
<span id="playerControl">
305305
<label for="player"><?php echo translate('Player') ?></label>
306306
<?php
307-
$players = ['zms'=>'ZMS MJPEG'];
307+
$players = [''=>translate('Auto'), 'zms'=>'ZMS MJPEG'];
308308
if ($monitor->Go2RTCEnabled()) $players['go2rtc'] = 'Go2RTC';
309309
if ($monitor->RTSP2WebEnabled()) {
310310
$players = array_merge($players,[
@@ -444,7 +444,7 @@
444444
ZM\Debug("Muted $muted");
445445

446446
?>
447-
<span class="volume">
447+
<span id="volumeControls" class="volume">
448448
<button id="mute" class="muteBtn" <?php $muted ? 'class="avail"' : '' ?>>
449449
<i class="material-icons md-18">volume_<?php echo $muted ? 'off' : 'up' ?></i>
450450
</button>

0 commit comments

Comments
 (0)