Expanded view not working in certain [unknown] circumstances

[jacauc]

Checklist:

• [X ] I updated to the latest version available
• [X ] I cleared the cache of my browser

Release with the issue: Latest

Last working release (if known): N/A

Browser and Operating System:

Latest Chrome on latest Windows 11

Description of problem:

When adding a card in masonry mode and clicking on the expand button, the window actually shrinks and cuts off part of the video

Javascript errors shown in the web inspector (if applicable):

Additional information:

[dermotduffy]

@jacauc Expanded works works fine for me in masonry panels [the default kind of panel] -- I use it all the time in Chrome.

I can't really understand that screenshot. Is that the full screen? If yes, why is the "EDIT" button (not provided by the card) so enormous? If not, I can't understand why expanded mode would be so small! Do you have anything custom/unusual about your Lovelace / dashboard setup that might not have tested before?

Would it be possible to create a short video of the card not in expanded mode, where you click the button and we see the result?

[jacauc]

Hi @dermotduffy

Making a screencast video will be a bit tricky, but here are two more screenshots. One is the default view and the next is after clicking the expand button

[dermotduffy]

That helps, thanks. Can you also hold down your Frigate menu button in the card for a few seconds, and paste the diagnostics that appear into this issue?

[jacauc]

{
  "ha_version": "2023.5.0",
  "card_version": "5.0.0",
  "browser": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36",
  "date": "2023-05-04T15:48:21.998Z",
  "frigate_version": {
    "2242f726d569954d97617d42a430c6a5": "4.0.0/0.12.0-da3e197"
  },
  "lang": "en",
  "timezone": "Africa/Johannesburg",
  "git": {
    "build_version": "5.0.0-HEAD+gd7b150a",
    "build_date": "Sat, 22 Apr 2023 17:18:25 GMT",
    "commit_date": "Sat, 22 Apr 2023 10:10:23 -0700"
  },
  "config": {
    "type": "custom:frigate-card",
    "cameras": [
      {
        "camera_entity": "camera.gate"
      },
      {
        "camera_entity": "camera.driveway"
      },
      {
        "camera_entity": "camera.patio"
      },
      {
        "camera_entity": "camera.upstairs_patio"
      },
      {
        "camera_entity": "camera.kitchen_corridor"
      },
      {
        "camera_entity": "camera.kitchen_door"
      },
      {
        "camera_entity": "camera.blikbrein_server_room_cam"
      }
    ],
    "menu": {
      "style": "overlay",
      "buttons": {
        "expand": {
          "enabled": true
        },
        "fullscreen": {
          "enabled": false
        },
        "media_player": {
          "enabled": false
        },
        "substreams": {
          "enabled": false
        }
      },
      "position": "top"
    },
    "view": {
      "dark_mode": "auto",
      "update_force": false,
      "update_cycle_camera": false,
      "scan": {
        "enabled": true
      },
      "default": "live"
    },
    "dimensions": {
      "aspect_ratio_mode": "dynamic"
    },
    "live": {
      "preload": true,
      "controls": {
        "timeline": {
          "mode": "below",
          "style": "ribbon"
        }
      },
      "layout": {
        "fit": "contain"
      }
    },
    "timeline": {
      "style": "stack",
      "media": "clips"
    },
    "performance": {
      "profile": "high"
    },
    "media_viewer": {
      "layout": {
        "fit": "contain"
      },
      "lazy_load": true
    }
  }
}

[dermotduffy]

@jacauc Thank you. Nothing looks obviously wrong there. What is the native size (width/height) of the video stream on a camera where this happens as per your Frigate config? Also does this happen on all cameras, or just one?

[dermotduffy]

In addition to the native stream size question above, can you also include the full raw configuration dump of the dashboard itself, you can get that by clicking on the 'Raw configuration editor' button.

I ask since I still can't get expanded mode to look anything like your second screenshot, so I'm wondering if it's some dashboard (not card) configuration. So far I've tried exactly your HA version and exactly your config and it still works as expected (Chrome v111).

[jacauc]

Hi @dermotduffy

