Update Paella plugins (#1162)

Updates: - `paella-basic-plugins` 1.44.4 -> 1.44.7 - `paella-skins` 1.32.4 -> 1.48.0 - `paella-zoom-plugin` 1.41.1 -> 1.41.3 Also sets the currently set language in Tobira for Paella, and provides english as a fallback default language in Paella's configuration.
elan-ev · Apr 29, 2024 · 07251d2 · 07251d2
2 parents 366f9a9 + e2da465
commit 07251d2
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 18 deletions.
diff --git a/backend/src/http/assets.rs b/backend/src/http/assets.rs
@@ -1,7 +1,7 @@
 use std::collections::HashMap;
 
 use bstr::ByteSlice;
-use hyper::{StatusCode};
+use hyper::StatusCode;
 use reinda::{assets, Setup};
 use secrecy::ExposeSecret;
 use serde_json::json;
@@ -80,6 +80,8 @@ const ASSETS: Setup = assets! {
     "paella/icons/volume-mid.svg": {},
     "paella/icons/volume-mute-cross.svg": {},
     "paella/icons/volume-mute.svg": {},
+    "paella/icons/circle-play.svg": {},
+    "paella/icons/loader-circle.svg": {},
     "paella/Roboto-Regular.ttf": {},
     "paella/theme.css": {},
     "paella/theme.json": {},

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -40,12 +40,12 @@
     "hls.js": "^1.5.7",
     "i18next": "^23.10.0",
     "i18next-browser-languagedetector": "^7.2.0",
-    "paella-basic-plugins": "1.44.4",
+    "paella-basic-plugins": "1.44.7",
     "paella-core": "1.48.1",
     "paella-mp4multiquality-plugin": "1.47.1",
-    "paella-skins": "1.32.4",
+    "paella-skins": "1.48.0",
     "paella-user-tracking": "1.42.1",
-    "paella-zoom-plugin": "1.41.1",
+    "paella-zoom-plugin": "1.41.3",
     "qrcode.react": "^3.1.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",

diff --git a/frontend/src/typings/paella-core.d.ts b/frontend/src/typings/paella-core.d.ts
@@ -22,6 +22,8 @@ declare module "paella-core" {
             unregisterOnUnload?: boolean
         ): () => void;
 
+        public setLanguage(lang: string): void;
+
         public skin: Skin;
 
         public unload(): Promise<void>;
@@ -38,6 +40,7 @@ declare module "paella-core" {
         getManifestUrl?: (repoUrl: string, videoId: string) => Promise<string>;
         getManifestFileUrl?: (manifestUrl: string, manifestFileName: string) => Promise<string>;
         loadVideoManifest?: (manifestUrl: string) => Promise<Manifest>;
+        loadDictionaries?: (player: Paella) => void;
 
         customPluginContext?: PluginContext[];
     }
@@ -52,6 +55,12 @@ declare module "paella-core" {
         // TODO: what exactly does this do?
         defaultLayout?: string;
 
+        /**
+         * Language paella defaults to if there is no translation file corresponding
+         * to the current browser language or Tobira's currently set language.
+         */
+        defaultLanguage?: string;
+
         logLevel?: "DISABLED" | "ERROR" | "WARN" | "INFO" | "DEBUG" | "VERBOSE";
         plugins: Record<string, PluginConfig>;
     }

diff --git a/frontend/src/ui/player/Paella.tsx b/frontend/src/ui/player/Paella.tsx
@@ -25,7 +25,7 @@ export type PaellaState = {
 };
 
 const PaellaPlayer: React.FC<PaellaPlayerProps> = ({ event }) => {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const ref = useRef<HTMLDivElement>(null);
     const { paella, setPlayerIsLoaded } = usePlayerContext();
     const { players, register, unregister } = usePlayerGroupContext();
@@ -120,6 +120,7 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({ event }) => {
                 getManifestUrl: async () => "dummy-url",
                 getManifestFileUrl: async () => "dummy-file-url",
                 loadVideoManifest: async () => manifest,
+                loadDictionaries: (player: Paella) => player.setLanguage(i18n.language),
                 customPluginContext: [
                     getBasicPluginsContext(),
                     getZoomPluginContext(),
@@ -254,14 +255,28 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({ event }) => {
                     },
                 },
 
-                "&.paella-fallback-fullscreen": {
+                "& .paella-fallback-fullscreen": {
                     position: "fixed",
                     top: 0,
                     left: 0,
                     right: 0,
                     bottom: 0,
                     zIndex: 500000,
                 },
+
+                "& .preview-play-icon, .loader-container i": {
+                    color: "#ecf0f1",
+                    opacity: "0.8 !important",
+                    transition: "opacity 0.08s",
+                },
+
+                "& .preview-play-icon > svg": {
+                    filter: "drop-shadow(0 0 2px #777777)",
+                },
+
+                ":hover .preview-play-icon, .loader-container i": {
+                    opacity: "1 !important",
+                },
             }}
         />
     </>;
@@ -275,6 +290,7 @@ const PAELLA_CONFIG = {
         hideOnMouseLeave: true,
     },
     defaultLayout: "presenter-presentation",
+    defaultLanguage: "en",
 
     preferences: {
         currentSource: "dataPlugin",