[Discussion] Video Player Design

[black7375]

Hello, the next version is planning to add 1 to 2 features, and one of them is a video design.

Original

As you can see, it looks stuffy.

One Line Concept

I changed the background to look transparent.

Two Line Concept

I adjusted it to two lines like YouTube.

---

Which one do you prefer? Please express it with an emoji.

• Original: :confused:
• One Line Concept: :heart:
• Two Line Concept: :rocket:

The comments are good, too.

[black7375]

Thank you all. Then I'll work based on the second style.

PS. Try the following code to get the third style.

/* Second Line */
#controlsContainer .controlBar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  height: calc(var(--controlBar-height) + var(--thumb-size)) !important;
  padding-inline: 0 !important; /* Original: 9px */
}
#controlsContainer .scrubberStack {
  /* Vertical */
  order: -1;
  height: var(--thumb-size) !important;
  transform: translateY(calc(var(--thumb-size) / 2));

  /* Horizontal */
  flex-basis: auto !important;
  width: 100%;
  margin-inline: 0 !important;
}
#controlsContainer .positionDurationBox {
  flex-grow: 2;
  margin-left: 15px !important;
  text-align: left !important;
}
#playButton {
  margin-left: 9px !important;
}
#fullscreenButton {
  margin-right: 9px !important;
}
#controlsContainer .duration {
  color: #dadada !important; # /* Original: #929292 */
}

[black7375]

Video Test

• https://tools.woolyss.com/html5-audio-video-tester/
• https://tekeye.uk/html/html5-video-test-page
• https://hpr.dogphilosophy.net/test/

https://user-images.githubusercontent.com/25581533/200356463-71419772-e0f1-4e9b-b5ef-68a885f1e2ad.mp4

https://user-images.githubusercontent.com/25581533/200356518-9457131c-e9be-42cf-8078-fe27ce8d5a36.mp4

[JohnyP36]

Thank you all. Then I'll work based on the second style.

PS. Try the following code to get the third style.

/* Second Line */
#controlsContainer .controlBar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  height: calc(var(--controlBar-height) + var(--thumb-size)) !important;
  padding-inline: 0 !important; /* Original: 9px */
}
#controlsContainer .scrubberStack {
  /* Vertical */
  order: -1;
  height: var(--thumb-size) !important;
  transform: translateY(calc(var(--thumb-size) / 2));

  /* Horizontal */
  flex-basis: auto !important;
  width: 100%;
  margin-inline: 0 !important;
}
#controlsContainer .positionDurationBox {
  flex-grow: 2;
  margin-left: 15px !important;
  text-align: left !important;
}
#playButton {
  margin-left: 9px !important;
}
#fullscreenButton {
  margin-right: 9px !important;
}
#controlsContainer .duration {
  color: #dadada !important; # /* Original: #929292 */
}

In which file do I have to add/change this?

[black7375]

I was taking notes for the link I needed during the documentation.

---

You can just take userContent.player.ui.twoline to true. & Restart https://github.com/black7375/Firefox-UI-Fix/wiki/Options#two-line