Add new Paella skin

elan-ev · Sep 18, 2023 · 17cd88c · 17cd88c
1 parent 6779966
commit 17cd88c
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 12 deletions.
diff --git a/backend/src/http/assets.rs b/backend/src/http/assets.rs
@@ -60,6 +60,30 @@ const ASSETS: Setup = assets! {
     "fonts/vietnamese-700.woff2": { hash },
     "fonts/vietnamese-i400.woff2": { hash },
     "fonts/vietnamese-i700.woff2": { hash },
+
+    // Paella
+    "paella/icons/backward.svg": { hash },
+    "paella/icons/captions-icon.svg": { hash },
+    "paella/icons/close.svg": { hash },
+    "paella/icons/forward.svg": { hash },
+    "paella/icons/fullscreen-exit.svg": { hash },
+    "paella/icons/fullscreen-icon.svg": { hash },
+    "paella/icons/maximize.svg": { hash },
+    "paella/icons/minimize.svg": { hash },
+    "paella/icons/play.svg": { hash },
+    "paella/icons/slide-next-icon.svg": { hash },
+    "paella/icons/slide-prev-icon.svg": { hash },
+    "paella/icons/slides-icon.svg": { hash },
+    "paella/icons/view-mode.svg": { hash },
+    "paella/icons/volume-high.svg": { hash },
+    "paella/icons/volume-low.svg": { hash },
+    "paella/icons/volume-mid.svg": { hash },
+    "paella/icons/volume-mute-cross.svg": { hash },
+    "paella/icons/volume-mute.svg": { hash },
+    "paella/Roboto-Regular.ttf": { hash },
+    "paella/theme.css": { hash },
+    "paella/theme.json": { hash },
+
 };
 
 const INDEX_FILE: &str = "index.html";

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -42,6 +42,7 @@
     "i18next-browser-languagedetector": "^7.1.0",
     "paella-basic-plugins": "1.31.2",
     "paella-core": "1.41.0",
+    "paella-skins": "github:LukasKalbertodt/paella-skins#d9473dbeed0fd65be56a3a6d1c79f403c8d0761b",
     "paella-zoom-plugin": "1.29.0",
     "qrcode.react": "^3.1.0",
     "raw-loader": "^4.0.2",

diff --git a/frontend/src/typings/paella-core.d.ts b/frontend/src/typings/paella-core.d.ts
@@ -14,6 +14,8 @@ declare module "paella-core" {
          */
         public loadManifest(): Promise<void>;
 
+        public skin: Skin;
+
         public unload(): Promise<void>;
     }
 
@@ -46,6 +48,10 @@ declare module "paella-core" {
         plugins: Record<string, PluginConfig>;
     }
 
+    export interface Skin {
+        loadSkin: (url: string) => Promise<void>;
+    }
+
     export type PluginConfig = Record<string, unknown> & {
         enabled: boolean;
     };

diff --git a/frontend/src/ui/player/Paella.tsx b/frontend/src/ui/player/Paella.tsx
@@ -112,7 +112,9 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({
                     getZoomPluginContext(),
                 ],
             });
-            const loadPromise = player.loadManifest();
+
+            const loadPromise = player.skin.loadSkin("/~assets/paella/theme.json")
+                .then(() => player.loadManifest());
             paella.current = { player, loadPromise };
 
         }
@@ -126,6 +128,10 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({
         };
     }, [tracks, title, duration, isLive, captions, startTime, endTime, previewImage, t]);
 
+    // This is `neutral10` in dark mode. We hard code this here as it's really
+    // not important that an adjusted neutral tone is reflected in the player.
+    // We just want to override the default dark blue.
+    const toolbarBg = "#1e1e1e";
     return (
         <div
             // We use `key` here to force React to re-create this `div` and not
@@ -144,6 +150,18 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({
                 left: "unset",
                 top: "unset",
                 fontFamily: "unset",
+
+                "--main-bg-color": toolbarBg,
+                "--main-bg-gradient": `color-mix(in srgb, ${toolbarBg} 85%, transparent)`,
+                "--secondary-bg-color-hover": toolbarBg,
+                // "--highlight-bg-color-hover": COLORS.primary0, // TODO
+
+                '& button[name="es.upv.paella.backwardButtonPlugin"] div': {
+                    marginTop: "0 !important",
+                },
+                '& button[name="es.upv.paella.forwardButtonPlugin"] div': {
+                    marginTop: "0 !important",
+                },
             }}
         />
     );
@@ -247,37 +265,61 @@ const PAELLA_CONFIG = {
         "es.upv.paella.playPauseButton": {
             enabled: true,
             side: "left",
+            order: 0,
+            tabIndex: 1,
         },
-        "es.upv.paella.volumeButtonPlugin": {
+        "es.upv.paella.customTimeProgressIndicator": {
+            enabled: true,
+            textSize: "large",
+            showTotal: true,
+            order: 1,
+        },
+        "es.upv.paella.backwardButtonPlugin": {
             enabled: true,
             side: "left",
+            order: 2,
+            time: 10,
+            suffix: false,
+            tabIndex: 2,
         },
         "es.upv.paella.forwardButtonPlugin": {
-            "enabled": true,
-            "side": "left",
+            enabled: true,
+            side: "left",
+            order: 3,
+            time: 10,
+            suffix: false,
+            tabIndex: 3,
         },
-        "es.upv.paella.backwardButtonPlugin": {
-            "enabled": true,
-            "side": "left",
+        "es.upv.paella.playbackRateButton": {
+            enabled: true,
+            showIcon: false,
+            rates: SPEEDS,
+            side: "left",
+            order: 4,
+            tabIndex: 4,
+        },
+        "es.upv.paella.volumeButtonPlugin": {
+            enabled: true,
+            side: "left",
+            order: 5,
+            tabIndex: 5,
         },
 
         // Buttons on the right side
         "es.upv.paella.captionsSelectorPlugin": {
             enabled: true,
             side: "right",
-        },
-        "es.upv.paella.playbackRateButton": {
-            enabled: true,
-            side: "right",
-            rates: SPEEDS,
+            tabIndex: 6,
         },
         "es.upv.paella.qualitySelector": {
             enabled: true,
             side: "right",
+            tabIndex: 7,
         },
         "es.upv.paella.fullscreenButton": {
             enabled: true,
             side: "right",
+            tabIndex: 8,
         },
     },
 };

diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts
@@ -92,6 +92,10 @@ const config: CallableOption = (_env, argv) => ({
                 { from: path.join(APP_PATH, "index.html"), to: path.join(OUT_PATH) },
                 { from: path.join(APP_PATH, "fonts.css"), to: path.join(OUT_PATH) },
                 { from: path.join(__dirname, "static"), to: OUT_PATH },
+                {
+                    from: path.join(__dirname, "node_modules", "paella-skins", "skins", "opencast"),
+                    to: path.join(OUT_PATH, "paella"),
+                },
             ],
         }),
     ],