1104051 - Loop rooms UI layout for standalone needs to be responsive (usable on mobile/smaller screens)

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P1)

Description

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

This is a follow-up from bug 1097743; we need a better responsive layout for Loop rooms standalone users.

Comment 1

[Maire Reavy [:mreavy]]

[Tracking Requested - why for this release]:
This patch is for the standalone app. We may choose to uplift it for the sake of shared code with desktop.  Marking this as tracking Fx35 so we get this fixed before Fx35 goes to Release.

Comment 2

[:shell escalante]

needs owner

Comment 3

[Maire Reavy [:mreavy]]

[Tracking Requested - why for this release]:
After triage we've moved this to blocking Fx36 (though we'd love to fix it this week).

Comment 4

[Maire Reavy [:mreavy]]

Niko -- Are you planning to take this bug?  (I heard in the standup today that you are.)  You don't have to take this.  If you would prefer, I can find a different owner for this one.  Thanks!

Comment 5

[Romain Testard [:RT]]

Can you clarify what the expected outcome here is? 
For instance will this deliver bigger buttons (join room, mute, ...) to make the experience mobile friendly? Is there a need for UX?

Comment 6

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

(In reply to Maire Reavy [:mreavy] (Plz needinfo me) from comment #4)
> Niko -- Are you planning to take this bug?  (I heard in the standup today
> that you are.)  You don't have to take this.  If you would prefer, I can
> find a different owner for this one.  Thanks!

No pb. I started something last week, it's not finished yet but I can try attaching a patch soon.

(In reply to Romain Testard [:RT] from comment #5)
> Can you clarify what the expected outcome here is? 
> For instance will this deliver bigger buttons (join room, mute, ...) to make
> the experience mobile friendly? Is there a need for UX?

We don't have UX spec for mobile/small screens so far, I was mostly trying to make things a bit less worse. Things would be obviously easier with UX involved ;) NI :sevaan here.

Comment 7

[Maire Reavy [:mreavy]]

Thanks, Niko.  I see this bug as a first step toward making the standalone more mobile friendly.  I'm not expecting a major re-do on this bug -- just progress in the right direction.   

Sevaan -- How much do you think is reasonable for a first step toward making the standalone app more mobile friendly?

Comment 8

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

Attachment: Bug 1097743 - Improved Loop standalone UI/X on smaller screens.

This patch tries to improve a little the UX on mobile/smaller device. Note that it only works in portrait mode (the SDK gets in the way when it comes to dealing with video element sizes in landscape mode).

Comment 9

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

Attachment: Before/After applying the CSS patch

Comment 10

[Dan Mosedale (:dmosedale, :dmose)]

I propose pair-reviewing either today, or Thursday AM Pacific time.  Would one of those work?

Comment 11

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

(In reply to Dan Mosedale (:dmose) - use needinfo? (not reading bugmail regularly) from comment #10)
> I propose pair-reviewing either today, or Thursday AM Pacific time.  Would
> one of those work?

Thursday AM PST sounds good to me.

Comment 12

[Sevaan Franks [:sevaan]]

Bug 1083779 exists for the mobile version of the link clicker, and I've just updated it with some mockups:

https://bugzilla.mozilla.org/attachment.cgi?id=8535056

Comment 13

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8534534 [details] [diff] [review]
Bug 1097743 - Improved Loop standalone UI/X on smaller screens.

Review of attachment 8534534 [details] [diff] [review]:
-----------------------------------------------------------------

Please file a [tech-debt] bug for setting up a UI showcase view for this.

If it's not too hard, please fix the grey bar at the bottom of tall portrait displays.

Let's file a bug about landscape mode (if it's hard; even fallback to just displaying a "please rotate" message", scale down, ...).  Perhaps the bug Sevaan referenced is good enough.

r=dmose, conditional on fixing the grey bar and addressing the comments.

::: browser/components/loop/content/shared/css/conversation.css
@@ +792,2 @@
>    position: absolute;
> +  top: 45%;

Since this is compensation for font size, let's do it as calc(50% - 1em) or similar.

@@ +862,5 @@
> +    width: 100%;
> +  }
> +  .standalone .room-conversation-wrapper .room-inner-info-area {
> +    right: 0;
> +    margin: auto;

A comment about semantically why this works would nice, but don't block on this to land.

@@ +866,5 @@
> +    margin: auto;
> +    width: 100%;
> +  }
> +  .standalone .room-conversation-wrapper .video-layout-wrapper {
> +    height: calc(100% - 50px - 25px);

Add a comment here about how these values are chosen.

@@ +876,5 @@
> +    /* Assumes 4:3 aspect ratio */
> +    width: 180px;
> +    height: 135px;
> +  }
> +  .standalone .conversation-toolbar {

Consider whether it makes sense to add a relative unit (percents?).

@@ +881,5 @@
> +    height: 38px;
> +    padding: 8px;
> +  }
> +  .standalone .media.nested {
> +    min-height: 0px;

Uncomment to see if this is necessary, since it's not semantically meaningful.  Also s/0px/0/.

Comment 14

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

(In reply to Sevaan Franks [:sevaan] from comment #12)
> Bug 1083779 exists for the mobile version of the link clicker, and I've just
> updated it with some mockups:
> 
> https://bugzilla.mozilla.org/attachment.cgi?id=8535056

Great, thanks! Two things:

- I see you removed the Tos/privacy links from the footer, is that okay with legal? (just asking, if it was just me…)
- We recently discovered that we shouldn't crop the local video stream to avoid undesired privacy leaks, so I guess square cropping won't work here.

Comment 15

[Maire Reavy [:mreavy]]

Hey Niko -- I'd like you to land what you have already (the patch on this bug) as soon as you can.  Mark (Standard8) plans to package up a new standalone app on Monday.  It should get deployed on Tuesday.  

We can file a new bug to implement the mobile UX improvements that Sevaan has on bug 1083379 once his UX designs have gotten ui-review and product review approvals.  

Thanks!!

Comment 16

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

https://hg.mozilla.org/integration/fx-team/rev/199f4c237aab

Comment 17

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/199f4c237aab

Comment 18

[Sylvestre Ledru [:Sylvestre]]

Nicolas, are you planning to request an uplift to aurora? Merci

Comment 19

[Nicolas Perriault (:NiKo`) — needinfo me if you need my attention]

(In reply to Sylvestre Ledru [:sylvestre] from comment #18)
> Nicolas, are you planning to request an uplift to aurora? Merci

Nope as this is for standalone, which release process is handled separately :)

Comment 20

[Sylvestre Ledru [:Sylvestre]]

OK, thanks. So, not tracking!