VeritableValor/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2026-07-28 00:16:47 -05:00
Code Issues Packages Projects Releases Wiki Activity

perf: parallelize Shaka init with network calls, defer scripts, preconnect, fix shaka 5 spinner CSS

Browse Source
This commit is contained in:
Emilien 2026-06-28 15:29:36 +02:00
parent cae4b8eb2d
commit cae8432a0e
3 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/sabr_player.css
View File

@ -176,17 +176,7 @@
background-color: rgba(35, 35, 35, 0.9) !important; background-color: rgba(35, 35, 35, 0.9) !important;
} }
/* Spinner */ /* Shaka 5 spinner uses full-container flex centering; do not override container position. */
.shaka-spinner-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.shaka-spinner {
border-color: rgba(0, 182, 240, 1) transparent transparent transparent !important;
}
/* Captions/subtitles - match video.js */ /* Captions/subtitles - match video.js */
.shaka-text-container { .shaka-text-container {

23
assets/js/sabr_player.js
View File

@ -459,6 +459,18 @@ var SABRPlayer = (function () {
playbackWebPoTokenContentBinding = videoId; playbackWebPoTokenContentBinding = videoId;
try { try {
// Start Shaka player init (DOM + polyfills) in parallel with network init.
var shakaPromise;
if (!player) {
shakaPromise = initializeShakaPlayer(containerElement, options.listen);
} else {
player.configure('abr', DEFAULT_ABR_CONFIG);
player.configure('manifest.disableVideo', !!options.listen);
shakaPromise = Promise.resolve();
}
// Network init chain: Innertube → Onesie config → PoToken.
var netPromise = (async function () {
if (!innertube) { if (!innertube) {
innertube = await initInnertube(); innertube = await initInnertube();
if (!innertube) throw new Error('Failed to initialize Innertube'); if (!innertube) throw new Error('Failed to initialize Innertube');
@ -466,18 +478,13 @@ var SABRPlayer = (function () {
if (!clientConfig) { if (!clientConfig) {
await fetchOnesieConfig(); await fetchOnesieConfig();
} }
// Mint a content-bound PoToken before getInfo so streaming_data includes // Mint a content-bound PoToken before getInfo so streaming_data includes
// the server_abr_streaming_url and so the SABR requests authenticate. // the server_abr_streaming_url and so the SABR requests authenticate.
try { await mintContentWebPO(); } catch (e) { console.warn('[SABRPlayer] poToken mint failed, continuing', e); } try { await mintContentWebPO(); } catch (e) { console.warn('[SABRPlayer] poToken mint failed, continuing', e); }
var poToken = playbackWebPoToken || coldStartToken || ''; })();
if (!player) { await Promise.all([shakaPromise, netPromise]);
await initializeShakaPlayer(containerElement, options.listen); var poToken = playbackWebPoToken || coldStartToken || '';
} else {
player.configure('abr', DEFAULT_ABR_CONFIG);
player.configure('manifest.disableVideo', !!options.listen);
}
setupRequestFilters(); setupRequestFilters();

22
src/invidious/views/components/player.ecr
View File

@ -111,20 +111,22 @@
<% if use_sabr %> <% if use_sabr %>
<!-- SABR Player dependencies --> <!-- SABR Player dependencies -->
<link rel="preconnect" href="https://redirector.googlevideo.com">
<link rel="preconnect" href="https://www.youtube.com">
<link rel="stylesheet" href="/css/sabr_player.css?v=<%= ASSET_COMMIT %>"> <link rel="stylesheet" href="/css/sabr_player.css?v=<%= ASSET_COMMIT %>">
<link rel="stylesheet" href="/js/sabr/shaka-player/controls.css?v=<%= ASSET_COMMIT %>"> <link rel="stylesheet" href="/js/sabr/shaka-player/controls.css?v=<%= ASSET_COMMIT %>">
<script src="/js/sabr/shaka-player/shaka-player.ui.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr/shaka-player/shaka-player.ui.js?v=<%= ASSET_COMMIT %>"></script>
<!-- SABR engine ports (FreeTube): plain scripts reading shaka/googlevideo from window globals --> <!-- SABR engine ports (FreeTube): plain scripts reading shaka/googlevideo from window globals -->
<script src="/js/sabr_ebml_parser.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr_ebml_parser.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/sabr_mp4_index.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr_mp4_index.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/sabr_webm_index.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr_webm_index.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/sabr_manifest_parser.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr_manifest_parser.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/sabr_scheme_plugin.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr_scheme_plugin.js?v=<%= ASSET_COMMIT %>"></script>
<!-- SABR orchestrator + helpers --> <!-- SABR orchestrator + helpers -->
<script src="/js/sabr_helpers.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/sabr_potoken.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr_potoken.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/sabr_player.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr_player.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/sabr_init.js?v=<%= ASSET_COMMIT %>"></script> <script defer src="/js/sabr_init.js?v=<%= ASSET_COMMIT %>"></script>
<!-- ES module loader for SABR libraries (youtubei.js, googlevideo, bgutils) --> <!-- ES module loader for SABR libraries (youtubei.js, googlevideo, bgutils) -->
<script type="module" src="/js/sabr_loader.js?v=<%= ASSET_COMMIT %>"></script> <script type="module" src="/js/sabr_loader.js?v=<%= ASSET_COMMIT %>"></script>
<% else %> <% else %>