Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new Paella skin #938

Merged
merged 7 commits into from
Sep 28, 2023
Merged

Add new Paella skin #938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3a019b8
Add new Paella skin
LukasKalbertodt Sep 18, 2023
3133efa
Slightly adjust position of forward/backward buttons and their texts
LukasKalbertodt Sep 28, 2023
4be89bf
Make toolbar slightly more transparent and not fully opaque on hover
LukasKalbertodt Sep 19, 2023
345dddb
Add short background transition animation to Paellas playback bar
LukasKalbertodt Sep 19, 2023
a2e7a89
Update Paella packages to newest version
LukasKalbertodt Sep 28, 2023
aaebda4
Configure Paella to hide the UI on mouse leave and otherwise after 2s
LukasKalbertodt Sep 28, 2023
cb336dd
Add layout selector button to Paella
LukasKalbertodt Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions backend/src/http/assets.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {},
"paella/icons/captions-icon.svg": {},
"paella/icons/close.svg": {},
"paella/icons/forward.svg": {},
"paella/icons/fullscreen-exit.svg": {},
"paella/icons/fullscreen-icon.svg": {},
"paella/icons/maximize.svg": {},
"paella/icons/minimize.svg": {},
"paella/icons/play.svg": {},
"paella/icons/slide-next-icon.svg": {},
"paella/icons/slide-prev-icon.svg": {},
"paella/icons/slides-icon.svg": {},
"paella/icons/view-mode.svg": {},
"paella/icons/volume-high.svg": {},
"paella/icons/volume-low.svg": {},
"paella/icons/volume-mid.svg": {},
"paella/icons/volume-mute-cross.svg": {},
"paella/icons/volume-mute.svg": {},
"paella/Roboto-Regular.ttf": {},
"paella/theme.css": {},
"paella/theme.json": {},

};

const INDEX_FILE: &str = "index.html";
Expand Down
34 changes: 20 additions & 14 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,10 @@
"hls.js": "^1.4.12",
"i18next": "^23.5.1",
"i18next-browser-languagedetector": "^7.1.0",
"paella-basic-plugins": "1.31.2",
"paella-core": "1.41.0",
"paella-zoom-plugin": "1.29.0",
"paella-basic-plugins": "1.44.0",
"paella-core": "1.44.1",
"paella-skins": "1.32.1",
"paella-zoom-plugin": "1.41.1",
"qrcode.react": "^3.1.0",
"raw-loader": "^4.0.2",
"react": "^18.2.0",
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/typings/paella-core.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ declare module "paella-core" {
unregisterOnUnload?: boolean
): () => void;

public skin: Skin;

public unload(): Promise<void>;
}

Expand Down Expand Up @@ -54,6 +56,10 @@ declare module "paella-core" {
plugins: Record<string, PluginConfig>;
}

export interface Skin {
loadSkin: (url: string) => Promise<void>;
}

export interface VideoContainer {
setCurrentTime: (t: number) => Promise<void>;
currentTime: () => Promise<number>;
Expand Down
86 changes: 75 additions & 11 deletions frontend/src/ui/player/Paella.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,8 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({
}
});

const loadPromise = player.loadManifest();
const loadPromise = player.skin.loadSkin("/~assets/paella/theme.json")
.then(() => player.loadManifest());
paella.current = { player, loadPromise };
}

Expand All @@ -136,6 +137,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
Expand All @@ -154,6 +159,27 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({
left: "unset",
top: "unset",
fontFamily: "unset",

"--main-bg-color": toolbarBg,
"--main-bg-gradient": `color-mix(in srgb, ${toolbarBg} 80%, transparent)`,
"--secondary-bg-color-hover": `color-mix(in srgb, ${toolbarBg} 90%, transparent)`,

"& .playback-bar": {
transition: "background 0.08s",
},

'& button[name="es.upv.paella.backwardButtonPlugin"] div': {
marginTop: "-4px !important",
"svg text": {
transform: "translate(1px, -2px)",
},
},
'& button[name="es.upv.paella.forwardButtonPlugin"] div': {
marginTop: "-4px !important",
"svg text": {
transform: "translate(1px, -2px)",
},
},
}}
/>
);
Expand All @@ -162,6 +188,10 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({
const PAELLA_CONFIG = {
logLevel: "WARN",
defaultVideoPreview: "/~assets/1x1-black.png",
ui: {
hideUITimer: 2000,
hideOnMouseLeave: true,
},

plugins: {
"es.upv.paella.singleVideoDynamic": {
Expand Down Expand Up @@ -257,37 +287,71 @@ 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": {
"es.upv.paella.qualitySelector": {
enabled: true,
side: "right",
order: 6,
tabIndex: 6,
},
"es.upv.paella.playbackRateButton": {
"es.upv.paella.layoutSelector": {
enabled: true,
side: "right",
rates: SPEEDS,
showIcons: false,
order: 7,
tabIndex: 7,
},
"es.upv.paella.qualitySelector": {
"es.upv.paella.captionsSelectorPlugin": {
enabled: true,
side: "right",
order: 8,
tabIndex: 8,
},
"es.upv.paella.fullscreenButton": {
enabled: true,
side: "right",
order: 9,
tabIndex: 9,
},
},
};
Expand Down
4 changes: 4 additions & 0 deletions frontend/webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
},
],
}),
],
Expand Down