jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2024-12-01 02:00:25 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

perf: reduce default blurhash quality (#2279)

Browse Source 
Signed-off-by: GitHub <noreply@github.com>
This commit is contained in:
Fernando Fernández 2024-03-29 09:44:19 +01:00
parent 5f94d9af62
commit b688424a3b
No known key found for this signature in database
GPG Key ID: 82FD36644F1F4D3B
4 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/.eslintrc.cjs
View File

@ -156,7 +156,7 @@ module.exports = {
'import/order': 'error',
'import/no-cycle': 'error',
'import/no-nodejs-modules': 'error',
'import/no-duplicates': ['error', { 'prefer-inline' : true }],
'import/no-duplicates': ['error', { 'prefer-inline' : true, 'considerQueryString': true }],
'jsdoc/require-hyphen-before-param-description': 'error',
'jsdoc/require-description': 'error',
'jsdoc/no-types': 'error',

7
frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue
View File

@ -11,7 +11,8 @@
<script lang="ts">
import { wrap } from 'comlink';
import { ref, shallowRef, watch } from 'vue';
import { shallowRef, watch } from 'vue';
import { DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_PUNCH } from './BlurhashWorker';
import BlurhashWorker from './BlurhashWorker?worker';
import { remote } from '@/plugins/remote';
@ -40,10 +41,10 @@ const props = withDefaults(
height?: number;
punch?: number;
}>(),
{ width: 32, height: 32, punch: 1 }
{ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT, punch: DEFAULT_PUNCH }
);
const pixels = ref<Uint8ClampedArray>();
const pixels = shallowRef<Uint8ClampedArray>();
const error = shallowRef(false);
const canvas = shallowRef<HTMLCanvasElement>();

2
frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue
View File

@ -52,7 +52,7 @@ const props = withDefaults(
punch?: number;
type?: ImageType;
}>(),
{ width: 32, height: 32, punch: 1, type: ImageType.Primary }
{ type: ImageType.Primary }
);
const imageElement = shallowRef<HTMLDivElement>();

19
frontend/src/components/Layout/Images/Blurhash/BlurhashWorker.ts
View File

@ -2,11 +2,22 @@ import { decode } from 'blurhash';
import { expose } from 'comlink';
import { sealed } from '@/utils/validation';
/**
* By default, 20x20 pixels with a punch of 1 is returned.
* Although the default values recommended by Blurhash developers is 32x32,
* a size of 20x20 seems to be the sweet spot for us, improving the performance
* and reducing the memory usage, while retaining almost full blur quality.
* Lower values had more visible pixelation
*/
export const DEFAULT_WIDTH = 20;
export const DEFAULT_HEIGHT = 20;
export const DEFAULT_PUNCH = 1;
@sealed
class BlurhashWorker {
private readonly _cache = new Map<string, Uint8ClampedArray>();
/**
* Decodes blurhash outside the main thread, in a web worker
* Decodes blurhash outside the main thread, in a web worker.
*
* @param hash - Hash to decode.
* @param width - Width of the decoded pixel array
@ -16,9 +27,9 @@ class BlurhashWorker {
*/
public readonly getPixels = (
hash: string,
width: number,
height: number,
punch: number
width: number = DEFAULT_WIDTH,
height: number = DEFAULT_HEIGHT,
punch: number = DEFAULT_PUNCH
): Uint8ClampedArray => {
try {
const params = [hash, width, height, punch].toString();