Merge branch 'main' of https://github.com/chris-kruining/streamarr

src/components/details/details.module.css

@@ -14,8 +14,11 @@
     position: absolute;
     inset: 0;
     display: block;
-    background: linear-gradient(182.5deg, transparent 20%, var(--surface-2) 90%),
+    background: linear-gradient(
-      linear-gradient(transparent 50%, #0007 75%);
+      calc(atan(var(--ratio))),
+      var(--surface-2) 20em,
+      transparent 90%
+    );
   }
 
   & > .background {
@@ -28,4 +31,3 @@
     z-index: 0;
   }
 }
-

src/components/details/details.tsx

@@ -1,15 +1,34 @@
-import { Component } from 'solid-js';
+import { Component, createSignal, onCleanup, onMount } from "solid-js";
-import { Entry } from '~/features/content';
+import { Entry } from "~/features/content";
-import css from './details.module.css';
+import css from "./details.module.css";
 
 interface DetailsProps {
-    entry: Entry
+  entry: Entry;
 }
 
 export const Details: Component<DetailsProps> = (props) => {
+  const [header, setHeader] = createSignal<HTMLElement>();
+
+  onMount(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      const _20em = 20 * 16;
+      const { inlineSize, blockSize } = entry.contentBoxSize[0];
+      console.log(blockSize / inlineSize);
+
+      (entry.target as HTMLElement).style.setProperty(
+        "--ratio",
+        String(_20em / inlineSize),
+      );
+    });
+
+    observer.observe(header()!);
+
+    onCleanup(() => observer.disconnect());
+  });
+
   return (
     <div class={css.container}>
-            <header class={css.header}>
+      <header ref={setHeader} class={css.header}>
         <img class={css.background} src={props.entry.image} />
 
         <h1>{props.entry.title}</h1>

src/features/content/apis/jellyfin.ts

@@ -24,7 +24,6 @@ const getBaseUrl = () => {
   return process.env.JELLYFIN_BASE_URL;
 };
 
-
 const getClient = () => {
   "use server";
 
@@ -34,7 +33,7 @@ const getClient = () => {
       Authorization: `MediaBrowser DeviceId="Streamarr", Token="${process.env.JELLYFIN_API_KEY}"`,
       "Content-Type": 'application/json; profile="CamelCase"',
     },
-  })
+  });
 };
 
 export const getCurrentUser = query(async () => {