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 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-content">
<label style="color: #ffffff;">Pengadilan Agama Padang Cam 1</label>
<label style="color: #ffffff">{{ item.name }}</label>
<img
class="card-img-top img-fluid"
src="../../../../../assets/images/cctv.jpg"
alt="Image 1"
(click)="
onClick(
'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=034163533934088379392939'
)
"
/>
</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'
)
"
(click)="onClick(item.videoUrl)"
(mouseenter)="onMouseEnter(item)"
(mouseleave)="onMouseLeave()"
/>
</div>
</div>

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

@ -23,8 +23,30 @@ export class SurveillanceComponent {
storedData: any;
spinnerFilterActive = false;
switchState: boolean;
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(
private router: Router,
@ -34,15 +56,15 @@ export class SurveillanceComponent {
ngOnInit() {
this.breadcrumb = {
mainlabel: "Device",
mainlabel: "Surveillance",
links: [
{
name: "Home",
isLink: false,
link: "/dashboard/sales",
link: "",
},
{
name: "Device",
name: "Surveillance",
isLink: false,
},
],
@ -110,4 +132,21 @@ export class SurveillanceComponent {
const iframe = this.videoIframe.nativeElement;
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;
}
}