From b7e7a3a91f81f94823344de0026647787e15ff07 Mon Sep 17 00:00:00 2001 From: Ole Wieners Date: Wed, 10 Jul 2024 11:52:18 +0200 Subject: [PATCH 1/3] Adjust sizing and opacity of buttons inside video containers These buttons will now be smaller and use less margin when the video container is smaller than 400px. They will also be less opaque overall and only be completely opaque when directly hovered over. --- frontend/src/ui/player/Paella.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/frontend/src/ui/player/Paella.tsx b/frontend/src/ui/player/Paella.tsx index aef30f397..ee40efc10 100644 --- a/frontend/src/ui/player/Paella.tsx +++ b/frontend/src/ui/player/Paella.tsx @@ -225,6 +225,22 @@ const PaellaPlayer: React.FC = ({ 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", }, From 3f1df17ce3d59dabc1a353767a52c41ce9a714cb Mon Sep 17 00:00:00 2001 From: Ole Wieners Date: Wed, 10 Jul 2024 11:56:39 +0200 Subject: [PATCH 2/3] Add settings menu to paella player This menu holds the options for resolution, captions and video layout to make the player appear less cluttered. --- frontend/src/icons/settings.svg | 1 + frontend/src/ui/player/Paella.tsx | 84 +++++++++++++++++++++++-------- frontend/webpack.config.ts | 4 ++ 3 files changed, 68 insertions(+), 21 deletions(-) create mode 100644 frontend/src/icons/settings.svg diff --git a/frontend/src/icons/settings.svg b/frontend/src/icons/settings.svg new file mode 100644 index 000000000..4ef8d936b --- /dev/null +++ b/frontend/src/icons/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/ui/player/Paella.tsx b/frontend/src/ui/player/Paella.tsx index ee40efc10..27c192914 100644 --- a/frontend/src/ui/player/Paella.tsx +++ b/frontend/src/ui/player/Paella.tsx @@ -132,6 +132,7 @@ const PaellaPlayer: React.FC = ({ 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 = ({ 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", + }, + }, }, }} />
= ({ event }) => { opacity: "unset", }, + '& div[name="es.upv.paella.customTimeProgressIndicator"]': { + fontWeight: "bold", + }, + '& button[name="es.upv.paella.backwardButtonPlugin"] div': { marginTop: "-7px !important", "svg text": { @@ -266,23 +294,6 @@ const PaellaPlayer: React.FC = ({ 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, @@ -338,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, @@ -384,6 +409,7 @@ const PAELLA_CONFIG = { title: "Presenter and presentation", }, ], + tabIndexStart: 11, }, // Canvas plugins @@ -472,12 +498,13 @@ 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", }, "es.upv.paella.layoutSelector": { enabled: true, @@ -485,20 +512,24 @@ const PAELLA_CONFIG = { 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, @@ -515,6 +546,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, diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts index 0b6863f48..b28ee4f47 100644 --- a/frontend/webpack.config.ts +++ b/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 => { From e860756e81830a3cffd1490c805d89941c08fc07 Mon Sep 17 00:00:00 2001 From: Ole Wieners Date: Fri, 12 Jul 2024 13:49:08 +0200 Subject: [PATCH 3/3] Update `paella-basic-plugins` to 1.44.10 This allows us to always show the quality selector, even if there is only one available resolution. --- frontend/package-lock.json | 8 ++++---- frontend/package.json | 2 +- frontend/src/ui/player/Paella.tsx | 1 + 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 46daec025..b3bb121e6 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -24,7 +24,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", @@ -7691,9 +7691,9 @@ } }, "node_modules/paella-basic-plugins": { - "version": "1.44.7", - "resolved": "https://registry.npmjs.org/paella-basic-plugins/-/paella-basic-plugins-1.44.7.tgz", - "integrity": "sha512-SLCSnFMR2Ep/Kel31/cL3vWztVT4iPtmlshfocd3wuhoI4ojdtHbTCrYAmHNuEmO1MedrCUwW4sG2W0YcF8cZg==", + "version": "1.44.10", + "resolved": "https://registry.npmjs.org/paella-basic-plugins/-/paella-basic-plugins-1.44.10.tgz", + "integrity": "sha512-BLzf1iX3b0XudCa3frVwk9zliynh8/CS2x2meE+CZ+28BDLPLoXU8VM1rD/aFn6RzGFGY1pMQ424zBWLv3cfqA==", "dependencies": { "paella-core": "^1.46.6" } diff --git a/frontend/package.json b/frontend/package.json index 85f73d0c1..389c3a62c 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/ui/player/Paella.tsx b/frontend/src/ui/player/Paella.tsx index 27c192914..6f13b772e 100644 --- a/frontend/src/ui/player/Paella.tsx +++ b/frontend/src/ui/player/Paella.tsx @@ -505,6 +505,7 @@ const PAELLA_CONFIG = { order: 6, tabIndex: 6, parentContainer: "optionsContainer", + showForSingleQuality: true, }, "es.upv.paella.layoutSelector": { enabled: true,