Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply active FreeTube theme to shaka-player menus #5986

Merged
merged 2 commits into from
Nov 3, 2024

Conversation

absidue
Copy link
Member

@absidue absidue commented Oct 28, 2024

Apply active FreeTube theme to shaka-player menus

Pull Request Type

  • Feature Implementation

Related issue

Description

This pull request overrides shaka-player's menu colours (white background, black text) to match the currently active base theme in FreeTube. The code isn't great but as we have to override shaka-player's CSS we have to use the same CSS selectors as they do.

Screenshots

Light

light

Dark

dark

Black

black

Nordic

nordic

Hot Pink

hot-pink

Pastel Pink

pastel-pink

Catppuccin Mocha

catppuccin-mocha

Dracula

dracula

Solarized Dark

solarized-dark

Solarized Light

solarized-light

Testing

Test a few of FreeTube's base themes and see how the player menus look

Desktop

  • OS: Windows
  • OS Version: 10
  • FreeTube version: 80efbd6

@github-actions github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Oct 28, 2024
@FreeTubeBot FreeTubeBot enabled auto-merge (squash) October 28, 2024 13:26
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hot pink theme makes the volume slider black which makes it not very visible when video got black bars.

VirtualBoxVM_n3ClSZMMbW.mp4

@PikachuEXE

This comment was marked as outdated.

@absidue
Copy link
Member Author

absidue commented Oct 29, 2024

IIRC we are using the same colour variables for the volume and seekbar as we were with video.js, I'll try downgrading to a pre-shaka version and see how that was handled there.

Also not caused by this pull requests, so if there is an easy solution it can be included in this pull request otherwise it should be considered for a future pull request instead.

@absidue
Copy link
Member Author

absidue commented Oct 30, 2024

Looks like the same problem existed with video.js and was actually worse because at least with shaka-player the slider thumb is still visible (the white circle), so it was probably overlooked when this theme was introduced. @kommunarr it's your theme what should we do here?:

50% volume:
hot-pink-videojs-50

100% volume:
hot-pink-videojs-100

@kommunarr
Copy link
Collaborator

kommunarr commented Oct 30, 2024

I regret the hot pink theme and want to take it back for this very reason lol. I'd recommend either removing the hot pink theme altogether or adding a theme-specific override in themes.css to make it #FFF for this specific element.

Copy link
Collaborator

@PikachuEXE PikachuEXE left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything time I test hot pink theme it's like putting chili powder into the eyes (but pink

@FreeTubeBot FreeTubeBot merged commit 98958ae into FreeTubeApp:development Nov 3, 2024
5 checks passed
@github-actions github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Nov 3, 2024
@absidue absidue deleted the player-menu-theme branch November 3, 2024 06:23
PikachuEXE added a commit to PikachuEXE/FreeTube that referenced this pull request Nov 4, 2024
* development: (153 commits)
  Migrate FtTimestampCatcher to the composition API (FreeTubeApp#6064)
  Translated using Weblate (Polish)
  Added functionality to export a single playlist (FreeTubeApp#5779)
  Fix video player displaying a vertical scrollbar when context menu outside player container (FreeTubeApp#6075)
  Fix use of deprecated Invidious route on the videos subscription tab (FreeTubeApp#6057)
  Apply active FreeTube theme to shaka-player menus (FreeTubeApp#5986)
  Bump sass from 1.80.4 to 1.80.6 (FreeTubeApp#6071)
  Bump mini-css-extract-plugin from 2.9.1 to 2.9.2 (FreeTubeApp#6068)
  Translated using Weblate (Vietnamese)
  Bump webpack from 5.95.0 to 5.96.1 (FreeTubeApp#6069)
  Translated using Weblate (Vietnamese)
  Bump sass-loader from 16.0.2 to 16.0.3 (FreeTubeApp#6070)
  Bump lefthook from 1.8.1 to 1.8.2 (FreeTubeApp#6067)
  Bump the eslint group with 2 updates (FreeTubeApp#6066)
  Bump youtubei.js from 11.0.0 to 11.0.1 (FreeTubeApp#6072)
  Migrate PasswordSettings and PasswordDialog to the composition API (FreeTubeApp#6036)
  Add some missing jsdoc comments, add jsdoc eslint plugin (FreeTubeApp#6048)
  Fix shortcut for macOS setting shortcut in video page (FreeTubeApp#6054)
  Use decodingInfo's powerEfficient property when picking streams (FreeTubeApp#6061)
  Translated using Weblate (Afrikaans)
  ...
Soham456 pushed a commit to Soham456/FreeTube that referenced this pull request Dec 5, 2024
* Apply active FreeTube theme to shaka-player menus

* Add primary color override for range containers with the Hot Pink theme
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants