Add: get avatar from file

pkg/api/api.go

@@ -59,6 +59,7 @@ func NewAPI(config commonconfig.Config) (*API, error) {
 	apiMux.HandleFunc("/get_file_info", api.HandleGetFileInfo)
 	apiMux.HandleFunc("/get_file_ffprobe_info", api.HandleGetFileFfprobeInfo)
 	apiMux.HandleFunc("/get_file_stream_direct", api.HandleGetFileStreamDirect)
+	apiMux.HandleFunc("/get_file_avatar", api.HandelGetFileAvatar)
 	apiMux.HandleFunc("/prepare_file_stream_direct", api.HandlePrepareFileStreamDirect)
 	apiMux.HandleFunc("/delete_file", api.HandleDeleteFile)
 	apiMux.HandleFunc("/update_filename", api.HandleUpdateFilename)

pkg/api/handle_avatar.go

@@ -0,0 +1,46 @@
+package api
+
+import (
+	"errors"
+	"log"
+	"net/http"
+	"os/exec"
+	"strconv"
+)
+
+func (api *API) HandelGetFileAvatar(w http.ResponseWriter, r *http.Request) {
+	var err error
+	q := r.URL.Query()
+	ids := q["id"]
+	if len(ids) == 0 {
+		err = errors.New(`parameter "id" can't be empty`)
+		api.HandleError(w, r, err)
+		return
+	}
+	id, err := strconv.Atoi(ids[0])
+	if err != nil {
+		api.HandleError(w, r, err)
+		return
+	}
+	file, err := api.Db.GetFile(int64(id))
+	if err != nil {
+		api.HandleError(w, r, err)
+		return
+	}
+	path, err := file.Path()
+	if err != nil {
+		api.HandleError(w, r, err)
+		return
+	}
+	log.Println("[api] Get avatar of file", path)
+	cmd := exec.Command("ffmpeg", "-i", path, "-c:v", "libwebp_anim", "-update", "1", "-f", "image2pipe", "-")
+	cmd.Stdout = w
+	w.Header().Set("Content-Type", "image/webp")
+
+	err = cmd.Run()
+	if err != nil {
+		w.Header().Set("Content-Type", "application/json")
+		api.HandleError(w, r, err)
+		return
+	}
+}

web/src/App.css

@@ -3,7 +3,8 @@ html {
 }
 body {
   margin: auto;
-  margin-top: 1rem;
+  padding-top: 1rem;
+  background-color: var(--background, 33);
 }
 .base {
   display: grid;

web/src/App.js

@@ -27,6 +27,27 @@ function App() {
   const [user, setUser] = useState({});
   const [langCode, setLangCode] = useState("en_US");
 
+  useEffect(() => {
+    if (playingFile.id === undefined) {
+      return;
+    }
+    const html = document.getElementsByTagName("html")[0];
+    const retStyle = html.style;
+    const bodyRetStyle = document.body.style
+    html.style = `
+      backdrop-filter: blur(10px);
+      background-size: cover;
+      background-attachment: fixed;
+      background-position: center;
+      background-image: url("/api/v1/get_file_avatar?id=${playingFile.id}");
+    `;
+    document.body.style.opacity = 0.88;
+    return () => {
+      html.style = retStyle;
+      document.body.style = bodyRetStyle;
+    };
+  }, [playingFile.id]);
+
   // select language
   useEffect(() => {
     const browserCode = window.navigator.language;
@@ -40,7 +61,7 @@ function App() {
       }
     }
     // fallback to english
-    setLangCode('en-US');
+    setLangCode("en-US");
   }, []);
 
   return (