Frontend: add dynamic color from user avatar.

Backend: add image proxy

TODO.md

@@ -20,3 +20,7 @@
 - [ ] Избранное
 - [ ] История
 - [ ] ...
+
+## интерфейс
+
+- [X] Динамический цвет от аватарки

backend/main.py

@@ -1,5 +1,6 @@
 import uvicorn
 from fastapi import FastAPI
+from modules import proxy
 from modules.pages import favorites
 from modules.pages import index
 from modules.pages import search
@@ -48,5 +49,7 @@ app.include_router(index.router, prefix="/api/index", tags=["Index"])
 app.include_router(favorites.router, prefix="/api/favorites", tags=["Favorites"])
 app.include_router(search.router, prefix="/api/search", tags=["Search"])
 
+app.include_router(proxy.router, prefix="/api/proxy")
+
 if __name__ == "__main__":
     uvicorn.run("main:app", host="0.0.0.0", port=8000)

backend/modules/proxy.py

@@ -2,7 +2,9 @@ from typing import TypedDict
 from typing import Union
 
 import requests
+from fastapi import APIRouter
 from fastapi import Request
+from fastapi import Response
 
 
 class Endpoints(TypedDict):
@@ -67,3 +69,17 @@ async def apiRequest(
     if r.status_code != 200:
         return {"error": r.text}
     return r.json()
+
+
+router = APIRouter()
+
+
+@router.get(
+    "/image",
+    responses={200: {"content": {"image/jpg": {}, "image/png": {}}}},
+    response_class=Response,
+)
+async def imageProxy(url: str):
+    type = url.split(".")[-1]
+    response: bytes = requests.get(url).content
+    return Response(content=response, media_type=f"image/{type}")

frontend/app/components/ColorPicker/ColorPicker.jsx

@@ -2,8 +2,10 @@
 
 import { useState } from "react";
 import Styles from "./ColorPicker.module.css";
+import { useUserStore } from "@/app/store/user-store";
 
 export const ColorPicker = (props) => {
+  const userStore = useUserStore();
   const colors = [
     { hex: "#ffffff", color: "white" },
     { hex: "#e91e63", color: "pink" },
@@ -35,6 +37,21 @@ export const ColorPicker = (props) => {
             ></button>
           );
         })}
+        {userStore.user ? (
+          <button
+            className={`circle border small s2`}
+            onClick={() => {
+              props.theme(
+                `/api/proxy/image?url=${userStore.user.profile.avatar}`,
+              );
+            }}
+          >
+            {/* eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element */}
+            <img src={userStore.user.profile.avatar} alt="" />
+          </button>
+        ) : (
+          ""
+        )}
       </div>
       <div className="medium-divider"></div>
       <nav>

frontend/app/components/NavigationRail/NavigationRail.jsx

@@ -76,7 +76,7 @@ export const NavigationRail = (props) => {
       })}
 
       <span className="max"></span>
-      <button className="circle transparent" onClick={""}>
+      <button className="circle transparent">
         <i>settings</i>
       </button>
 

frontend/app/components/ReleaseCard/ReleaseCard.jsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import Image from "next/image";
+import Image from "next/legacy/image";
 
 export const ReleaseCard = (props) => {
   return (
@@ -16,8 +16,7 @@ export const ReleaseCard = (props) => {
           <Image
             className="responsive large top-round"
             layout="fill"
-            objectFit="cover"
+            style={{ aspectRatio: "1/1" }}
-            style={{ width: "100%", height: "100%", aspectRatio: "1/1" }}
             src={props.poster}
             alt=""
             sizes={"100vw"}

frontend/app/components/UserProfile/UserProfile.jsx

@@ -99,13 +99,13 @@ export const UserProfile = (props) => {
               <div>
                 <p className="small">
                   Просмотрено серий:{" "}
-                  <span class="bold">
+                  <span className="bold">
                     {props.profile.watched_episode_count}
                   </span>
                 </p>
                 <p className="small">
                   Время просмотра:{" "}
-                  <span class="bold">
+                  <span className="bold">
                     {convertMinutes(props.profile.watched_time)}
                   </span>
                 </p>