Fix various UI things in our paella integration (#1208)

This mainly does two things:
- some buttons are moved into a settings menu to make the player appear
less crammed on smaller screens (resolution, captions and video layout)
- the control elements (which are also buttons) inside the videos (i.e.
maximize video, switch sides etc.) are now less opaque and also smaller
when their containers are below a certain width (currently 400px)

Also: 
- the fullscreen button is now always on the rightmost side of the
control bar (as you would expect)
- the buttons for slide navigation were added to presentation videos

Things mentioned in #1196 but missing here:
- hide Firefox PiP button:
-> this is not technically possible. Users need to disable it themselves
in their browser.
- hover color of vertical separation lines:
-> I believe this needs to be fixed in paella-skins as any custom
changes are always overwritten by that.

Oh and I also noticed the thing @dagraf mentions in
#1196 (comment):
Open submenus are not fixed but move with the screen when scrolling up
or down. This also needs to be fixed in paella.

Closes #1196 

Marked as draft bc I still need to figure out how to hide the settings
menu when there are no menu items 🙈

frontend/package.json

@@ -40,7 +40,7 @@
     "hls.js": "^1.5.7",
     "i18next": "^23.10.0",
     "i18next-browser-languagedetector": "^7.2.0",
-    "paella-basic-plugins": "1.44.7",
+    "paella-basic-plugins": "1.44.10",
     "paella-core": "1.48.1",
     "paella-mp4multiquality-plugin": "1.47.1",
     "paella-skins": "1.48.0",

frontend/src/ui/player/Paella.tsx

@@ -132,6 +132,7 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({ event }) => {
                 getManifestFileUrl: async () => "dummy-file-url",
                 loadVideoManifest: async () => manifest,
                 loadDictionaries: (player: Paella) => player.setLanguage(i18n.language),
+                configResourcesUrl: "/~assets/paella",
                 customPluginContext: [
                     getBasicPluginsContext(),
                     getZoomPluginContext(),
@@ -203,6 +204,29 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({ event }) => {
             },
             ".popup-container": {
                 zIndex: 500050,
+                "& .button-group": {
+                    "& .button-plugin-wrapper:hover, button:hover": {
+                        backgroundColor: "var(--highlight-bg-color-hover)",
+                    },
+                },
+                '& button[name="es.upv.paella.qualitySelector"] div': {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    i: {
+                        display: "none",
+                    },
+                    span: {
+                        color: "var(--main-fg-color)",
+                        backgroundColor: "var(--main-bg-color)",
+                        border: "2px solid var(--main-fg-color)",
+                        borderRadius: 3,
+                        margin: "0 !important",
+                        fontSize: "10px !important",
+                        fontWeight: "bold",
+                        padding: "2px 3px",
+                    },
+                },
             },
         }} />
         <div
@@ -225,6 +249,22 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({ event }) => {
 
                 ...colors,
 
+                // Buttons inside video containers
+                "& .video-canvas": {
+                    containerName: "video-canvas",
+                    containerType: "inline-size",
+                },
+                "@container video-canvas (width < 400px)": {
+                    "& .button-area": {
+                        padding: "2px !important",
+                        top: "unset !important",
+                        "& button": {
+                            transform: "scale(0.7)",
+                            margin: "-3px !important",
+                        },
+                    },
+                },
+
                 "& .playback-bar": {
                     transition: "background 0.08s",
                 },
@@ -235,6 +275,10 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({ event }) => {
                     opacity: "unset",
                 },
 
+                '& div[name="es.upv.paella.customTimeProgressIndicator"]': {
+                    fontWeight: "bold",
+                },
+
                 '& button[name="es.upv.paella.backwardButtonPlugin"] div': {
                     marginTop: "-7px !important",
                     "svg text": {
@@ -250,23 +294,6 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({ event }) => {
                     },
                 },
 
-                '& button[name="es.upv.paella.qualitySelector"] div': {
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    i: {
-                        display: "none",
-                    },
-                    span: {
-                        color: "black",
-                        backgroundColor: "var(--main-fg-color)",
-                        borderRadius: 3,
-                        margin: "0 !important",
-                        fontSize: "10px !important",
-                        padding: "2px 3px",
-                    },
-                },
-
                 "& .paella-fallback-fullscreen": {
                     position: "fixed",
                     top: 0,
@@ -322,6 +349,20 @@ const PAELLA_CONFIG = {
         restoreVolume: true,
     },
 
+    buttonGroups: [
+        {
+            enabled: true,
+            groupName: "optionsContainer",
+            description: "Options",
+            icon: "icons/settings.svg",
+            order: 6,
+            side: "right",
+            tabIndex: 6,
+            parentContainer: "playbackBar",
+            ariaLabel: "Show options",
+        },
+    ],
+
     plugins: {
         "es.upv.paella.singleVideoDynamic": {
             enabled: true,
@@ -368,6 +409,7 @@ const PAELLA_CONFIG = {
                     title: "Presenter and presentation",
                 },
             ],
+            tabIndexStart: 11,
         },
 
         // Canvas plugins
@@ -456,33 +498,39 @@ const PAELLA_CONFIG = {
             tabIndex: 5,
         },
 
-        // Buttons on the right side
+        // Buttons on the right side inside settings menu
         "es.upv.paella.qualitySelector": {
             enabled: true,
             side: "right",
             order: 6,
             tabIndex: 6,
+            parentContainer: "optionsContainer",
+            showForSingleQuality: true,
         },
         "es.upv.paella.layoutSelector": {
             enabled: true,
             side: "right",
             showIcons: false,
             order: 7,
             tabIndex: 7,
+            parentContainer: "optionsContainer",
         },
-        "es.upv.paella.captionsSelectorPlugin": {
+        "es.upv.paella.frameControlButtonPlugin": {
             enabled: true,
             side: "right",
             order: 8,
             tabIndex: 8,
+            parentContainer: "optionsContainer",
         },
-        "es.upv.paella.fullscreenButton": {
+
+        // Buttons on the right side outside of settings menu
+        "es.upv.paella.captionsSelectorPlugin": {
             enabled: true,
             side: "right",
             order: 9,
             tabIndex: 9,
         },
-        "es.upv.paella.frameControlButtonPlugin": {
+        "es.upv.paella.fullscreenButton": {
             enabled: true,
             side: "right",
             order: 10,
@@ -499,6 +547,17 @@ const PAELLA_CONFIG = {
             drawBackground: false,
         },
 
+        "es.upv.paella.prevSlideNavigatorButton": {
+            enabled: true,
+            content: ["presentation"],
+            order: 0,
+        },
+        "es.upv.paella.nextSlideNavigatorButton": {
+            enabled: true,
+            content: ["presentation"],
+            order: 1,
+        },
+
         // Data plugin
         "es.upv.paella.localStorageDataPlugin": {
             "enabled": true,

frontend/webpack.config.ts

@@ -98,6 +98,10 @@ const config: CallableOption = (_env, argv) => ({
                 { from: path.join(APP_PATH, "fonts.css"), to: path.join(OUT_PATH) },
                 { from: path.join(__dirname, "static"), to: OUT_PATH },
                 { from: PAELLA_SKIN_PATH, to: path.join(OUT_PATH, "paella") },
+                {
+                    from: path.join(APP_PATH, "icons/settings.svg"),
+                    to: path.join(OUT_PATH, "paella/icons"),
+                },
             ],
         }),
         compiler => {