Not sure how I get native size of cameras. They are all hikvision and milesight cameras. The problem occurs with all of the cameras.

Some part of my frigate config file which seems to indicate the cameras are 1280x720

ffmpeg:
  # Optional: global ffmpeg args (default: shown below)
  global_args: -hide_banner -loglevel warning
  # Optional: global hwaccel args (default: shown below)
  # NOTE: See hardware acceleration docs for your specific device
  hwaccel_args: []
  # Optional: global input args (default: shown below)
  input_args: -avoid_negative_ts make_zero -fflags +genpts+discardcorrupt -rtsp_transport tcp -timeout 5000000 -use_wallclock_as_timestamps 1 -c:v h264_cuvid 
  #input_args: -avoid_negative_ts make_zero -fflags +genpts+discardcorrupt -rtsp_transport tcp -timeout 5000000 -use_wallclock_as_timestamps 1 
  # Optional: global output args
  output_args:
    # Optional: output args for detect streams (default: shown below)
    detect: -f rawvideo -pix_fmt yuv420p
    # Optional: output args for record streams (default: shown below)
    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c copy -an
    # Optional: output args for rtmp streams (default: shown below)
    rtmp: -c copy -f flv

objects:
 track:
   - person
   - car
   - bicycle
   - motorcycle
   - cat
   - dog

detect:
  fps: 10
  width: 1280
  height: 720
  stationary:
    # Optional: Frequency for running detection on stationary objects (default: shown below)
    # When set to 0, object detection will never be run on stationary objects. If set to 10, it will be run on every 10th frame.
    interval: 0
    # Optional: Number of frames without a position change for an object to be considered stationary (default: 10x the frame rate or 10s)
    threshold: 50 

snapshots:
  # Optional: Enable writing jpg snapshot to /media/frigate/clips (default: shown below)
  # This value can be set via MQTT and will be updated in startup based on retained value
  enabled: True
  # Optional: print a timestamp on the snapshots (default: shown below)
  timestamp: True
  # Optional: draw bounding box on the snapshots (default: shown below)
  bounding_box: True
  retain:
    default: 30

timestamp_style:
  format: "%d.%m.%Y %H:%M:%S"

Below is my raw config

