Update shaka-player to 4.16.x (#7919)

* Update shaka-player to 4.15.x

* Move some items into the overflow menu on all player sizes

* Fix mouse wheel actions

* Update shaka-player to 4.16.x

* Re-order entries in the overflow menu on mobile

* Fix player icons

* Optimise audio track handling

* Upstream prefers-reduced-transparency for shaka-player's UI elements

* Update shaka-player to 4.16.1

Author: absidue

_scripts/patchShaka.mjs

@@ -1,8 +1,8 @@
-// This script fixes shaka not exporting its type definitions and referencing remote google fonts in its CSS
-// by adding an export line to the type definitions and downloading the fonts and updating the CSS to point to the local files
+// This script fixes shaka not exporting its type definitions and referencing the Roboto font on google fonts in its CSS
+// by adding an export line to the type definitions and updating the CSS to point to the local Roboto font
 // this script only makes changes if they are needed, so running it multiple times doesn't cause any problems
 
-import { appendFileSync, closeSync, ftruncateSync, openSync, readFileSync, writeFileSync, writeSync } from 'fs'
+import { appendFileSync, closeSync, ftruncateSync, openSync, readFileSync, writeSync } from 'fs'
 import { resolve } from 'path'
 
 const SHAKA_DIST_DIR = resolve(import.meta.dirname, '../node_modules/shaka-player/dist')
@@ -55,7 +55,7 @@ function fixTypes() {
   }
 }
 
-async function removeRobotoFont() {
+function removeRobotoFont() {
   let cssFileHandle
   try {
     cssFileHandle = openSync(`${SHAKA_DIST_DIR}/controls.css`, 'r+')
@@ -78,57 +78,5 @@ async function removeRobotoFont() {
   }
 }
 
-async function replaceAndDownloadMaterialIconsFont() {
-  let cssFileHandle
-  try {
-    cssFileHandle = openSync(`${SHAKA_DIST_DIR}/controls.css`, 'r+')
-
-    let cssContents = readFileSync(cssFileHandle, 'utf-8')
-
-    const fontFaceRegex = /@font-face{font-family:'Material Icons Round'[^}]+format\('opentype'\)}/
-
-    if (fontFaceRegex.test(cssContents)) {
-      const cssResponse = await fetch('https://fonts.googleapis.com/icon?family=Material+Icons+Round', {
-        headers: {
-          // Without the user-agent it returns the otf file instead of the woff2 one
-          'user-agent': 'Firefox/125.0'
-        }
-      })
-
-      const text = await cssResponse.text()
-
-      let newFontCSS = text.match(/(@font-face\s*{[^}]+})/)[1].replaceAll('\n', '')
-
-      const urlMatch = newFontCSS.match(/https:\/\/fonts\.gstatic\.com\/s\/materialiconsround\/(?<version>[^/]+)\/[^.]+\.(?<extension>\w+)/)
-
-      const url = urlMatch[0]
-      const { version, extension } = urlMatch.groups
-
-      const fontResponse = await fetch(url)
-      const fontContent = new Uint8Array(await fontResponse.arrayBuffer())
-
-      const filename = `shaka-materialiconsround-${version}.${extension}`
-      writeFileSync(`${SHAKA_DIST_DIR}/${filename}`, fontContent)
-
-      newFontCSS = newFontCSS.replace(url, `./${filename}`)
-
-      cssContents = cssContents.replace(fontFaceRegex, newFontCSS)
-
-      ftruncateSync(cssFileHandle)
-      writeSync(cssFileHandle, cssContents, 0, 'utf-8')
-
-      console.log('Changed shaka-player Material Icons Rounded font to use the smaller woff2 format instead of otf')
-      console.log('Downloaded shaka-player Material Icons Rounded font')
-    }
-  } catch (e) {
-    console.error(e)
-  } finally {
-    if (typeof cssFileHandle !== 'undefined') {
-      closeSync(cssFileHandle)
-    }
-  }
-}
-
 fixTypes()
-await removeRobotoFont()
-await replaceAndDownloadMaterialIconsFont()
+removeRobotoFont()

package.json

@@ -66,7 +66,7 @@
     "marked": "^16.3.0",
     "portal-vue": "^2.1.7",
     "process": "^0.11.10",
-    "shaka-player": "^4.14.26",
+    "shaka-player": "^4.16.1",
     "swiper": "^12.0.1",
     "vue": "^2.7.16",
     "vue-i18n": "^8.28.2",

src/constants.js

@@ -203,6 +203,30 @@ const KeyboardShortcuts = {
   },
 }
 
