Design.Player.

[pedrocasa]

New design UI & UX for the Player

-I have renumbered all the pages to don't confuse with the older flows -Please if you wanna talk about a specific page write the number

Paratii_Player_TwitterDimens_Flow.pdf Paratii_Player_MobileSize_Flow.pdf Paratii_Player_FullScreen_Flow.pdf

[jellegerbrandy]

@pedrocasa , for some reason the upload of mobile and twiter size did not succeed, the links are not working. Can you try again?

[pedrocasa]

sure, here it is

[jellegerbrandy]

Ok, this is very pretty! I have some general remarks:

• I like the clean design, also the fact that it is very modular in approach (i.e. easy to add or remove functinality by adding a button)

• Appreciate the mobile version. It is probably best to see the mobile version as a third application: a) embeddeble player (<- i.e. in an iframe embedded in a website) (b) portal and (c) mobile app. The mobile app is not on our short-term road map, btw

• Twitter size: I personally think there is too much complexity here in too little space. I'd refer the user to the portal for "difficult" thiknkgs like "create an account" and most of the discovery stuff. (Also because these forms, apart from being very small, will need to be explained to new users that have never seen the blockchain, have no idea what is happening, etc - and explanations need space). This is just my personal opinion, though

[felipegaucho]

Appreciate it Pedro, think its fully workable upon. Also, kudos to @jrgarou for pointing to some issues here and helping and correct them fast. An amazing effort.

I have some personal objections towards too-fluorescent details, but nothing compared to the cohesiveness of the whole.

The words can be shortened. Mark as favourite -> Favourite. Add video to playlist -> Add to playlist. Flag video -> Flag. Also, I understand the icons are under adjustments, and as for the wallet, I assume p2p stats will be in a box like that small profile one on a top right corner?.

Eager to see this components in other contexts 🚀

[bent0b0x]

Designs look awesome @pedrocasa!

I do have some questions, particularly w/ regards to how these forms/views will obscure the video when they are opened:

• Do we think a video will continue playing if, for example, the form to create an account slides up?
• Is there a point to keeping the part of the video unblocked, especially on smaller screens? i.e. could the login form take up the whole viewport (and I definitely like having the partially transparent background for all of the forms to make it clear that you are still in the context of a video)
• Do the video controls need to be visible when, for example, you are creating an account? That could also afford us some more space

[jrgarou]

Great, @pedrocasa What you think about these points:

• The background panel could have a solid color(no opacity) to a better reading. There's no need to see the video behind.

• The "modal" and the button are too similar. Those rounded thin lines + shadow could be a problem to looking good. We already see borders very crisp on the image Every item that got a icon could be just a icon.

• "Skip seconds" buttons are too big(the most large button on interface) and different from the others.

• The icons alignment could be vertical to give more space to the title - btw, do we must have this "watch later" action?

[pedrocasa]

Gonna try to answer everybody here hahaha

Jell:

• That is exactly what we are trying to achieve.
• Ok.
• This makes sense. we can try to take out some tools depending on the size.

Felipe:

• No problem, we can work more on the colours to avoid it.
• I agree short words would be better.

Ben:

• No, The idea is to have these options only when the player is paused. ( in the flow the suggestive buttons only appear when the player is paused ). The main reason to do it is to do not distract the user when he is at registration pages.

• I'm trying to avoid it because I don't want to disappear with the suggestive buttons. That's why some of the pages have a lot of pagination or scroll features.

• I could make some tests to see how it looks, The main challenge about is to create a way to the user find the video bar again without thinking too much.

Junior:

• The main reason to have the transparent "aquarium" background is to don't let the user loses the context of the video player. But if it becomes a problem for reading we can come up with another solution. ( maybe using an, even more, darker transparent backgroung )

• Gonna test some different modals to show the account and the pti balance.

• the shadow is not completed needed, it's just a way to help with legibility

• I don't know how easy can be to an icon replace a verbalized button in the user experience

• ok, we can try different ones

• The challenge of doing it is coming up with a bigger overlay.

• Ok, we can take out the watch later button if it's not needed

[bent0b0x]

@pedrocasa just want to confirm, is it okay if I start building out the embedded player UX based on these designs (with a few tweaks to come) or are there major changes coming first?

[bent0b0x]

@pedrocasa can you upload a version of this w/ a grid (and indicate grid scale).

Also, could you include any/all svg files?

Finally (sorry if this is a big ask), what are the font sizes of all text 😬 ?

[bent0b0x]

@pedrocasa what is supposed to happen when the volume button is hovered/clicked?

[pedrocasa]

hey ben, here it is ( I'm using a 8x8px grid)

fullscreen 1920x1080

twitter 504X288

mobile 664x376

gonna send u the svgs on gitter

[bent0b0x]

@pedrocasa one thing that would be helpful is what are the differences in the player when rendered in the portal/website vs the embedded player? I assume in the portal we also want the overlay to have the title, but do we need any of the icon links on the top right of the overlay?

[felipegaucho]

Closing this in favour of the definite https://github.com/Paratii-Video/paratii-mediaplayer/issues/32