paratii-video/paratii-mediaplayer

v0.0.2 of the Paratii Player, with a sleeker UI, plugin-oriented architecture

paratii-mediaplayer's Issues

Close quality menu

Ahoj,

it would be nice if the playback quality popover would close if it looses focus or something similar.

Greetings
~HerHde

Make video title finish with [...] when too big

When on mobile, sometimes the title gets bigger than the whole iFrame itself.

Make style overrides compatible w/ latest clappr version

Currently, our media control style overrides only work w/ [email protected]. When updating to the latest clappr, our style overrides break. This needs to be fixed.

☝️ alignment is off, icons do not show up, and buttons are unresponsive

svg icons not appearing on windows X browser Y

The 'buttons' do not appear..but anyway it's running on the pc. Makes the machine very slow for multitasking. Windows 10 - Microsoft Edge

Duplicate player bug on /play route

Mad bug that clones the player and stacks the two copies, spotted on Mac / Chrome:

It seemed to happen more often when I had more applications and tabs opened.

add circleci config

• Upgrade to CircleCI v2

@bent0b0x , looking at yr pr for the mediaplayer. Could you use circleci 2.0 instead of 1.0? For an example, https://github.com/Paratii-Video/paratii-lib/tree/master/.circleci (And yes, we shoudl also upgrade the player but somehow the chimp tests don't play nicely with 2.0, so i did not manage to get that working - there's a branch called upgrade-circleci for it)

Embedded player alignments are all messed up (small version)

Maybe it's a simple breakpoint fix @jrgarou / @bent0b0x ?

Implement stats box

Dependant on #44

📺 Implement chromecast support

On the UI kit for 0.0.2 we have the "chromecast" icon in the media controls lower bar:

Clappr has got a plugin for it. Could we use it @bent0b0x ? Make an own? Feel free to take this off the 0.0.3 project if it's unfeasible in short-time

Player violates Medium Do Not Track policy

In a private window with tracking protection on Firefox, Paratii embeds show a DNT warning on Medium.

Adapt full screen button to our design

As specified on https://xd.adobe.com/spec/7f9e0d73-b3e7-43fc-bff2-c48187bef63f

Remove useless wallet icon from embedded player

I'm very sad to open this issue and to finalise this removal. Feel like better communication (more proactive, on all sides) could've led to a better usage of the feature.

EDIT: not better communication, but probably better documenting of communication, I guess.

For now, I only see useless avatar icons, I click them and they turn purple, that's it. Example below.

Design "stats" box

We want to make available some basic p2p stats for users, on the embedded player. These can be either inside the wallet/profile space, or separate. I suggest we show:

