Show texts to the users when they need to wait

[jellegerbrandy]

(continuing the discussion from #141)
Wrt the thumbnail preview: our player will probably be slower to load than other players out there, because we have to set up the ipfs connections. One idea is to show some text animation in which we explain what paratii is, what the user is waiting for, etc. (A bit like what some software installers do when you have to wait). If this is text only, it can be very low bandwidth.

[jellegerbrandy]

@pedrocasa: just on the first time or every time it appears embedded on a website?

[jellegerbrandy]

It could work like this: we have a bunch of texts to choose from, independent units each of 1-3 pages, and we choose randomly from those texts every time they need to wait. So they would see something each time they need to wait, but will not see the same texts each time.

[pedrocasa]

would be like those video game loading pages where it shows a tip or a contextualization about the match?

( not the best example.... just to know if I could understand what you're talking about )
https://www.youtube.com/watch?v=yE8N-97MfPM

[jellegerbrandy]

precisely that, yes

[felipegaucho]

Good reference is what Slack does when loading, for few secs., which is customisable by channel owners. Try refreshing these a few times:
https://aragonone.slack.com
https://swarmcity.slack.com

Some refs (from above):
"To fork or not to fork"
"Syncing the blockchain..."
"While you're reading this, probably a block has been mined. Isn't it awesome?..."
"Cutting out the middlemen..."

Some ideas:
(more fun)
"Assembling an invisible army of autonomous network agents..."
"Just telling nearby nodes to welcome you, and to serve well the illustrious visit..."
"He who serves always benefits more than he who is served.” - Robert Louis Stevenson.
"Warming up for the peer-to-peer orchestra of bits..."
"Please leave oligopolistic feelings at the door before entering..."

(more serious)
"Upload. Choose monetisation model (or not). Share. Collect earnings. Repeat."
"Share your videos with whoever you want. The same goes for your revenue."
"The videos you will see have been rated by our experts. Feel free to be one of our experts."
"Your machine is talking to its neighbours. Try to stay quiet and listen..."

[jellegerbrandy]

We could also mxi this with informatino about what is actually happening (although that will take some more work to integrate), I'm thinking of stuff like "looking for other players that have your file", "downloading from 3 peers", stuff like that. We already show some unpolished stuff like "HLS media source attached".

Also, instead of general slogans, we can also explain small things, like "Paratii is a non-profit foudnation dedicated to... ", or perhaps even some basic explanation of p2p or crypto.

[bent0b0x]

A couple of questions:

1. Is this text overlay/loading screen intended to only mask the view of the individual video being loaded and leave other UI pieces (e.g. sidebar) visible?
2. Is there a design for this?

[felipegaucho]

1. Depends on design. I think the more elegant is to hide everything except for a main UI element (the navbar in the current state; might become just a small circle soon; on other future versions can be something else). Pretty much like slack (below), but can be much more minimal still.

2. No design yet, @pedrocasa is studying what some apps out there are doing and should have a proposal soon. Meanwhile, stay w/ this witty reference :):

[pedrocasa]

I have a similar doubt as Ben, don't know if the other features will be or not available when the message appear

Tell me what u think

[pedrocasa]

The three dots work as a buffering animation

[jrgarou]

The loader situation is when there's no content at all, right?

Maybe we need two different loader(because of contrast colors), one to the player and another one to the internals page.

[jellegerbrandy]

Actually, we have two places where our users have to wait an more-than-usual amount of time:

1. On first visit (i.e. the app takes some time to load - cf Optimize load time of player #291
2. When selecting a video

We are talking about the seond case here, but it would be good to make something that is re-usable also for case 1.

There will be the following steps:

• User arrives on video page https://staging.paratii.video/play/QmPRWjy3xqbxukKBMVTYH6Zk44gkVJFwzexzvZYfM164Rv?playlist=1 and sees video information (title, thumbnail, etc). IPFS starts doing its magic already now.
• users waits until vid is ready <-- this is where we want to show something
• when the video is ready to play, the "play" button is activated

At the present moment, we are using the "STATUS" field here:

[pedrocasa]

@jellegerbrandy just to be clear

Do we need to show the Status download information or is it superfluous? ( number of peers, kbs etc...)

[jellegerbrandy]

I personally think it is really important to shwo that info - even if we can make it perhaps a bit less "technical" and more suitable for casual users...

[jellegerbrandy]

Copying this from the PR for reference:

Usage

• Use Session.set('mainLoaderText', 'your text here') to change the loader text
• Use Session.set('showMainLoader', true) to show the loader
• Use Session.set('showMainLoader', null) to hide the loader

[jellegerbrandy]

We now need to hook it up with the player's events.

[eliawk]

@jellegerbrandy so also this depend on the player refactor, ain't?

[jellegerbrandy]

In theory yes. But let us just hook it up to the html5 element instead (meaning: close the thing when the video starts playing) - it will be easy to refactor later.