jellyfin / jellyfin-web

Web Client for Jellyfin
https://jellyfin.org
GNU General Public License v2.0
2.18k stars 1.16k forks source link

Subtitles have a different shadow than my settings #5602

Open JVT038 opened 1 month ago

JVT038 commented 1 month ago

Describe The Bug When I play something, the subtitles have this shadow that look like a drop shadow, even though I changed it to 'uniform' in the settings.

Steps To Reproduce

  1. Go to personal settings
  2. Click on subtitles
  3. Scroll down to drop shadow
  4. Set to 'Uniform'
  5. Save
  6. Play a video
  7. See error

Expected Behavior I expected the subtitles to look like the 'uniform' subtitles

Screenshots This is the subtitle I expect: image And this is the subtitle I get: image

System (please complete the following information):

Logs I don't know if these errors are relevant, but they show up in the browser console.

HLS Error: Type: otherError Details: internalException Fatal: false main.jellyfin.bundle.js:2:73451
ReferenceError: t is not defined 38932f0f-23f6-4806-8cad-44df1f497289:1:100
HLS Error: Type: mediaError Details: bufferFullError Fatal: false 3 main.jellyfin.bundle.js:2:73451
HLS Error: Type: mediaError Details: bufferFullError Fatal: false

Additional Context The subtitle type in the screenshot is subrip. Additionally, this error does not occur when using the Jellyfin Media Player desktop app (which is supposed to be a wrapper of the website right?)

thornbill commented 1 month ago

~Duplicate of #5592~

Actually I don't think this is a duplicate... are you using any custom css?

JVT038 commented 1 month ago

Yeah, I'm using the ultrachromic styles. This is the custom CSS:

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_floating.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_border.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css');
@import url('https://ctalvio.github.io/Monochromic/backdrop-hack_style.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css');
@import url('https://ctalvio.github.io/Monochromic/backdrop-hack_style.css');
:root {--accent: 98.00787045,121.00999580324999,204.99450000000002;}
.backdropImage {filter: blur(30px);}
.backdropImage {filter: saturate(120%);}
.backdropImage {filter: contrast(120%);}
.backdropImage {filter: brightness(40%);}
:root {--rounding: 12px;}

I have removed all the custom CSS, and the problem still persists. So I don't think it's caused by the custom CSS.

z1R commented 1 month ago

I'm having the same problem. Also on Firefox.

thornbill commented 1 month ago

@z1R are you using any custom css?

z1R commented 1 month ago

@thornbill yes but like the original poster it makes no difference if I remove the custom css or not.

AmiSapphire commented 1 month ago

I'm not using any custom CSS and this is reproducible here. Using Firefox.

kam821 commented 1 month ago

Same problem here. The subtitles seem to respond to vertical position change, but not to changes in size/shadow setting.

JamsRepos commented 1 month ago

Same problem here. The subtitles seem to respond to vertical position change, but not to changes in size/shadow setting.

Yup, i'm getting the same. You can change all settings that change the way subtitles display, the only property that changes is the verticial position.

Text size, Text weight, Font, Colour, Shadow all do not work. This is present on Firefox. It seems it works on Edge and Chrome, from what i've tested.

venkat-karasani commented 2 weeks ago

identified the issue, will fix it and raise the PR.

z1R commented 4 hours ago

identified the issue, will fix it and raise the PR.

Will this be implemented in the next update?