Summary

When using a browser that is based on the Blink rendering engine (ie. Chromium based), videos that are using the Minds video player fail to display volume control.

Steps to reproduce

Access the following URLs within a Blink based browser.

Platform information

Tested with:

• Chromium (x86_64 - v79.0 - Blink)
• Opera (x86_64 - v65.0 - Blink)
• Brave (x86_64 - v1.0.1 - Blink)
• Firefox (x86_64 - v70.0 - Quantum)
• Midori (x86_64 - v69.0 - Webkit)

Firefox and Midori works fine. Chromium, Brave and Opera fails. Suspect that all Blink / Chromium based browsers are affected with this issue.

What is the current bug behavior?

Volume control appears and then suddenly disappears, which results in no access to said control / UI element.

What is the expected correct behavior?

Volume control / UI element should be accessible

Relevant logs and/or screenshots

• https://www.minds.com/newsfeed/1068760255372918784
• https://www.minds.com/media/1069342265038675968

audiobug

Possible fixes

Suspect possible CSS issue. Possibly caused by a stylestyle that contains something similar to the following code: .element{display:none;}

Alternatively, some php or javascript issue which results in the above outcome.

changed title from Volume Control Disappears When using Blink (Chromium) Based Browsers to Volume Control Disappears When using Blink (Chromium) Based Browsers

changed the description

changed the description

changed the description

Works fine for me using Firefox

Fails on Chromium: The volume control appears for a instant or so, then disappears.

changed the description

changed the description

changed title from Volume Control Disappears When sing Blink (Chromium) Based Browsers to Volume Control Disappears When sing Blink (Chromium) Based Browsers

Happening for me in Chromium also. How very strange. I assume this is an issue with the player we have in now, Plyr.

added scoped labels

assigned to @benhayward.ben

changed weight to 4

added scoped label

added scoped label and automatically removed label

added scoped labels and automatically removed label

added scoped label and automatically removed label

There appears to be a workaround for this that I am going to attempt, but have dropped a comment on Plyr's GitHub to see if this is indeed the same issue and if there are unpublished fixes.

Tried the fix above to no avail, using the hooks provided by ngx-plyr. Unfortunately, the volume bar still missing.

added scoped label and automatically removed label

added 1h of time spent at 2020-02-03

@benhayward.ben & @brianhatchet,
As far as I can ascertain, the volume control is continuously available for videos (that have been uploaded directly to Minds infrastructure and subsequently viewed within Chromium / Blink based browsers) within corresponding blog articles and posts (ie. embedded within blog articles / posts) but is not continuously available if viewed directly from the /media (channel video) section.

Therefore, this suggests that there is some form of inconsistency within Minds Inc. produced source code.

@benhayward.ben

How long have we been using ngx-plyr by chance?

@medworthy Not sure what you're talking about entirely as I was under the impression our videos currently aren't embeddable in blogs. Got an example of links to what you mean?

The issue seems a match and in active development looking at their GitLab, so I wonder if the symptoms you're getting could be something to do with being contained in an iframe or something alike.

@luculent Around a month

@benhayward.ben,
Sorry, ignore my last comment.

I was using an assumption based upon points that were reported to me (I should have further tested before posting my last comment). Apologies for any confusion.

I just completed some tests (see URL below) and you are correct, this issue is also affecting videos that are embedded within posts.

As you mentioned within your last comment, it is currently not possible to upload videos directly into blog articles, as well as not possible to directly embed existing uploaded media content into either blog articles or posts (I am presuming that this will resolved or at least looked at within the upcoming UI / UX changes).

Reference:

• Blink / Video / Volume Test
  https://www.minds.com/newsfeed/1072107913179717632

Hey @medworthy, no problem. The card for that one is here #2387 I've just gave it a nudge along the pipelines as it is really something that we should have fixed ASAP.

added scoped label and automatically removed label

changed milestone to %Sprint::01/29 Abatic Aenome

changed weight to 4

moved from video-player#1 (moved)

mentioned in commit d99379c4

mentioned in merge request !775

added 10m of time spent at 2020-02-10

added scoped label and automatically removed label

added scoped label and automatically removed label

Plyr's developer has informed me that it is fixed, however on update ngx-plyr is missing some type definitions for compatibility.

Awaiting response: https://github.com/smnbbrv/ngx-plyr/issues/31

If they have no plans we may have to fork and make and maintain our own wrapper.

added scoped label and automatically removed label

added scoped label and automatically removed label

added scoped label and automatically removed label

Let's wait to see if they fix it before we go creating forks and creating more complicated dependencies. If they don't act by the end of this sprint, we'll revisit the issue.

added scoped label and automatically removed label

Waiting is cool...but until its fixed, a lot of people are without volume control.

This is not really the sort of quality one looks for in a software...one that people are expected to pay $40/mo for anyway.

And really, what social media has a video player without volume control.

Arent you guys even embarrassed in the slightest?

@markeharding it looks like we need to fork and update the ngx-plyr wrapper ourselves because the project isn't getting maintained fast enough

assigned to @markeharding

Moving this to follow up until I talk it over with Mark

added scoped label and automatically removed label

We're fine with forking and fixing provided we know what we're actually going to fix. @benhayward.ben please, write up the changes you'd make to our fork of ngx-plyr so we can get an idea of what we're getting ourselves into.

added scoped label and automatically removed label

added scoped label and automatically removed label

added scoped label and automatically removed label

Moving this down in priority since it's a bigger architecture discussion to fix a 3rd party dependency

The changes for the fork, all we really need are type definitions for the latest version of Plyr adding to fix this issue.

Beyond that in terms of value added, I'm not really sure. We have a lot of errors in Plyr that I can't say for certain are down to ngx-plyr or plyr. Using our own wrapper we will then be able to dig down to see the error source is plyr or ngx-plyr.

There's also maintenance needed for any Plyr upgrade, where we will need to update our wrapper to add new types, and add support for any new functions Plyr release that we might want to add.