+/**
+ * Material Design Symbols used by FreeTube's custom player components
+ *
+ * This only has the value of the `d` attribute from the `<path>` element, the rest of the SVG is generated at runtime.
+ *
+ * Fetched with
+ * https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsrounded/<icon>/default/24px.svg
+ * https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsrounded/<icon>/fill1/24px.svg
+ */
+const PlayerIcons = {
+  CLOSE_FULLSCREEN_FILLED: 'M400-344 164-108q-11 11-28 11t-28-11q-11-11-11-28t11-28l236-236H200q-17 0-28.5-11.5T160-440q0-17 11.5-28.5T200-480h240q17 0 28.5 11.5T480-440v240q0 17-11.5 28.5T440-160q-17 0-28.5-11.5T400-200v-144Zm216-216h144q17 0 28.5 11.5T800-520q0 17-11.5 28.5T760-480H520q-17 0-28.5-11.5T480-520v-240q0-17 11.5-28.5T520-800q17 0 28.5 11.5T560-760v144l236-236q11-11 28-11t28 11q11 11 11 28t-11 28L616-560Z',
+  DONE_FILLED: 'm382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z',
+  INSERT_CHART_DEFAULT: 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Zm120 200q-17 0-28.5 11.5T280-520v200q0 17 11.5 28.5T320-280q17 0 28.5-11.5T360-320v-200q0-17-11.5-28.5T320-560Zm160-120q-17 0-28.5 11.5T440-640v320q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-320q0-17-11.5-28.5T480-680Zm160 240q-17 0-28.5 11.5T600-400v80q0 17 11.5 28.5T640-280q17 0 28.5-11.5T680-320v-80q0-17-11.5-28.5T640-440Z',
+  INSERT_CHART_FILLED: 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-440q-17 0-28.5 11.5T280-520v200q0 17 11.5 28.5T320-280q17 0 28.5-11.5T360-320v-200q0-17-11.5-28.5T320-560Zm160-120q-17 0-28.5 11.5T440-640v320q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-320q0-17-11.5-28.5T480-680Zm160 240q-17 0-28.5 11.5T600-400v80q0 17 11.5 28.5T640-280q17 0 28.5-11.5T680-320v-80q0-17-11.5-28.5T640-440Z',
+  MONITOR_DEFAULT: 'M160-240q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H680l28 28q6 6 9 13.5t3 15.5v23q0 17-11.5 28.5T680-120H280q-17 0-28.5-11.5T240-160v-23q0-8 3-15.5t9-13.5l28-28H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z',
+  OPEN_IN_FULL_FILLED: 'M160-120q-17 0-28.5-11.5T120-160v-240q0-17 11.5-28.5T160-440q17 0 28.5 11.5T200-400v144l504-504H560q-17 0-28.5-11.5T520-800q0-17 11.5-28.5T560-840h240q17 0 28.5 11.5T840-800v240q0 17-11.5 28.5T800-520q-17 0-28.5-11.5T760-560v-144L256-200h144q17 0 28.5 11.5T440-160q0 17-11.5 28.5T400-120H160Z',
+  PAUSE_CIRCLE_FILLED: 'M400-320q17 0 28.5-11.5T440-360v-240q0-17-11.5-28.5T400-640q-17 0-28.5 11.5T360-600v240q0 17 11.5 28.5T400-320Zm160 0q17 0 28.5-11.5T600-360v-240q0-17-11.5-28.5T560-640q-17 0-28.5 11.5T520-600v240q0 17 11.5 28.5T560-320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z',
+  PHOTO_CAMERA_FILLED: 'M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l50-54q11-12 26.5-19t32.5-7h170q17 0 32.5 7t26.5 19l50 54h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Z',
+  PLAY_CIRCLE_FILLED: 'm426-330 195-125q14-9 14-25t-14-25L426-630q-15-10-30.5-1.5T380-605v250q0 18 15.5 26.5T426-330Zm54 250q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z',
+  SPATIAL_AUDIO_OFF_FILLED: 'M400-440q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM80-200v-32q0-33 17-62t47-44q51-26 115-44t141-18q77 0 141 18t115 44q30 15 47 44t17 62v32q0 33-23.5 56.5T640-120H160q-33 0-56.5-23.5T80-200Zm810-312q-8 0-15.5-3.5T862-524q-29-28-45-65t-16-78q0-41 16-77t45-65q5-5 12.5-8t15.5-3q17 0 28.5 11t11.5 28q0 8-3.5 16t-8.5 13q-17 17-27 39t-10 47q0 25 10 47t27 39q5 5 8.5 12.5T930-552q0 17-11.5 28.5T890-512ZM778-398q-8 0-15.5-3.5T750-410q-51-51-80-117.5T641-666q0-72 29-139t80-118q5-5 12.5-8t15.5-3q17 0 28.5 11.5T818-894q0 8-3 16t-9 13q-40 40-62.5 91T721-666q0 57 22.5 108.5T806-466q5 5 8.5 12.5T818-438q0 17-11.5 28.5T778-398Z',
+  TUNE_FILLED: 'M480-120q-17 0-28.5-11.5T440-160v-160q0-17 11.5-28.5T480-360q17 0 28.5 11.5T520-320v40h280q17 0 28.5 11.5T840-240q0 17-11.5 28.5T800-200H520v40q0 17-11.5 28.5T480-120Zm-320-80q-17 0-28.5-11.5T120-240q0-17 11.5-28.5T160-280h160q17 0 28.5 11.5T360-240q0 17-11.5 28.5T320-200H160Zm160-160q-17 0-28.5-11.5T280-400v-40H160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h120v-40q0-17 11.5-28.5T320-600q17 0 28.5 11.5T360-560v160q0 17-11.5 28.5T320-360Zm160-80q-17 0-28.5-11.5T440-480q0-17 11.5-28.5T480-520h320q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440H480Zm160-160q-17 0-28.5-11.5T600-640v-160q0-17 11.5-28.5T640-840q17 0 28.5 11.5T680-800v40h120q17 0 28.5 11.5T840-720q0 17-11.5 28.5T800-680H680v40q0 17-11.5 28.5T640-600Zm-480-80q-17 0-28.5-11.5T120-720q0-17 11.5-28.5T160-760h320q17 0 28.5 11.5T520-720q0 17-11.5 28.5T480-680H160Z',
+  TV_DEFAULT: 'M160-200q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v480q0 33-23.5 56.5T800-200H640v40q0 17-11.5 28.5T600-120H360q-17 0-28.5-11.5T320-160v-40H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z'
+}
+
 // Utils
 const MAIN_PROFILE_ID = 'allChannels'
 
