From 17cd88cd5747f9f32c96c4b9fd44993f78f6ee3c Mon Sep 17 00:00:00 2001 From: Lukas Kalbertodt Date: Mon, 18 Sep 2023 17:32:14 +0200 Subject: [PATCH] Add new Paella skin --- backend/src/http/assets.rs | 24 ++++++++++ frontend/package-lock.json | 7 +++ frontend/package.json | 1 + frontend/src/typings/paella-core.d.ts | 6 +++ frontend/src/ui/player/Paella.tsx | 66 ++++++++++++++++++++++----- frontend/webpack.config.ts | 4 ++ 6 files changed, 96 insertions(+), 12 deletions(-) diff --git a/backend/src/http/assets.rs b/backend/src/http/assets.rs index 1c4f0b121..78f9ff332 100644 --- 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 index 8aa274cdf..0ccbe599d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -26,6 +26,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", @@ -7339,6 +7340,12 @@ "hls.js": "^1.0.4" } }, + "node_modules/paella-skins": { + "version": "1.32.0", + "resolved": "git+ssh://git@github.com/LukasKalbertodt/paella-skins.git#d9473dbeed0fd65be56a3a6d1c79f403c8d0761b", + "integrity": "sha512-RI+FymGKHgCi9Y8WXEayBbWPeKYnXrvfFHCPqvWHxE90yUYDiKXDIHqc0lAsxGUo2KNZv4S+ZvJTBw0TG8thIA==", + "license": "ECL-2.0" + }, "node_modules/paella-zoom-plugin": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/paella-zoom-plugin/-/paella-zoom-plugin-1.29.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 6ca66f575..369773a82 100644 --- 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 index ce0e51547..3fb165d91 100644 --- 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; + public skin: Skin; + public unload(): Promise; } @@ -46,6 +48,10 @@ declare module "paella-core" { plugins: Record; } + export interface Skin { + loadSkin: (url: string) => Promise; + } + export type PluginConfig = Record & { enabled: boolean; }; diff --git a/frontend/src/ui/player/Paella.tsx b/frontend/src/ui/player/Paella.tsx index 89cd9e7c6..b4cd88119 100644 --- a/frontend/src/ui/player/Paella.tsx +++ b/frontend/src/ui/player/Paella.tsx @@ -112,7 +112,9 @@ const PaellaPlayer: React.FC = ({ 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 = ({ }; }, [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 (
= ({ 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 index 14cd7675b..fc82d301f 100644 --- 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"), + }, ], }), ],