• X Peers
• Y Mb stored || (amount of localStorage we're using [under the suggestion of @EuSouRye, an early uploader]).
• A cellphone-battery-level-like meter for showing the speed of upload and download (I don't think users will care for individual speeds, but a general visualisation of connection quality can be nice to have. We can have 4 levels of quality according to our averages).

It'd be great to have this almost as a warning, until the user clicks it for the first time (the fact we're using the user's storage should be transparent just like sites are when telling users they have cookies).

🎨 Design.Player UI KIT [definite thread]

Here it is the individual elements of the UI of the issue #22

Last update 2018/MAR/16

Adobe Design specs (free account needed to open it)
https://xd.adobe.com/spec/b8376f2b-514b-4971-b0e4-83c9e010fcde/

SVGs urls in sass files are not being transformed into data urls

These lines in the webpack config should take care of this, but it seems they are not working: https://github.com/Paratii-Video/paratii-mediaplayer/blob/master/webpack.config.js#L67-L70

Break video title line in the player ("..." at end)

We have done this before #53, I don't know where it's gone!
1st line (finishing before any icons!!!!), 2nd line and "...", never 3rd line! Agree, guys?

Add keyboard shortcuts

Ahoj,

it would contribute to the usability to add common video player shortcuts like F for fullscreen, ArrowLeft/Right for a 5 second jump etc. like in this list for YT hotkeys.

Greetings
~HerHde

Consider replacing Clappr media controls

Right now, some of the player UI is rendered by Clappr (which we style/adjust) and some (e.g. video title, wallet information, etc) is rendered by paratii-portal and react.

This is problematic! Not necessarily a deal-breaker, but problematic.

It takes some effort for us to render all of these UI elements in sync, and it is unclear as to what, exactly, our source of truth is for our UI state. Sometimes we listen to the react state, and sometimes we check the Clappr mediacontrols state (whose api is not well documented).

I experimented w/ adding some transitions/animations to the player UI earlier today, and this was very tricky due to this separation of UI control. In fact I was not able to add these transitions w/o bugs after giving it a significant effort. It may be possible to work around this problem, but if we have the time I think we should look into replacing all of Clappr's default UI controls w/ our own, which are rendered by react and controlled by our application's state.

cc @jellegerbrandy

Installation instructions incomplete

Ahoj,

unfortunately your installation instructions are incomplete, as yarn does not install the peer dependencies, thus leading to missing deps when running yarn dev run:

ERROR in ./src/js/index.js
Module not found: Error: Can't resolve 'hlsjs-ipfs-loader'
[...]
Module not found: Error: Can't resolve 'ipfs'
[...]
Module not found: Error: Can't resolve 'run'
[...]
webpack: Failed to compile.

Greetings
~HerHde

Implement thumbnail "video previews" when scrubbing

I suppose this means

[ ] Designing it @pedrocasa;
[ ] Making sure we're generating a spritesheet at some point (@ya7ya?);
[ ] Implementing the actual plugin to display them.

I imagine this is not of much use at this point, but will pin it here regardless https://www.npmjs.com/package/clappr-thumbnails-plugin

Gather statistics on player bundle size

@felipegaucho has requested this

Design.Player.

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

🔧Implement video quality icon and function

Along the lines of #46, we don't have this control yet. It was working pretty well on the legacy player, and I assume we just need to port the code.

@pedrocasa do we have specifications for what happens once the "engine icon" button is clicked?

Adapt volume icon and bar to our design

@pedrocasa do we have specifications for the bar, or what happens once the icon is clicked?

If yes, please update the XD specs on the definite UI kit thread #32

We need @bent0b0x to adapt the current one to it.

https://we.tl/2xYiNEwyUP 👈 new icons

Implement user icon and wallet

@pedrocasa we have such icon and wallet designed here #22 (comment) . Are these valid / can @bent0b0x follow on w/ them? Can you port them to the UI kit #32, since they're not there on the top of the video play screen?

Also, worth noting next/previus video buttons and all scrolling options will be out of this version. The same for the "watch later" option. Agreed @bent0b0x?

SPEC: https://xd.adobe.com/spec/8ef7c89b-4521-4b5b-a29e-ce6c46dd9232

UX Specification

write UX Specs

Fix deployment config for circleCI

Currently builds tagged with a new version on master do not deploy successfully. In fact they try to deploy before they build, which is wrong.

Example: https://circleci.com/gh/Paratii-Video/paratii-mediaplayer/10

Deploy media player to an AWS server

• set up domain: player2.paratii.video
• furnish a new machine (or perhaps use the staging server)
• set up circleci continuous deployment

Republish to npm with new package name

We are removing the scope of @paratii-video from this lib. This means the package should be republished to npm.

Design.Player Sharing

Here is the Sharing screens for the mobile player
Design specs
last update 2018/03/02

https://xd.adobe.com/spec/505ba874-4fd4-4a0b-9655-6082e86e8825

Create new demo app/page

With the refactor of the lib, the demo page no longer works/loads the player correctly. This needs to be resolved to have a dev experience outside of paratii-player.

Make a decision, yarn vs npm

Right now this repo contains a yarn.lock and a package-json.lock file. Update the readme to use npm or yarn and then delete the other lockfile.

Media controls realignment on lower bar

Play button and all icons are a little closer to the top of the lower bar than they should - unaligned vertically.

Add chimp test to mediaplayer

Player responsiveness fix: appears wider than it should, black bars always there

Although on the /embed route it seems the ratio and size is fine, on the /play route, the player shows up too wide, which leaves black bars on the side of the video. It should be less wide, and use the standard format.

Spotted on MAC / Chrome.

Implement thumbnails when scrubbing

I suppose this means (1) making sure we're generating a spritesheet at some point (@ya7ya?); implementing the actual plugin to show them.

I imagine at this point this is not of much use, but will pin it here regardless https://www.npmjs.com/package/clappr-thumbnails-plugin

Video title and sharing icon are paralysed/unresponsive

They're both functional, but do not leave/vanish once you mouse away from the player, and always remain there obstructing part of the view. Both on /play and /embed.

Player must accept an existing node in the contructor

here we create a new node ach time:
https://github.com/Paratii-Video/paratii-mediaplayer/blob/master/src/js/index.js#L17

Instead, the constructor must take "node" argument, so that we can pass it an existing (arleady started, shared with other vis) node

Make player styles more responsive

Currently, the player is hard-coded to have a height of 100vh and a width of 100%. The height specifically causes problems.

Design.FreeContentWatch

Hi guys,
here are the first sketches for the Mediaplayer (twitter size again)

Engineering feedback from @jrgarou:

• simplify class names
  example:

$prefix: paratii-user-info;

.#{$prefix} {
  &-menu // .paratii-user-info-menu
  &-details // .paratii-user-info-details
    &-name // .paratii-user-info-details-name
    &-pti // .paratii-user-info-details.pti
}

• try not to use inline styles for animations/transitions. Leverage CSSTransition or just use our own transitions by manually applying/removing class names if that doesn't work

Full screen option not appearing on Twitter

To check, follow this link: https://twitter.com/jellegerbrandy/status/967199706207195136

Note it is present on the /embed route: https://portal.paratii.video/embed/JSeRyKaS0ebp