title: Skaife
views:
  - title: Camera
    path: camera
    icon: mdi:cctv
    visible:
      - user: 729e3ae2d57246a7821090254e211
      - user: 0ac269cc5e045aee7a038fa543ab3
      - user: 0603290f049efbcc12bca41bf7445
    badges: []
    cards:
      - show_state: false
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.gate
      - show_state: false
        show_name: true
        camera_view: live
        type: picture-entity
        entity: camera.driveway
      - show_state: false
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.patio
      - show_state: false
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.upstairs_patio
      - show_state: false
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.kitchen_door
      - show_state: false
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.front_gate_birds_eye
      - show_state: false
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.kitchen_corridor
      - show_state: false
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.mancave
      - show_state: false
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.octoprint_2
  - title: New Frigate
    path: new-frigate
    badges: []
    cards:
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.gate
          - camera_entity: camera.driveway
          - camera_entity: camera.patio
          - camera_entity: camera.upstairs_patio
          - camera_entity: camera.kitchen_corridor
          - camera_entity: camera.kitchen_door
          - camera_entity: camera.blikbrein_server_room_cam
        menu:
          style: overlay
          buttons:
            expand:
              enabled: true
            fullscreen:
              enabled: false
            media_player:
              enabled: false
            substreams:
              enabled: false
          position: top
        view:
          dark_mode: auto
          update_force: false
          update_cycle_camera: false
          scan:
            enabled: true
          default: live
        dimensions:
          aspect_ratio_mode: dynamic
        live:
          preload: true
          controls:
            timeline:
              mode: below
              style: ribbon
          layout:
            fit: contain
        timeline:
          style: stack
          media: clips
        performance:
          profile: high
        media_viewer:
          layout:
            fit: contain
          lazy_load: true
  - theme: Backend-selected
    title: Driveway
    path: events
    badges: []
    cards:
      - square: false
        columns: 2
        type: grid
        title: Driveway
        cards:
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.driveway_car
            name: Driveway Car
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.driveway_person
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.driveway_motorcycle
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.driveway_bicycle
      - square: false
        columns: 2
        type: grid
        title: front_gate_birds_eye
        cards:
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_car
            name: Car
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_person
            name: Person
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_motorcycle
            name: Motorcycle
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_bicycle
            name: Bicycle
  - theme: Backend-selected
    title: Gate
    path: gate
    badges: []
    cards:
      - square: false
        columns: 2
        type: grid
        title: Gate
        cards:
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_car
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_person
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_motorcycle
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_bicycle
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_cat
          - show_state: false
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.gate_dog
  - theme: Backend-selected
    title: Camera Events
    path: camera_events
    badges: []
    cards:
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.gate
          - camera_entity: camera.driveway
          - camera_entity: camera.patio
          - camera_entity: camera.kitchen_corridor
          - camera_entity: camera.kitchen_door
          - camera_entity: camera.upstairs_patio
        view:
          default: clip
          camera_select: clip
        menu:
          buttons:
            frigate:
              enabled: false
            clips:
              enabled: true
            snapshots:
              enabled: true
            image:
              enabled: true
            download:
              enabled: true
            frigate_ui:
              enabled: false
            fullscreen:
              enabled: false
          button_size: 30
          style: overlay
          position: top
        live:
          preload: false
          transition_effect: none
          controls:
            next_previous:
              style: chevrons
            title:
              duration_seconds: 0
        media_viewer:
          controls:
            title:
              duration_seconds: 0
  - theme: Backend-selected
    title: Camera Events2
    path: camera_events2
    type: sidebar
    visible:
      - user: 729e3ae2d57246a78210902546d7e211
      - user: 0adc269cc5e04715aee7a038fa543ab3
      - user: 0603e97290f049efbcc12bca41bf7445
    badges: []
    cards:
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.driveway
          - camera_entity: camera.front_gate_birds_eye
          - camera_entity: camera.patio
          - camera_entity: camera.kitchen_corridor
          - camera_entity: camera.kitchen_door
          - camera_entity: camera.gate
          - camera_entity: camera.mancave
          - camera_entity: camera.upstairs_patio
        view:
          default: snapshots
          camera_select: snapshots
          update_cycle_camera: true
        menu:
          buttons:
            frigate:
              enabled: false
            live:
              enabled: false
            clips:
              enabled: true
            snapshots:
              enabled: true
            image:
              enabled: true
            download:
              enabled: true
            frigate_ui:
              enabled: false
            fullscreen:
              enabled: false
          button_size: 50
          style: outside
          position: top
        live:
          preload: false
          transition_effect: none
          controls:
            next_previous:
              style: chevrons
            title:
              duration_seconds: 0
          draggable: false
          lazy_load: false
        image:
          refresh_seconds: 5
  - theme: Backend-selected
    type: panel
    badges: []
    cards:
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.driveway
            live_provider: frigate-jsmpeg
          - camera_entity: camera.gate
            live_provider: frigate-jsmpeg
          - camera_entity: camera.kitchen_corridor
            live_provider: frigate-jsmpeg
          - camera_entity: camera.kitchen_door
            live_provider: frigate-jsmpeg
          - camera_entity: camera.mancave
            live_provider: frigate-jsmpeg
          - camera_entity: camera.patio
            live_provider: frigate-jsmpeg
          - camera_entity: camera.upstairs_patio
            live_provider: frigate-jsmpeg
          - camera_entity: camera.front_gate_birds_eye
            live_provider: frigate-jsmpeg

[dermotduffy]

I currently do not have any additional ideas here, nor anyone else reporting this behavior. I can take your dashboard config (change the entities to my own cameras), and the expanded button works just fine on a fresh Chrome browser.

Is it possible you have styling being applied by something else? (e.g. card-mod setup, other resources being applied to your Lovelace configuration, etc)?

[dermotduffy]

Closing this as unactionable/non-reproducible. If anyone has new information, or also experiences this issue, please contribute and we can revisit/reopen.