Use logos from @jellyfin/ux-web
23
package-lock.json
generated
@ -19,6 +19,7 @@
|
||||
"@fontsource/noto-sans-tc": "5.2.5",
|
||||
"@jellyfin/libass-wasm": "4.2.3",
|
||||
"@jellyfin/sdk": "0.0.0-unstable.202504100501",
|
||||
"@jellyfin/ux-web": "1.0.0",
|
||||
"@mui/icons-material": "6.4.10",
|
||||
"@mui/material": "6.4.10",
|
||||
"@mui/x-date-pickers": "7.28.2",
|
||||
@ -4097,6 +4098,11 @@
|
||||
"axios": "^1.3.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@jellyfin/ux-web": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@jellyfin/ux-web/-/ux-web-1.0.0.tgz",
|
||||
"integrity": "sha512-3uBl/CMkWBsL2aD5xmg5qEQcN57ZJE/d5JktbwxXgWPrfa9A6KltivvcEltY4zVyT6btGgLy7sKmtFyu6gQ7dw=="
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
|
||||
@ -24604,9 +24610,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
|
||||
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"devOptional": true
|
||||
},
|
||||
"node_modules/tunnel-agent": {
|
||||
@ -28558,6 +28564,11 @@
|
||||
"integrity": "sha512-Qpmn8+TQz//EJjkhcXmhq5cytcIsQhxRQz943udlKoRXbz9UdnnMq/VUngMg+F+FHbDM1TTpb3h1Ki3tCH/HFw==",
|
||||
"requires": {}
|
||||
},
|
||||
"@jellyfin/ux-web": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@jellyfin/ux-web/-/ux-web-1.0.0.tgz",
|
||||
"integrity": "sha512-3uBl/CMkWBsL2aD5xmg5qEQcN57ZJE/d5JktbwxXgWPrfa9A6KltivvcEltY4zVyT6btGgLy7sKmtFyu6gQ7dw=="
|
||||
},
|
||||
"@jridgewell/gen-mapping": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
|
||||
@ -42679,9 +42690,9 @@
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
|
||||
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"devOptional": true
|
||||
},
|
||||
"tunnel-agent": {
|
||||
|
@ -85,6 +85,7 @@
|
||||
"@fontsource/noto-sans-tc": "5.2.5",
|
||||
"@jellyfin/libass-wasm": "4.2.3",
|
||||
"@jellyfin/sdk": "0.0.0-unstable.202504100501",
|
||||
"@jellyfin/ux-web": "1.0.0",
|
||||
"@mui/icons-material": "6.4.10",
|
||||
"@mui/material": "6.4.10",
|
||||
"@mui/x-date-pickers": "7.28.2",
|
||||
|
@ -6,7 +6,7 @@ import React from 'react';
|
||||
import { useSystemInfo } from 'hooks/useSystemInfo';
|
||||
import ListItemLink from 'components/ListItemLink';
|
||||
|
||||
import appIcon from 'assets/img/icon-transparent.png';
|
||||
import appIcon from '@jellyfin/ux-web/icon-transparent.png';
|
||||
|
||||
const DrawerHeaderLink = () => {
|
||||
const { data: systemInfo } = useSystemInfo();
|
||||
|
Before Width: | Height: | Size: 85 KiB |
Before Width: | Height: | Size: 82 KiB |
Before Width: | Height: | Size: 23 KiB |
BIN
src/favicon.ico
Before Width: | Height: | Size: 6.7 KiB |
BIN
src/favicon.png
Before Width: | Height: | Size: 7.6 KiB |
@ -15,9 +15,9 @@
|
||||
|
||||
<meta id="themeColor" name="theme-color" content="#202020">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="touchicon.png">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<meta name="msapplication-TileImage" content="touchicon144.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../node_modules/@jellyfin/ux-web/favicons/touchicon.png">
|
||||
<link rel="shortcut icon" href="../node_modules/@jellyfin/ux-web/favicons/favicon.ico">
|
||||
<meta name="msapplication-TileImage" content="../node_modules/@jellyfin/ux-web/favicons/touchicon144.png">
|
||||
<meta name="msapplication-TileColor" content="#333333">
|
||||
|
||||
<title>Jellyfin</title>
|
||||
@ -80,37 +80,6 @@
|
||||
[dir="rtl"] .mainDrawerHandle {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.splashLogo {
|
||||
animation: fadein 0.5s;
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
background-image: url(assets/img/icon-transparent.png);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@media screen
|
||||
and (min-device-width: 992px) {
|
||||
.splashLogo {
|
||||
background-image: url(assets/img/banner-light.png);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body dir="ltr">
|
||||
|
@ -10,22 +10,22 @@
|
||||
"icons": [
|
||||
{
|
||||
"sizes": "72x72",
|
||||
"src": "touchicon72.png",
|
||||
"src": "favicons/touchicon72.png",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"sizes": "114x114",
|
||||
"src": "touchicon114.png",
|
||||
"src": "favicons/touchicon114.png",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"sizes": "144x144",
|
||||
"src": "touchicon144.png",
|
||||
"src": "favicons/touchicon144.png",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"sizes": "512x512",
|
||||
"src": "touchicon512.png",
|
||||
"src": "favicons/touchicon512.png",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
|
@ -1,3 +1,5 @@
|
||||
import icon from '@jellyfin/ux-web/icon-transparent.png';
|
||||
|
||||
import { PluginType } from '../../types/plugin.ts';
|
||||
import { randomInt } from '../../utils/number.ts';
|
||||
|
||||
@ -133,7 +135,7 @@ export default function () {
|
||||
elem.classList.add('logoScreenSaver');
|
||||
document.body.appendChild(elem);
|
||||
|
||||
elem.innerHTML = '<img class="logoScreenSaverImage" src="assets/img/banner-light.png" />';
|
||||
elem.innerHTML = `<img class="logoScreenSaverImage" src="${icon}" />`;
|
||||
}
|
||||
|
||||
stopInterval();
|
||||
|
@ -4,6 +4,37 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.splashLogo {
|
||||
animation: fadein 0.5s;
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
background-image: url(@jellyfin/ux-web/icon-transparent.png);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@media screen
|
||||
and (min-device-width: 992px) {
|
||||
.splashLogo {
|
||||
background-image: url(@jellyfin/ux-web/banner-light.png);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
@include fullpage;
|
||||
line-height: 1.35;
|
||||
|
@ -35,11 +35,11 @@ html {
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-dark.png);
|
||||
background-image: url(@jellyfin/ux-web/banner-dark.png);
|
||||
}
|
||||
|
||||
.layout-tv .pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/icon-transparent.png);
|
||||
background-image: url(@jellyfin/ux-web/icon-transparent.png);
|
||||
}
|
||||
|
||||
html {
|
||||
|
@ -35,11 +35,11 @@ html {
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
background-image: url(@jellyfin/ux-web/banner-light.png);
|
||||
}
|
||||
|
||||
.layout-tv .pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/icon-transparent.png);
|
||||
background-image: url(@jellyfin/ux-web/icon-transparent.png);
|
||||
}
|
||||
|
||||
.dialog,
|
||||
|
@ -34,11 +34,11 @@ html {
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
background-image: url(@jellyfin/ux-web/banner-light.png);
|
||||
}
|
||||
|
||||
.layout-tv .pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/icon-transparent.png);
|
||||
background-image: url(@jellyfin/ux-web/icon-transparent.png);
|
||||
}
|
||||
|
||||
.backgroundContainer,
|
||||
|
@ -44,11 +44,11 @@ html {
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
background-image: url(@jellyfin/ux-web/banner-light.png);
|
||||
}
|
||||
|
||||
.layout-tv .pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/icon-transparent.png);
|
||||
background-image: url(@jellyfin/ux-web/icon-transparent.png);
|
||||
}
|
||||
|
||||
.backgroundContainer,
|
||||
|
@ -31,11 +31,11 @@ html {
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
background-image: url(@jellyfin/ux-web/banner-light.png);
|
||||
}
|
||||
|
||||
.layout-tv .pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/icon-transparent.png);
|
||||
background-image: url(@jellyfin/ux-web/icon-transparent.png);
|
||||
}
|
||||
|
||||
.dialog,
|
||||
|
@ -41,11 +41,11 @@ html {
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
background-image: url(@jellyfin/ux-web/banner-light.png);
|
||||
}
|
||||
|
||||
.layout-tv .pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/icon-transparent.png);
|
||||
background-image: url(@jellyfin/ux-web/icon-transparent.png);
|
||||
}
|
||||
|
||||
.backgroundContainer,
|
||||
|
Before Width: | Height: | Size: 8.3 KiB |
Before Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 7.3 KiB |
Before Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 3.4 KiB |
@ -80,35 +80,24 @@ const config = {
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: 'assets/**',
|
||||
globOptions: {
|
||||
dot: true,
|
||||
ignore: ['**/css/*']
|
||||
}
|
||||
from: 'assets',
|
||||
to: 'assets'
|
||||
},
|
||||
'config.json',
|
||||
'robots.txt',
|
||||
{
|
||||
from: '*.*',
|
||||
globOptions: {
|
||||
dot: true,
|
||||
ignore: [
|
||||
'**.js',
|
||||
'**.jsx',
|
||||
'**.html',
|
||||
'**.ts',
|
||||
'**.tsx'
|
||||
]
|
||||
}
|
||||
}
|
||||
from: 'touchicon*.png',
|
||||
context: path.resolve(__dirname, 'node_modules/@jellyfin/ux-web/favicons'),
|
||||
to: 'favicons'
|
||||
},
|
||||
...Assets.map(asset => {
|
||||
return {
|
||||
from: path.resolve(__dirname, `node_modules/${asset}`),
|
||||
to: 'libraries'
|
||||
};
|
||||
})
|
||||
]
|
||||
}),
|
||||
new CopyPlugin({
|
||||
patterns: Assets.map(asset => {
|
||||
return {
|
||||
from: path.resolve(__dirname, `./node_modules/${asset}`),
|
||||
to: path.resolve(__dirname, './dist/libraries')
|
||||
};
|
||||
})
|
||||
}),
|
||||
// The libarchive.js worker-bundle is copied manually.
|
||||
// If it is automatically bundled, escheck will fail since it uses import.meta.url.
|
||||
new IgnorePlugin({
|
||||
@ -139,7 +128,7 @@ const config = {
|
||||
if (pathData.filename.startsWith('assets/') || pathData.filename.startsWith('themes/')) {
|
||||
return '[path][base][query]';
|
||||
}
|
||||
return '[hash][ext][query]';
|
||||
return '[name].[hash][ext][query]';
|
||||
},
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
publicPath: ''
|
||||
@ -359,7 +348,7 @@ const config = {
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/i,
|
||||
test: /\.(ico|png|jpg|gif|svg)$/i,
|
||||
type: 'asset/resource'
|
||||
},
|
||||
{
|
||||
|