Line data    Source code

       1           1 : <template lang="pug">
       2          42 : .x-camera.w-100.h-100(:title='description' @click='onClick($event)')
       3          42 :   .m-0.h4.w-100.h-100.position-absolute
       4          42 :     .x-camera-overlay.d-flex.flex-column.align-items-start
       5          42 :       .x-camera-name.badge.m-1(:class='[ `badge-${connected ? "success" : "danger" }` ]')
       6             :         | {{title}}
       7             :       .x-camera-fps.badge.badge-secondary.m-1(v-if='showFps')
       8             :         | {{fps}} fps
       9             :     .h-100.d-flex.justify-content-center.align-items-center(v-if='!connected')
      10             :       i.fas.fa-video-slash.fa-3x
      11             :   img.x-stream.x-img-fluid.m-auto.d-block(:class='{ "h-100": connected }'
      12           0 :     :src='imgURL' @error='onError' @load='onLoaded' draggable="false")
      13             : </template>
      14             : <script src='./CameraCard.vue.js' />
      15             : <style lang='scss'>
      16             : .x-camera-name {
      17             :   opacity: 0.65;
      18             : }
      19             : .x-camera-fps {
      20             :   opacity: 0.20;
      21             : }
      22             : .x-camera {
      23             :   // display no-video icon
      24             :   min-height: 10em;
      25             : 
      26             :   &:hover {
      27             :     .x-camera-name, .x-camera-fps {
      28             :       opacity: 0.85;
      29             :     }
      30             :   }
      31             : }
      32             : .x-img-fluid {
      33             :   max-width: 100%;
      34             :   max-height: 100%;
      35             :   width: auto;
      36             :   height: auto;
      37             :   object-fit: contain;
      38             : }
      39             : .x-camera-overlay {
      40             :   pointer-events: none;
      41             : 
      42             :   position: absolute;
      43             :   left: 5px;
      44             :   top: 5px;
      45             : }
      46             : </style>