Menu incorrectly hidden in gallery mode on iOS

[kirsch33]

Release with the issue:

latest dev build

Last working release (if known):

v5.2.x

Browser and Operating System:

iOS 16.6.1

Description of problem:

On iOS mobile, when looking at the recordings/snapshots view (with the tiles arrayed in rows/columns) when you scroll down, the Frigate menu bar that I have set to always be at the bottom of screen disappears. There is then no way to navigate out of this view without switching dashboards completely and switching back

Frigate card diagnostic information

will provide if needed

[dermotduffy]

On iOS mobile, when looking at the recordings/snapshots view (with the tiles arrayed in rows/columns) when you scroll down, the Frigate menu bar that I have set to always be at the bottom of screen disappears. There is then no way to navigate out of this view without switching dashboards completely and switching back

Huh. Any chance you can provide a short video clip of that happening so I can be sure I understand. This only on iOS? Only on the dev branch, but not the latest release?

[kirsch33]

https://github.com/dermotduffy/frigate-hass-card/assets/37373320/5a940896-dd9a-444d-9773-980e728039b7

you can see in the attached video, in gallery mode the menu bar at the bottom goes away until the very bottom of the galley is reached. this was not happening in v5.2.x

[dermotduffy]

Thank you!

this was not happening in v5.2.x

So this is a custom build from the dev branch? Mind sharing the config you're using?

[kirsch33]

sure, here is the output:

{
  "ha_version": "2023.9.2",
  "card_version": "5.2.0",
  "browser": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36",
  "date": "2023-09-16T17:11:44.893Z",
  "frigate_version": {
    "5db7149f926abc9b72a9114bd58ba62c": "5.0.0-beta.1/0.13.0-db6ee41"
  },
  "lang": "en",
  "timezone": "America/New_York",
  "git": {
    "build_version": "5.2.0-main+g8e3a7b6",
    "build_date": "Thu, 07 Sep 2023 06:30:48 GMT",
    "commit_date": "Sat, 22 Jul 2023 08:10:42 -0700"
  },
  "config": {
    "type": "custom:frigate-card",
    "cameras": [
      {
        "camera_entity": "camera.front",
        "live_provider": "go2rtc",
        "go2rtc": {
          "modes": [
            "webrtc"
          ],
          "stream": "front"
        },
        "id": "front",
        "frigate": {
          "camera_name": "front",
          "url": "192.168.42.12"
        },
        "triggers": {
          "occupancy": false
        }
      },
      {
        "camera_entity": "camera.back",
        "live_provider": "go2rtc",
        "go2rtc": {
          "modes": [
            "webrtc"
          ],
          "stream": "back"
        },
        "id": "back",
        "frigate": {
          "camera_name": "back",
          "url": "192.168.42.12"
        },
        "triggers": {
          "occupancy": false
        }
      },
      {
        "camera_entity": "camera.garage",
        "live_provider": "go2rtc",
        "go2rtc": {
          "modes": [
            "webrtc"
          ],
          "stream": "garage"
        },
        "id": "garage",
        "frigate": {
          "camera_name": "garage",
          "url": "192.168.42.12"
        },
        "triggers": {
          "occupancy": false
        }
      }
    ],
    "live": {
      "draggable": false,
      "lazy_load": true,
      "preload": true,
      "controls": {
        "timeline": {
          "mode": "above",
          "style": "ribbon",
          "media": "all",
          "show_recordings": true
        },
        "thumbnails": {
          "mode": "none"
        },
        "builtin": true
      },
      "transition_effect": "none"
    },
    "view": {
      "dark_mode": "off",
      "default": "live"
    },
    "dimensions": {
      "aspect_ratio_mode": "unconstrained",
      "aspect_ratio": "4:3"
    },
    "performance": {
      "profile": "high"
    },
    "menu": {
      "position": "bottom",
      "buttons": {
        "download": {
          "enabled": false
        },
        "camera_ui": {
          "enabled": false
        },
        "expand": {
          "enabled": false
        },
        "media_player": {
          "enabled": false
        },
        "substreams": {
          "enabled": false
        },
        "microphone": {
          "enabled": true
        },
        "timeline": {
          "enabled": false
        },
        "fullscreen": {
          "enabled": true
        },
        "cameras": {
          "enabled": false
        },
        "frigate": {
          "enabled": true
        }
      },
      "style": "outside"
    },
    "elements": [
      {
        "type": "custom:frigate-card-conditional",
        "conditions": {
          "camera": [
            "garage"
          ],
          "media_loaded": true,
          "view": [
            "live",
            "image"
          ]
        },
        "elements": [
          {
            "type": "custom:frigate-card-ptz",
            "orientation": "horizontal",
            "style": {
              "transform": "none",
              "left": "20px",
              "top": "100px"
            },
            "service": "amcrest.ptz_control",
            "data_left": {
              "entity_id": "camera.garage_amcrest",
              "movement": "left"
            },
            "data_right": {
              "entity_id": "camera.garage_amcrest",
              "movement": "right"
            },
            "data_up": {
              "entity_id": "camera.garage_amcrest",
              "movement": "up"
            },
            "data_down": {
              "entity_id": "camera.garage_amcrest",
              "movement": "down"
            }
          }
        ]
      }
    ],
    "timeline": {
      "style": "ribbon",
      "media": "snapshots",
      "show_recordings": false
    },
    "media_viewer": {
      "auto_play": "all",
      "snapshot_click_plays_clip": false,
      "controls": {
        "thumbnails": {
          "show_download_control": false,
          "show_favorite_control": false,
          "mode": "none",
          "show_details": false,
          "show_timeline_control": false
        },
        "timeline": {
          "show_recordings": true,
          "media": "all",
          "style": "ribbon",
          "mode": "above"
        },
        "next_previous": {
          "style": "chevrons"
        },
        "builtin": true
      },
      "draggable": false,
      "transition_effect": "none"
    },
    "media_gallery": {
      "controls": {
        "thumbnails": {
          "show_download_control": false,
          "show_favorite_control": false,
          "show_timeline_control": false
        },
        "filter": {
          "mode": "none"
        }
      }
    }
  }
}

[kirsch33]

update: figured out if I change aspect ratio from unconstrained to dynamic this issue goes away.

I'm going to close this for now since I'm not sure why I had even set unconstrained in the first place, and dynamic hasn't caused any other issues