dermotduffy / frigate-hass-card

A Lovelace card for Frigate in Home Assistant
MIT License
558 stars 59 forks source link

Best Alternative for Fullscreen on iOS #1062

Closed kirsch33 closed 1 year ago

kirsch33 commented 1 year ago

so i've read the section of the updated docs regarding fullscreen not being supported on iOS and just wanting to get some ideas from other users on the best way to combat this. while i love the frigate-hass-card, and honestly believe it to be a better 'viewer' than native frigate itself, the lack of a fullscreen mode on iOS is a killer (to no fault of any developer here).

Is it possible to rotate the display of a card 90 degrees with Home Assistant and then resize the card to fill the available space for a fullscreen-esque appearance? or what other alternatives, if any, exist for iOS users?

dermotduffy commented 1 year ago

Tough one. The new v5.0.0-beta.1 build has a new "expanded mode", which is essentially 75% of "fullscreen" within the HA dashboard (i.e. not using the JS fullscreen API that iOS stubbornly refuses to implement...). Maybe there's something that could do done with this if we bumped it to 100%, then transform: rotate(90) in CSS. I don't know how this would behave exactly though, and I think the killer is it would probably not be able to "overwrite" the top HA "tab" bar.

Really this would need a developer with an iOS device to experiment, though...

kirsch33 commented 1 year ago

im not a developer but i can assist in testing some theories or ideas you may have. i can build the card from source on a specific PR or branch and let you know how it goes.

for example, maybe having a standalone dashboard that includes ONLY frigate-hass-card that is rotated 90 degrees as you mentioned above could be useful. then, with an actionable link to this dashboard, the user would get a quasi-fullscreen mode by not having to disable portrait lock and being redirected to a maximized view of the card (as much as possible).

i will continue to research this topic in hopes of finding a better solution.

kirsch33 commented 1 year ago

following up--i just setup a standalone dashboard with the view type set to "panel" so only the frigate-card is available and i think a 90 degree rotation and increasing the area to 100% would be make it a pretty good approximation of fullscreen mode.

i would be happy to test if you could push through the required changes when you have time.

bagobones commented 1 year ago

v5 Beta 1 can't full screen birdseye (default, I don't use the restreamed method as it takes longer to load) but any camera configured with the go2rtc live provider I am getting full screen mode from the embedded players full screen icon, with full rotation support.

I am also using it in a view in "panel" single card mode.

cameras:
  - frigate:
      camera_name: birdseye
  - frigate:
      camera_name: doorbell
    live_provider: go2rtc
dermotduffy commented 1 year ago

v5 Beta 1 can't full screen birdseye (default, I don't use the restreamed method as it takes longer to load) but any camera configured with the go2rtc live provider I am getting full screen mode from the embedded players full screen icon, with full rotation support.

Yes -- with iOS on iPhone you should (I think) still be able to click fullscreen on the video element itself, just not any other element, e.g. the card itself. So you could get the live view fullscreen via the fullscreen button in the video player, but not the thumbnails/timeline nor can the fullscreen button on the card ever do anything useful in iOS on iPhone.

bagobones commented 1 year ago

V5 card will fill the screen if you are using a single card panel mode view for the dash board this includes the media browser events now.

dermotduffy commented 1 year ago

V5 card will fill the screen if you are using a single card panel mode view for the dash board this includes the media browser events now.

That's right, but not in fullscreen mode (which is what I thought you were talking about: "I am getting full screen mode from the embedded players full screen icon"!).

kirsch33 commented 1 year ago

following up, for whatever reason i do not have any way to click fullscreen even on the video element (at least not from the live viewer, I havent tried after actually clicking play on a media browser clip to see if its available there).

however I can confirm that creating a standalone tab/dashboard and setting it to single card/panel mode seems to work well. To help with this, in the "Shortcuts" iOS app i created an automation to turn off portrait orientation lock whenever Home Assistant is opened and re-lock on close. Now, from my Frigate dynamic notifications I am able to directly link to this panel mode card and rotate my phone to landscape without any additional input and its about 90% as good as if iOS were to fully support the fullscreen API. good enough for me at least.

i will close this issue now

dermotduffy commented 1 year ago

@kirsch33 Do you think you could write up some brief instructions that I could include in the documentation for iOS mobile users who find themselves in the same situation, from what you've learned?

kirsch33 commented 1 year ago

@dermotduffy for sure, one night this week ill reply to this issue with some screenshots and descriptions.

picotrain77 commented 1 year ago

I installed v5 beta and noted on iPhone that I could click on the video and was presented with pause icon in middle of video along with full screen and pop-out options and was able to click full screen and pop-out (if that's the right terminology), but have since noticed that this only works if I have wifi on phone turned off.

With wifi off it works perfectly every time, but with wifi on so accessing HA locally nothing happens if I click on the video, no options are presented.

bagobones commented 1 year ago

Sounds like your connection method mjpeg / webrtc might be changing depending if you are internal or external.

This may depend on ports and firewall rules you have setup for the frigate container and go2rtc.

MikePaer commented 8 months ago

I noticed Safari on iPhone now has a “Fullscreen API” experimental feature flag you can enable in Safari’s advanced WebKit feature flag settings. I verified after enabling it, websites like the screenfull.js demo site work on my iPhone when before they did not. Could this be the path to fullscreen in HA iOS?

dermotduffy commented 8 months ago

Could this be the path to fullscreen in HA iOS?

Absolutely. The card will "just work" if the underlying iOS browser behaves like ... all other browsers. Sounds like that experimental flag may help it do so.

totalitarian commented 6 months ago

Could this be the path to fullscreen in HA iOS?

Absolutely. The card will "just work" if the underlying iOS browser behaves like ... all other browsers. Sounds like that experimental flag may help it do so.

Sorry to bump this issue but even with the Fullscreen API flag checked in safari, it doesn't work for me. Anyone else have success?