Aspect Ratio strange

[thundergreen]

Just updated to latest rc v4 version and the vieo is a bit strange here.

Is this a bug or a feature ? :)

[thundergreen]

my config:

type: custom:frigate-card
cameras:
  - camera_entity: camera.front_door
    live_provider: ha
    frigate:
      camera_name: front_door
  - camera_entity: camera.doorbell
    live_provider: ha
    frigate:
      camera_name: doorbell
  - camera_entity: camera.garage
    live_provider: frigate-jsmpeg
  - camera_entity: camera.garden
    live_provider: ha
    frigate:
      camera_name: camera.garden
  - camera_entity: camera.garden_upstairs_2
    live_provider: ha
    frigate:
      camera_name: camera.garden_upstairs_2
  - frigate:
      camera_name: birdseye
menu:
  buttons:
    frigate:
      enabled: true
    image:
      enabled: false
  button_size: 80
  style: outside
  position: top
live:
  preload: true
  transition_effect: slide
  view:
    update_cycle_camera: true
    update_seconds: 20
    default: live
    camera_select: live
  controls:
    next_previous:
      size: 100
    thumbnails:
      media: clips
      mode: below
      size: 80
    title:
      mode: popup-top-right
      duration_seconds: 3
  lazy_load: true
  lazy_unload: all
  auto_unmute: all
dimensions:
  aspect_ratio: '16:7'
  aspect_ratio_mode: static
elements:
  - type: custom:frigate-card-conditional
    conditions:
      camera:
        - camera.front_door_webrtc
    elements:
      - type: state-badge
        entity: sensor.dark_sky_humidity
        style:
          right: '-10px'
          top: 86px
          color: rgba(0,0,0,0)
          opacity: 0.7
      - type: state-badge
        entity: sensor.solar_powered_outdoor_siren_air_temperature
        style:
          right: 80px
          top: 110px
          color: rgba(0,0,0,0)
          opacity: 0.7
      - type: custom:frigate-card-menu-state-icon
        entity: lock.main_door
        tap_action:
          action: toggle
      - type: custom:frigate-card-menu-state-icon
        entity: script.restart_foscam
        tap_action:
          action: toggle
      - type: custom:frigate-card-menu-state-icon
        entity: script.preset_garage
        tap_action:
          action: toggle
      - type: custom:frigate-card-menu-state-icon
        entity: script.preset_street
        tap_action:
          action: toggle
      - type: custom:frigate-card-menu-state-icon
        entity: script.preset_maindoor
        tap_action:
          action: toggle
      - type: custom:frigate-card-conditional
        conditions:
          view:
            - live
        elements:
          - type: icon
            icon: mdi:arrow-up
            style:
              background: rgba(10, 10, 10, 0.75)
              border-radius: 5px
              right: 90px
              bottom: 130px
              transform: scale(3, 3)
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.turn_up
          - type: icon
            icon: mdi:arrow-down
            style:
              background: rgba(10, 10, 10, 0.75)
              border-radius: 5px
              right: 90px
              bottom: 30px
              transform: scale(3, 3)
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.turn_down
          - type: icon
            icon: mdi:arrow-left
            style:
              background: rgba(10, 10, 10, 0.75)
              border-radius: 5px
              right: 150px
              bottom: 80px
              transform: scale(3, 3)
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.turn_left
          - type: icon
            icon: mdi:arrow-right
            style:
              background: rgba(10, 10, 10, 0.75)
              border-radius: 5px
              right: 30px
              bottom: 80px
              transform: scale(3, 3)
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.turn_right
          - type: icon
            icon: mdi:magnify-plus
            style:
              background: rgba(10, 10, 10, 0.75)
              border-radius: 5px
              right: 30px
              bottom: 400px
              transform: scale(3, 3)
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.zoom_in
          - type: icon
            icon: mdi:magnify-minus
            style:
              background: rgba(10, 10, 10, 0.75)
              border-radius: 5px
              right: 120px
              bottom: 400px
              transform: scale(3, 3)
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.zoom_out
  - type: custom:frigate-card-conditional
    conditions:
      camera:
        - camera.door_bell_webrtc
    elements:
      - type: custom:frigate-card-menu-state-icon
        entity: lock.main_door
        tap_action:
          action: toggle
  - type: custom:frigate-card-conditional
    conditions:
      camera:
        - camera.garage
    elements:
      - type: custom:frigate-card-menu-state-icon
        entity: light.garage
        tap_action:
          action: toggle
  - type: custom:frigate-card-conditional
    conditions:
      camera:
        - camera.garden_webrtc
    elements:
      - type: custom:frigate-card-menu-state-icon
        entity: light.porch_garden
        icon: mdi:track-light
        tap_action:
          action: toggle
media_viewer:
  controls:
    next_previous:
      style: thumbnails
      size: 90
    thumbnails:
      mode: below
      size: 90
    title:
      duration_seconds: 8
      mode: popup-top-right
  auto_unmute: all

[thundergreen]

just tested.. i my Dwains dashboard it works fine but normal ha dashboard it's way to big.. well will play around and let it open for the moment and revert asap.

[dermotduffy]

That's weird. Kind of hard to make out those screenshots, but I'm assuming the issue is that the video is somehow not centered and not contained within the card correctly?

Can't say I've seen that before. Quick suggestions are to try a different theme or disable anything non-standard in the dashboard temporarily to see if it fixes it (e.g. disable cardmod or other JavaScript modules that may change what the card renders).

Also welcome would be a much more basic config with just a single camera and see if that behaves the same way.

[dermotduffy]

FWIW: I can use that same configuration (Chrome, single card on a new dashboard) and it seems to work without the issue, which reinforces the theory there may be something else (theme / other javascript) that is conflicting somehow.

PS: The menu buttons are very large (size 80) but somehow they are not that size in your screenshot?

[dermotduffy]

@thundergreen Any thoughts/discoveries on this?

[dermotduffy]

Please re-open with more details to aid reproduction if this is still an issue. Thank you!