[ENT-9375] Fix: "AD" button appears but doesn't work for some videos

[mahamakifdar19]

Ticket
ENT-9375

Description

• Resolved an issue where the "AD" button appeared but didn't work for some videos due to text tracks being lost after @tanstack/react-query performed background re-fetches. When the player is re-initialized or its sources are updated due to re-fetching, it loses the text tracks that were previously added, so made changes to re-add text tracks after background re-fetches.
• Additionally, added some improvements for ENT-9342 by using the getPrimaryLanguageSubtag method from edx-platform to strip full language locales and fallback to English when tracks are unavailable in the site language.

For all changes

• Ensure adequate tests are in place (or reviewed existing tests cover changes)
• Ensure English strings are marked for translation. See documentation for more details.

Only if submitting a visual change

• Ensure to attach screenshots
• Ensure to have UX team confirm screenshots

[codecov]

Codecov Report

Attention: Patch coverage is 88.88889% with 1 line in your changes missing coverage. Please review.

Project coverage is 88.14%. Comparing base (196fdb5) to head (74ee358).
Report is 4 commits behind head on master.

Files	Patch %	Lines
src/components/video/VideoJS.jsx	80.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1166      +/-   ##
==========================================
+ Coverage   88.09%   88.14%   +0.04%     
==========================================
  Files         394      394              
  Lines        8360     8374      +14     
  Branches     2016     2018       +2     
==========================================
+ Hits         7365     7381      +16     
+ Misses        953      951       -2     
  Partials       42       42              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[adamstankiewicz]

Resolved an issue where the "AD" button appeared but didn't work for some videos due to text tracks being lost after @tanstack/react-query performed background re-fetches. When the player is re-initialized or its sources are updated due to re-fetching, it loses the text tracks that were previously added, so made changes to re-add text tracks after background re-fetches.

Seems reasonable at face value; unfortunately I wasn't able to test/verify the changes locally given there are no stage videos given the use of localhost.stage.edx.org for local dev, though...

[mahamakifdar19]

Resolved an issue where the "AD" button appeared but didn't work for some videos due to text tracks being lost after @tanstack/react-query performed background re-fetches. When the player is re-initialized or its sources are updated due to re-fetching, it loses the text tracks that were previously added, so made changes to re-add text tracks after background re-fetches.

Seems reasonable at face value; unfortunately I wasn't able to test/verify the changes locally given there are no stage videos given the use of localhost.stage.edx.org for local dev, though...

@adamstankiewicz I'll discuss with the team to come up with a solution for having video data on stage for testing, considering that the feature flag will be removed soon.