fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hover video player

This commit is contained in:
Fuzi_fauzia 2024-06-22 02:37:16 +07:00
parent 547e6ddc8f
commit 1433c55fce
2 changed files with 49 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
View File

@ -181,70 +181,17 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-3 col-md-6 col-12"> <div class="col-lg-3 col-md-6 col-12" *ngFor="let item of cameras">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #252525 !important">
<div class="card-content"> <div class="card-content">
<label style="color: #ffffff;">Pengadilan Agama Padang Cam 1</label> <label style="color: #ffffff">{{ item.name }}</label>
<img <img
class="card-img-top img-fluid" class="card-img-top img-fluid"
src="../../../../../assets/images/cctv.jpg" src="../../../../../assets/images/cctv.jpg"
alt="Image 1" alt="Image 1"
(click)=" (click)="onClick(item.videoUrl)"
onClick( (mouseenter)="onMouseEnter(item)"
'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=034163533934088379392939' (mouseleave)="onMouseLeave()"
)
"
/>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<label style="color: #ffffff;">Pengadilan Agama Padang Cam 2</label>
<img
class="card-img-top img-fluid"
src="../../../../../assets/images/cctv.jpg"
alt="Image 2"
(click)="
onClick(
'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=671014455048381705129283'
)
"
/>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<label style="color: #ffffff;">Pengadilan Agama Purwakarta Cam 1</label>
<img
class="card-img-top img-fluid"
src="../../../../../assets/images/cctv.jpg"
alt="Image 2"
(click)="
onClick(
'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=194533247298993755522217'
)
"
/>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<label style="color: #ffffff;">Pengadilan Agama Purwakarta Cam 2</label>
<img
class="card-img-top img-fluid"
src="../../../../../assets/images/cctv.jpg"
alt="Image 2"
(click)="
onClick(
'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=113658520181242556385273'
)
"
/> />
</div> </div>
</div> </div>

49
src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
View File

@ -11,7 +11,7 @@ import videojs from "video.js";
}) })
export class SurveillanceComponent { export class SurveillanceComponent {
@ViewChild('videoIframe', { static: false }) videoIframe: ElementRef; @ViewChild('videoIframe', { static: false }) videoIframe: ElementRef;
filteredRows: any[]; filteredRows: any[];
searchTerm: string = ""; searchTerm: string = "";
buildingSelected: any; buildingSelected: any;
@ -23,8 +23,30 @@ export class SurveillanceComponent {
storedData: any; storedData: any;
spinnerFilterActive = false; spinnerFilterActive = false;
switchState: boolean; switchState: boolean;
public breadcrumb: any; public breadcrumb: any;
showIframe = false;
cameras = [
{
id: 1,
name: 'Pengadilan Agama Padang Cam 1',
videoUrl: 'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=034163533934088379392939'
},
{
id: 2,
name: 'Pengadilan Agama Padang Cam 2',
videoUrl: 'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=671014455048381705129283'
},
{
id: 3,
name: 'Pengadilan Agama Purwakarta Cam 1',
videoUrl: 'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=194533247298993755522217'
},
{
id: 4,
name: 'Pengadilan Agama Purwakarta Cam 2',
videoUrl: 'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=113658520181242556385273'
}
];
constructor( constructor(
private router: Router, private router: Router,
@ -34,15 +56,15 @@ export class SurveillanceComponent {
ngOnInit() { ngOnInit() {
this.breadcrumb = { this.breadcrumb = {
mainlabel: "Device", mainlabel: "Surveillance",
links: [ links: [
{ {
name: "Home", name: "Home",
isLink: false, isLink: false,
link: "/dashboard/sales", link: "",
}, },
{ {
name: "Device", name: "Surveillance",
isLink: false, isLink: false,
}, },
], ],
@ -110,4 +132,21 @@ export class SurveillanceComponent {
const iframe = this.videoIframe.nativeElement; const iframe = this.videoIframe.nativeElement;
iframe.src = videoUrl; iframe.src = videoUrl;
} }
onMouseEnter(camera: any) {
console.log('enter');
const iframe = this.videoIframe.nativeElement;
iframe.src = camera.videoUrl;
this.showIframe = true;
}
onMouseLeave() {
console.log('leave');
const iframe = this.videoIframe.nativeElement;
iframe.src = '';
this.showIframe = false;
}
} }