Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
  • Sign in / Register
Minds Frontend
Minds Frontend
  • Project overview
  • Repository
  • Issues 401
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 66
  • CI / CD
  • Security & Compliance
  • Packages
  • Analytics
  • Wiki
  • Snippets
  • Members
  • Collapse sidebar
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Minds
  • Minds FrontendMinds Frontend
  • Issues
  • #2572

Closed
Open
Opened 2 weeks ago by Mark Edworthy@medworthy
Report abuse New issue

Volume Control Disappears When Using Blink (Chromium) Based Browsers

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.

Edited 2 weeks ago by Mark Edworthy

Linked issues
0

Related merge requests
1
  • Upgraded Plyr #2572
    !775
When this merge request is accepted, this issue will be closed automatically.
  • Discussion 18
  • Designs 0
  • Mark Edworthy @medworthy changed title from Volume Control Disappears When using Blink (Chromium) Based Browsers. to Volume Control Disappears When using Blink (Chromium) Based Browsers 2 weeks ago

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

  • Mark Edworthy @medworthy changed the description 2 weeks ago

    changed the description

  • Mark Edworthy @medworthy changed the description 2 weeks ago

    changed the description

  • Mark Edworthy @medworthy changed the description 2 weeks ago

    changed the description

  • Luculent
    Luculent @luculent · 2 weeks ago

    Works fine for me using Firefox

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

  • Mark Edworthy @medworthy changed the description 2 weeks ago

    changed the description

  • Mark Edworthy @medworthy changed the description 2 weeks ago

    changed the description

  • Mark Edworthy @medworthy changed title from Volume Control Disappears When using Blink (Chromium) Based Browsers to Volume Control Disappears When Using Blink (Chromium) Based Browsers 2 weeks ago

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

  • Ben Hayward
    Ben Hayward @benhayward.ben · 2 weeks ago
    Developer

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

  • Ben Hayward @benhayward.ben added Priority::1 - High Product::Video Source::UserReported Status::Scheduling Type::Bug scoped labels 2 weeks ago

    added scoped labels

  • Brian Hatchet :speech_balloon: @brianhatchet assigned to @benhayward.ben 2 weeks ago

    assigned to @benhayward.ben

  • Brian Hatchet :speech_balloon: @brianhatchet changed weight to 4 2 weeks ago

    changed weight to 4

  • Brian Hatchet :speech_balloon: @brianhatchet added Sprint::01/29 Abatic Aenome scoped label 2 weeks ago

    added scoped label

  • Brian Hatchet :speech_balloon: @brianhatchet added Priority::0 - Urgent scoped label and automatically removed Priority::1 - High label 2 weeks ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet added Squad::Yellow Status::Backlog scoped labels and automatically removed Status::Scheduling label 2 weeks ago

    added scoped labels and automatically removed label

  • Ben Hayward @benhayward.ben added Status::InProgress scoped label and automatically removed Status::Backlog label 1 week ago

    added scoped label and automatically removed label

  • Ben Hayward
    Ben Hayward @benhayward.ben · 1 week ago
    Developer

    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.

  • Ben Hayward
    Ben Hayward @benhayward.ben · 1 week ago
    Developer

    image

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

  • Ben Hayward @benhayward.ben added Status::Follow Up scoped label and automatically removed Status::InProgress label 1 week ago

    added scoped label and automatically removed label

  • Ben Hayward @benhayward.ben added 1h of time spent at 2020-02-03 1 week ago

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

  • Mark Edworthy
    Mark Edworthy @medworthy · 1 week ago

    @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.

    Edited by Mark Edworthy 1 week ago
  • Luculent
    Luculent @luculent · 1 week ago

    @benhayward.ben

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

  • Ben Hayward
    Ben Hayward @benhayward.ben · 1 week ago
    Developer

    @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

  • Mark Edworthy
    Mark Edworthy @medworthy · 1 week ago

    @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
    Edited by Mark Edworthy 1 week ago
  • Ben Hayward
    Ben Hayward @benhayward.ben · 1 week ago
    Developer

    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.

  • Ben Hayward @benhayward.ben added Status::InProgress scoped label and automatically removed Status::Follow Up label 3 days ago

    added scoped label and automatically removed label

  • Ben Hayward @benhayward.ben changed milestone to %Sprint::01/29 Abatic Aenome 3 days ago

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

  • Ben Hayward @benhayward.ben changed weight to 4 3 days ago

    changed weight to 4

  • Ben Hayward @benhayward.ben moved from video-player#1 (moved) 3 days ago

    moved from video-player#1 (moved)

  • Ben Hayward @benhayward.ben mentioned in commit d99379c4 3 days ago

    mentioned in commit d99379c4

  • Ben Hayward @benhayward.ben mentioned in merge request !775 3 days ago

    mentioned in merge request !775

  • Ben Hayward @benhayward.ben added 10m of time spent at 2020-02-10 3 days ago

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

  • Ben Hayward @benhayward.ben added Status::BuddyReview scoped label and automatically removed Status::InProgress label 3 days ago

    added scoped label and automatically removed label

  • Ben Hayward @benhayward.ben added Status::Requires Changes scoped label and automatically removed Status::BuddyReview label 3 days ago

    added scoped label and automatically removed label

  • Ben Hayward
    Ben Hayward @benhayward.ben · 3 days ago
    Developer

    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.

  • Ben Hayward @benhayward.ben added Status::Blocked scoped label and automatically removed Status::Requires Changes label 3 days ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet added Sprint::02/12 - Baritone Baboon scoped label and automatically removed Sprint::01/29 Abatic Aenome label 3 days ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet added Status::Follow Up scoped label and automatically removed Status::Blocked label 3 days ago

    added scoped label and automatically removed label

  • Brian Hatchet
    Brian Hatchet :speech_balloon: @brianhatchet · 2 days ago
    Developer

    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.

  • Ben Hayward @benhayward.ben added Status::Blocked scoped label and automatically removed Status::Follow Up label 2 days ago

    added scoped label and automatically removed label

  • Luculent
    Luculent @luculent · 1 day ago

    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?

  • Brian Hatchet
    Brian Hatchet :speech_balloon: @brianhatchet · 1 day ago
    Developer

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

  • Brian Hatchet :speech_balloon: @brianhatchet assigned to @markeharding 1 day ago

    assigned to @markeharding

  • Brian Hatchet
    Brian Hatchet :speech_balloon: @brianhatchet · 22 hours ago
    Developer

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

  • Brian Hatchet :speech_balloon: @brianhatchet added Status::Follow Up scoped label and automatically removed Status::Blocked label 22 hours ago

    added scoped label and automatically removed label

  • Brian Hatchet
    Brian Hatchet :speech_balloon: @brianhatchet · 21 hours ago
    Developer

    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.

  • Brian Hatchet :speech_balloon: @brianhatchet added Status::Backlog scoped label and automatically removed Status::Follow Up label 21 hours ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet added Priority::1 - High scoped label and automatically removed Priority::0 - Urgent label 21 hours ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet added Priority::2 - Normal scoped label and automatically removed Priority::1 - High label 21 hours ago

    added scoped label and automatically removed label

  • Brian Hatchet
    Brian Hatchet :speech_balloon: @brianhatchet · 21 hours ago
    Developer

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

  • Ben Hayward
    Ben Hayward @benhayward.ben · 1 hour ago
    Developer

    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.

  • Ben Hayward
    Ben Hayward @benhayward.ben · 1 hour ago
    Developer

    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.

Please register or sign in to reply
2 Assignees
Mark Harding's avatar
Ben Hayward's avatar
none
Epic
None
Sprint::01/29 Abatic Aenome
Milestone
Sprint::01/29 Abatic Aenome
Time tracking
Spent: 10m
None
Due date
None
8
Labels
Priority::2 - Normal Product::Video Source::UserReported Source::UserReported Sprint::02/12 - Baritone Baboon Squad::Yellow Status::Backlog Type::Bug
4
Weight
4
Confidentiality
Not confidential
Lock issue
Unlocked
5
5 participants
user avatar
user avatar
user avatar
user avatar
user avatar
Reference: minds/front#2572