perf(JVirtual): gpu acceleration

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
jellyfin · Dec 19, 2024 · eb459ed · eb459ed
1 parent 0e6b9a8
commit eb459ed
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/frontend/src/components/lib/JVirtual/JVirtual.vue b/frontend/src/components/lib/JVirtual/JVirtual.vue
@@ -15,6 +15,7 @@
       <JSlot
         v-for="internal_item in visibleItems"
         :key="indexAsKey ? internal_item.index : undefined"
+        class="uno-transform-gpu"
         :class="gridClass"
         :style="internal_item.style">
         <slot

diff --git a/frontend/src/components/lib/JVirtual/j-virtual.worker.ts b/frontend/src/components/lib/JVirtual/j-virtual.worker.ts
@@ -43,13 +43,12 @@ class JVirtualWorker {
 
     for (let index = first; index < last; index++) {
       const { x, y } = getItemOffsetByIndex(index, resizeMeasurement);
-      const translateX = `translateX(${x}px)`;
-      const translateY = `translateY(${y}px)`;
 
       res.push({
         index,
         style: {
-          transform: `${translateX} ${translateY}`
+          '--j-translate-x': `${x}px`,
+          '--j-translate-y': `${y}px`
         }
       });
     }

diff --git a/frontend/src/pages/playback/video.vue b/frontend/src/pages/playback/video.vue
@@ -6,7 +6,9 @@
       :class="{ 'uno-cursor-none': !overlay }"
       @mousemove="handleMouseMove"
       @touchend="handleMouseMove">
-      <JOverlay v-show="overlay">
+      <JOverlay
+        class="player-overlay"
+        override>
         <div
           class="d-flex flex-column align-center justify-space-between player-overlay">
           <div class="osd-top pt-s pl-s pr-s">

diff --git a/packages/configs/unocss.ts b/packages/configs/unocss.ts
@@ -1,12 +1,16 @@
-import { defineConfig, presetUno } from 'unocss';
+import { defineConfig, presetUno, transformerVariantGroup } from 'unocss';
 
 export const defaultConfig = defineConfig({
   presets: [
     presetUno({
       prefix: 'uno-',
-      preflight: false
+      variablePrefix: 'j-',
+      preflight: 'on-demand'
     })
   ],
+  transformers: [
+    transformerVariantGroup()
+  ],
   theme: {
     colors: {
       background: 'rgb(var(--j-color-background))'