Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lovelace Card Stream impossible to stop on mobile devices #100

Open
jxlarrea opened this issue Jul 26, 2019 · 22 comments

Comments

@jxlarrea
Copy link

jxlarrea commented Jul 26, 2019

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

This comment has been minimized.

Copy link
Author

jxlarrea commented Jul 26, 2019

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 twrecked self-assigned this Jul 27, 2019
@twrecked

This comment has been minimized.

Copy link
Owner

twrecked commented Jul 27, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Jul 30, 2019

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

This comment has been minimized.

Copy link
Author

jxlarrea commented Jul 30, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Jul 30, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Jul 31, 2019

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

This comment has been minimized.

Copy link
Author

jxlarrea commented Jul 31, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Jul 31, 2019

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

@jxlarrea

This comment has been minimized.

Copy link
Author

jxlarrea commented Jul 31, 2019

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

This comment has been minimized.

Copy link
Author

jxlarrea commented Jul 31, 2019

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

This comment has been minimized.

Copy link
Author

jxlarrea commented Jul 31, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Aug 1, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Aug 1, 2019

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

This comment has been minimized.

Copy link
Author

jxlarrea commented Aug 1, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Aug 1, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Aug 1, 2019

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

This comment has been minimized.

Copy link
Author

jxlarrea commented Aug 2, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Aug 3, 2019

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

I might just push this code to master anyway.

@jxlarrea

This comment has been minimized.

Copy link
Author

jxlarrea commented Aug 3, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Aug 3, 2019

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

This comment has been minimized.

Copy link
Author

jxlarrea commented Aug 3, 2019

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

This comment has been minimized.

Copy link
Owner

twrecked commented Aug 6, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.