@@ -230,6 +254,7 @@ export {
   SyncEvents,
   DefaultFolderKind,
   KeyboardShortcuts,
+  PlayerIcons,
   MAIN_PROFILE_ID,
   MOBILE_WIDTH_THRESHOLD,
   PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD,

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css

@@ -38,43 +38,8 @@
     video.js forced the direction for their controls too
   */
   direction: ltr;
-
-  /* Place the seek bar above the controls (the default is below) */
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-/*
-  Apply the active FreeTube base theme to shaka-player's menus.
-  Usually we go for classes and not element names,
-  however as we need to override shaka-player's CSS
-  we need to use the same selectors that they do.
-*/
-
-:deep(.shaka-overflow-menu),
-:deep(.shaka-settings-menu) {
-  background: var(--card-bg-color) !important;
-  max-height: 200px;
-
-}
-
-:deep(.shaka-overflow-menu button),
-:deep(.shaka-settings-menu button) {
-  color: var(--primary-text-color) !important;
 }
 
-:deep(.shaka-overflow-menu button:hover),
-:deep(.shaka-settings-menu button:hover) {
-  background: var(--side-nav-hover-color) !important;
-  color: var(--side-nav-hover-text-color) !important;
-}
-
-:deep(.shaka-overflow-menu-only .shaka-current-selection-span) {
-  color: var(--tertiary-text-color) !important;
-}
-
-/* End of theming code */
-
 .sixteenByNine {
   aspect-ratio: 16 / 9;
 }
@@ -153,10 +118,6 @@
   font-size: 0.8em;
 }
 
-:deep(.shaka-volume-bar-container) {
-  flex-shrink: initial;
-}
-
 .skippedSegmentsWrapper {
   position: absolute;
   right: 2%;
@@ -278,43 +239,6 @@
   }
 }
 
-@media only screen and (width >= 1000px) {
-  :deep(.shaka-bottom-controls) {
-    /* remove some bottom padding since the seek bar is above */
-    padding-bottom: 0;
-
-    /* make seekbar take full width on non-mobile devices */
-    width: 100%;
-  }
-
-  /* increase height of captions area since we remove the padding-bottom below the seekbar */
-  :deep(.shaka-controls-container[shown='true']~.shaka-text-container) {
-    bottom: 12.5%;
-  }
-
-  :deep(.shaka-controls-button-panel>button) {
-    height: 40px;
-    line-height: 0.5;
-  }
-
-  :deep(.shaka-tooltips-on button:active::after),
-  :deep(.shaka-tooltips-on button:focus-visible::after),
-  :deep(.shaka-tooltips-on button:hover::after) {
-    margin-bottom: 8px;
-  }
-
-  /*
-    similar to the styling that shaka-player applies with last-child
-    needed as we have made the controls a lot wider than they were intended to be :/
-   */
-  :deep(.shaka-tooltips-on button:nth-last-child(2):active::after),
-  :deep(.shaka-tooltips-on button:nth-last-child(2):focus-visible::after),
-  :deep(.shaka-tooltips-on button:nth-last-child(2):hover::after) {
-    left: 32px;
-    transform: translateX(-80%);
-  }
-}
-
 @media only screen and (width <=1350px) {
   :deep(.theatre-button) {
     display: none;
@@ -323,7 +247,8 @@
 
 @media (prefers-reduced-transparency) {
   :deep(.playerFullscreenTitleOverlay),
-  .skippedSegment {
+  .skippedSegment,
+  .stats {
     background-color: rgb(0 0 0 / 90%);
   }
 }