Lovelace Card Stream impossible to stop on mobile devices

[jxlarrea]

Not sure what happened but #85 is happening again after migrating to the HACS release. The card work properly on desktop but on mobile (and other touch devices) it is impossible to stop a camera stream.

Seems like the on-tap event isn't working properly.

[jxlarrea]

After some testing, removing the controls attribute from the <video> tags allows for the touch events to actually register and stop the stream. It seems that the default controls on the video element swallow touch events.

Since I use the card both on desktop and mobile I do not wish to see the playback controls removed. A quick workaround I found is declaring a @pause event handler to the video tag:

<video class="${streamHidden} video-16x9"
id="stream-${this._cameraId}"
poster="${this._stream_poster}"
autoplay playsinline controls
onended="${(e) => { this.stopStream(this._cameraId); }}"
@click="${(e) => { this.stopStream(this._cameraId); }}"    
@pause="${(e) => { this.stopStream(this._cameraId); }}"                 
">
Your browser does not support the video tag.
</video>

With the above stopStream is effectively called when clicking the pause button on the video element, allowing to use the rest of the controls (volume, full screen, etc.).

[twrecked]

What happened is I rewrote it. I looked at the litElement documentation and realised the original code was doing far too much work - it re-rendered every time any piece of home-assistant state changed, even if the change was unrelated to the camera.

I'm not sure why those changes stopped the tap from working but it did.

I'm going to setup mobile browser debugging and make sure everything else works as expected. It might be a day or two because I'm trying out some code to fix mode issues we're seeing.

[twrecked]

I got remote chrome debugging working so I can finally test it on my android device. Seems like autoplay playsinline controls aren't needed at all when using the HLS library.

I'll do some more investigating, I think I might need to change the settings based on the client type - mobile or desktop.

[jxlarrea]

I think I might need to change the settings based on the client type - mobile or desktop.

Sounds like the most elegant solution. Although implementing your own controls instead of relying on the default set (not sure how annoying / tedious that would be) would allow to capture touch events and maintain parity between desktop and mobile.

[twrecked]

Custom controls would be nice - like you, I have no idea how hard or easy that is. I need to concentrate on the back end pieces for the near term.

I just checked in a possible fix, it should appear on HACS shortly - under the master branch - that removes the control option for mobile devices.

edit: I updated in the lovelace repository https://github.com/twrecked/lovelace-hass-aarlo

edit #2: custom isn't too too bad, I might give it a go over the weekend. Hover/click on desktop to make the controls appear, tap on mobile to do the same.

[twrecked]

It's messy and no where near finished but this https://github.com/twrecked/lovelace-hass-aarlo/tree/custom-controls will show some controls.

[jxlarrea]

Are you sure that the new lovelace-hass-aarlo release includes the latest changes? There seems to be no changes from the last one in the actual .js file.

[twrecked]

The master branch should. Just select it from the drop down.

[jxlarrea]

Oh, i thought you had actually created a release with the changes mentioned in that edit 3 comments ago. I see the changes in the master branch but not in the 0.0.3 release, which is the one HACS is pulling.

[jxlarrea]

By the way, where does HACS gets the local copy of the lovelace component from? Even if I edit the hass-aarlo.js file in my /www/community/lovelace-hass-aarlo, I still see the original file in the HA frontend. Even tried to cache bust by adding a ?v=1 query string to the module.

Am I missing something?

[jxlarrea]

Updated to the master branch. Seems like the mobile detection is not working properly. Controls are removed from both desktop AND mobile. Regardless, at least the full screen control should show up in mobile since its a must.

I honestly would create a PR and contribute but, again, I have no clue where HACS is reading the actual file from. I'm assuming that /community_plugin/lovelace-hass-aarlo/hass-aarlo.js points to /config/www/community/lovelace-hass-aarlo/hass-aarlo.js but no matter what I change in the file, /community_plugin/lovelace-hass-aarlo/hass-aarlo.js always responds with the original js file.

Edit: Created a custom-hass-arlo.js file in my local directory with the code in the custom_controls branch. It's a great start, the stop button actually works on both desktop and mobile. Honestly all that's left is wiring the full screen button and call it a day, it's perfect!

[twrecked]

Glad you got it working, if I remember correctly the HACS component stores stuff in a strange place!

My plan is to make the custom_controls branch nicer. On Desktop:

• click on the image causes it to stop
• hover over it causes the controls to appear for 5 seconds

On mobile:

• click on the image causes the controls to appear for 5 seconds

For videos:

• you can stop, pause, play, drag the seek bar to any position and go full screen

For streams:

• you can stop

Adding full screen isn't that difficult, I found the code to do that early today.

[twrecked]

Just pushed some changes to the custom_controls make it work as described in my previous post. Just have the full screen to hook in.

[jxlarrea]

Great, I'll wait for the full screen support then.

Off-topic, but I wanted to give a quick thanks to you - not only for this great Arlo integration but also because I used your code to learn how components work in Home Assistant. I ended up creating my own component for a bed presence and sleep monitor tracker called Emfit QS. Even got it published in HACS.

[twrecked]

Glad I could help with the code. I remember struggling when I started this component and I had the original Arlo code to work from - the documentation is sorely lacking. The custom card stuff is even worse.

[twrecked]

And I just checked in full screen support and a working seek bar. It's got a few glitches I need to deal with but it's working pretty well for me.

[jxlarrea]

Just tested the new code. Stop and fullscreen buttons work on both desktop and mobile. However, there seems to be a bug on mobile (tested on Android / Chrome). When on full screen mode, if I rotate the phone the video disappears then screen goes back to the HA UI and the camera state remains "Streaming". It can be stopped by tapping on the lovelace card again and hitting the stop button.

[twrecked]

Noted. I'm probably missing a mobile event, I'll give it a look.

I might just push this code to master anyway.

[jxlarrea]

Have you considered using a dedicated html5 video js library such as Plyr? Might save a lot of the custom controls boilerplate. Plyr integrates very well with Hls.js.

[twrecked]

I haven't but I will now. Javascript/web isn't my area of expertise - I think this card is the second time I've done anything with javascript - so any input/help is greatly appreciated!

[jxlarrea]

Here is the Lovelace card with a quick and dirty Plyr integration to get you started:

https://gist.github.com/jxlarrea/c4fb6ec2697d9828925688c43565c5b0

It looks really neat. I only hooked it up to the stream <video> tag. I had to modify a bit of the CSS. Also, changed the player color to gray so it fits any theme the user might have.

Something should be done about the long delay between clickImage() and the player actually showing up. Maybe add a loading indicator on top of the thumbnail.

Regarding the rotation bug that causes the video to disappear on mobile: seems like the rotation causes the whole LitElement to reset for some reason, losing all previous states.

[twrecked]

I like it. I got the video going in no time but there were some small issues with the library not auto starting - I'll create a branch tonight and looks at those issues.