Frontend: add dynamic color from user avatar.

Backend: add image proxy

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={{ width: "100%", height: "100%", aspectRatio: "1/1" }}
+            style={{ 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>